什么是盒子模型
一个标签就是一个盒子，可以通过六大属性来设置盒子模型
盒子模型的六大属性
margin
盒子与盒子之间的距离
margin-left margin-right margin-top margin-bottom四个方向
*{margin:0}可以消除系统默认margin
margin对于块级标签在四个方向上都有作用，对于行级标签只在水平方向上起作用。
margin重叠（塌陷）：
前提：块级标签，垂直方向
兄弟元素间重叠：上面盒子的margin-bottom和下面盒子的margin-top会重叠，宽度取大优先。
解决：1.将块级元素变成非块级元素
2.设置浮动（浮动元素不会塌陷）
3.设置一方的margin，不要两个都设置
父子元素之间的重叠
父与第1个子或最后1个子之间的重叠
父的margin-top与第一个子的margin-top重叠
父的margin-bottom与最后一个子的margin-bottom重叠
解决：1.给父元素设置padding-top
2.给父元素设置border
3.设置一方的margin，不要两个都设置
border
设置盒子的边框
border:粗细 线型 颜色 eg: border:1px solid red;
四个方向：border-top border-right border-bottom border-left
样式设置：border-width border-style border-color
border-top-width xxx
border在页面是占空间的
border可以实现小三角
padding
内边距，补白 内容与border之间的距离
一些标签有默认的padding 消除默认padding *{padding：0}；
padding四个方向：padding-left padding-right padding-top padding-bottom
应用：调整内容与border之间的间隙
padding在页面中是占据空间的
width和height
男标签可以设置宽度和高度，女标签不能设置宽度和高度
女标签它的宽度由内容决定，高度由font-size决定
width和height可以设置百分比，是父元素的百分比。
background
background-color:背景颜色
background-image:背景图片
1，默认水平和垂直方向都会平铺
2，如果空间不足，图片也会显示，只是显示不完整
3，url后面的路径引号可加可不加
4，背景图片默认会填充border,padding,content
background-repeat:是否平铺
background-position:定位
background-attactment:背景图片随滚动轴的移动方式
如何计算盒子模型在网页上所占据的大小
在网页上占得宽度：左右的margin+左右的border+左右的padding+width
在网页上占得高度：上下的margin+上下的border+上下的padding+height
拓展：如果一个div没有设置width，它占父元素的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
不断地增加，盒子的内容宽度不断地被压缩，如果压缩到了极限，浏览器会强迫你元素的宽度增加。
所以默认情况下的盒子模型也有不足之处。
