CSS盒子模型

---

前言

一个标签就是一个盒子。一张网页就是由一堆的盒子堆起来的。盒子很重要，前面也说，CSS有两个作用：1）布局，2）美化。学习盒子模型，就是为了美化盒子的。布局：所谓的布局，就是控制盒子的尺寸和盒子的位置。

---

一、盒子的组成

1. 内容的内容区域 content 。
2. 盒子的内边距，也叫补白，也叫内填充，padding 指边框和内容之间的间隙。
3. 边框：border border:1px solid red。
4. 外边距：margin 边框之外的区域 。

有些标签有默认的margin，在设置盒子模型时，不方便计算，所以一上来，我们就会把margin变成0。

1.内容区域

设置内容区域：width height 。行内盒子不能设置宽高和高度，单位是像素 px 。

2.边框区域

border是一个复合属性 普通情况下，我们都会使用复合属性。 border:1px solid red;