盒模型

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

盒子类型

1. 行盒：display等于inline的元素
2. 块盒：display等于block的元素

浏览器默认样式div等是block块盒

display默认值是inline，如span

浏览器默认样式表设置的块盒：容器元素（div header article section aside）、h1~h6、p

常见的行盒：span a ing video audio

盒子的组成部分

无论是行盒、还是块盒，都由下面几个部分组成

1. 内容 content
• width、height，设置的是盒子内容的宽高
• 内容部分通常叫做整个盒子的内容盒 content-box
2. 填充 padding
• 盒子边框到盒子内容的距离
• padding-left、padding-right、padding-top、padding-bottom
• 简写：padding: 上 右 下 左；两个值：上下 左右；一个值：四周
• 填充区+内容区 = 填充盒 padding-box
3. 边框 border
• 边框 = 边框样式 + 边框宽度 + 边框颜色
• 边框样式：border-style
• 边框宽度：border-width
• 边框颜色：border-color
• 边框样式默认none；边框颜色默认跟随字体颜色
• style、width、color是速写属性，可以分别设置四个边
• 速写：border：width style color
• 边框 + 填充区 + 内容区 = 边框盒 border-box
4. 外边距 margin
• 边框到其他盒子的距离
• margin-top、margin-left、margin-right、margin-bottom
• 速写属性：margin：

↑以上为行盒（块盒通用）