在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
盒子模型的六大属性
width 盒子内容宽度
height 盒子内容高度
padding 盒子的内边距（补白），盒子内容与盒子边框之间的距离，上下左右都有padding
margin 盒子的外边距 盒子边框之外的距离，也分上右下左
border 盒子的边框盒子的边框也是有上边框，右边框，下边框，左边框
background 盒子背景 背景默认情况下会填充内容和padding
with和height
设置盒子的宽高，需要注意，对于行内元素（女标签如span），width和height无效。它的宽度由内容本身决定，而其高度则有font-size决定。
width和height可以设置百分比，相对于父元素的width和height而言。
border
border是一个简写的属性，是border-width、border-style、border-color的简写。
三个属性之间没有固定的顺序，怎么写都行 属性之间使用空格隔开 针对border-width、border-style、border-color，又分别有四个方向的子属性，如border-top-width，border-top-style，一般很少使用子属性来设置边框。
border-width的设置
表示边框的大小（粗细），我们有两种方式设置： 具体的像素值，如5px，推荐使用 使用表示粗细的英文，thin，thick，medium，很少会使用，不同的浏览器解析的大小不一致。
border-style的设置
表示边框的样式，有如下几种：
solid，实线
dotted，点画线
dashed，虚线
none 没有
double：定义边框为双边框线。
groove：定义边框为3D凹槽。
ridge：定义为边框3D凸槽。
inset：定义边框为3D凹边。
outset：定义边框为3D凸边。
hidden：隐蔽边框，IE不支持。
可以用分别设置上下左右方向的宽度，和样式如下图
border-color的设置
就是边框的颜色，可以使用如下三种方式来设置： 颜色英文名称； rgb函数； 十六进制。 border-color也分为四个方向的子属性，如border-top-color。 在border中的三个属性中，其实它们都有默认值， border-width，默认是medium，一般是3px boder-color，默认是字体的颜色， border-style，默认是none
用border设置三角形
<style>
div{
width: 0px;
border: 10px solid transparent;
border-top: 10px solid black;
}
</style>
padding
所表示的区域是边框 到 内容之间的 那块空间。
padding有四个方向上的子属性：
padding-top； padding-right； padding-bottom； padding-left。
具体写法有如下几种：
单独的设置某一个子属性 padding：一个值 四边相同
padding：两个值 第一个值表示上下的，第二个值表示左右的
padding：三个值 第一个值表示上的，第二个值表示左右的，第三个值表示下的 padding：四个值 分别是上、右、下、左。
注意： padding可以使用百分比，是相对于父元素的width值，一般在响应式web中使用。 有些标签有默认的padding值，如ul、ol等。 对于行内元素，padding在垂直方向上不影响行高。
margin
简写和设置参考padding。 margin可以使用百分比，是相对于父元素的width值。
有些标签有默认的margin值，如body、h1~h6、p、ul、ol、dl等。
对于行内元素，margin在垂直方向上无效。
margin的auto设置即居中。
块状元素在垂直方向上有重叠现象。 margin可以使用负值。
margin重叠（塌陷）：
2个前提：男标签，垂直方向
兄弟元素之间的重叠：上面盒子的下margin和下面盒子的上margin重叠，中间的margin大小是取大优先
解决重叠：
方法1：给男的变成不男不女的
方法2：浮动（浮动元素是不会塌陷的）
父子元素之间的重叠：父元素设置margin-top和父中第一个子元素设置的margin-top会重叠
解决重叠：
方法1：给父元素设置border-top 不想要边框，使用transparent
方法2：给父元素设置padding-top
方法3：给男的变成不男不女的
background：
content: 内容的宽度和高度
width: height：
男标签可以设置宽度和高度，女标签不能设置宽度和高度 女标签它的宽度由内容决定，高度由font-size决定 width和height可以设置百分比，是父元素的百分比。
