布局技巧

CSS 多列等高如何实现？

1. 利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。父容器设置超出隐藏（overflow: hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则 父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

2. 利用table-cell所有单元格高度都相等的特性，来实现多列等高。

3. 利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度 的特性，来实现多列等高。

width:auto 和 width:100%的区别？

• width:100%会使元素box的宽度等于父元素的contentbox的宽度。

• width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。