一．前言
盒子模型，英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
盒子中的区域
一个盒子中主要的属性就5个：（width、height）、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
举个例子---vs code中演示demo
上面这个盒子，width:100px; height:100px; 但是真实占有的宽高是202*202。 这是因为还要加上padding、border。
二．标准盒子模型和IE盒子模型
三．以下我们就标准盒子模型来讨论
1.认识width+height
在标准盒子模型中,width和height就是content的宽度和高度
2.认识padding
2.1padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有boder以内的区域。
在demo中加上background-color: pink;展示padding区域的颜色
2.2padding有四个方向
padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性的写法：
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开）
padding:30px 20px 40px 100px;
如果写了四个值，则顺序为：上、右、下、左。
如果只写了三个值，则顺序为：上、右、下。左和右一样。
如果只写了两个值，比如说：padding: 30px 40px;则顺序等价于：30px 40px 30px 40px;
通过属性层叠来减少代码量。比如：padding: 20px;padding-left: 30px;
利用css的层叠性将padding-left将第一行的左内边距层叠掉了，导致第一行小属性无效
但是如果反过来呢,就会发现padding-left：30px被层叠掉了
一些元素，默认带有padding，比如ul标签。如下：
上图显示，不加任何样式的ul，也是有40px的padding-left。
所以，我们做网页的时候，为了便于控制，总是喜欢清除这个默认的padding。
可以使用*进行清除
*{margin: 0; padding: 0; }
但是，*比较残暴，所以我们使用并集选择器，罗列所有的标签：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0; padding:0; }
3.认识border
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，会显示不出来边框。
border-style border的所有的线型如下——见ppt
border拆分
border是一个大综合属性。比如说：
border:1px solid red;
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性是能够被拆开的，有两大种拆开的方式：
（1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
（2）按方向拆开：border-top、border-right、border-bottom、border-left。
一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
（1）按三要素拆：
border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。
等价于： border:10px solid red;
(2)按方向来拆：
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等价于： border:10px solid red;
（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
等价于： border:10px solid red;
4．认识margin
<body>标签也有margin
常见问题：
1.在实际开发中到底用大属性还是小属性？
很简单：什么简单用什么。但要懂得，用小属性层叠大属性。
举个例子
W3C 为了解决这个问题，在 CSS3 中加了 box-sizing 这个属性。
box-sizing:content-box(标准盒子模型)
这个是box-sizing的默认属性,这个时候的width是content的width,height是content的height
box-sizing:border-box(IE盒子模型)
设定该属性后,这样会更加直观的体现盒子的大小,这个时候的width是box的width,height是box的height
3.magrin在垂直方向上的重叠
盒子模型，英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
盒子中的区域
一个盒子中主要的属性就5个：（width、height）、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
举个例子---vs code中演示demo
上面这个盒子，width:100px; height:100px; 但是真实占有的宽高是202*202。 这是因为还要加上padding、border。
二．标准盒子模型和IE盒子模型
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
三．以下我们就标准盒子模型来讨论
1.认识width+height
在标准盒子模型中,width和height就是content的宽度和高度
2.认识padding
2.1padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有boder以内的区域。
在demo中加上background-color: pink;展示padding区域的颜色
2.2padding有四个方向
padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性的写法：
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开）
padding:30px 20px 40px 100px;
如果写了四个值，则顺序为：上、右、下、左。
如果只写了三个值，则顺序为：上、右、下。左和右一样。
如果只写了两个值，比如说：padding: 30px 40px;则顺序等价于：30px 40px 30px 40px;
通过属性层叠来减少代码量。比如：padding: 20px;padding-left: 30px;
利用css的层叠性将padding-left将第一行的左内边距层叠掉了，导致第一行小属性无效
但是如果反过来呢,就会发现padding-left：30px被层叠掉了
一些元素，默认带有padding，比如ul标签。如下：
上图显示，不加任何样式的ul，也是有40px的padding-left。
所以，我们做网页的时候，为了便于控制，总是喜欢清除这个默认的padding。
可以使用*进行清除
*{margin: 0; padding: 0; }
但是，*比较残暴，所以我们使用并集选择器，罗列所有的标签：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0; padding:0; }
3.认识border
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，会显示不出来边框。
border-style border的所有的线型如下——见ppt
border拆分
border是一个大综合属性。比如说：
border:1px solid red;
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性是能够被拆开的，有两大种拆开的方式：
（1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
（2）按方向拆开：border-top、border-right、border-bottom、border-left。
一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
（1）按三要素拆：
border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。
等价于： border:10px solid red;
(2)按方向来拆：
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等价于： border:10px solid red;
（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
等价于： border:10px solid red;
4．认识margin
<body>标签也有margin
<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。
常见问题：
1.在实际开发中到底用大属性还是小属性？
很简单：什么简单用什么。但要懂得，用小属性层叠大属性。
举个例子
2.对于同一个盒子，不同的盒模型去解释会有不同的宽高，如何解决
W3C 为了解决这个问题，在 CSS3 中加了 box-sizing 这个属性。
box-sizing:content-box(标准盒子模型)
这个是box-sizing的默认属性,这个时候的width是content的width,height是content的height
box-sizing:border-box(IE盒子模型)
设定该属性后,这样会更加直观的体现盒子的大小,这个时候的width是box的width,height是box的height
3.magrin在垂直方向上的重叠
触发了BFC
本文参考：http://www.cnblogs.com/smyhvae/p/7256371.html
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
