css行高line-height的一些深入理解及应用

1. 一些字面意思

“行高”是指两行文字间基线之间的距离。基线是在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线。下图的红色线即为基线

这里写图片描述

2. line-height与line boxes高度

css中起高度作用的应该就是height以及line-height了吧!如果一个标签没有定义height属性(包括百分比高度),那么其最终表现的高度一定是由line-height起作用,即使是IE6下11像素左右默认高度bug也是如此。待我慢慢叙来

先说一个大家都熟知的现象,有一个空的div,
,如果没有设置至少大于1像素高度height值时,该div的高度就是个0。如果该div里面打入了一个空格或是文字,则此div就会有一个高度。那么您思考过没有,为什么div里面有文字后就会有高度呢?

这是个看上去很简单的问题,是理解line-height非常重要的一个问题。可能有人会跟认为是:文字撑开的!文字占据空间,自然将div撑开。我一开始也是这样理解的,但是事实上,深入理解inline模型后,我发现,根本不是文字撑开了div的高度,而是line-height!要证明很简单(如下测试代码):

这里写图片描述

结果是如此的显而易见,test1 div有文字大小,但行高为0,结果div的高度就是个0;test2 div文字大小为0,但是有行高,为20像素,结果div高度就是20像素。这就说明撑开div高度的是line-height不是文字内容

到底这个line-height行高怎么就产生了高度呢?在inline box模型中,有个line boxes,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字,如果它们在一行显示,你艾佛森再牛逼,对不起,只有一个line boxes罩着你;但“春哥纯爷们”这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line boxes,于是总计五个line boxes。line boxes什么特性也没有,就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的

其实line boxes不是直接的生产者,属于中层干部,真正的活儿都是它的手下 – inline boxes干的,这些手下就是文字啦,图片啊,span之类的inline属性的标签啦。line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。

3. 行高的垂直居中性

行高还有一个特性,叫做垂直居中性。line-height的最终表现是通过line boxes实现的,无论line boxes所占据的高度是多少,其占据的空间都与其中的文字内容共用水平中垂线,也就是从水平中垂线开始,在竖直方向上向两边进行的平分,这种行为特性就叫做垂直居中特效

这里写图片描述

这一重要的特性可以用来实现文字或图片的垂直居中对齐

4. 在单行或多行或图片垂直居中实现上的应用

4.1 单行文字的垂直居中对齐

网上都是这么说的,把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的,但其实也是有问题的。问题在于height,看我的表述:“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”,差别在于我把height去掉了,这个height是多余的,您不信您可以自己试试

4.2 多行文字的垂直居中

要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体大小有大有小的情况怎么办呢?方法之一就是借助于line-height,借助其的垂直居中特性

这里写图片描述

line boxes的高度取决于它的下属职员的最高高度,而这个高度由一个不占据任何空间的空格完成,这个空格继承了父元素设置的150px的行高,再将其font-size设置为0。同时,我们在分隔line boxes的基础上,又要保持空格i和文字span在一行上,需要设置display属性为inline-block。最后再加上line boxes的垂直居中特性,导致的span内的文字和i内的空格都是在各自的line boxes内垂直居中,最后的最后因为文字间默认的基线对齐,所以文字和字母是下底边对齐而并没有顶行出现在顶部,正所谓line-height和vertical-align的基友情深

这里写图片描述

这里写图片描述

这里写图片描述

这里修改空格为字符AA,并重置font-size的值,然后设置为居中对齐的效果

5. 行高在文章显示中的应用

一般社交型的网站都会有发博文或写日志的功能,其中发表后的文章显示也是有学问的,其中之一就是line-height行高

首先要知道行高的几种表示方法:px/em,或normal,或百分值,或数值,或inherit继承

在显示文章的box里,px的表示方法首先是要被淘汰的。因为文章里面的文字是有大有小的,使用px定值,由于继承性,无法实现根据文字大小自动调整间距,会出现大号文字重叠的现象。normal也是不行的,一般文章显示最好是650像素的宽度,1.5倍的行距较好。一般浏览器的normal值在1~1.2之间,使用normal必然文字间距过小,阅读吃力。百分值也有继承性,但是有个很搓的办法可以实现文字间距自动适应于文字的大小,那就是使用“”通配符,例如:.article_box {line-height:150%;}就不会出现文字重叠的情况了。网易博客就是使用的这个方法,下图为证

这里写图片描述

为什么说这个方法搓呢,使用“*”通配符大大增加了css的渲染,效率低,而且有更好的方法,就是使用数值。150%虽然和1.5在值上是一样的,但是它们也是有差别的,差别在于继承性,使用百分比会直接根据当前字体尺寸计算line-height的值,然后以px像素为单位继承下去,而1.5则是先继承1.5这个值,遍历到了该标签再去根据字体尺寸计算line-height的像素值。所以同样的效果只需要.article_box{line-height:1.5;}就可以实现了

总结:

1. css中起高度作用的应该就是height以及line-height,当height被设置为0的时候,起作用的就是line-height,而line-height的表现是由内部的line boxes决定的,又因为line boxes什么特性也没有,就只有高度特性。所以一个没有设置height属性的div的高度实际是由一个一个的line boxes的高度堆积而成的

2. line-height还具备的一个垂直居中特性,是指无论line boxes所占据的高度是多少,其占据的空间都与其中的文字内容共用水平中垂线,也就是从水平中垂线开始,在竖直方向上向两边进行平分

3. 借助与line-height的垂直居中特性实现多行文字的居中,首先是设置一个空的内容,将其行高设置的极高(这样就撑开了外部容器的高度)而其余的文字的行高设置一般的高度,这样因为垂直居中特性导致空的内容和文字都处于各自行高的垂直居中位置,最后根据line-height和vertical-align的基友关系,实现middle的居中对齐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406912.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echarts使用大总结

echarts图表x轴数据太多显示不全的问题 问题如图,x轴数据条数过多可能导致x轴显示不全,开始我使用下面方法 xAxis: {type: "category",min: min,max: max,data:time,axisLabel: {interval:num,//interval为x轴两相邻数据之间所包含数据条数&a…

宏定义中##和#的作用

From: http://blog.chinaunix.net/space.php?uid16135252&doblog&id2752917 内核中有很多的宏定义,在宏定义define中经常看到两个字符串##和#,这里把它的用法做一下说明: ##是一个连接符号,用于把参数连在一起 …

我对CSS vertical-align的一些理解与认识(一)

1. vertical-align一大堆乱七八糟的属性 有句俗语叫做“见多不怪”,我估摸着这些top,bottom属性大家都见过,没啥看头,没啥说头。老实讲,我看到这些养臭虫的属性也头疼,所以,忘了他们,我们说点有…

@Repository , @Service , @Controller 和 @Component

用Spring MVC时Controller注解的类将变成一个Spring MVC的控制器. 不用Spring MVC的情况下, 这四个注解没有区别. 根据注解的语义, 注解在类上面可以提高代码的可读性.Repository代表仓库. 一般注解在DAO实现类上, 别人看代码时, 就知道这个类是一个跟数据存储有关的类. Servic…

vue的token刷新处理

前言 以token处理登录的web系统,一般会有两个token:access-token和refresh-token。 node.js中,一般用jsonwebtoken这个模块。 access-token,是用户输入登录的账号密码,后台去db验证然后颁发的,它一般记录…

我对CSS vertical-align的一些理解与认识(二)

1. 我对不同浏览器解析vertical-align属性的理解 在上集中,在最后提供的实例中,vertical-align:middle实际上应该是与后面的文字是独立的,毫无关联,就是说vertical-align无论是什么,都不影响文字在box中的位置&#x…

request_do?send方法

Ruby中 respond_to? 和 send 的用法php?nameRuby" class"t_tag">Ruby中 respond_to? 和 send 的用法[收藏] Ruby中的字符串与符号 如同其他的OO语言一样,在ruby中,通过给对象发送消息,来完成对象的功能,比如…

Vue中token刷新及token过期的实现

总:通过axios,vuex,及自定义的方法实现。 以下是思路: 1.做token刷新必不可少的是,token(请求时的token) / refresh_token(刷新token时用的refresh_token) / resetTime&a…

Source Code Library 源代码收集器

对于程序员来说,收集、整理一些常用的源代码是经常性的工作,但很多时候,随着收集的代码、文档、压缩包的增长,也会产生另一个问题:那就是如何快速找到所需要的内容。 这个问题曾经困扰着我,后来我开始使用&…

VC2010如何给ActiveX添加事件

利用VC开发ActiveX时,需要给控件添加标准事件或自定义事件,在VC6中有多种方法: 一、按Ctrl W 打开类向导->切换到“ActiveX Events"->Add Event...,如图: 二、右…

css动态设置宽高

css 中可以使用 calc() 来动态设置宽高,但是,在表达式中运算符的前后必须要有空格 height:calc(100vh - 80px);

Windows Runtime (RT)

学了sl for wp 开发了1年都没入门,只能说自己的学习欲望太低了。 今天偶然才发现wrt 跟 .net 是2个东西... orz。 得抛弃 sl ,wrt才是未来的主流吧... 这篇文章不错 http://www.dotblogs.com.tw/regionbbs/archive/2011/09/18/introducing.windows.runti…

产业链没有阴谋

IBM将PC甩给联想,是IBM的产业链阴谋吗?上个星期在客户的研讨会上有人这样问我。提问的这位朋友刚刚看过郎咸平的《产业链阴谋》,认为我们之所以处于“6 1”的低端,就是中了跨国公司的诡计,他们想进入高端,…

CSS中height:100%和height:inherit的异同

1. height:100%和height:inherit的异同 1.1 兼容性差异 height:100% IE6 √ height:inherit IE8 √ 1.2 大多数情况作用是一样的 除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由 父容器height: auto&#xff0c…

手机端双击页面放大的问题

制作手机端页面的时候我们都会加入一个meta标签, 该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。 其中 maximum-scale为允许用户的最大缩放值,user-scalable为是否允许用户进行缩放,yes(默认)…

cxxtest单元测试框架源码分析(二):所有对外功能实现分析

CxxTest的大部分诊断功能都是通过宏定义实现的,而且这部分的定义以及所有测试套的基类CxxTest:TestSuite定义和实现都在TestSuite.h和TestSuite.cpp里面。下面我们将通过分析这两个文件来分析CxxTest的对外功能体现。 1 //所有的类以及定义都是在CxxTest名称空间中2…