什么是盒模型？
在HTML中，标签可形象的理解为一个方块，这个方块里面再包裹着几个方块，如同盒子一样层层包裹着，我们看到的网页就是由一个个盒子堆叠起来的。
主要通过六大属性设置盒子模型：
1.width: 盒子内容宽度
2.height:盒子内容高度
3.padding 盒子内边距，即盒子内容与盒子边框之间的距离，上下左右都可设置padding
4.margin 盒子的外边距，即盒子边框之外的距离，也分上右下左
5.border 盒子的边框，可设置边框的宽度、颜色、样式，也分上右下左边框
6.background 盒子背景，背景默认情况下会填充内容和padding
接下来，我们详解这些属性美化盒子及相关注意问题，
1.width、height---内容的宽度与高度
```
div{
width:200px;
height:200px
}
.box{
width:80%;
height:80%;
}
```
注意：
1.块级元素与行内块级元素可设置宽高，行内元素不能设置
2.行内元素的宽度有内容决定，高度有内容font-size大小决定
3.width与width可设置百分比，是相对于父元素的百分比。
2.margin---盒子与盒子之间的距离，分上、右、下、左方向的margin
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
注意：
1.有些标签有默认的margin值，可通过; **{margin:0}*去除
2.margin对于块级元素在四个方向上都有作用，但在行内元素中，只能在水平方向上有用
3.margin 塌陷问题
2个前提: 块级元素、垂直方向
重叠分类
兄弟元素之间的重叠：上面盒子的margin-bottom与下面盒子的margin-top重叠，中间的margin大小时取大优先。
重叠解决：
方法1：将块级元素转换成行内块级元素
方法2：设置浮动
父子元素之间的重叠：父元素设置margin-top和父元素的第一个子元素设置的margin-top会重叠;
重叠解决：
方法1：给父元素设置border-top，如不想要边框可将其设置为透明transparent；
方法2：给父元素设置padding-top；
方法3：将块级元素设置成行内块级元素;
4.margin可设置负值;
3.border---设置盒子边框；
border:1px solid red;
border-top:2px solid green;
border-top-width:100px;
注意：
1.border可设置粗细、线型、颜色。如，border-width,border-style,border-color;
2.border在页面上占据空间;
3.border可实现三角形; 将元素宽度为0，设置border宽度即可;
4.padding---盒子内容与边框的距离;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
注意：
1.有些标签默认有padding值，使用 *{padding:0},取消padding;
2.padding用于调整内容与边框间的间隙
3.padding在页面上占据空间
5.background---设置盒子的背景，可为颜色填充--background-color也可图片填充--background-img;
background-color:yellow;
background-color:#ffffff;
background-color:rgba(255,255,255,0.5) //最后一项是透明度
backgrond-img: url(../images/logo.png);
backgrond-repeat:no-repeat;---图片平铺方式
backgrond-position:10px 10px;---图片显示的位置
