CSS——盒模型（侧重于块盒）

盒模型

可以把盒模型看成一个手机盒子

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

盒子类型：

1. 行盒：display等于inline（默认值）的元素
2. 块盒：display等于block的元素

行盒在页面中不换行，块盒独占一行

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

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

盒子的组成部分

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

1. 内容 content（装手机的区域）

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

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

2. 填充（内边距）（手机与框之间的缓冲区） padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding：简写属性

padding:1px,2px,3px,4px;/*依次为上右下左，顺时针进行*/

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

3. 边框 border（盒框）

边框=边框样式+边框宽度+边框颜色

边框样式：border-style

border-top-style
border-right-style
border-bottom-style
border-left-style

边框宽度：border-width

border-top-width
border-right-width
border-bottom-width
border-left-width

边框颜色：border-color

border-top-color
border-right-color
border-bottom-color
border-left-color

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

4. 外边距 margin（盒子之间的距离）

边框到其他盒子的距离

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

速写属性margin

margin:1px,2px,3px,4px;/*依次设置上、右、下、左四个外边距*/