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="https://blog.163.com/qyl_anikin/blog/images/details/des_big.jpg">
</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>