一、盒模型的基本组成
由里向外依次为content、padding、border、margin,如下图所示:
二、两种模型(标准模型与IE模型)
1.标准模型:宽高取决于content,通过box-sizing:content-box设置;
2.IE模型:宽高取决于content+padding+border总宽高,通过box-sizing:border-box设置。
(最常用且浏览器兼容性最好的获取盒模型宽高的方法:dom.offsetWidth、dom.offsetHeight)
三、BFC (Block Formatting Context,块级格式化上下文)
1.创建BFC
a.将元素脱离文档流:浮动(float不为none)、绝对/固定定位(position为absolute或fixed);
b.将元素变成可设置高度的行内元素:display为inline-block/table-cell/table-caption/inline-flex等;
c.将内容封闭:overflow不为visible;
d.根元素或者包含根元素的元素。
2.应用BFC
a.自适应两栏布局(左侧float浮动,右侧使用BFC);
b.清楚内部浮动;
c.防止垂直margin重叠(解决边距重叠问题)。