1、介绍一下标准的css盒模型？

盒模型是由四个部分组成的，分别是content、margin、padding、border，标准盒模型和IE盒模型的区别在于计算width宽度所对应范围不同，标准盒模型的width只包含了content，而IE盒模型的width包含了，content，border，padding，可以通过修改元素的box-sizing属性来改变元素的盒模型，content-box用的是标准盒模型，border-box用的是IE盒模型,默认值为content-box；

2、p标签和div标签有什么区别？

1、语义:p标签的语义是段落，而div是没有语义的，只是一个盒子；
2、默认样式:p标签有默认的样式(上下margin)，div没有

3、回流与重绘

回流：当一些元素的几何属性(布局、大小、尺寸)发生变化的时候就产生了回流；
重绘：当元素的属性(外观、颜色)发生变化就产生了重绘；
回流必将引起重绘，重回不一定一起回流；

4、display:none和visibility=hidden和opacity有什么区别？

1、占据空间：display不会，opacity和visibility会
2、触发事件：display和visibility不会触发自己身上绑定的事件，opacity会触发
3、性能上：display会引起页面的回流，visibility会引起页面重绘

5、行内元素、块级元素和行内块元素

行内元素：
1、设置宽高无效；
2、不会自动换行；
3、对margin左右方向有效，上下无效，对padding设置上下左右都有效；
块级元素：
1、可以设置宽高；
2、可以自动换行；
3、对margin和padding设置上下左右都有效；
行内块元素：
1、可以设置宽高；
2、不会自动换行；
3、对margin和padding设置上下左右都有效；

为什么img是inline还可以设置宽高

它被成为可替换元素，它的内容不是通过在标签内添加内容，而是通过某个属性来显示内容。可替换元素拥有内置宽高，性质如同行内块元素一致。典型的还有iframe、video；

6、link标签和@import有什么区别

1、link标签属于html标签，@import是css提供的；
2、link标签比@import语法兼容性好；
3、link标签会跟随页面一起加载，@import只会等到页面加载完毕后加载；
2、触发事件：display和visibility不会触发自己身上绑定的事件，opacity会触发
3、性能上：display会引起页面的回流，visibility会引起页面重绘

7、如何清除浮动？

1、在浮动元素最后创建一个空的div并且加上clear:both属性；
2、给浮动元素的容器加上overflow:hidden属性；
3、给浮动元素的容器加::after伪元素，添加clear:both属性(注意：还需添加display:block转为块级元素)
4、给浮动元素的容器也加上浮动属性，不推荐这样做会使整体浮动，影响整体布局；

8、

未完待续...

css面试题详解