《精彩绝伦的CSS》——提示（二）无单位的行高值

二、无单位的行高值

行高值即可接受无单位的数值，也可使用带单位的行高值——尽管一般情况下不推荐这么做

那么怎么区别这两者的关系呢？

当一个元素定义了有单位的行高值，例如1em或者100%时，就会将计算后的行高值传给全部的后代元素，不只是子元素（但如果后代元素设置了行高值就另当别论了）。

若设置的是无单位的行高值，例如：1时，那么传给后代的就是这个“换算系数”（比如一个乘数），而不是计算后的值。

废话不多说，show the code！

页面部分：

<ul class="withem">This list has a line-height of 1em.<li>I'm a list item with <small>small text</small>.</li><li>I'm a list item with <small>small text</small>.</li><li>I'm a list item with <small>small text</small>.</li><li>I'm a list item with <small>small text</small>.</li>
</ul>
<ul>This list has a line-height of 1.<li>I'm a list item with <small>small text</small>.</li><li>I'm a list item with <small>small text</small>.</li><li>I'm a list item with <small>small text</small>.</li><li>I'm a list item with <small>small text</small>.</li>
</ul>

样式部分：

.withem{font-size: 15px;line-height: 1em;}
ul{font-size: 15px;line-height: 1;}
li{font-size: 10px;}
small{font-size: 80%;}

最后结果：

可以看出设置了行高单位的ul下后代元素行高均为ul的行高，而没有设置单位的ul下行高为自适应！

《精彩绝伦的CSS》——提示（二）无单位的行高值相关推荐

《精彩绝伦的CSS》——选择器（一）简写属性值
四.简写属性值属性值的简写在使用时很方便,但如果省略了部分关键属性时,缺失部分则会使用该属性的默认值.
《精彩绝伦的CSS[(美)Eric A. Meyer] 》最新
介绍: <精彩绝伦的CSS>是国际知名CSS 大师写就的实用教程,分为3 部分.第一部分介绍了CSS 基础知识,对一些常用工具和基本技术进行了介绍,包括CSS 选择器等.第二部分展示了各种 ...
精彩绝伦的CSS.pdf
下载地址:网盘下载内容简介 · · · · · · 内容简介: 打造现代布局的专业技术本书远非只是介绍基础知识,它不仅全面细致地讲解布局与效果,而且展望了HTML5和CSS3的未来.业内很少有人 ...
《精彩绝伦的CSS》图书试读样章
[img]http://www.ituring.com.cn/bookcover/924.391.jpg[/img] ----------------------------------------- ...
《精彩绝伦的CSS》读书笔记（二）
3.2 大多数允许使用多个关键字的CSS属性都允许以任何顺序书写关键字,但font属性是很少见的例外之一. font: <font-size> <font-family>;这连 ...
【CSS】行高、边框、外边距、内边距
一.行高line-height 1.概念 2.作用 3. 影响行高因素 4. 单位二.边框border 1.属性 2.联写 3.扩展三.内边距/内填充(padding) 1.概念 2. 联写 3. ...
CSS 行高与行对齐精解：line-height 和 vertical-align （图文）
7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语法 line-height属性的具体定义列表如下: 语 ...
css行高line-height的用法
一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比 ...
深入理解css基线与行高
一.基本概念 1.基线.底线.顶线.中线注意:基线(base line)并不是汉字文字的下端沿,而是英文字母"x"的下端沿. 2.内容区内容区是指底线和顶线包裹的区域(行内元素 ...

《精彩绝伦的CSS》——提示（二）无单位的行高值

《精彩绝伦的CSS》——提示（二）无单位的行高值相关推荐

最新文章

热门文章