CSS 的盒模型

我不是女神ヾ 2024-05-06 21:23 62阅读 0赞

![previewfile\_1658340036][previewfile_1658340036]

## CSS 的盒模型 ##

在HTML里，每一个元素就相当于是一个矩形的 “盒子” ，这个盒子由以下这几个部分构成：1.边框`border`，2.内容`content`，3.内边距`padding`，4.外边距`margin`  
![在这里插入图片描述][a529bd7104964a3db31e6d38e60b75d1.png_pic_center]

![image-20240225151115558][]

### 边框border ###

<table> 
 <thead> 
  <tr> 
   <th align="center">基础属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><code>border-width</code></td> 
   <td align="center">粗细</td> 
  </tr> 
  <tr> 
   <td align="center"><code>border-style</code></td> 
   <td align="center">样式</td> 
  </tr> 
  <tr> 
   <td align="center"><code>border-color</code></td> 
   <td align="center">颜色</td> 
  </tr> 
 </tbody> 
</table>

注：`border-style`属性默认是没边框

> `border-style: solid;`=> 实线边框  
> `border-style: dashed;` => 虚线边框  
> `border-style: dotted;` => 点线边框

**示例代码**  
![image-20240225152614075][]

**运行效果**

![image-20240225153159224][]

**发现的现象:** 边框会撑大盒子

![image-20240225153128358][]

![image-20240225153436481][]

可以看到 width, height 是 200\*100, 而最终整个盒子大小是 220 \* 120.  
**原因:** 上边距的边框是10个像素，下边距的边框也是10个像素，高度`height`为100+10+10，变成120像素，宽度也是同理。

**如何解决这个现象**

> 通过 `box-sizing` 属性可以修改浏览器的行为, 使边框不再撑大盒子

![image-20240225154405613][]

**结果：**  
![image-20240225154625005][]

![image-20240225154711449][]

**border属性的简写写法**  
示例：

border-color: black;
    border-style: solid;
    border-width: 10px;

等效于(对于3个属性值没有顺序要求)

border: black solid 10px;

### 内边距padding ###

`padding`设置内容和边框之间的距离，默认内容是顶着边框来放置的  
控制四个方向上边距的属性分别为：`padding-top`，`padding-bottom`， `padding-left`，`padding-right`

**实现效果:** 内容左边和上方留有一部分区域  
![image-20240225171852389][]

**示例代码**  
![image-20240225172339320][]

**运行效果**  
![image-20240225172442211][]

**简写写法**

> 可以把多个方向的 padding 合并到一起

*  第一种：`padding: 5px;` 表示四个方向都是 5px
 *  第二种：`padding: 5px 10px;`表示上下内边距 5px, 左右内边距为 10px
 *  第三种：`padding: 5px 10px 20px;`表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
 *  第四种：`padding: 5px 10px 20px 30px;`表示上5px, 右10px, 下20px, 左30px(顺时针)

示例

padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;

等效于

padding: 10px;

### 外边距margin ###

margin控制盒子和盒子之间的距离，默认距离0  
控制四个方向上边距的属性分别为：`margin-top`，`margin-bottom`， `margin-left`，`margin-right`

**示例代码**  
![image-20240225180504122][]

**运行结果**  
![image-20240225180618258][]

**简写写法**  
规则和`padding`一样

margin: 10px; // 四个方向都设置
    margin: 10px 20px; // 上下为 10, 左右 20
    margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
    margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

[previewfile_1658340036]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d9aa1a506f5f409e959087deb5778d5e.jpeg
[a529bd7104964a3db31e6d38e60b75d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/13532dcf62554cd1aaa046c2c9154798.png
[image-20240225151115558]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/35228911c84f46049dfec4472419c338.png
[image-20240225152614075]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ef5065683b60411a8f614eebaf1c82a9.png
[image-20240225153159224]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/649a5e85c4c645a6b52d4cec62ae003e.png
[image-20240225153128358]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/bf485018b36b42908ed16b11e36fbcf6.png
[image-20240225153436481]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1c1d5c6340b34593afd89a99275958ed.png
[image-20240225154405613]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/40449164442b4d82b4fb3fd42105ac98.png
[image-20240225154625005]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f96d0e9da75a4b6a9de6046450845f26.png
[image-20240225154711449]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/112d5b6378da4d0abaf89cd7af84e062.png
[image-20240225171852389]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5c8cca8a96d74e3c93180f3139d97823.png
[image-20240225172339320]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/2655f1fc26634983bff4fe0ed609404d.png
[image-20240225172442211]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c01ce34b0bd84f25bd0a7fd76cce5165.png
[image-20240225180504122]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c48d3e1ba99c4d65b44bd5c8604e1f04.png
[image-20240225180618258]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c59def928371438e845aa12063105478.png