关于前端:前端面试CSS系列盒模型

盒子

当对一个文档进行布局的时候，浏览器渲染引擎会依据规范，将页面中的所有元素示意为一个一个矩形的盒子。CSS 决定这些盒子的大小、地位以及属性。每个盒子有四个局部组成，别离是：content，padding，border，margin。

属性解释：

1. content内容区域，内容区域能够定义 width 和height
2. padding内容区域和边框之间的空间量
3. border内容区域和内边距四周边框的粗细和款式。
4. margin边框和元素外边缘的空间量

块级盒子和内联盒子

在 CSS 中咱们宽泛的应用两种『盒子』——块级盒子和内联盒子。两种盒子在页面布局中有以下特点：

块级盒子

• 盒子会换行显示
• width和 height 属性能够发挥作用
• 内边距 padding 外边距 margin 边框 border 会将其余元素从以后盒子四周推开
• 默认状况下盒子宽度会跟父容器一样宽

内联盒子

• 盒子不会换行
• width和 height 属性不起作用
• 垂直方向的内边距、外边距以及边框会被利用，然而不会把其它处于 inline 状态的盒子推开。
• 程度方向的内边距、外边距以及边框会被利用，并且会把其它处于 inline 状态的盒子推开。

咱们通过对盒子 display 属性的设置，来管制盒子的内部显示类型。

盒模型类型

残缺的 CSS 盒模型利用于 块级盒子，内联盒子只应用盒模型中定义的局部内容。盒模型有两种类型，规范盒模型和 IE 盒模型。

规范盒模型

在规范盒模型中，如果给盒子设置 width 和height，理论设置的是 content 内容区域的宽和高。内边距 padding 和边框 border 加上设置的宽高一起决定了盒子的大小。

IE 盒模型

在 IE 盒模型中，如果给盒子设置 width 和height，那么盒子的大小就是设置的宽高值，如果盒子设置了内边距 padding 和边框border，那么内容的大小实际上是盒子的大小减去内边距和边框的大小之后的值。

差别比拟

假如咱们定义了如下一个盒子

.box {
    width:100px;
    height:100px;
    margin:25px;
    padding:20px;
    border:15px solid #000;
}

规范盒模型盒子图示：

盒子的宽度 =width + padding-left + padding-right + border-left + border-right(100+20+20+15+15 = 170)

内容的宽度 = width(100)

IE 盒模型图示：

盒子的宽度 =width(100)

内容的宽度 = width – padding-left – padding-right – border-left – border-right(100-20-20-15-15 = 30)

在规范盒模型当中，咱们应用 CSS 定义盒子的宽度 width 和高度 height 并不是盒子所占据空间大小。

在 IE 盒模型当中应用 CSS 定义盒子的宽度 width 和高度 height 就是盒子的大小。

盒模型切换

在古代浏览器当中，简直所有的浏览器，默认的盒模型都是 规范盒模型 。如果想要应用IE 盒模型，能够通过设置属性box-sizing: border-box 来设置。

在晚期还是 IE 浏览器天下的时候，如果 HTML 文档缺失 DOCTYPE 文档定义标签，在 IE6、IE7、IE8 下默认应用的是 IE 盒模型。

盒模型没有好坏优劣之分，依据状况的差别咱们抉择不同的盒模型。

折叠边距(边距重叠)

折叠边距（边距重叠）不是一个 Bug；之前咱们说过 BFC，上面是 W3C 对于 BFC 的相干阐明原文：

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

翻译一下就是说：『在 BFC 当中，盒子是依照垂直方向一个叠一个排列的，垂直方向上两个盒子的间隔是由 margin 属性决定的，在 BFC 垂直方向的块级盒子之间 margin 会产生 collapse 折叠』

特点

在 W3C 对于 CSS 章节的 8.3.1 章节具体说了 Collapsing margins 边距折叠的特点，在此我简略总结一下一些（不全），具体的内容点击查看

• 边距折叠只会产生在垂直方向上，横向 margin 不会产生折叠
• 根元素框的边距不会折叠
• 如果具备间隙的元素的顶部和底部边距相邻，则其边距与后续兄弟元素的相邻边距折叠，但生成的边距不会与父块的底部边距折叠。
• 当两个或更多边距折叠时，产生的边距宽度是折叠边距宽度的最大值。在负边距的状况下，从正相邻边距的最大值中减去负相邻边距绝对值的最大值。如果没有正边距，则从零中减去相邻边距绝对值的最大值。

产生折叠的状况

• 同一层相邻元素之间，相邻元素外边距重叠
• 父元素与子元素外边距重叠
• 空的块级元素重叠

解决办法

晓得了会产生边距折叠的起因，那么解决办法天然是小菜一碟。

1. 扭转文档流，应用 float 或者 position
2. 触发元素的 BFC（创立了 BFC 的元素和它的子元素不会产生折叠）
3. 只有块级盒子才会产生折叠，批改元素盒子类型为内联盒子

面试答复

一个残缺的盒模型有四局部组成，别离是内容区域 content，内边距 padding，边框 border，以及外边距 margin；其中 margin 不参加计算盒子的大小；盒模型有两种类型，IE 盒模型和规范盒模型；有时候 IE 盒模型也被成为怪异盒模型；在古代浏览器当中默认是盒子模型，咱们能够通过 CSS 的 box-sizing:border-box; 来批改盒模型为 IE 盒模型；在 IE 盒模型当中，盒子的宽度是咱们定义的 width 值，而在规范盒模型当中盒子的宽度是内容的 width 值加上左右内边距加上左右边框的值。

扩大浏览

详解 CSS 的盒模型(box model) 及 CSS3 新增盒模型计算形式 box-sizing

Collapsing margins

BFC

前端面试系列其它文章

前端面试 CSS 系列——BFC
前端面试 CSS 系列——DIV 垂直程度居中
前端面试 CSS 系列——挪动端 1PX 像素问题