对于行高(line-height)的一些理解
刚一开始学习这个特性的时候,总是出一些当时看起来很奇怪的问题。现在决定重新整理一下。毕竟使用css,十行揉在一起凑出效果是一种使用,知道为什么会有这种效果也是一种使用。我们需要做一些测试,所以首先需要了解一下到底哪些DOM元素适合。
那我们第一个问题就来了。
line-height可以应用于哪些元素
* line-height只影响行内元素,并不能直接应用于块级元素。
* line-height 具有可继承性,块级元素的子元素会继承该特性,并且在行内元素上生效。
所以,我们在这里可以只考虑行内元素,包括行内替换元素和行内非替换元素,img和span可以分别作为它们典型的代表。
什么是line-height
对于这个问题一直感觉很困惑。定义上说,line-height就是两个文本行基线之间的距离,难道就是像下图这样子:
但是问题来了,如果我分别给两个元素设置了line-height, 那么哪个line-height是这两个文本行之间的距离? 我写了如下的测试代码:
<div style="width:170px;">
<span style="font-size:16px;line-height:20px;background:red;">I'm the first line</span>
<span style="font-size:16px; line-height:40px;background:green;">I'm the second line</span>
</div>
得到结果如图:
我们可以知道上面一行的行框高度是20px,下面一行是40px。我们就可以算出两行文本基线之间的间距,应该是(20 - 16) / 2 + (40 - 16) / 2 + 16 = 30。 这个数据看起来和两个元素的line-height并没有什么关系。 这便是我当时理解这个概念时走入的误区,实际上,line-height指的是在同一个元素中,两个文本行基线间的距离。如下图所示:
只怪我反应太慢。所以,当我明白这个事情以后,就不对它到底是什么耿耿于怀了。开始关注于它的作用,它是怎样影响行内框的高度,进而影响整行的行框的高度的。
与height的关系
类似于span的行内非替换元素,我们知道它们的高度并不能通过height直接设置,但是可以由line-height来改变。
类似于input,img的行内非替换元素,在line-height的设置上和块级元素类似,line-height在自身上并没有起作用,但是可以应用到子元素上。它们的行内框的高度就是它们内容区的高度,是可以通过height来设置的。
总之呢,这两个css属性并没有什么关系。
line-height与height相等,为什么会使文字居中
这大概是大家会经常遇到的一个问题,大概也是单行文字居中的惯用手段。我思考了一下原因,并且做了一些测试:
<span style="height: 40px;line-height:40px;background:red;display: inline-block;">I'm the first line</span>
显示如下:
我去掉line-height属性,显示如下:
原因是这样的。文本是属于textNode,它也是一个DOM元素。当外层元素设了line-height之后,它自然继承过来,就像我们上文中说过的一样,显示在中央,是因为文字自然的落在了textNode的基线上面。
理解了上面所说的这些,我们就能理解为什么有时候设line-height和height相等不起作用了。如下图代码:
<span style="height: 40px;line-height:40px;background:red;display: inline-block;padding: 3px;box-sizing:border-box;">I'm the first line</span>
结果如下图所示:
我加了padding和border-box,也就是说外层的span的内容区域缩小了,但是里面的textNode并没有什么变化。
好了,感觉总算是弄明白了一个事情。看上去它也不是如狼似虎。
地址:http://www.html-js.com/article/3465
转自:nanshan231--前端乱炖
对于行高(line-height)的一些理解的更多相关文章
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- CSS行高line-height的一些深入理解及应用
一.一些字面意思. “行高”大约是指:一行文字的高度.具体来说是指两行文字间基线之间的距离.基线是在英文字母中用到的一个概念,我们刚学英语使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a ...
- 【转】css行高line-height的一些深入理解及应用
一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...
- 关于line-height 行高的一些理解和技巧
大家都知道,如何设置文字垂直居中,也就是:设置line-height 和 外围盒子的高度height一致: 其实这里有个地方,是多余的,也就是height,设不设置都居中: 那么,行高是生产高度的? ...
- css中line-height行高的深入学习
之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...
- iOS开发tips-UITableView、UICollectionView行高/尺寸自适应
UITableView 我们都知道UITableView从iOS 8开始实现行高的自适应相对比较简单,首先必须设置estimatedRowHeight给出预估高度,设置rowHeight为UITabl ...
- UITableView、UICollectionView行高/尺寸自适应
UITableView 我们都知道UITableView从iOS 8开始实现行高的自适应相对比较简单,首先必须设置estimatedRowHeight给出预估高度,设置rowHeight为UITabl ...
- css - 行高
css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...
- easyui datagird 解决行高不一致问题!
<style>.datagrid-btable .datagrid-cell {padding: 6px 4px;overflow: hidden;text-overflow: ellip ...
- CSS行高line-height的理解
一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基 ...
随机推荐
- C#中几个经常犯的错误总汇
在我们平常编程中,时间久了有时候会形成一种习惯性的思维方式,形成固有的编程风格,但是有些地方是需要斟酌的,即使是一个很小的错误也可能会导致昂贵的代价,要学会善于总结,从错误中汲取教训,尽量不再犯同样错 ...
- Quartz.net 定时计划使用
新建解决方案和工程Quartz.net 使用Power Shell 命令 Install-Package Quartz 导入Quartz.net程序集 新建一个计划TestJob using Syst ...
- MongoDB学习之--增删改查(1)
本文是对mongodb学习的一点笔记,主要介绍最简单的增删改操作,初学,看着API,有什么错误,希望大家指正:(使用官方驱动) 1.增 增加操作是最简单的,构造bsonDcument插入即可: 方式1 ...
- Asp.net MVC3 中,动态添加filter
Asp.net MVC3 中,动态添加filter filter是attribute,不支持泛型,传入的参数必须是固定的值.总之很受attribute本身的限制. 发现一篇老外的文章,动态设置filt ...
- EL表达式与三目运算符
在页面实现常量替换,比如 entity.auditi 的值如果为0显示不需要否则显示需要 因为需求就这两个值 所以使用三目运算符比较简洁 如果值为很多个 可使用if else进行判断 ${entit ...
- java用正则表达式获取domain
在工作中经常用到获取url的来源和域名的黑白名单功能.前段时间写了一个获取url中域名的方法.但是在测试过程中发现有些小问题. /** * 根据URL获取domain * @param url * @ ...
- spring得到实例和new一个实例,哪个快?
spring配置的bean是默认单例,那么在程序中,得到一个实例一定比创建一个实例的速度快,也更加省资源.今天实际测试的时候发现,new 一个对象比spring得到一个对象快多了.后面自己又加了个单例 ...
- 【2013Esri全球用户大会精彩看点】ArcGIS 10.2移动产品新特性
Ø 全新的应用Explorer for ArcGIS 在2013年第四季度,Esri将发布全新的应用Explorer for ArcGIS,它将联合Collector和Operations Dashb ...
- java基础知识拾遗(三)
1.类加载 bootstrap classloader -引导(也称为原始)类加载器,它负责加载Java的核心类. extension classloader -扩展类加载器,它负责加载JRE的扩展目 ...
- ubuntu下vsftpd配置
网上的文章好难懂啊..只想要简单粗暴,弄好能用就行啊,复杂的以后研究不行吗...折腾好久,其实弄出来能用不就这么点内容吗... 本文在Ubuntu Server 14.04 amd64系统测试. 安装 ...