欢迎光临
我的个人博客网站

深入理解line-height和vertical-align


行高(line-height)🔒

line-height 属性是指文本行基线之间的距离,用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。

行高 line-height  实际上只影响行内元素和其他行内内容,而不会直接影响块级元素,也可以为一个块级元素设置line-height,但这个值只是应用到块级元素的内联内容时才会有影响。

在这里先列举几个概念:

   ◾ 行高:一行文字的最小高度

   ◾ 行间距:两行文字之间的距离(也就是文字上边和下边的留白部分)

   ◾ 半行间距:1/2行间距

计算行高:

   ◾ 行高 = 字体大小 + 行间距

   ◾ 行高 = 行高倍数字 * 字体大小(倍数值与字体大小相乘必须为整数)

这里直接上图,便于理解什么是行高😁

深入理解line-height和vertical-align

设置文字在盒子中垂直居中,只需要将line-height的值设置为盒子高度~

语法:

p{   line-height: normal;/* 不设置行高 */   line-height: 3.5;/*值为数值*/   line-height: 5em;/*长度*/   line-height: 34%;/*值为百分比*/ }

  • normal:取决于客户端,桌面浏览器(包括Firefox)使用默认值,约为1.2,这取决于元素的 font-family 
  • 数值: 是这个无单位数字乘以该元素的字体大小(大多数情况下,这是设置line-height推荐方法,不会在继承时产生不确定的结果。)
  • 长度: 以 em 为单位的值可能会产生不确定的结果
  • 百分比: 与元素自身的字体大小有关。 计算值是给定的百分比值乘以元素计算出的字体大小(百分比值可能会带来不确定的结果)

细心地小伙伴已经发现,在上面我提到设置line-height时推荐使用无单位数值!!

为什么推荐无单位数值?

直接上示例,一看就明白了~

<div class="box green">     <h1>Avoid unexpected results by using unitless line-height.</h1>     length and percentage line-heights have poor inheritance behavior ... </div>  <div class="box red">     <h1>Avoid unexpected results by using unitless line-height.</h1>     length and percentage line-heights have poor inheritance behavior ... </div>

.green {     line-height: 1.1;     border: solid limegreen; }  .red {     line-height: 1.1em;     border: solid red; }  h1 {     font-size: 30px; }  .box {     width: 18em;     display: inline-block;     vertical-align: top;     font-size: 15px; }

效果如下:

深入理解line-height和vertical-align

 如果文字的大小要随页面的缩放而变化,请使用无单位的值,以确保行高也会等比例缩放。

基线对齐(vartical-align)🔑

vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

vertical-align属性应用场景

◾ (1)使行内元素盒模型与其行内元素容器垂直对齐。例如,用于垂直对齐一行文本内的图片

深入理解line-height和vertical-align

◾ (2)垂直对齐表格单元内容

深入理解line-height和vertical-align

注意:vertical-align 只对行内元素、表格单元格元素生效:不能用它垂直对齐块级元素!

取值:

  • vartical-align:top 文字顶部对齐(包括半行间距)

  • vartical-align:text-top 文字顶部对齐

  • vartical-align:baseline 默认对齐方式

  • vartical-align:text-bottom 文字底部对齐

  • vartical-align:bottom 文字底部对齐(包括半行间距)

  • vertical-align:sub 使元素的基线与父元素的下标基线对齐

  • vertical-align:super 使元素的基线与父元素的上标基线对齐

  • vertical-align:middle 使元素的中部与父元素的基线加上父元素x-height(译注:x高度)的一半对齐

  • vertical-align:(+-n)px 元素相对于基线上下偏移npx

  • vertical-align:x% 相对于元素的line-height值

  • vertical-align::inherit 从父元素继承vertical-align属性的值

通过下面这两张图可以更好地理解各个属性值的具体含义!

深入理解line-height和vertical-align  深入理解line-height和vertical-align

另外,当在表格中使用基线对齐时:

baseline (以及 subsupertext-toptext-bottom<length><percentage>)
使单元格的基线,与该行中所有以基线对齐的其它单元格的基线对齐。
top:
使单元格内边距的上边缘与该行顶部对齐。
middle:
使单元格内边距盒模型在该行内居中对齐。
bottom:
使单元格内边距的下边缘与该行底部对齐。

注意:可以是负数。

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 深入理解line-height和vertical-align
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏