关闭

css中line-height的理解_介绍line-height实际应用

时间: 2018-04-08阅读: 1308标签: 居中

一、line-height的定义

css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同。line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块级元素设置了line-height,这个值只会应用到块级元素里面的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度。


二、line-height与行内框盒子模型  

<p>hello world<em>this is em</em></p>

这样一行普通的代码,包含了4种盒子,如下:  

1.“内容区域”(content area)

围绕文字看不见的盒子,内容区域的高度大小只与font-size的大小和font-family有关,在simsun宋体字体下,内容区域高度等于文字大小。  

2.“内联盒子”(inline boxes) 

内联盒子(inline boxes),不会让内容成块显示,而是排成一行。如果外部含inline水平标签,则属于内联盒子;如果是个光秃秃的文字,则属于”匿名内联盒子“。

3.行框盒子(line boxes)

每一行就是一个行框盒子,每一个行框盒子又是由一个个内联盒子组成。  

4.包含盒子(containing box)

由一行行行框盒子组成。  


三、line-height与内联元素的高度机理  

关于内容区域高度:①内容区域高度只与字体以及字号有关,与line-height没有任何关系;②在simsun字体下,内容区域高度等于文字大小值。

行的高度不是由于行高造成的。因为:①行高由于其继承性,影响无处不在,即使单行文本也不例外;②行高这是幕后黑手,高度表现不是行高,而是内容区域和行间距。只不过:行间距 = line-height - font-size

行间距一般是上下均分的。

总结:行高决定内联盒子高度;行间距墙头草,可大可小可负值,保证高度正好等同于行高。


四、line-height的不同属性值

line-height:normal/<number>/<lenght>/<percent>/inherit;

normal:默认属性值。与浏览器和元素字体相关。因此为了让各个浏览器兼容性一致,要初始化line-height。

<number>:使用数值作为行高值。line-height = number * font-size
<lenght>:使用具体长度值作为行高值。em/rem/px/pt
<percent>:使用百分比作为行高值。line-height = percent * font-size

inherit:行高继承。IE8+

问题:line-height:1.5/150%/1.5em的区别

答:计算无差别。1.5所有可继承元素根据font-size重新计算行高;150%/1.5em当前元素根据font-size计算行高,继承给下面的元素。

body全局数值行高使用经验:

匹配20px使用,为了方便心算:line-height = 20px / 14px = 1.42857

由于chrome是19px,所以body{font-size:14px;line-height:1.4286;}


五、line-height实际应用

1、图片水平垂直居中 (ie8+)

.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle}

2、多行文本水平垂直居中(ie8+)  

.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block; line-height: nomal; text-align:left;vertical-align:middle;}

3、用line-height代替height,避免ie6/ie7的haslayout

{height:36px;line-height:36px;}

其实可以直接简写成:  

{line-height:36px;}



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/600

关闭

html 元素垂直水平居中

不定宽高元素水平垂直居中:transform: translate(),flex 布局,利用justify-content和align-items 实现居中,使用table+table-cell实现垂直居中,display:inline-block;或margin: auto;实现水平居中

CSS中实现图片垂直居中

在曾经的 淘宝UED 招聘 中有这样一道题目:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。当然出题并不是随意,而是有其现实的原因

css图片居中,通过纯css实现图片居中的多种实现方法

在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结。

小程序scroll-view点击项自动居中

我们想要的是居中的效果,所以触发滚动的条件是点scroll-view宽度一半之后的项才开始滚动,所以需要减去宽度的一半,offsetLeft为相对于scroll-view总长度的X轴距离,只要相减计算后的数值为正数,就可以证明上面的条件,触发滚动

div元素宽度不定的情况下如何居中显示

方法一:兼容IE67,但是当元素宽度大于50%时,会出现滚动条。外层使用text-align为center是为了让里面的内联元素居中,很显然在外层设置text-align:center后

如何让子元素在父元素中水平垂直居中七种方法?

第一种:定位+margin:auto,注意:兼容性较好,缺点:不支持IE7以下的浏览器.第二种:定位+margin-left+margin-top注意:兼容性好;缺点:必须知道元素的宽高,第三种:定位+transfrom

CSS 不定宽高的垂直水平居中方式总汇

垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法,是的,你没有看错

安卓移动端line-height垂直居中出现偏移的原因,及解决方法

目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的。出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的。

css垂直居中的几种实现方式

相比较水平居中,垂直居中比较复杂点。尤其是在实际页面中,有很多特殊的场景,导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式

css样式——完美解决div水平居中及div水平垂直居中的方法总结

在我们网页开布局中,经常遇到div元素的垂直居中或者水平居中。这篇文章,我总结一下

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!