CSS盒子模型面试

CSS盒子模型
关于盒子模型，我们一般会说有5大属性：width/height/padding/margin/border当然还有content和标准模式/IE模式

问题来了~~~~~~
1.会不会问到标准模型和IE模型的区别呢？
当然是一定会问到，就是计算高度和宽度不同，接着问题来了-----怎样个不同计算法？？？
要看图哦！！！
标准模型也就是此处虚线画的content部分，IE模型则是包含了外边的border和padding，也就是说如果同样设置200px，那么对于IE模型来说就包含border和padding，如果padding是10px，那么所对应的content就是180px。高的话也是同样的道理
2.css怎样设置这两种模型的？？
利用CSS3的属性：
标准模型：box-sizing:content-box(也是浏览器默认的模型)
IE模型：box-sizing:border-box
3.边距重叠当然也会问到？？？？（塌陷问题）
也就是父子元素塌陷/并列元素塌陷问题，针对的是垂直方向，如果说有父子两个div，父亲没有设定padding或者内容时，给儿子加一个margin的话会叠加到父亲的身上，造成父亲产生位移的效果，这就是父子塌陷问题。
兄弟div，div1的下边margin与div2 上边的margin两者并不会叠加显示，而是会取最大的一个margin显示，这就是并列元素塌陷。
解决父子塌陷问题：
转换方法：把子元素的margin转化为父元素的padding值，但是需要注意的是，增加父元素多少padding就要减少其对等的height值，保证其高度不变（真实的高度）。
BFC：给父级元素添加属性overflow：hidden，触发BFC（块级格式上下文）
解决并列元素塌陷问题：
设置其中一个就可以了