【39】CSS3 （2）——盒模型
★文章内容学习来源：拉勾教育大前端就业集训营
- 关于css中的盒模型，之前我们有讲解过：
【19】CSS基础（4）——常用样式（文字/盒模型）
【22】CSS核心样式（3）——盒模型5种属性
【23】CSS核心样式（4）——盒模型的5种应用①（3/5）
【24】CSS核心样式（4）——盒模型的5种应用②（5/5） - 而本篇将要讲解CSS3中新增的盒模型属性：box-sizing，以下是本篇目录：
一、CSS3 盒模型属性介绍
| 盒模型属性 | 具体含义 |
|---|---|
| 属性名 | box-sizing |
| 作用 | 指定盒模型（设置如何计算一个元素的总宽度和总高度） |
| 属性值 | 具体含义 |
|---|---|
content-box | 默认值，标准盒子模型，盒模型是外扩的。 width 与 height 只包括内容的宽和高。（在 width 和 height 之外绘制元素的内边距和边框。） |
border-box | 怪异模式，盒模型是内减的。 width 和 height 属性包括内容，内边距和边框，但不包括外边距。 (为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制。) |
二、content-box 标准模式
1.介绍
- Standard 模式：标准模式中；
- 盒子总体大小为
width(height) + padding + border； - 内容区域是
width * height部分。
2.举例
div {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid #f00;
box-sizing: content-box;/*外扩。或者不设置，默认就是这样*/
}
三、border-box 怪异模式
1.介绍
- Quirks 模式：怪异模式；
- 盒子总体大小为
width *height； - 内容区域自动内减：添加了
padding和border后， 内容区域会收缩。
2. 举例
div {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid #f00;
box-sizing: border-box;/*内缩，实现盒模型自动内减*/
}
下篇继续：【40】CSS3 （3）——新增常用属性①边框圆角
阿里巴巴HR面291人在聊