盒子模型（布局和美化）：六大属性来调整盒子模型
1.margin：盒子与盒子之间的距离 分为上、下、左、右的margin
margin对于块级标签在四个方向都有作用，对于行级标签，只在水平方向有效，在垂直方向无效
margin重叠（塌陷）：两个前提：块级标签 垂直方向
兄弟元素之间的重叠：上面盒子的margin和下面盒子的margin重叠，中间的margin大小是取大优先
解决:
1.把块级元素变成行内块元素
2.浮动（浮动元素是不会塌陷）
父子元素之间的重叠：父子元素设置的margin-top和父元素中第一个子元素设置的margin-top会重叠
解决：
1.给父元素设置border-top 不想要边框的话使用transparent 2.给父元素设置padding-top
3.给块级元素变成行内块元素
margin也可以设置负值
2.border：设置盒子边框 border 在页面是占据空间的
样式：border:1px solid red
border可以实现小三角：
<div>
boder:5px solid transparent;
border:5px soli black;
</div>
3.padding:内边距，补白
应用：padding在页面也是占据空间的，用来内容与border之间的距离
4.content:宽度和高度是内容的宽度和高度
width和height可以设置百分比，是父元素的百分比
background:设置背景
background-image:
1，默认水平和垂直方向都会平铺
2，如果空间不足，图片也会显示，只是显示不完整
3，url后面的路径引号可加可不加
4，背景图片默认会填充 border,padding,content
background-repeat
background-position
background-attactment
background-color
总结：
1，什么是盒子模型？ 一个标签就是一个盒子，可以通过6大属性来设置这个盒子。 有margin，border,padding，widht，height，bg。标签分男标签和女标签。 对于男盒子来说，6大属性都有作用。对于女盒子来说，widht，height不起作用， padding 和 margin在水平方向上有作用，在垂直方向上没有作用。margin的重叠问题。 ......
2，如何计算盒子模型在网页上占据的大小？ 这种盒子模型有什么不好的地方？ 在网页上占据的宽度：左右的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，不断地增加，盒子的内容宽度不断地被压缩，如果压缩到了极限，浏览器会强迫你元素的宽度增加。所以默认情况下的盒子模型也有不足之处。
