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；设置子对象长宽比