CSS-盒子模型，标准盒子模型，IE 盒子模型，盒模型之间的转换

分手后的思念是犯贱 2023-06-01 11:13 188阅读 0赞

我们可以把每一个HTML标记，都看成是一个"盒子"；这个"盒子"的特征包含：内容的宽度（width）或高度（height）、边框线（padding）、内填充（padding）、外边距（margin）。

CSS 中 width 指的是内容的宽度，而不是盒子的宽度；同样 height 指的是内容的高度，而不是盒子的高度

#### 盒模型组成 ####

盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成

*  盒子里面的文字、图片等元素就是内容区域
 *  盒子的厚度就是盒子的边框
 *  盒子内容与边框的距离就是内边距（类似于单元格的 cellpadding 属性)
 *  盒子与盒子之间的距离就是外边距（类似于单元格的 cellspacing 属性）

#### 盒模型分类 ####

盒模型分为两种，一种是标准盒模型另一种是怪异盒模型（IE 盒模型）

##### 标准盒模型 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]  
标准盒子模型中内容的宽高就是盒子的 `width`、`height` 属性值；如果给盒子设置了 padding、border、margin 盒子实际占有的宽高会发生变化

盒子实际占有宽度为： 内容宽度 + 左padding + 右padding + 左border + 右border + 左margin + 右 margin

实际占有高度的计算与上述实际宽度的计算方式类似

#### IE盒子模型 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]  
在 IE 盒子模型中 `width` 和 `height` 是盒子的 内容 + padding + border 三者之和；设置盒子的 pading 或 border 后盒子的宽高并不会发生变化，会去修改内容的宽高来保持盒子的宽高不变

盒子实际占有宽度为：width + 左margin + 右margin

#### 盒子模型的相互转换 ####

元素可以通过 CSS 中的 `box-sizing` 样式属性可用来转换盒子模型

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>content-box</td> 
   <td>标准盒子模型</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>IE盒子模型</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230601/7940e44581d74b81b6e36c598edfdcbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/8cac727458e94669ad373623bfa0859d.png