玩儿前端–CSS垂直的那些事儿_html/css_WEB-ITnose

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2019年10月1日05:29:15 评论 164 views
广告也精彩

看CSS权威指南,觉得有价值的探究,关于行高和垂直对齐

行高

line-height属性是指文本行基线之间的最小距离,而不是字体的大小

  • 首先,基线(baseline)指的是英文四线格的倒数第二条线。

  • 其次,关于font-size,字体大小受font-size形成的em框限制。

  • 最后,在line-height设定时,由line-height决定基线间最小距离。

关于上图

A line box containing some text and elements.

  • 一行文字被放在一个line box里,而line box又由一个或多个inline box(行内框)组成,上图有5个inline box。

  • inline box中的文本内容组成了content area(虚线框所示),content area的大小跟文字大小有关,而决定文字大小的是font-size,因此font-size作用于content area。在未设置line-height的情况下,inline box的高度由content area决定。

  • 而line-height则是作用于inline box高度,line-height为20px;font-size为16px;的情况下,会在content area的上下设定2px的间隔。这样上下两行基线间距离也就增加了4px

  • line box的高度由inline boxs中最高的那一个决定。

  • height设定的是容器的高度,并非line box高度,如果容器高度正好与line box高度相等,那么行文本就在容器内垂直居中了。
    line-height例子

垂直对齐

vertical-align
作用于:行内元素和表单元格
默认值:baseline

  • baseline: 一个元素的基线与其父元素的基线对齐。如果元素没有基线,比如这是一个图像或表单输入元素,或者是其他替换元素??那么该元素的底端与其父元素的基线对齐。

  • bottom: 将元素行内框的底端与行框的底端对齐

  • text-bottom: text-bottom是指行内文本的底端。替换元素或任何其他类型的非文本元素会忽略这个值。要对齐的元素的行内框底端再与父元素content area的底端对齐。

  • middle: 往往(但并不总是)应用于图像。middle往往将元素的垂直中点与父元素基线上方0.25em处的一个点对齐。

  • 百分数: 把元素的基线(或替换元素的底边)相对于父元素的基线升高或降低指定的量(你指定的百分数要计算为该元素line-height的百分数,而不是相对于其父元素的line-height)。

       
        I felt that, if nothing else, I deserved a
        raisefor my efforts.
       span的基线身高9px,继承自父元素的line-height×50%
企鹅博客
  • 本文由 发表于 2019年10月1日05:29:15
  • 转载请务必保留本文链接:https://www.qieseo.com/367406.html
css的一些小技巧!页面视觉差!_html/css_WEB-ITnose html教程

css的一些小技巧!页面视觉差!_html/css_WEB-ITnose

相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎。 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括。这导致了一个很好的光学效应,使参观者的注意。 在网页设计中,为了实现这...

发表评论