【CSS笔记】CSS盒子模型（标准盒子模型、怪异盒子模型）
盒装模型由四个部分组成：内容区域、padding填充区域、border边框区域和margin边距区域。标准盒子模型下（默认），设置的宽度和高度仅影响内容区域的大小；而其他属性会向外扩展宽度和高度。通过案例可以看出，在标准盒子模型中添加边框、填充等属性时不会改变内容区域的宽度和高度。
在怪异盒子模型下（通过box-sizing: border-box;设置），设置的边框、填充属性会将内容区域压缩以实现外扩效果。这种模式下宽度计算公式为width = 内容宽度 + 左右边距宽度，高度计算公式为height = 内容高度 + 上下边距高度。
box-sizing属性是CSS提供的核心工具之一，在标准盒子模型中默认为content-box类型，在怪异盒子模型中则使用border-box类型以实现不同的外扩效果。
目录
一、盒子模型
1.1、标准盒子模型
1.2、怪异盒子模型
（1）box-sizing属性
一、盒子模型
1.1、标准盒子模型
该网页浏览器主要利用 boxes 模型来进行页面布局排版，在设计过程中采用这种方法能够有效实现元素间的相对定位关系与空间分布安排。其中完整的一套 boxes 模型主要由以下几个关键组成部分构成：
此盒子模型包含四个组成部分：内域、填充域、边界框域以及间距域。其宽度与高度的计算公式如下；
盒子模型的宽度由内容宽度、左右填充的padding厚度、左右边框的border大小以及左右边距的margin总和决定。
盒子模型的高度则由内容高度、上下填充的padding尺寸、上下边框的border长度以及上下边距的margin之和构成。
内容区域
下面通过案例来看下标准盒子模型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标准盒子模型</title>
<style>
body > div {
width: 600px;
height: 600px;
background-color: antiquewhite;
overflow: auto;
}
.box {
width: 200px;
height: 200px;
background-color: cadetblue;
margin: 50px;
padding: 20px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div>
<div class="box">
盒子模型
</div>
</div>
</body>
</html>案例效果如下所示：
标准盒子模型的特点在于：当我们将内容区域的宽度和高度设为固定值后，在对盒子进行边框、填充效果以及边距属性的设置时，在不改变内容区域宽度和高度的前提下（即保持原有尺寸），这些属性将被应用到四周外部空间上（即向外延伸）。
1.2、怪异盒子模型
遵循标准盒子模型的规范，在对元素设置边框、填充等属性时，则会向外延伸相应的宽度与高度。若未在外延方向上扩展宽度与高度，则可将其归类为非矩形边界容器模式。
在该怪异盒子模型中，在指定内容区域宽度和高度的情况下施加边框与填充属性时，其整体尺寸保持不变，并将内容区域缩减空间。
怪异盒子模型宽度计算公式：width = 内容区域宽度 + 左右边距宽度。
怪异盒子模型高度计算公式：height = 内容区域高度 + 上下边距高度。
怪异盒子模型，设置的边框、填充属性，是将内容区域压缩实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>怪异盒子模型</title>
<style>
body > div {
width: 600px;
height: 600px;
background-color: antiquewhite;
overflow: auto;
}
.box {
width: 200px;
height: 200px;
background-color: cadetblue;
margin: 50px;
border: 10px solid blue;
padding: 20px;
/* 设置为怪异盒子模型 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<div class="box">
怪异盒子模型
</div>
</div>
</body>
</html>案例效果如下所示：
（1）box-sizing属性
CSS中的box-sizing属性主要用于定义盒子模型的类型，并提供两种选择：content-box和border-box。
- content-box代表了默认和标准的盒子模型设计；
- border-box则专为实现奇形怪状的盒子样式而设计。