css高级布局知识点汇总

知识点汇总"/>

css高级布局知识点汇总

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=".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>

 参考原文：
 说明：这个属性是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*/