盒子模型：标签是矩形的，这个矩形的标签就是一个盒子，也就是说一张网页就是由一个个的盒子堆起来的。 盒子的几个属性：
width:盒子内容的宽度
height：盒子内容的高度
padding：盒子的内边距，盒子内容与盒子边框之间的距离
border：盒子的边框
margin：盒子的外边距，盒子与盒子之间的距离
background：盒子背景，背景默认情况下会填充内容和padding
注：对于padding、border、margin、background来说，都分四个方向。
在具体说明盒子模型之前，我们应当对标签的分类有基本的了解。标签分为块级标签、行级标签和行内块。 下面主要以块级标签div为例。
1、width、height:盒子内容的宽度和高度，width和height可以设置百分比，是父元素的百分比。
<body><div></div></body>
<style>
*{
padding: 0px;
margin: 0px;
}
div{
width: 100px;
height:100px;
background:palegoldenrod;
}
</style>
给这个盒子设置了宽度、高度均为100px的数值，为了方便看盒子的大小，同时给它设置了背景颜色。
<style>
*{
padding: 0px;
margin: 0px;
}
div{
width: 100px;
height:100px;
background:palegoldenrod;
padding:10px;
}
</style>
paddig：10px 代表给这个盒子的上下左右都设置了10px的内边距
从上图中看出padding在页面中是占空间的，同时需要注意的是padding可以设置
1个值、2个值、3个值、4个值。
padidng:10px;代表这个盒子的上下左右的内边距均为10px
padding:10px 20px;代表这个盒子的上下内边距是10px，左右内边距是20px
padding：10px 20px 30px;代表这个盒子的上内边距是10px，左右内边距是20px，下内边距是30px
padidng:10px 20px 10px 15px;代表这个盒子的padding-top为10px，padding-right为20px，
padding-bottom为10px，padding-left为15px，即顺序为上右下左。
3、border：盒子的边框
<style>
*{
padding: 0px;
margin: 0px;
}
div{
width: 100px;
height:100px;
border: 1px solid palegreen;
}
</style>
用border属性给这个盒子设置了粗为1px的实线绿色边框
从上图中我们可以了解到盒子的边框也是占空间的，并且也是分四个方向。
border:1px;代表这个盒子的上下左右的边框均为1px
border:1px 2px 1px 1px;代表这个盒子的border-top为1px，border-right为2px，
border-bottom为1px，border-left为1px，即顺序为上右下左。
border中可以设置的属性：border-width border-style border-color
border就是这三个属性的复合属性，
也可以单独设置某个方向的border-width、border-style、border-color
比如：border-top-width:xxx
4、margin：盒子的外边距
盒子的上下左右都有外边距，也可以给盒子设置1个值、2个值、3个值、4个值，
同上面所说的padding。
5、background：盒子背景
几个属性：
background-color
background-image:
1，默认水平和垂直方向都会平铺
2，如果空间不足，图片也会显示，只是显示不完整
3，url后面的路径引号可加可不加
4，背景图片默认会填充border,padding,content
background-repeat:
background-position:
背景图片的位置，背景图片在元素内出现的位置，默认为（0,0）左
上角。设置该属性的值有三种方式：
1）英文单词：left、right、top、bottom和center。
用法如：
“left top”（默认），设置背景图在元素内的“左上方”；
“right bottom”，设置背景图在元素内的“右下方”；
“center center”，设置背景图在元素的“中心”。
2）百分比：
用法如：
“0% 50%”，设置背景图在元素内“水平方向”的“左方”，垂直方向的“中心”；
“50% 50%”,，设置背景图在元素内的“中心”；
“100% 100%”,，设置背景图在元素内的“右下方”。
3）数值单位px、em等
background-attactment:
通过将该属性的值设置为“fixed”后，页面出现滚动条后就算页面滚动，背景图也会固定
在原来的位置不会跟随页面滚动。它的默认值是“scroll”，是当页面滚动的时候，背景
图也跟随页面同步滚动。
对于盒子模型的注意点：
1、对于行级标签来说，width和height设置无效
2、行级标签它的宽度由内容决定，高度由font-size决定
3、width属性默认值为auto，块元素的贪婪性和行内元素的懒惰性。
所谓的块元素的贪婪性就是，在不设置块的宽度，也就是默认width为auto时，它的宽度为父
元素的宽度。下面我们来验证一下：
<style>
*{
padding: 0px;
margin: 0px;
}
div{
height:100px;
background-color: palevioletred;
}
</style>
而行内元素的懒惰性指的是他的宽度由内容的宽度决定。以行内元素span为例子进行验证：
<style>
*{
padding: 0px;
margin: 0px;
}
span{
background: palevioletred;
}
</style>
4、对于行内元素而言，其宽度由内容本身决定，而其高度则有font-size决定。
5、有些标签有默认的padding值，如ul、ol等。*{padding:0}
6、margin对于男标签在四个方向上都有作用，对于女标签，只在水平方向上有效，在垂直方向上
无效
7、margin重叠（塌陷）问题：塌陷问题的前提是块级标签，而且是垂直方向上的塌陷。
兄弟元素之间的重叠：上面盒子的下margin和下面盒子的上margin重叠，中间的margin大小是取大优先
解决重叠：
方法1：给块级元素变成行内块的
方法2：浮动（浮动元素是不会塌陷的）
父子元素之间的重叠：父元素设置margin-top和父中第一个子元素设置的margin-top会重叠
解决重叠：
方法1：给父元素设置border-top 不想要边框，使用transparent
方法2：给父元素设置padding-top
方法3：给块级元素变成行内块的
