文档章节

css 里的行高

waynehu
 waynehu
发布于 2015/08/25 16:46
字数 689
阅读 115
收藏 4

#环境 chrome浏览器

#行高属性

行高属性里有4种:

  1. normal
  2. number
  3. percent
  4. inherit

这里主要讲第三种,percent :line-height: 100%

#一般情况

css文件里有以下定义

p {
    font-size: 18px;
    line-height:100%;
}

html里的内容是:

<p>
    first line<br>
    second line<br>
</p>

行高定义为100%,也就是font-size的100%,计算下来,每行的高度是18px,2行总共高36px

#非一般情况1

首先css文件(增加了span)

p {
    font-size: 18px;
    line-height:100%;
}
span {
    font-size: 66px;
}

html文件(增加了span)

<p>
    first line<br>
    <span>second line</span><br>
</p>

虽然行高还是100%,那第一行的高度还是18px,而第二行的高度就变成了34px
34是如何算出来的?答案是:(2×18+66)/3=34,其中数字2和3是固定搭配,而18和66就是取自当时实际的数字
所以,如果66变为99的时候,第二行的高度还会跟着改大

#非一般情况2

一个是18和66,对应的行高一个是18和34,34-18=16,请记住16这个数字

还是上代码首先css文件(100%变成了200%)

p {
    font-size: 18px;
    line-height:200%;
}
span {
    font-size: 66px;
}

html文件

<p>
    first line<br>
    <span>second line</span><br>
</p>

这个时候行高会怎么变呢?
第一行,由原来的18px的高度翻了个倍,变成了36px,这很好理解
而二行,高度变成了52px,怎么得来的呢?是36+16=52,36就是上面那行的36,而16就是34-18算出来的16
结论就是第二行是不受200%的影响的,他只和默认行高做等差计算

不上代码了,如果把200%改为500%,第一行的行高应该是18×5=90
第2行的高度是90+16=106px

#字体高度

如果在css里定义p下字体的大小是18px(不是字的高度啊)的话,实际上某个字的占用高度大约在20px左右(可以包裹一个span来测量),而这个字又是在18px高的行里,这是会造成行间距为上下各-1px。
关于行间距会根据行高与字高来自动调整,比如css设定line-height:100px;font-size:18px,这时字高大概是在20px左右,行高是100px,上半部分的行距就是在40px左右,下半部分的行距也是40px左右
字体类型的不同,占用的高度也会有差异,同样是font-size:18px的时候,不用的字体,占用的高度也不同,比如simsun字体,占用的高度大概在19px左右,微软雅黑字体占用的高度大概在20左右。

#感谢

此文章因观看CSS深入理解之line-height后而写,感谢张鑫旭,我也喜欢钓鱼,在上海。

© 著作权归作者所有

waynehu
粉丝 34
博文 63
码字总数 34286
作品 0
静安
私信 提问
CSS 行高在各浏览器的区别

单行文字的高度问题,一直是个令人很困扰的问题! 习惯性都是哪里出现问题,哪里解决(padding, margin, line-height, height; 正的、负的等)!在不同浏览器出现不一致的情况,就用不同的H...

cnu2m
2015/12/27
81
0
元素水平居中和垂直居中的几种简单方法

一、如何使元素在水平方向上居中 1. 使用text-align:center。 在父级元素的CSS样式设置text-align:center。把内部嵌套一个div把它当作文本来对待,不过这个方法有时候是不管用的。 2.在需要居...

小陈同学
2014/05/07
139
3
好程序员web前端开发测验之css部分

好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font size="3">  ul {</font></p> <p><font size="3">  MaRGin:......

好程序员IT
04/23
1
0
Web前端 个人笔记(未完待续...)

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 如:一个text文本框,选中之后(获得焦点)在ie下面是正常显示而在谷歌等浏览器上有一个虚线框,很明...

ForingY
2015/07/24
33
0
[转][译] 深入 CSS 行高

Line Height (中文版) View morepresentations frombigCat Mao. 一个简单的, step-by-step 关于 CSS 行高的演示文档, 涵盖行间距, 如何应用各种类型的行高值, 当然还有 inline box 模型介绍,...

Jacky.Wang
2011/03/03
781
1

没有更多内容

加载失败,请刷新页面

加载更多

Java FOR-EACH循环

FOR-EACH循环使得代码更加的简短,也让代码更加易懂,其实他并没有加入什么新的功能。他的功能完全可以用简单的FOR循环代替。 for-each的用法: int a[] = {1,2,3,4,5,6} for(int s:a){ Syst...

无名氏的程序员
8分钟前
1
0
使用HTML5的History API

本文转载于:专业的前端网站➣使用HTML5的History API   HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代...

前端老手
10分钟前
2
0
JAVA 编写redisUtils工具类,防止高并发获取缓存出现并发问题

import lombok.extern.slf4j.Slf4j;import org.springframework.data.redis.core.BoundHashOperations;import org.springframework.data.redis.core.BoundValueOperations;import org.......

huangkejie
51分钟前
7
0
JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
今天
98
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部