第七章 基本视觉格式化

第七章 基本视觉格式化

1.基本框
CSS规定：无论是块级元素，还是行内元素，每个元素都可设置一个矩形框。
这个框可设置border padding margin 属性。
关于border：如何未设置颜色，其颜色和content颜色相同。如果border有间隙(如dotted)，
则间隙颜色和content背景色相同。
关于padding：padding颜色也和content背景色相同。

2.包含块
每个元素都相对于其包含块摆放，包含块指的是包含该元素的祖先元素。
对于行内元素，其摆放方式不直接依赖于包含块。

3.块级元素

a.水平格式化
基本规则：块级元素的水平部分总和总等于父元素（一般为块级元素）的width。

1.用CSS设置width时，只是设置了内容宽度，可见宽度应该是width+padding+border+margin。
这些属性的设置会隐式增加可见高度。

2.水平属性：margin-left border-left padding-left width padding-right border-right margin-right
a.它们的总和往往是其父元素的width值
b.它们中只有margin-left width margin-right可以设置为auto，其余值必须是特定值，或默认为0

3.使用auto
a.1个auto：水平部分总和总等于父元素width，如果这3个属性中有任意一个设置为auto，其宽度将自动分配，以满足原则。
b.0个auto：如果这3个值都是显式设置，但水平部分总和小于父元素width，那么marin-right将强制为auto，以满足原则。
c.多个auto：如果margin-left和margin-right都为auto，它们会平分剩余的距离。
           如果width和一个margin为auto，那么设置为auto的margin会为0，剩余部分都分配给width。
           如果3个属性都为auto，那么margin都会设置为0，剩余部分全部分配给width。

3.负外边距
看起来超出了父元素框，实际上也是遵守了水平总和等于父元素width的规则。
如果7个水平属性都显式设置，但大于父元width，会自动将margin-right转化为auto，以得到负值，以满足规则。

4.百分数
使用百分数时，计算基础是父元素width，也同样遵循水平总和等于父元素width的规则。
不过，border的width不能使用百分数，只能是特定长度。
而且，只使用百分数不能创建灵活的布局。

5.替换元素，如img
同样遵循块级元素的规则，不过如果width或height设置成auto，其显示值实际上是其真实值。
如果单设置width或height一个属性，另外一个属性会随着成比例缩放。


b.垂直格式化
height只是定义了content的垂直高度，可见高度还要加上padding border margin。
元素默认高度由其内容决定，内容越多，相应就越高。
当：设置高度>所需高度，多余的高度形成padding-bottom效果
    设置高度<所需高度，overflow为display时显示，否则隐藏。


1.垂直属性
margin-top border-top padding-top height padding-bottom border-bottom margin-bottom
a.同水平属性，这7个值的和需等于父元素height。
b.同水平属性，也是只有3个属性可以设置为auto：margin-top height margin-bottom。
不过，如果margin-top和margin-bottoms设置为auto，其值会默认设置为0

2.百分数
以包含块为基础计算。
垂直居中的唯一办法是，显式设置包含块的height，且margin-top和margin-bottom分别设置为25%
如果包含块height没有显式设置，那么这些百分值会自动设置为auto。

3.合并垂直外边距
在垂直方向，如果有外边距碰撞（无border隔离），就会合并。
都为正数：取较大值得
都为负数：取绝对值较大的
一正一负：取相加值

4.负外边距
如果边距合并后，上下元素发生重叠，文本流后面的元素会覆盖文本流前面的元素。

5.列表元素
列表元素为特殊的块级元素，在元素前有标识（数字或标记），可通过list-style-position属性设置，
改变标记位置：inside outside inherit。默认值是outside。


d.行内元素

1.基本术语
a.匿名文本：所有未包含在行内元素内的字符串，如<p>I'm<em>so</em>happy!</p>中的I'm和happy!。
b.em框：等于font-size，不同字体实际显示可能比em框更高或更低。
c.内容区：元素中各字符串的em框串在一起构成的框，可以由元素字符形状描述的框。
d.行间距：line-height - font-size = 行间距。行间距除以2所得值平均分配给字符顶端和底端。
e.行内框：通过向内容区域增加或减少间距来描述。非替换元素：行内框高度=line-height。
                                              替换元素：行内框高度=内容区域高度。
f.行框：可以包含行内框的最小"边框"。

2.一些有用的概念
a.内容区类似于块级元素的内容框
b.同块级元素，行内元素的背景会应用到内容和边框的间隙。
c.同块级元素，行内元素的边框也要包围所有内边距和边框。
d.非替换元素的内/外边距，边框和内／外边距对行内元素生成的框没有垂直效果。
也就是说，它们不会影响内容区和行框的高度。
e.替换元素的内边距，边框和内／外边距会影响该元素行内框的高度。
相应地，也可能影响包含该替换元素的行框的高度。

3.行框高度的决定过程
a.非替换元素：获取font-size和line-height值，(line-height - font-size)/2所获值分配到em框顶部和底部。
    替换元素：获取height 和垂直方向的margin padding border尺寸相加。
b.非替换元素：确定内容区超出基线大小，对齐文本。
    替换元素：将包括外边距在内的底部对其基线。
c.对于指定了vertical-align的元素，确定垂直偏移量。由此获得“行内框”向下或向上偏移多少，
以改变元素在基线上下超出的距离大小。
d.至此获得行内框位置。基线与行内框最底端的距离 + 基线与行内框最顶端的距离 = 行框高度

4.行内替换元素
line-height对其显示大小无影响，但对其垂直方向对齐有影响。
默认行内替换元素底部与基线对齐，如果增加上下边界或边距，都会使其上下移动，
即，行内替换元素下外边界始终与基线对齐。


e.改变元素显示 display
值：none inline block inline-block list-item run-in....
初始值：inline
使用范围：所有元素
计算值：对于浮动，定位或根元素，计算值可变。否则根据声明显示。
说明：只是改变元素显示方式，对其实质无影响。

1.行内块元素：inline-block CSS2.1新增
使行内元素获得行内替换元素的效果，如img，即外边距底部与基线对齐，内部无行分隔符。
可设置width height，如果比内容高，可使行高增加。