前端面试之盒子模型（标准盒模型、怪异盒模型）

1.CSS盒子模型(Box Model)

每个HTML元素都类似于一个盒子，在CSS中采用了"box model"这一术语来进行设计和布局。

CSS盒模型本质上相当于一个框，在其周围包裹着外部的HTML元素。该模型包含四个属性项：外边距项（margin）、边框项（border）、内边距项（padding）和实际内容项（content）。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

CSS盒子模型（Box model）是一种用于网页设计中的CSS技术思维模式。在网页设计中，默认情况下，默认布局下所有元素都会包含以下四个基本属性：

容量(capa)

我们可用日常生活中常见的物品作为类比来理解这些属性，并称为盒子模式

2.盒子模型能够为我们解决什么问题

盒子模型主要用于页面布局时的应用。该模型则遵循各个网页元素在设计时的排列顺序遵循从外到内的安排方式。

盒子模型主要用于页面布局时的应用。该模型则遵循各个网页元素在设计时的排列顺序遵循从外到内的安排方式。

盒子模型遵循从外部到内部：外部间距—>边界框---->内部间距---->内容元素

如前述所述的盒装模式遵循W3C规范制定，在通用多数浏览器中得到应用。然而，在IE核心浏览器引擎中存在一种非标准盒装模式。

3.W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

盒模型中的宽度与高度与我们通常理解的物体尺寸有所不同，在CSS语言中定义的宽(width)和高(height)指的是包裹内容区域的内容范围。由此可见，在盒模型中一个元素的实际宽度计算方式为：左侧边界加上左侧边框再加上左侧填充区域、内容自身占据的空间、右侧填充区域、右侧边框最后加上右侧边界。

W3C盒子模型(标准盒模型)

按照标准模式规定，在其总宽度计算中包含以下各项数值：内容宽度、左侧 paddings 和右侧 paddings；同时还包括左侧 border 和右侧 border 以及左侧 margin 和右侧 margin。

标准模式：盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin。

IE盒子模型(怪异盒模型)

在'怪异模式'下，在该块中total width = content's width + left and right margins（其中该content's width包括了padding(left/right)和border(left/right)这两个因素）。

怪异模式：盒子总宽度/高度=width/height+margin。

两种模式的转换（通过box-sizing）

在box-sizing设置中，主要采用的两个属性值为 content-box 和 border-box ，这些属性值能够调节盒子模型的解析计算模式。具体实现细节可参见上文中的示例代码。

• 当配置box-sizing属性为content-box时，遵循标准计算模式运行；该模式即为此模式。
• 当配置box-sizing属性为border-box时，遵循奇异计算模式运行。

4.盒子模型

边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

注意：

1、border-style（边框样式）常见样式有：
dashed（虚线）|dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin| medium|thick（但不是很常用），最常还是用象素（px）。

填充

元素内容与边框之间是可以设置距离的，称之为“填充”。

边界

实体间间距可以通过设置（margin）来调节。这种间距也可采用上下左右四种方向进行划分。

总结一下：
padding和margin的区别，padding在边框里，margin在边框外。

5.CSS3指定盒子模型种类

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

设置box-sizing属性为content-box后，在元素的内容框上分别应用宽度与高度。从而在外围区域绘制元素的内部边距及边框。

设置box-sizing属性为border-box。//注解说明该属性值border-box表示依据容器的高度与宽度来确定元素边界框（bounding box）。即为元素指定的所有内部间距（inner margins）以及周围的边界条纹（borders），将被包含在由指定的高度与宽度所确定的内容区域中。通过从容器的高度与宽度中分别扣除边缘间隙（margins）以及周围的边界条纹（borders），即可获得内容区域的实际尺寸。

box-sizing: inherit;// 规定应从父元素继承 box-sizing 属性的值。

通过box-sizing属性可以指定盒子模型种类。content-box定义为W3C标准盒模型（基于ISO 31100标准），而border-box在IE中被定义为怪异盒模型（Non-Standard Box Model）。

6.两种模式下如何解决样式的兼容性问题

建议避免在元素上设置特定宽度的内部间距；转而考虑在父级和子级元素上应用内部间距或外部间距。

-box为IE盒子模型（怪异盒模型）。*

6.两种模式下如何解决样式的兼容性问题

他们之间的相同点和不同点其实也很容易看得出来：

相同点：都是由margin ,border,padding,content组成

差异之处：在计算宽度与高度的方法上存在差异；在标准模式下（Standard Mode），盒子的总宽度是通过将margin、padding、border以及content这四个要素相加的方式来确定的；而在怪异模式下（Odd Mode），则是通过从content这一要素中减去padding以及border这两个要素来计算总宽度

避免给元素设置内边距这一特定样式参数。相反地，则可以通过设置父或子元素的内边距或外边距来实现类似的排版效果。