[学习记录][css]基本视觉格式化

基本框

元素框

外边距

边框

内边距

内容区

包含框

最近的块级祖先框、表单元格和行内块祖先框的内容边界构成

块级元素

width：做内边界到右内边界

height：上内边界到小内边界

水平格式化

元素框宽度：可见元素框（width+padding）+外边距（margin）

水平属性

margin-left（auto）

border-left

padding-left

width（auto）

padding-right

border-right

margin-right（auto）

7个属性的值加一起往往是父元素的width

垂直格式化

垂直属性

margin-top（auto）

border-top

padding-top

height（auto）

padding-bottom

border-bottom

margin-bottom（auto）

正常流中如果margin-top或者margin-bottom设置为auto，那么自动计算为0

垂直外边距合并

只应用于外边距，两个上下关系的元素间外边距会合并成外边距最大的那个元素的外边距，互相嵌套的元素，也会合并成外边距最大的元素的那个值

如果元素有边框或者内边距，绝不会合并

行内元素

行布局

行框的生成

非替换元素及不属于后代行内元素的所有文本，line-height，font-size，框的行间距line-height-font-size；替换元素height，margin，padding，border

基线位置及内容区对于基线的位置

vertical-align，垂直偏移量

计算最后的行框高度，基线与最高行内框顶端间的距离加基线与最低行内框底端间的距离

行内格式化

line-height

实际上只影响行内元素和其他行内内容，不影响至少不直接影响块级元素。为块级元素设置line-height，这个值只是应用到块级元素的内联内容时才会有视觉影响。从理论上讲，只有行内元素才可以继承这个行高，然而大多数文本并没有包含在行内元素中。

行内非替换元素

行内框

内容区的高度：font-size，字体框，em框

行内框：（line-height）-（font-size）平分两份分在font-size上下，形成行内框，不论减出来是正是负，其实就是line-height。行内框确定了整个行框的高度，基线与最高行内框顶端间的距离加基线与最低行内框底端间的距离。因为涉及到基线对齐的问题，而基线的位置往往由font-size决定，所以两者共同决定。

垂直对齐

vertical-align

top:元素行内框顶端和包含该元素的行框顶端对齐

bottom:元素行内框底端和包含该元素的行框底端对齐

text-top:元素行内框顶端和父元素的内容区顶端对齐

text-bottom:元素行内框底端和父元素的内容区底端对齐

middle:元素行内框的垂直中点和父元素基线上0.5ex处一点对齐

super:讲元素的内容区和行内框上移，上移距离未指定，因代理不同而不同

sub:与super相同，不过是下移

百分数:元素上移或下移，距离相对于line-height的百分数

baseline:基线对齐，默认值

管理line-height

line-height改变可能导致文本行重叠

line-height相对于元素本身的font-size设置，用em在继承时，可以保证子元素不会继承父元素的计算值，而是继承em值并根据自身font-size计算，在line-height之间传递缩放因子

行框的高度取决于组成元素如何对齐，这种对齐一览与基线落在各元素什么位置。

增加框属性

行内元素边框由font-size，padding决定，不会影响行框的生成

外边距不用应用到行内非替换元素的顶端和底部，不影响行框的高度

行内元素作为一行放置，外边距只会出现在其开始和末尾，内边距也出现在边界上

行内替换元素

替换元素的内容、外边距、边框、内边距决定元素的行内框，但是不影响line-height的值。line-height对于替换元素来说，用于确定其摆放位置，因为vertical-align的百分数值相对于line-height计算。

增加框属性

内边距和边框会影响行框，他们作为行内替换元素的行内框的一部分（与行内非替换元素不同）

外边距正值使行框变高，负值使其变低

替换元素和基线

下外边距边界与基线对齐

改变元素显示

display

改变角色

块级：block

行内：inline

行内块元素：inline-block，替换元素

块行元素混合：run-in，使某些块级元素成为下一个元素的行内部分

计算值

浮动元素和绝对定位元素

inline-table->table

none->none

其他->block