实现CSS等分布局的4种方式
等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式
思路一:float
缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差
【1】float+padding+background-clip
使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景
复制代码
复制代码
复制代码
1
2
3
4
复制代码
【2】float+margin+calc
使用margin实现子元素之间的间距，使用calc()函数计算子元素的宽度
复制代码
复制代码
复制代码
1
2
3
4
复制代码
【3】float+margin+(fix)
使用margin实现子元素之间的间距，通过增加结构来实现兼容
复制代码
复制代码
复制代码
1
2
3
4
复制代码
思路二:inline-block
缺点：需要设置垂直对齐方式vertical-align，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;
【1】inline-block+padding+background-clip
复制代码
复制代码
复制代码
1
2
3
4
复制代码
【2】inline-block+margin+calc
复制代码
复制代码
复制代码
1
2
3
4
复制代码
【3】inline-block+margin+(fix)
复制代码
复制代码
复制代码
1
2
3
4
复制代码
思路三:table
缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为结构。table-cell元素无法设置margin，设置padding及background-clip也不可行
【1】table+margin负值
复制代码
复制代码
复制代码
1
2
3
4
复制代码
【2】table+兄弟选择器
复制代码
复制代码
复制代码
1
2
3
4
复制代码
思路四:flex
复制代码
复制代码
复制代码
1
2
3
4
|
