盒模型
box: 盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
1， 行盒， display等于inline的元素，行盒在页面中不换行
2， 块盒， display等于block的元素，块盒独占一行
浏览器默认样式表设置的块盒：容器元素：h1-h6, p
常见的行盒：span, a, img, video, audio
盒子的组成部分
无论是行盒，还是块盒，都由下面几个部分组成，从内到外分别是：
内容 content
width height 设置盒子内容的宽高填充（内边距） padding
盒子边框到内容的距离
- padding-left padding-right padding-top padding-bottom
- padding:简写属性
- padding:上右下左
- 边框 border
- 边框样式：border-style
- 边框宽度：border-width
- 边框颜色：border-color
- 边框+填充区+内容区 = 边框盒 border-box
- 外边框 margin
边框到其它盒子的距离
- margin-top margin-right margin-bottom margin-left
demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style>
.a{
background-color: skyblue;
padding: 20px;
border: #808080;
border-style: dashed;
margin: 10px
}
</style>
</head>
<body>
<h1>我是H1标签</h1>
<p>我是p标签</p>
<div class="a">
我是div
</div>
<div>
<span style="display: block;">我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</div>
</body>
</html>
多说几句：可以把盒模型理解为一个装了手机盒子的快递盒子。手机盒子内部区域叫做content，两盒子中间的区域叫做padding。
