CSS基础-3.6 盒模型

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

• 盒子类型：

1. 行盒，display=inline的元素，在页面中不换行。
2. 块盒，display=block的元素，在页面中独占一行。

• display默认值为inline

• 浏览器默认样式表设置的块盒：容器元素、h1~h6、p

• 常见的行盒：span、a、img、video、audio

盒子的组成部分

• 无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：内容、填充、边框、外边距。

1. 内容 content

   width、height，设置的是盒子内容的宽高

   内容部分通常叫做整个盒子的内容盒（content-box）

2. 填充(内边距) padding：盒子边框到盒子内容的距离

   padding-left：50px、padding-right：30px、padding-top：20px、padding-bottom：10px，这样每次设置麻烦了，padding是个简写属性，所以可以直接按padding： 上 右 下 左（如：padding：50px 30px 20px 10px）的顺序进行设置。

   填充区+内容区 = 填充盒 （padding-box）

3. 边框 border（简写属性）

   边框 = 边框样式 + 边框宽度 + 边框颜色
   边框样式：border-style
   边框宽度：border-width
   边框颜色：border-color

   边框+填充区+内容区 = 边框盒 （border-box）

4. 外边距 margin（速写属性）： 边框到其他盒子的距离

   margin-top、margin-left、margin-right、margin-bottom