css部分知识点总结display:block；display:inline；清除浮动；css3新特性；box-sizing属性

block：块级元素

1、处于常规文档流时，如果不设置宽度，则自动填满父元素

2、可以应用margin、padding

3、不设置高度的情况，父级会自测子级高度包含子级

4、vertical-align不起作用

5、在常规文档流中布局时会独占一个水平空间

inline：

1、margin、padding在水平方向有效，在垂直方向无效

2、width、height在非替换行内元素无效，宽度由内容决定

3、非替换行内元素的行框高有line-height决定，替换行内元素则由height、margin、padding、border决定

4、vertical-align属性生效

5、浮动或绝对定位时会转换为block

浮动

在一些情况下，不需要给父级盒子设置高度，子元素设置浮动脱离文档流不占位置，这样就造成父级盒子高度为0（高度塌陷）对后面盒子的布局造成影响

清除浮动后，父级就会根据子级自检测高度，不会影响后面的标准流

清除浮动的办法

1、给浮动元素添加clearfix的class，然后给这个class添加一个after的伪元素，之后添加一个看不见的块级元素清理浮动

.clearfix:after{

content: "";

height:0;

display:block;

clear:both;

}

.clearfix{

zoom:1 //为支持ie6/7

}

2、overflow:hidden 在同一个容器内，通过形成BFC清除浮动

css3新特性

1、颜色：RGBA

2、文字阴影： text-shandow

3、盒子模型 box-sizing

4、弹性布局flex

5、圆角

6、渐变 linear-gradient 线性渐变

box-sizing属性

• content-box 默认值 设置元素的宽为100px 内容区会有100px 任何边距和内边框的宽度都会增加最后绘制出来的宽度中
• border-box 设置的边框和内边距都包含在宽度中