盒模型
盒模型是指所有的元素都生成一个矩形框，该矩形框由元素的内容、内边距、边框和外边距组成。盒模型描述了元素如何显示以及如何相互交互的规律。
区别
W3C标准中padding、border所占的空间不在width、height范围内，但在IE的早期版本中，包括IE6，在混杂模式中使用自己的非标准和模型，也就是大家俗称的IE的盒模型，该模型中width包括content尺寸＋padding＋border
并不是所有的IE都使用IE盒模型
- 早期IE6、IE7使用“IE盒模型”，后来更新了一次，更新后的IE6、IE7使用标准盒模型IE8及以上版本使用标准盒模型
- 没有
DOCTYPE的情况下使用怪异模式，IE也使用“IE盒模型”
兼容方案
使用css3新样式box-sizing
box-sizing有两个值
- content-box：w3c标准盒模型
border-box：“IE盒模型”
<div style="height: 200px; width: 200px; border: solid 10px #333; padding: 100px; box-sizing: border-box;"> </div>
两层容器
<div style="height: 200px; width: 200px;">
<div style="border: solid 10px #333; padding: 100px;"></div>
</div>
属性
width & height
这两个属性用来定义元素的宽度和高度。
值：<length> | auto | inherit
初始值： auto
应用于： 块级元素和替换元素
继承性： 无
百分数： 相对于包含块的width（height）元素
计算值： 对于auto和百分数值，根据指定确定；否则是一个绝对长度，除非元素不能应用该属性。
使用方法：
<div style="width: 300px;"> 123 </div>
<img src="https://www.baidu.com/img/bdlogo.png" style="height: 100px;"/>
注意: 对于span等行内元素不生效，行内元素空间靠内容撑开。
padding
padding代表内边距，有四个方向的值，可以合写
- padding-top
- padding-right
- padding-bottom
- padding-left
值：[<length> | <percent>]{1,4}| inherit
初始值： 对于简写元素未定义
应用于： 所有元素
继承性： 无
百分数： 相对于包含块的width
计算值： 对于百分数，根据制定确定，对于长度值，则为绝对长度。
说明： 内边距绝对不能为负。
值复制：给定一个值，其他三个值从这个值复制；给定两个或三个值，第3个值从第1个值复制、第4个值从第2个值复制；关于盒模型的属性：padding border margin等的值复制都同理。
值复制案例：
padding: 10px 20px 30px 20px;/*方向为上、右、下、左，以下也相同*/
padding: 20px; /* padding: 20px 20px 20px 20px; */
padding: 10px 20px; /* padding: 10px 20px 10px 20px; 缺少下方的值，则用上方的值替代，缺少左边的值则用右边的值替代 */
padding: 10px 20px 30px; /* padding: 10px 20px 30px 20px; */
border
边框样式
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | insert | outset]{1,4} | inderit
border-style默认值为none,即没有边框。
单边边框样式：
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
边框宽度
border-width: [thin | medium | thick | <length>]{1,4} | inherit
单边边框宽度
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
边框颜色：
border-color: <color> | transparent | inherit
其中transparent为透明边框。
思考: 你是否可以用纯CSS画出三角形。
单边边框颜色
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
边框缩写
h1 {
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #00ee00;
}
缩写成：
h1 {
border-bottom: thick solid #00ee00;
}
h1 {
border-top: thick silver solid;
border-bottom: thick silver solid;
border-left: thick silver solid;
border-right: thick silver solid;
}
缩写成：
h1 {
border: thick silver solid;
}
h1 {
border-top: thick silver solid;
border-bottom: thick silver solid;
border-left: thick silver solid;
border-right: 20px silver solid;
}
巧妙利用层叠，可以缩写成：
h1 {
border: thick silver solid;
border-right-width: 50px;
}
行内元素的边框
前面说过行内元素的height,width属性不生效，同样边框作用于行内元素的时候会正常显示但并不会影响行高。
margin
外边距，规则和 padding 一样，但是数值可以是负数，而且负边距在布局中十分有用处。
auto 值计算规则
水平方向设置为auto后的计算规则如下:
只有一个属性设置为
auto: 如果设置width、margin-left或margin-right中的某个值为auto，而余下两个属性指定为特定的值，那么设置为auto的属性会确定所需的长度，从而使元素框的宽度等于父元素的width。margin-left和margin-right设置为auto: 如果两个外边距设置为auto,则该两个属性会设置为相等的长度，因此产生将元素在父元素中居中的效果。一个外边距和
width设置为auto: 设置为auto的外边距长度会为0，width长度会设置所需要的值，是的元素完全填充其包含块。三者都设置为
auto:_width会尽可能宽，外边距默认为0，即默认情况。
与text-align:center 对比
对于宽度固定的块元素，设置左右margin值为auto可以达到元素水平居中的效果。
text-align:center是作用于块级元素的内联内容，将块状元素text-align设置为center并不能让该块状元素居中，
垂直方向计算规则与水平方向同理，但要注意 margin-top和margin-bottom设置为auto时 ， 元素并不会垂直居中，而是将两个外边距都设置为0。
负边距
外边距可以设置为负。在标准盒模型中，子元素的七个水平属性的宽度总和应该等于父元素的width，即为父元素的content区域宽度，如果子元素的外边距为负，会导致子元素的显示超出父元素。
负边距在布局中有丰富的应用。
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
兄弟元素:当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
父子元素:当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
空元素:假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
外边距有时候还是很有用的
如何清除？
破坏合并条件：1.触发BFC（float一章有介绍）。 2.添加padding 。3.给空元素添加内容。