width、height、margin、left、right、top、bottom的auto行为表现

声明：只讨论元素在块格式化上下文和内联格式化上下文中的行为表现

提出几个问题

width:auto和width:100%有什么区别？

margin:auto什么条件下可以水平垂直居中？为什么可以居中？

width为auto时的浮动元素的宽度是多少？

height: auto的高度是多少？如何计算获得的？

text-align: center是相对于哪个宽度进行水平居中的？

line-height为什么可以使文字垂直居中？真的垂直居中了吗？

图片下方为什么会有一个空隙？

块格式化上下文中的概念

块级盒子（外部表现，block、list-item、table）

块容器盒子（内部表现，block、list-item、inline-block、table-cell）

块盒（既是块级盒子又是块容器盒子）

匿名块盒（如果块容器盒子内部有一个块级盒子，则强制其内部只能有块级盒子）

内联格式化上下文中的概念

内联级盒子（inline、inline-table、inline-block等）

内联盒子（内联级盒子，同时其内容参与到包含它的内联格式化上下文中，inline）

元内联盒子（不是内联盒子的内联级盒子，inline-block等)

匿名内联盒子（任何直接包含在块容器元素内（不在内联元素内）的文本必须作为匿名内联元素对待）

格式化上下文

一些规则，决定元素在这个上下文范围内如何布局、定位等

常见的格式化上下文有：块格式化上下文、内联格式化上下文、flex格式化上下文

块格式化上下文

布局与定位规则：

正常流中，块格式化上下文中的元素垂直放置

浮动

绝对定位

生成块格式化上下文：

根元素

浮动

绝对定位

不是块盒的块容器元素overflow不是visible的块盒元素

内联格式化上下文

布局与定位规则：

正常流中，内联格式化上下文中的元素水平流动

浮动

绝对定位

生成内联格式化上下文：

不包含块级盒子的块容器盒子

水平方向的auto值

width、marin-left、margin-right、left、right

分为八种情况:

内联非替换元素

内联替换元素

正常流中的块级非替换元素

正常流中的块级替换元素

浮动非替换元素

浮动替换元素

绝对定位非替换元素

绝对定位替换元素

正常流中的块级非替换元素

一个块级元素在水平方向永远满足这个公式：

包含块的宽度 = margin-left + border-left + padding-left + width + passing-right + border-right + margin-right

如果width为auto，则任何为auto的margin-left或margin-right都是0，然后再满足公式l如果width不为auto，并且margin-left和margin-right同时为auto，则以两者相等来计算公式，如果不同时为auto，则其auto视为0

垂直方向的auto值

height、margin-top、margin-bottom、top、bottom

分为八种情况:

内联非替换元素

内联替换元素，正常流内的块级替换元素，正常流内的'inline-block'替换元素和浮动替换元素

在正常流中，当'overflow'计算值为'visible'时的块级非替换元素

绝对定位非替换元素

绝对定位的替换元素

其他情况