css盒模型是前端开发中非常基础和重要的知识，它是元素大小的呈现方式，它包括margin、border、padding和content，如图：
css盒模型
一、 box-sizing
css盒模型主要分为IE盒模型（border-box）、W3C标准盒模型（content-box）和padding-box。在声明DOCTYPE的情况下，box-sizing默认为W3C标准盒模型；若不声明，IE浏览器默认为IE盒模型（border-box），chrome和Firefox等默认为W3C标准盒模型（content-box）。
1.1 IE盒模型（border-box）
dom.width = content.width + padding-left + padding-right + border-left + border-right;
dom.height = content.height + padding-top + padding-bottom + border-top + border-bottom;
1.2 W3C标准盒模型（content-box）
dom.width = content.width;
dom.height = content.height;
1.3 padding-box
dom.width = content.width + padding-left + padding-right;
dom.height = content.height + padding-top + padding-bottom;
1.4 如何设置和获取盒模型对应的宽和高
- dom.style.width/height --
只能获取到内联style设置的宽和高 - dom.currentStyle.width/height --
只支持IE - Window.getComputeStyle(dom).width/height --
支持Firefox和chrome - dom.getBoundingClientRect().width/height
二、内边距padding
padding是一个比较老实的属性，定义元素的内边距，接受长度值或百分比值，但不允许使用负值。有意思的是，padding的百分比值，是根据父元素的宽度设定的！在我们潜意识里可能认为，padding水平方向的百分比值应该是根据元素的宽度计算的，padding垂直方向的值应该是元素的高度，这是不对的！我在开发中，通常可以使用padding百分比的特性实现一个响应式的正方形。
padding属性通常包含在元素的实际的布局尺寸中，一般情况下padding的值不会影响元素的布局尺寸。但是padding属性值都特别大的时候呢？对于block元素，当box-sizing是border-box时候或者width:auto 元素width不会变，但当paddind大于width时，元素宽度会增加，元素内的文字会以內联元素的最小宽度显示；相对于inline水平元素，水平padding影响尺寸，垂直padding会影响尺寸，但会影响背景色。
许多标签元素都会有默认的padding值。button标签元素的padding兼容性特别差。。。
三、边框border
border是padding和margin中间的边框样式属性，目前支持10种border-style，其中最为常用的是solid（直线），还可以使用border-image来代替边框样式。border-width只接受长度值，不接受百分比值和负值，但是如果边框没有样式，就没有宽度。在开发中，我们可以利用border-width和border-color来实现许多的不规则图形。比如一个黄色的三角形：
{
width: 0;
height: 0;
border: 0 solid transparent;
border-left: 50px solid yellow;
}
四、外边距margin
margin就好像是元素的气场，气场有多大，别人就离你有多远了，是一个特别不老实的属性。margin可以接受任何长度单位，包括负值。
4.1 margin 负值
margin负值在不同方向的产生的效果不同。margin-top为负值不会增加高度，只会产生向上位移，margin-bottom为负值不会产生位移，会减少自身的高度。margin所产生的位移效果，不会脱离文档流。当元素不存在width属性或者width=auto的时候，margin负值会增加元素的宽度，我们可以使用这一特性实现等高布局的效果哦。
4.2 margin auto
auto就是自动意思。当元素为block元素，我们可以使用margin： auto实现元素水平方向居中。那么问题来了，为什么要是block元素？margin auto是什么意思？垂直方向为什么不居中呢？
我们知道block会自动填充父元素的宽度，但是不能自动填充父元素的高度。当元素能够自动填充父元素时，margin auto才能生效，auto = （father.width - content.width）/ 2，所以垂直方向不能产生居中的效果。如果设置writing-mode为垂直方向，block会自动填充父元素的高度，那么就可以实现垂直居中了。设置writing-mode产生一个方向的自动填充，如果需要水平和垂直方向都居中，就可以使用relative来产生两个方向的自动填充了！
4.3 margin 百分比值
margin的百分比值，也是根据父元素的宽度设定的！下面的代码可以实现一个2:1的长方形：
{
width: 0;
height: 0;
margin: 50%;
}
诶？为什么padding：50%呈现出来的是正方形？margin呈现出来的是长方形呢？让我们来看看边距重叠吧！
4.4 边距重叠
为什么说margin是一个特别不老实的属性呢，很大一部分是因为边距重叠了。产生边距重叠的特性：
- 不脱离文档流的block元素
- 作用于writing-mode方向
发生边距重叠的情景：
- 相邻的两个元素之间的margin
- 父元素与第一个和最后一个子元素
- 元素height = 0时 （4.3例子）
边距重叠的计算方法：
- 正正负负取最大值
- 负正相加
避免产生边距重叠的方法：
- BFC（block formatting context）
- margin-collapse: unset;
网友评论