--盒模型

盒模型

box: 盒子，每个元素在页面中都会生产一个矩形区域(盒子)

盒子类型:

1. 行盒，display: inline
2. 块盒，display: block

行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒:容器元素
常见行盒:通常是一些文本元素:span、a、img、video、audio

盒子的组成部分

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

1. 内容 content
   width、height设置的是盒子内容部分的宽高
   内容部分通常叫做整个盒子的内容盒 content-box(标准盒子)

2. 填充(内边距) padding
   盒子边框到盒子内容的距离
   padding-left、padding-right、padding-top、padding-bottom
   padding:简写属性

padding:上 右 下 左;

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

3. 边框 border
   边框 = 边框样式(border-style) + 边框宽度(border-width) + 边框颜色(border-color)

border-width: 7px;
border-color: pink;
border-style: ridge;

边框+填充区+内容区 = 边框盒 border-box(怪异盒子)

4. 外边距 margin
   边框到其他盒子的距离
   margin-top、margin-left、margin-right、margin-bottom
   速写属性margin