首先我们要清楚什么是盒子模型？
html中的标签在页面表达的都是一个一个矩形，所以我们称它为盒子，而一个网页就是由很多很多盒子堆积起来的。
在标准盒模型中（以块级元素为例）：
水平方向占据的总宽度：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
垂直方向上占据的总高度：
margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
盒子模型有六大属性（男标签都可以设置，女标签不用设置宽度和高度）：
1.width(盒子内容的宽度)，2.height（盒子内容的高度），3.padding（盒子的内边距，盒子内容与盒子边框之间的距离）， 4. border（盒子的边框），5.margin（盒子的外边距），6.background（盒子背景，背景默认情况下会填充内容和padding）
width和height可以设置百分比，表示的时占父元素的比例。
background：
background-image默认会填充border，padding，content。默认水平和竖直方向都会平铺。如果空间不足，图片也会显示，只是显示不完整。url后面的路径引号可加可不加。
background-repeat：设置背景图像是否重置即如何重置。
background-position：设置背景图像开始的位置。
background-attactment：设置背景图像是否固定或者随着页面的其余部分滚动
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
盒子模型应该注意的点：
1.对于女标签来说，width和height设置无效。2，块元素的width属性默认值为auto。3，对于行内元素而言，其宽度由内容本身决定，而其高度则由字体大小决定（即font-size）。 4，有些标签有默认的padding值，例如ul，ol等，所以我们在写样式文件（css文档）时可以将默认的设置都置零。*{padding：0}。margin的应用：
margin对于块元素在四个方向上都有作用，对于女标签，只在水平方向上有效，在垂直方向上无效。
margin的塌陷
1.两个前提：必须是块级元素，只出现在垂直方向上。
2.兄弟元素之间的塌陷：上面盒子的margin-bottom和下面盒子的margin-top塌陷（重叠），他们之间的距离最终是却决于谁的margin值大，即取大优先。解决办法：方法1：把块级元素变成行内块元素。方法2：让两个块级元素浮动起来，浮动的元素是不会塌陷的。
3.父子元素之间的塌陷：父元素的margin-top和子元素的-margin-top会重叠。解决重叠：方法1：给父元素设置border-top 不想要边框的话，可以使用transparent将其透明化。方法2：给父元素设置padding-top。方法3：把块级元素变成行内块元素（不男不女，display：inline-block）
margin也可以设置负值
如何计算盒子模型在网页上占据的大小？
在网页上占据的宽度：左右的margin+左右的border+左右的padding+width
在网页上占据的高度：上下的margin+上下的border+上下的padding+height
如果一个div没有设置widht，它占父元素的100%。假如我的父元素是960px。div也占
960px。div的这个960是指div的内容宽度还是指它在页面上占据的空间？
960px = 左右的margin+左右的border+左右的padding+width
这里面的div占960是指div所占用的空间。那如果我把这个div又加了一个10px的边框。
那么这个div的内容宽度width = 960-20px = 940px
那盒子模型又有什么不好呢？
如果一个男盒子没有设置宽度，它的宽度是父元素的100%，这里的100%是指这个盒子所占页面宽度。
如果又增加了这个盒子的margin,padding,border，那么这个盒子的内容宽度一定会减小，如果margin,padding,border
不断地增加，盒子的内容宽度不断地被压缩，如果压缩到了极限，浏览器会强迫你元素的宽度增加。
所以默认情况下的盒子模型也有不足之处。
