文档章节

关于line-height单位和line-height的继承

JayeCoder
 JayeCoder
发布于 2016/04/28 21:37
字数 404
阅读 49
收藏 0

在阅读bootstrap3源码的时候看到这样一段,

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

其中让我不能理解是为何line-height没有单位。随后在网上查询资料,发现line-height继承的一个有趣现象。在进行文字排版的时候,有时候为了保持一定的行间距,就将line-height按比例设置的比font-size 大。比如有以下代码:

<div style="font-size: 14px;width: 300px;line-height: 150%;border: 1px solid;">
  我是父Div,我是父Div,我是父Div,我是父Div,我是父Div,我是父Div我是父Div,我是父Div,我是父Div
  我是父Div,我是父Div,我是父Div,我是父Div,我是父Div,我是父Div我是父Div,我是父Div,我是父Div
  <div style="font-size: 30px;width: 200px;border: 1px solid;">
  这是一个line-height百分比的测试
  </div>
</div>

对于父DIV,我们应当知道line-height的真实值为14*150%=21px,而由于line-height是会继承的,那么子div的line-height值是多少呢,不是30*150%,而是21px。

而如果我们换成没有单位的写法:

<div style="font-size: 14px;width: 300px;line-height: 1.5;border: 1px solid;">
  我是父Div,我是父Div,我是父Div,我是父Div,我是父Div,我是父Div我是父Div,我是父Div,我是父Div
  我是父Div,我是父Div,我是父Div,我是父Div,我是父Div,我是父Div我是父Div,我是父Div,我是父Div
  <div style="font-size: 30px;width: 200px;border: 1px solid;">
  这是一个line-height没有单位的测试
  </div>
</div>

子DIV的line-heigt就变成了我们想要的45px

© 著作权归作者所有

JayeCoder
粉丝 0
博文 3
码字总数 950
作品 0
苏州
高级程序员
私信 提问
深入理解line

什么是行间距? 古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。 行间距,即传说中控制两行文字垂直距离的东东。在CSS中,line-height被用来控制行与行之间垂直距...

刘元兴
2017/05/18
0
0
CSS进阶(7)—— 内联元素的掌管者line-height和vertical-align(上)

在CSS世界中,块级元素一般负责结构,而内联元素则负责文字内容,而CSS设计的初衷就是面向图文混合排版,因此内联元素在CSS世界中有着非常重要的地位。由于本章内容较多,因此特分为上下两章...

闲人王昱珩
06/14
0
0
line-height 取值方式

line-height 取值方式 相信很多前端er都使用过 line-height 来设置行高布局。下面看看官方定义: On block level elements, the line-height property specifies the minimum height of line...

acrens
2017/03/13
0
0
css行高line-height的一些深入理解及应用

二、一些字面意思 “行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底...

manlianman
2013/10/22
0
0
【前端Talkking】CSS系列——CSS深入理解之line-height

1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高的理解,今天发布出来,大家...

micstone
2018/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

左边竖条的实现方法

下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签是一个 div : 1 < div > div> 定义如下通用CSS: 1 2 3 4 5 6 div{ position : relative ; width : 200px ; height ...

前端老手
21分钟前
2
0
java利用ECHARTS.JS在前台显示图表

步骤1: (1)在java后台,使用MSQL分组函数,列出所有线在对应的点的值, (2)组成的Map如图所示: 注意: key为0的value表示X轴需要的数据;key为其他的值表示图表线条的名字,value为x轴的点对应的y...

文文1
24分钟前
6
0
解题博客

https://blog.csdn.net/hk2291976/article/category/9265848

素雷
49分钟前
4
0
linux-ubuntu下使用linuxdeployqt+appimagetool将qt程序打包成xxx.AppImage文件

下文中提及的inuxdeployqt patchelf appimagetool工具及示例下载地址: 链接: https://pan.baidu.com/s/1BGm_btMIe75uW9hOC09Xlg 提取码: 7ayh 需要创建目录及文件 xxx.AppDir xxx.AppDir/Ap...

shzwork
53分钟前
5
0
javascript-ASCII码混合四位随机验证码

// 产生一个随机字符库:数字大写小写的数量是对应的 function randomStr(){ // 产生库 var strData = ""; for(var i=0;i<4;i++){ var num = random(0,9); var az = String.fromCharCode(ra......

ACKo
54分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部