CSS中彻底搞懂盒模型、定位

盒模型与定位

CSS中的盒子模型应该不用多说了，每一个html元素都有一个盒模型，由内而外依次是：margin/border/padding/content，如果元素开启了绝对/相对定位，则最外层还要加上top/right/bottom/left。

没有开启定位的情况

父元素的宽度取决于子元素（子元素的盒子模型在水平方向充满父元素），任何元素都要满足下面的等式：

水平方向：

margin-left + border-left + padding-left + content + padding-right + border-right + margin-right === 父元素的width

水平方向的布局逻辑是：宽度优先，其他靠边（尽量为0）

• 在默认情况下，margin、border、padding 的Intial value全都是0，而width为auto（此时效果等同于width ： 100%），也就是说这些个边距、边框你不设它，它就不会出现。
• 出现了auto，则会调整auto来满足等式。像是width一般就设置为auto
• 当7个值都不为auto，且等式不满足时(也就是过度约束的时候)，强制把margin-right设置为auto来满足等式。
• 一个常用的例子：确定了宽度的元素可以通过margin: 0 auto来使得元素水平居中。

垂直方向：

垂直方向与水平方向正好相反，子元素的宽度取决于父元素（父元素的高度由子元素撑开）。

• 在默认情况下，margin、border、padding 的Intial value全都是0，而width为auto（此时效果等同于width ： 0）

以上解释了一个现象：我们创建了一个空的块元素，它是不会显示出来的，因为虽然它的宽度是父元素的100%，但由于没有指定height，也没有子元素来撑开它，于是height : auto就成了0。

开启了绝对定位的情况

开启了绝对定位之后，情况变得有些不一样了。

水平方向：

left + margin-left + border-left + padding-left + content + padding-right + border-right + margin-right + right === 包含块的width

这里的包含块就是指最近的开启了定位的父元素。

• 在默认情况下，margin、border、padding、width 的Intial value全都是0，而rigth为auto，也就是说，默认情况下，一个空的绝对定位元素是一个宽度为0的，左对齐的元素。
• 出现了auto，则会调整auto来满足等式。
• 当9个值都不为auto，且等式不满足时(也就是过度约束的时候)，强制把right设置为auto来满足等式。

垂直方向：

开启了绝对定位的元素，垂直方向与水平方向的规则保持一致：
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height === 包含块的height

• 在默认情况下，margin、border、padding、height 的Intial value全都是0，而top,right,bottom,left为auto，默认先调整bottom 来满足等式。也就是说，默认情况下，一个空的绝对定位元素是一个高度为0的，顶部对齐的元素。
• 出现了auto，则会调整auto来满足等式。
• 设置为position: absolute的元素已脱离文档流，因此不会将父元素撑开，即使父元素设置了 postion 为 absolute/relative。

小结

综上所述，没有开启绝对定位的时候，元素在normal flow 中，水平方向要遵守等式，默认content 填满父元素； 竖直方向高度被子元素内容撑开，默认高度为0；
开启了绝对定位，元素脱离normal flow，水平方向默认是宽度为0的，左对齐的元素；竖直方向默认是高度为0的，顶部对齐的元素，并且不再撑开父元素高度。