html盒子模型

HTML盒子模型

---

在css中有一个需要了解的东西，那就是盒子模型，这是css看待元素的一种方式。可以说页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

---

div盒子模型的实践宽度分为二种方式：
水平方向：左外边距+左边框+左内边距+width+右内边距+右边框+右外边距
垂直方向：上外边距+上边框+上内边距+width+下内边距+下边框+下外边距

---

---

content ：就是内容区，包含了文本图像之类的。在内容区中，内容和盒子的边缘之间是没有空间的。
padding：内边距，内容区就是被内边距所包围。内边距是一个透明的，没有颜色也没有自己的装饰，但是是可选的。
border：边框，所在位置就是在内边距的周围是一个可选的边框。边框可以拥有样式。
margin：外边距。包含了所有部分。它是可选的，利用外边框可以在同一个页面上的不同元素之间增加空间。

---

内边距和外边距的区别

外边距是提供元素之间的间距，而内边距是在内容周围增加额外的空间。

---

对于边框，内边距，外边距而言，css都提供了相应的属性，可以一次对四个边（上 右 下 左）进行设置,也可以单独的设置一边的样式。