“这是我参与8月更文挑战的第17天，活动详情查看： 8月更文挑战”
盒子模型
什么是盒子模型？
所有 HTML 元素可以看作盒子，在 CSS 中，"box model "这一术语是用来设计和布局时使用。
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
来解读一下这张图：
- Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明
- Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content（内容） - 盒子的内容，显示文本和图像
注意：在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
边框
CSS 边框 (border) 可以是围绕元素内容和内边距的一条或多条线，对于这些线条，您可以自定义它们的样式、宽度以及颜色。
关于边框属性，这里就不再重复介绍，具体可以通过之前我对边框的专篇介绍（传送门）来查看。
外边距
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。默认值是0。
实例:
- margin:10px 5px 15px 20px;
- 上边距是 10px
- 右边距是 5px
- 下边距是 15px
- 左边距是 20px
- margin:10px 5px 15px;
- 上边距是 10px
- 右边距和左边距是 5px
- 下边距是 15px
- margin:10px 5px;
- 上边距和下边距是 10px
- 右边距和左边距是 5px
- margin:10px;
- 所有四个边距都是 10px
注意： 负值是允许的。
属性值
值 描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。
注意规律哦，和边框的规律相同，可以参考记忆。
内边距
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。默认值是0。
实例:
- padding:10px 5px 15px 20px;
- 上填充是 10px
- 右填充是 5px
- 下填充是 15px
- 左填充是 20px
- padding:10px 5px 15px;
- 上填充是 10px
- 右填充和左填充是 5px
- 下填充是 15px
- padding:10px 5px;
- 上填充和下填充是 10px
- 右填充和左填充是 5px
- padding:10px;
- 所有四个填充都是 10px
注意： 负值是不允许的。
属性值
值 说明
length 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的填充
inherit 指定应该从父元素继承padding
写在最后
好了，以上就是CSS盒子模型的介绍，是不是很简单，动手试一试吧！
以上内容如有不正之处，欢迎掘友们批评指正。
