css高级布局知识点汇总

最新推荐文章于 2022-03-22 15:15:52 发布

眷恋天空的驴-Anikinly

最新推荐文章于 2022-03-22 15:15:52 发布

阅读量512

点赞数

CC 4.0 BY-SA版权

分类专栏： Css

本文链接：https://blog.youkuaiyun.com/baidu_33033415/article/details/62882393

Css 专栏收录该内容

17 篇文章

订阅专栏

1：大小不固定的的div中图片垂直水平居中 display: table ; display:table-cell //ie8

  .container{
	width: 600px;
	height: 500px;
	margin: 50px auto;
	border: 1px solid #ccc;
	display: table; /* 作为table元素显示 */
	background-color: red;
	}
	.img{
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	}
	img{
	width: 260px;
	height: 350px;
	}
<div class="container">
        <div class="img">
            <img src="http://blog.163.com/qyl_anikin/blog/images/details/des_big.jpg">
        </div>
    </div>

实现原理：中间嵌套一个div块居中
2：左右浮动，不使用float布局，兼容ie8

 * {
    box-sizing: border-box;
}
.content {
    display: table;
    border: 1px solid #06c;
    padding: 15px 5px;
    max-width: 1000px;
    margin: 10px auto;
    min-width: 320px;
    width: 100%;
}
.box {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    text-align: center;
    display: inline-block;
    font-size: 40px;
    line-height: 100px;
}
.right {
    text-align: right;
    display: table-cell
}
.left {
    text-align: left;
    display: table-cell
}
<div class="content">
	    <div class="left">
	        <div class="box">B</div>
	    </div>
	    <div class="right">
	        <div class="box">A</div>
	    </div>
  </div>

3: 解决浮动问题的ul 中li 如何平均分配，传统的是20%的宽，但是面临的是最后一个一般都会掉下来，除了弹性盒子布局之外。ie8以上：可以在div任意随意添加个数都是平均分配

    ul{
    	width:998px;
    	border:1px solid #000;
    	height: 150px;
    	clear:both;
    	margin-left:50px;
    	overflow: hidden;
    	display: table;
    	
    }
    ul li{
      height: 100px;
      display: table-cell;
      border:1px solid red;
      border-right:none;
    }
<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>4</li>
		<li>5</li>
	</ul>

4: 两box实现等高对齐
      如果只设置一个为table-cell ：则一个的宽度变化，另一个也变化，实现等高对齐
      如果两个都设置table-cell    则实现高度，宽度变化实现均自动对齐

.wrap{
        margin:50px auto;
        width:600px;
        height: 100px;
        text-align: center;
        display: table;
      }
      .left{
        display: table-cell;
        width:100px;
        height: 100px;
        vertical-align: middle;
        background-color: #ccc;
      }
      .right{
        width:400px;
        padding:10px;

      }
<div class="wrap">
        <div class="left">1</div>
        <div class="right">
            <span>王尼玛和陈尼玛都是年轻的生活在了一起。。。。天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。</span>
        </div>
    </div>	
</div>

参考原文：http://www.520ued.com/article/table-cell

说明：这个属性是ie8以上的，如果需要精细全兼容，则可以使用js来布局。还有display:inline-table

2：常见的一些特殊样式-不兼容但是在移动端适用
/*web-apps*/中一些常见的写法来使得移动端更加接近原生的app。

   -ms-touch-action: manipulation; /* 滚动屏幕的时候并不会触发这个元素的事件/*web-apps*/
   -webkit-user-select: none; /* 禁止粘贴复制，本身没有什么意义 /*web-apps*/
   -webkit-overflow-scrolling: touch; /*--快速滚动跟回弹的效果类似原声app的效果，常在html--*/
   -webkit-backface-visibility: hidden; /*----隐藏被旋转的元素的背部不出来----*//*web-apps*/
   -webkit-appearance:none/button/ 是用来改变按钮和其他控件的外观，使其外观类似于原生控件

-webkit-touch-callout:none; 在ios上长时间按着一个文字会调出系统自带的菜单 /*web-apps*/

-webkit-tap-highlight-color：rgba() : 击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色

-webkit-text-size-adjust: none | auto | <percentage>: 用于移动端中浏览器的页面文本大小调整 /*web-apps*/

-webkit-transform: translateZ(0); 在没有开启3d模式的情况下，欺骗浏览器开启硬件的gpu加速功能。/*web-apps*/