---

````````

盒模型有 2 种：<font style="color:#F5222D;">标准盒模型</font>和<font style="color:#F5222D;"> IE 盒模型</font>

如果给某个元素设置如下样式：

.box {    
  width: 200px;  
  height: 200px;    
  padding: 10px; 
  border: 1px solid #eee;  
  margin: 10px; 
}

尺寸计算

---

标准盒模型认为：盒子的实际尺寸 = 内容（设置的宽/高） + 内边距 + 边框

所以 .box 元素内容的宽度就为 200px，而实际的宽度则是 width + padding-left + padding-right + border-left-width + border-right-width = 200 + 10 + 10 + 1 + 1 = 222。

box-sizing

---

<font style="color:#F5222D;background-color:rgb(253, 252, 248);">box-sizing</font>

<font style="color:#F5222D;background-color:rgb(253, 252, 248);">box-sizing</font>可以设置以下属性：

div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}

盒子布局方式

---

盒子布局方式可以按**外部显示类型**和**内部显示类型**来划分。

外部显示类型

，分为：

• 块级盒子 <div>、<p>、<h>、<ul>
• 行内盒子 <span>、<a>

注意：

行内盒子无法手动设置宽高，且其****。

内部显示类型

内部显示类型是控制该盒子内部元素之间的布局方式：

• flex布局
• grid布局