持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章CSS属性 - display中，我们学习了CSS属性 - display、元素隐藏方法、CSS属性 - overflow等等相关知识点。今天，在这篇文章中，我们将学习CSS盒子模型相关知识点。
CSS盒子模型
在生活中, 我们经常会看到各种各样的盒子。事实上, 我们可以把HTML每一个元素看出一个个的盒子。HTML中的每一个元素都可以看做是一个盒子，可以具备这4个属性。
- 内容（content）：元素的内容width/height
- 内边距（padding）：元素和内容之间的间距
- 边框（border）：元素自己的边框
- 外边距（margin）：元素和其他元素之间的间距
因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边。
在浏览器的开发工具中，我们可以看到
内容 – 宽度和高度
设置内容是通过宽度和高度设置的。宽度设置: width。高度设置: height。需要注意的是，对于行内级非替换元素来说, 设置宽高是无效的。
另外我们还可以设置如下属性:
- min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
- max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时, 可以设置最大宽度和最小宽度。
- min-height：最小高度，无论内容多少，高度都大于或等于min-height
- max-height：最大高度，无论内容多少，高度都小于或等于max-height
内边距 - padding
padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距。padding包括四个方向, 所以有如下的取值:
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距
padding单独编写是一个缩写属性：padding-top、padding-right、padding-bottom、padding-left的简写属性。padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左。padding并非必须是四个值, 也可以有其他值。
边框 - border
border用于设置盒子的边框。边框相对于content/padding/margin来说特殊一些。边框具备宽度width、具备样式style、具备颜色color。
边框宽度：border-top-width、border-right-width、border-bottom-width、border-left-width。border-width是上面4个属性的简写属性。
边框颜色：border-top-color、border-right-color、border-bottom-color、border-left-color。border-color是上面4个属性的简写属性。
边框样式：border-top-style、border-right-style、border-bottom-style、border-left-style。border-style是上面4个属性的简写属性。
外边距 - margin
margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距。margin包括四个方向, 所以有如下的取值:
- margin-top：上内边距
- margin-right：右内边距
- margin-bottom：下内边距
- margin-left：左内边距
