CSS盒模型

CSS盒模型.jpg

组成

如上图所示，CSS盒模型由4部分组成：

• margin（外边距）
• border（边框）
• padding（内边距）
• content（内容）

分类

CSS盒模型分为标准盒模型和IE盒模型，上图所示就是标准盒模型。

标准盒模型和IE盒模型的差别就是对宽度和高度的计算方式不一样：

• 在标准盒模型中：宽度和高度指content的高度和宽度
• 在IE盒模型中：宽度和高度值content+padding+border的和

设置标准盒模型和IE盒模型：

• box-sizing： content-box；（标准盒模型（默认））
• box-sizing： border-box；（IE盒模型）

通过JS获取盒模型的宽度和高度

• dom.style.width/height
• dom.getBoundingClientRect().width/height

BFC（块级格式化上下文）

原理

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如 此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

创建BFC

满足下列条件之一就可触发BFC：

• 根元素，即HTML元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

使用场景

消除垂直 margin 重叠

应用原理： BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

    
    

        
Haha
        

            
Hehe
        
        
Haha
    

自适应两栏布局

应用原理： BFC的区域不会与float box重叠

清除浮动

应用原理： 计算BFC的高度时，浮动元素也参与计算

    
    

        
Hello World!