【CSS005】CSS盒子模型

日期：2021年11月11日
作者：Commas
签名：一分耕耘，一分收获……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006
如果您想了解更多有关CSS的知识，那么请点《CSS学习的奇妙之旅》

---

---

一、什么是盒子模型（Box Model）

从截图上，我们可以看到，百度一下左边的输入框input是一个有宽度、高度的，盛装内容的、方方正正的容器，因此可以形象的称之为一个盒子，这个盒子包括外边距（margin）、边框（border）、内边距（padding）、以及实际内容（content），在HTML页面中布局元素都可以看作成这样的矩形盒子，所以人们就把这种模型，称之为盒子模型。

二、实际内容（content）

实际内容（content）就是盒子里装的东西，可以是文本内容，也可以是其它的元素；

三、内边距（padding）

内边距：边框与实际内容之间的距离；

padding属性用于设置内边距，边框与内容之间的距离，具体如下：

属性	说明
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

• 语法： padding : padding-top padding-right padding-bottom padding-left;

• 可缩写：
  1、 padding : (padding-top|padding-right|padding-bottom|padding-left);
  2、 padding : (padding-top|padding-bottom) (padding-right|padding-left);
  3、 padding : padding-top (padding-right|padding-left) padding-bottom;

• 示例：

示例	个数	说明
padding: 10px	1个	上下左右内边距均为10px
padding: 10px 20px	2个	上下内边距均为10px，左右内边距均为20px
padding: 10px 20px 30px	3个	上下内边距分别为10px、30px，左右内边距均为20px
padding: 10px 20px 30px 40px	4个	上下左右内边距分别为10px、20px、30px、40px（从上开始，顺时针旋转）

四、边框（border）

边框：外边距与内边距之间的区域；

border可以设置元素的边框，边框由边框宽度、边框样式以及边框颜色三部分组成，具体如下：

属性	说明
border-width	定义边框宽度，单位是px
border-style	定义边框样式，默认值为none，常用为实线solid、双实线double
border-color	定义边框颜色，颜色可参考《CSS基础入门总结》的文本颜色

• 语法： border : border-width border-style border-color;

• 注意事项：边框会额外增加盒子实际大小，因此测量时候，需要注意是否包含边框：
  1、若测量有含边框，那么宽度高度应该减去边框宽度；
  2、若测量不含边框，那么宽度高度就是盒子实际大小。

• 示例：

示例	说明
border : 1px red solid;	1px宽度的红色的实线边框
border-bottom: 2px rgb(0,0,0) double;	2px宽度的黑色的双实线下边框
border-right : 3px blue solid;	3px宽度的蓝色的实线右边框

五、外边距（margin）

外边框用于控制盒子与盒子之间的距离；

margin属性用于设置外边距，控制盒子与盒子之间的距离，具体如下：

属性	说明
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距

• 语法： margin : margin-top margin-right margin-bottom margin-left;

• 可缩写：
  1、 margin : (margin-top|margin-right|margin-bottom|margin-left);
  2、 margin : (margin-top|margin-bottom) (margin-right|margin-left);
  3、 margin : margin-top (margin-right|margin-left) margin-bottom;

• 示例：

示例	个数	说明
margin: 10px	1个	上下左右外边距均为10px
margin: 10px 20px	2个	上下外边距均为10px，左右外边距均为20px
margin: 10px 20px 30px	3个	上下外边距分别为10px、30px，左右外边距均为20px
margin: 10px 20px 30px 40px	4个	上下左右外边距分别为10px、20px、30px、40px（从上开始，顺时针旋转）

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/121245929