盒子

当对一个文档进行布局的时候，浏览器渲染引擎会依据规范，将页面中的所有元素示意为一个一个矩形的盒子。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像素问题