css相关笔记

1 width
box-sizing:border-box;
IE8+
设置此参数后，无论是否有border宽度，margin padding ，只要设置width均自动计算。
2 浮动溢出父元素
给父元素添加 overflow:auto; zoom:1(IE6)
3 在父容器中垂直对齐方式
vertical-align:bottom;
4 图片网格布局
img{width:calc(25% - 20px);margin:10px;} (4图)
5 css3 media响应式布局
@media(max-width:800px){//小于800px布局方式}
@media(min-width:768px){//大约768px布局方式}
6 flexbox布局方式
display:flex; //关键
flex-direction:column/row //布局方向
align-items:flex-start/center/end //水平对齐父容器方向
justify-content:flex-start/center/end //垂直对齐父容器方向
flex: 1 0 0；设置子对象长宽比