css总结三(盒子模型)

红太狼 2023-01-03 04:24 130阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.盒子模型
 *   *  1.1盒子模型（Box Model）
     *  1.2盒子边框（border）
 *  2.内边距（padding）
 *   *  2.1内边距产生的问题
 *  3. 外边距（margin）
 *   *  3.1块级盒子水平居中
     *  3.2文字居中和盒子居中区别
     *  3.3插入图片和背景图片区别
     *  3.4 清除元素的默认内外边距(重要)
     *  3.5外边距合并(重要)
 *  4.盒子模型布局稳定性
 *  5.总结

--------------------

# 1.盒子模型 #

## 1.1盒子模型（Box Model） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

*  盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
 *  盒子里面的文字和图片等元素是 内容区域
 *  盒子的厚度 我们成为 盒子的边框
 *  盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
 *  盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]

## 1.2盒子边框（border） ##

border : border-width || border-style || border-color

![在这里插入图片描述][20210107125954709.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]

# 2.内边距（padding） #

padding属性用于设置内边距。 **是指 边框与内容之间的距离。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]  
当我们给盒子指定padding值之后， 发生了2件事情：  
**1. 内容和边框 有了距离，添加了内边距。  
2. 盒子会变大了。**

简写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]

## 2.1内边距产生的问题 ##

会撑大原来的盒子  
通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小  
**如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。**

# 3. 外边距（margin） #

margin属性用于设置外边距。  margin就是控制盒子和盒子之间的距离

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]

## 3.1块级盒子水平居中 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]

## 3.2文字居中和盒子居中区别 ##

![在这里插入图片描述][202101071309516.png]

## 3.3插入图片和背景图片区别 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]

## 3.4 清除元素的默认内外边距(重要) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]

## 3.5外边距合并(重要) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 11]

# 4.盒子模型布局稳定性 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 12]

# 5.总结 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 13]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221119/1264ced39c574fa5bbe5028dd4a68d8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221119/b8da8bfafe1a450cb9d1cd749e2ac3e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]: /images/20221119/6d8bff4aff4446309c1a42c4485fc276.png
[20210107125954709.png]: /images/20221119/4f0d8afd74a0480a827b721da0c60f39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]: /images/20221119/f45560b5d2e24bb795b920e617588fff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]: /images/20221119/3bd634b61edd433095cbc3af1131f9f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]: /images/20221119/87d3d15ca7f4401b93a356b97f2645c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]: /images/20221119/0d1da954d66e47cc88cc269c2977e9bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]: /images/20221119/33a813ac6adc49b0bc0c494a80936d43.png
[202101071309516.png]: /images/20221119/6b3521bd0ea24a7ea5f24f8b1ea9e913.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]: /images/20221119/d8cccdc4fd6a406383092b2b72e5f728.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]: /images/20221119/9c14efbc9f3b4d09be7a627f8dd74c04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 10]: /images/20221119/9445a7b7ebcb47d286135d8e529e4625.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 11]: /images/20221119/5e9d056c555844e6bb1fc0d9e4d90307.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 12]: /images/20221119/0a129054cf1f4d2dbcc64e3f643af4dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 13]: /images/20221119/073cc94d01f147ad8bce560fe593cb17.png