两种盒模型及盒模型属性

一、盒模型

盒模型的组成包括外边框（margin）、边框（border）、内边框（padding）、还有内容区（content）。
盒模型，在html中，所有的HTML元素都可以当作是一个盒子，用来描述该元素在文档布局中所占空间。盒模型分为标准盒模型（即w3c标准盒模型）和怪异盒模型（即IE标准盒模型）。
就好比2个纸箱，每个纸箱里都放着一瓶水，盒模型就是这种情况。
两个箱子之间的距离就是margin；箱子皮的厚度就是border；箱子与水之间的距离就是padding；而水占的位置就是内容。
如下图：（注：margin本身的有bug）

二、标准盒模型和怪异盒模型的区别

定两盒子，一个设为怪异盒子box-sizing: border-box，一个则为标准盒模型：

怪异盒子border-box得到的盒模型数据：

标准盒子content-box得到的盒模型数据：

可以看出两者的区别：标准盒子添加padding或者border时，元素的width会被撑大，变为content+修改后的padding+修改后的border。而怪异盒子添加padding或者border之后，元素的width是没变的，而content区的大小会被修改。
简单的说就是，一个width为100px的标准盒子，你给它添加10px的border值之后，这个标准盒子的width就变成110px了，而一个width为100px的怪异盒子，你给它添加一个10px的border，这个怪异盒子的width值还是100px，变的是内容区content的值，此时的content为90px。

结论：
标准盒模型的总宽度：width+padding+border+margin
怪异盒模型的总宽度：width（content+padding+border）+margin

三、盒模型属性

1、边框border：
设置边框粗细border-width：
border-width：size;
设置边框样式border-style：
border-style:solid/dashed/dotted/double;
设置边框颜色border-color：
例如border-color: red ;
也可以组合着写：例如border：1px solid #fff;
2、外边框margin
作用是控制同辈元素之间的位置关系
上外边框margin-top: size;
右外边框margin-right: size;
下外边框margin-bottom: size;
左外边框margin-left: size;
可组合着写：
margin： 上 右 下 左； //四个值，分别代表上下左右
margin： 上 右&左 下； //三个值，分别代表上、左右、下
margin： 上&下 右&左； //两个值，分别代表上下、左右
margin： 上&右&左&下； //一个值，代表上下左右
注：
① margin可以负值
② 上下两个margin值会重复，显示大的margin值
③ 当给父元素的第一个块级子元素添加margin-top时，会错误的添加给父元素，此时，给父元素添加overflow：hidden;或者给父元素加边框或是父、子元素都浮动即可解决。这个时候也可以不用margin，改用padding。

3、内边框padding
作用是控制元素和内容之间的位置关系，控制父元素和子元素的位置关系。
上内边框padding-top:size;
右内边框padding-right:size;
下内边框padding-bottom:size;
左内边框padding-left:size;
可以组合写，其方法和margin相同；