css基础之line-height
? ? 什么是line-height(行高)?line-height设置1.5和150%有什么区别?这是一个比较常见的css面试题,带着这个问题往下看。所谓行高是指一段文字中某一行的高度吗?具体来说不是。w3school是这样定义的: ? ? line-height 属性设置行间的距离(行高),该属性会影响行框的布局,在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。 ? ? 何为基线?基线不是汉字的底端,从英文字母来看,字母a、b、c的底端就是基线所在位置,文字默认垂直对齐方式就是基线与基线对齐(baseline),下面图中的蓝色线就是基线。 ? ?? ? ? 那么基线与基线之间的高度就称为行高line-height。注意:块级元素才有行高。 ? ?? ? ? line-height有5个可能的值,分别是normal、number、length、%、inherit。一一介绍:
? ? 如果文字不够直观,不如看看下面的demo:?
line-height
<span style="color: #0000ff;">< <span style="color: #800000;">style <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/css"<span style="color: #0000ff;">><span style="background-color: #f5f5f5; color: #800000;">p<span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">font-size<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 20px<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #ff0000;"> width<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;">200px<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #000000;">}<span style="background-color: #f5f5f5; color: #800000;"> p.c1<span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">line-height<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> normal<span style="background-color: #f5f5f5; color: #000000;">} <span style="background-color: #f5f5f5; color: #008000;">/<span style="background-color: #f5f5f5; color: #008000;">line-height: 24px chrome下。line-height为font-size的1.2倍<span style="background-color: #f5f5f5; color: #008000;">/<span style="background-color: #f5f5f5; color: #800000;"> p.c2<span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">line-height<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 1.5<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #000000;">} <span style="background-color: #f5f5f5; color: #008000;">/<span style="background-color: #f5f5f5; color: #008000;">line-height = 201.5 = 30px<span style="background-color: #f5f5f5; color: #008000;">/<span style="background-color: #f5f5f5; color: #800000;"> p.c3<span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">line-height<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 30px<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #000000;">} <span style="background-color: #f5f5f5; color: #008000;">/<span style="background-color: #f5f5f5; color: #008000;">line-height: 30px<span style="background-color: #f5f5f5; color: #008000;">/<span style="background-color: #f5f5f5; color: #800000;"> p.c4<span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">line-height<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 150%<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #000000;">} <span style="background-color: #f5f5f5; color: #008000;">/<span style="background-color: #f5f5f5; color: #008000;">line-height = 20150% = 30px<span style="background-color: #f5f5f5; color: #008000;">/ <span style="color: #0000ff;"></<span style="color: #800000;">style<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/javascript"<span style="color: #ff0000;"> src<span style="color: #0000ff;">="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"<span style="color: #0000ff;">></<span style="color: #800000;">script<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">head<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">body<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">p <span style="color: #ff0000;">class<span style="color: #0000ff;">="c1"<span style="color: #0000ff;">>line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。<span style="color: #0000ff;"></<span style="color: #800000;">p<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/javascript"<span style="color: #0000ff;">><span style="background-color: #f5f5f5; color: #000000;"> $(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">p<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">).each(<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(){ <span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">> ? ? ? ?你会发现,当line-height设置成1.5和150%的效果是一样的。那么行高设置为一个缩放因子和一个百分比的区别在哪里?区别就在于继承上,当元素A的行高设置为缩放因子时,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
<span style="color: #0000ff;">< <span style="color: #800000;">style <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/css"<span style="color: #0000ff;">><span style="background-color: #f5f5f5; color: #800000;">.c1<span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">font-size<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 14px<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #ff0000;"> line-height<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 1.5<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #ff0000;"> width<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 200px<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #000000;">}<span style="background-color: #f5f5f5; color: #800000;"> .c2<span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">font-size<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 28px<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #000000;">}<span style="background-color: #f5f5f5; color: #800000;"> .c3<span style="background-color: #f5f5f5; color: #000000;">{<span style="background-color: #f5f5f5; color: #ff0000;">font-size<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 14px<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #ff0000;"> line-height<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 150%<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #ff0000;"> width<span style="background-color: #f5f5f5; color: #000000;">:<span style="background-color: #f5f5f5; color: #0000ff;"> 200px<span style="background-color: #f5f5f5; color: #000000;">;<span style="background-color: #f5f5f5; color: #000000;">}<span style="background-color: #f5f5f5; color: #800000;"> <span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="c1"<span style="color: #0000ff;">><span style="color: #000000;">line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。 <span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">> ? ? 因此,为了避免这种情况发生,建议将行高设置缩放因子,避免使用百分比或具体值。 ? 本文地址http://www.cnblogs.com/wangmeijian/p/4222908.html by 王美建 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |