你的位置:首页 > 网页设计

[网页设计]块级元素视觉格式化


目录
[1]水平格式化 [2]垂直格式化

前面的话

  水平和垂直两个方向的视觉格式化处理方式不同

 

水平格式化

  水平格式化的7大属性是margin-left、border-left、padding-left、width、padding-right、border-right、margin-right7个属性的值加在一起必须是元素包含块的宽度,这往往是块元素的父元素的width值(因为块级元素的父级元素几乎都是块级元素)

  在水平格式化的7个属性中只有margin-left、width、margin-right三个属性可以设置为auto,其余属性必须设置为特定的值,或者默认宽度为0

  auto值是用来弥补实际值与所需总和的差距

【0个auto】

  若margin-left/width/margin-right三个属性都设置为非auto的某个值,这种情况叫做格式化属性过分受限。这样margin-right将被重置为auto

【1个auto】

  若只有一个值为auto,则根据7个水平属性的总结等于父级width的公式,计算出auto代表的值

【2个auto】

  若margin-left和margin-right为auto,则元素将在父元素中居中显示

  若margin-left和width为auto,则margin-left将被重置为0

  若margin-right和width为auto,则margin-right将被重置为0

【3个auto】

  若三个值都为auto,则margin-left和margin-right都被重置为0

<关于水平auto的演示>

替换元素

  前面介绍的是正常文本流中非替换块级元素的水平格式化,而替换块级元素管理起来则更简单一些。非替换块元素的所有规则同样适用于替换块元素,只有一个例外:如果width是auto,元素的宽度则是内容的固有宽度

  [注意]需要将display设置为block

 

垂直格式化

  类似于水平格式化,块级元素的垂直格式化也有自己一系列有意思的行为。一个元素的默认高度由其内容决定,高度还会受内容宽度的影响,段落越窄,相应地就会越高,以便容纳其中所有的内联内容

  与水平格式化的情况一样,垂直格式化也有7个相关属性:margin-top/border-top/padding-top/height/padding-bottom/border-bottom/margin-bottom

  这7个属性的值必须等于元素包含块的height

  只有margin-top/height/margin-bottom三个属性可以设置为auto

  如果正常流中一个块元素的margin-top/margin-bottom设置为auto,它会自动计算为0

    [注意]对于定位元素的上下外边距的auto处理,则有所不同

  如果没有显式声明包含块的height,则百分数高度会重置为auto

  在最简单情况下,如果块级正常流元素设置为height:auto,显示时其高度将恰好足以包含其内联内容的行盒

<关于垂直auto的演示>