line-height用法总结

Line-height是前端用语,经常被前端开发人员经常使用.

line-height设置1.5和150%有什么区别?这是一个比较常见的前端面试题.

 

定义:

       line-height指的是文本行基线间的距离(文字尺寸和行距之间的和). 但是文本之间的空白距离不仅仅是行高决定的,同时也受字号的影响.

基线:

基线(baseline),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下端沿,同时还有文字的顶线(Top line),中线(Middle line)和底线(Bottom line),用以确定文字行的位置.行高与字体尺寸的差称为行距(leading),也就是说行高是指文字尺寸与行距之间的和.



    
        Test
         
        
    
    
        
中文English English中文

顶线、中线、基线、底线:

 

      从上到下四条线分别是顶线、中线、基线、底线,很像才学英语字母时的四线三格,我们知道vertical-align属性中有top、middle、baseline、bottom,就是和这四条线相关.

尤其记得基线不是最下面的线,最下面的是底线.

行高、行距与半行距

     行高是指上下文本基线间的垂直距离,即图中两条红线间垂直距离.

     行距是指一行底线到下一行顶线的垂直距离,即第一行粉线和第二行绿线间的垂直距离.

     半行距是行距的一半,及区域3垂直距离/2,区域1、2、3、4的距离之和为行高,而区域1、2、4距离之和为字体size,所以行半距也可以这么算: (行高-字体size)/2.

 

内容区、行内距、行框:

内容区:底线和顶线包裹的区域,即下图深灰色背景区域.

 

行内框,每个行内元素会生成一个行内框,行内框是一个浏览器渲染模型中的一个概念,无法显示出来,在没有其他因素影响的时候(padding),行内框等于内容区域,而设定行高时行内框高度不变,半行距【(行高-字体size)/2】分别增加/减少到内容区域的上下两边(深蓝色区域)

行框(line box),行框是指本行的一个虚拟的矩形框,是浏览器渲染模式中的一个概念,并没有实际显示.行框高度等于本行内所有元素中行内框最大的值(以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐,最终计算行框的高度),当有多行内容时,每行都会有自己的行框.

中文English 中文English English中文 English中文

 

 

值:

line-height有5个可能的值,分别是normal,number,length,%,inherit.

    normal:默认.设置合理的行间距.

    number:设置数字,此数字会与当前的字体尺寸相乘来设置间距.(line-height:1.5;)

    length:设置固定的行间距.(line-height:18px;)

    %:基于当前字体尺寸的百分比行间距.(line-height:150%;)

    inherit:规定应该从父元素继承line-height属性的值.



  
  
  line-height






    

line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.

line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.

line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.

line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.

line-height设置1.5和150%有什么区别?

你会发现,当line-height设置成1.5和150%的效果是一样的.那么行高设置为一个缩放因子和一个百分比的区别在哪里?区别就在于继承上,当元素A的行高设置为缩放因子时,元素的子元素B会继承这个缩放因子并将缩放因子乘以B的font-size得到B元素的行高;当元素A的行高设置为百分比时,元素A的子元素B的行高直接继承A元素计算后的行高.

    例如有两个元素A和B,元素B是元素A的子元素:

    父元素A设置行高为缩放因子时

    元素A font-size:14px; line-height:1.5;   计算后行高为14*1.5 = 21px;

    元素B font-size:28px;  line-height:1.5 (继承来的); 计算后行高为28*1.5 = 42px;

 

    父元素A设置行高为百分比时

    元素A font-size:14px; line-height:150%;   计算后行高为14*150% = 21px;

   元素B font-size:28px;  直接继承父元素A的行高计算值21px,此时B的行高比font-size还小,就会导致B元素内的文字上下重叠.



  
  
  line-height





line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.

line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.

line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.

line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框.

因此,为了避免这种情况发生,建议将行高设置缩放因子,避免使用百分比或具体值.

div文字垂直居中:

   div居中对齐一直是个难题,水平还好解决,margin:0 auto;

   IE下text-align:center;但是垂直居中就没那么简单了,默认是这个样子的.

This is a test.
This is a test.

效果如下:

我们可以利用line-block这样做,

This is a test.
This is a test.

单行就比较简单了,把line-height设置为box的大小就可以实现单行文字垂直居中.

This is a test.

元素对行高的影响:

行框高度是行内最高的行内框高度,通过line-height调整,内容区行高与字体尺寸有关,padding不对行高造成影响。

This is a test
This is a test

第二个span虽然因为padding原因内容区变大,当行高并未改变.

 1 doctype html>
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>title> 
 6 head>
 7 <body>
 8 1.div文字垂直居中:    
 9 <div style="width:150px;height:100px;background-color:#ccc;">
10    <span>This is a test.<br/>This is a test.span>
11 div>
12 <br><br>
13 2.单行div文字垂直居中:
14 <div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0">
15    <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/>This is a test.span>
16 div>
17 <br><br>
18 3.元素对行高的影响1:
19 <div style="line-height:100px;border:dashed 1px #0e0;">
20      This is a test.
21 div>
22 <br><br>
23 4.元素对行高的影响:
24 <div style="border:dashed 1px #0e0;margin-bottom:30px;">
25      <span style="font-size:14px;background-color:#999;">This is a testspan>
26 div>
27 <div style="border:dashed 1px #0e0;">
28      <span style="font-size:14px;padding:20px;background-color:#999;">This is a testspan>
29 div>
30 
31 
32 body>
33 html>
View Code

 

转载于:https://www.cnblogs.com/liubeimeng/p/4227649.html

你可能感兴趣的:(line-height用法总结)