盒模型

盒模型

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

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

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

display默认值为inline
浏览器默认样式表设置的块盒：容器元素(div, header,article,section,aside)
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（顺时针转）：上 右 下 左
   填充区+内容区=填充盒 padding-box
3. 边框 border 速写属性
   边框=边框样式+边框宽度+边框颜色
   边框样式：border-style
   边框宽度：border-width
   边框颜色：border-color
   边框+填充区+内容区=边框盒 border-box
4. 外边距 margin 速写属性
   边框到其他盒子的距离
   margin-top,margin-right,margin-bottom,margin-left