前端 css 经典：盒模型

1. 标准盒模型

内容 width = css 属性 width 的大小。

盒子 width = 内容width + 2 * padding + 2 * border 。

可以通过 box-sizing: content-box; 设置为标准盒模型。

举例如下：

/* W3C盒模型：内容width = 100px */
/* 盒子宽度为：100 + 2*20 + 2*2 = 144px */
/* 高度同理 */

div {
    width: 100px;
    height: 100px;
    margin：20px;
    padding: 20px;
    border: 2px solid;

    box-sizing: content-box;
}

2. 怪异盒模型

内容 width = css 属性 width - 2 * padding - 2 * border。

盒子 width = css 属性 width。

可以通过 box-sizing: border-box; 设置为怪异盒模型。

举例如下：

/* W3C盒模型：内容 width = 100 - 2*20 -2*2 = 56px */
/* 盒子width：100px */
/* 高度同理 */

div {
    width: 100px;
    height: 100px;
    margin：20px;
    padding: 20px;
    border: 2px solid;

    box-sizing: border-box;
}

3. BFC

块级格式化上下文

BFC如何产生–

• overflow: auto/ hidden;

• position: absolute/ fixed;

• float: left/ right;

• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

4. 父子关系

如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高

5. 同级元素

在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个