CSS实现等分布局的4种⽅式，css等分布局4种
思路⼀: float
缺点：结构和样式存在耦合性，IE7-浏览器下对宽度百分⽐取值存在四舍五⼊的误差
【1】float + padding + background-clip
使⽤padding来实现⼦元素之间的间距，使⽤background-clip使⼦元素padding部分不显⽰背景
float:left; + padding-right:20px; + background-clip:content-box; + box-sizing:border-box;
【2】float + margin + calc
使⽤margin实现⼦元素之间的间距，使⽤calc()函数计算⼦元素的宽度
width: calc(25% - 20px);**注意：calc使⽤时运算符两边有空格
float:left; + margin-right:20px; + width:calc(25% - 20px);
【3】float + margin + (fix)
通过在⼦元素中增加结构，为添加结构设置margin实现等分布局间距
思路⼆: inline-block
缺点：需要设置垂直对齐⽅式vertical-align，则需要处理换⾏符解析成空格的间隙问题。IE7-浏览器不⽀持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;
font-size: 0; ⽤来处理换⾏符解析成空格的间隙问题；
相当于思路⼀的float换成⼦元素中的inline-block + vertical-align:top；要在⽗元素中添加font-size: 0;
【1】inline-block + padding + background-clip
【2】inline-block + margin + calc
【3】inline-block + margin + (fix)
思路三: table
缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为<table>结构。table-cell元素⽆法设置margin，设
置padding及background-clip也不可⾏
【1】table + margin负值⼦元素内部增加结构实现间距
⽗元素width:calc(100% + 20px); display: table;  table-layout: fixed;  ⼦元素display: table-cell;
【2】table + 兄弟选择器⼦元素内部增加结构实现间距
⽗元素width: 100%; display: table;  table-layout: fixed;  ⼦元素display: table-cell;
.child + .child{
padding-left: 20px;
}
思路四: flex
display: flex;⽕狐直接⽀持w3c⽆前缀写法，⾕歌和opera⽀持-webkit- 前缀写法，⽐较适合移动端开发使⽤
<style>
body,p{margin: 0;}
.parent{
display: flex;
box sizing
}
.child{
flex:1;
height: 100px;
}
.child + .child{
margin-left: 20px;
}
</style>
<div class="parent" >
<div class="child" >1</div>
<div class="child" >2</div>
<div class="child" >3</div>
<div class="child" >4</div>                  </div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。