CSS——盒模型

盒模型

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、padding-top、padding-bottom、padding-right

padding简写属性：上 右 下 左

padding:100px 100px 100px 100px
上下一样/左右一样 padding:100px 100px
上下左右都一样 padding：100px

填充区+内容区=填充盒 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
order-color=border-top-color border-right-color border-bottom-color border-left-color

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

4. 外边距 margin

边框到其他盒子的距离