前端面试题 —— 介绍下CSS盒子模型？box-sizing属性有哪些？

1. 盒模型定义及分类

CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种长方形的盒子, 包括它们各自的内边距（padding）与外边距（margin
），并根据视觉格式化模型来生成元素，对其进行布置、编排、布局。常被直译为盒子模型、盒模型或框模型。

盒模型有以下分类：

• 标准定义：
  • 标准盒模型
  • 怪异模式盒模型
• 元素类型
  • 块级盒子
  • 内联盒子
  • 行内块

2. 标准定义划分

1. 标准盒子模型

宽度width = 内容宽度(content) + padding + border + margin

内容宽度仅仅只有content。如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

2. 怪异模式盒子模型

宽度width = 内容宽度(content + padding + border) + margin

内容宽度包含了content、border、padding。如果将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

3. box-sizing属性

box-sizing属性有以下两个属性值。

1. content-box

默认值，使用标准盒子模型。

.contentBox {
    box-sizing: content-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;
}

以上代码在浏览器中的渲染的实际宽度是390px。

2. border-box

使用怪异模式盒子模型。

.borderBox {
    box-sizing: border-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;
}

以上代码在浏览器中的渲染的实际宽度就是350px。

3. 元素类型划分

1. 块级盒子

一个被定义成块级的（block）盒子会表现出以下行为：

• 盒子可以占据父容器的所有可用空间
• 每个盒子都会换行
• width和height属性可以发挥作用
• 默认情况下h1-h6、p、div、section都处于block状态

2. 内联盒子

一个被定义成内联的（inline）盒子会表现出以下行为：

• 盒子不会产生换行
• width和height属性将不起作用
• 默认情况下用做链接的a元素、span、em以及strong都处于inline状态

3. 特殊的行内块

如果不希望一个项切换到新行，但希望它可以设定宽度和高度，此时我们可以将该元素设置为inline-block。

4. 元素类型切换

	display属性值
块级盒子	block
内联盒子	inline
行内块	inline-block

4. 盒模型属性设置

1. margin和padding

• 1个值：四个方向
• 2个值：上下、左右
• 3个值：上、左右、下
• 4个值：上、右、下、左

2. border值

border: 10px double red;

10px、双实线、红色边框。