CSS盒模型学习笔记

一、盒模型的基本组成

         由里向外依次为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重叠（解决边距重叠问题）。