line-height:150%和line-height:1.5的区别

"%"：是继承父级元素的距离；

"无单位"：是子元素计算各自的行距离

eg：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

font-size:14px;

line-height:150%;

background: black;

}

p{

font-size:26px;

background: gray;

color: white;

}

</style>

</head>

<body>

<p>你好！</p>

</body>

</html>

　效果如图：

1、当line-height:XX%时：

body{font-size:14px;line-height:150%;}

p{font-size:26px;}

结果就是：

body{line-height:21px;}//14*150%=21

p{line-heigt:21px;}//继承父元素

eg:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

font-size:14px;

line-height:1.5;

background: black;

}

p{

font-size:26px;

background: gray;

color: white;

}

</style>

</head>

<body>

<p>你好！</p>

</body>

</html>

　　效果如图：

2、当line-height:X.X时：

body{font-size:14px;line-height:1.5;}

p{font-size:26px;}

结果就是：

body{line-height:21px;}//14*1.5=21

p{line-height:39px;}//26*1.5=39

时间： 2024-12-25 17:29:27

line-height:150%和line-height:1.5的区别的相关文章

jQuery的height()和JavaScript的height总结，js获取屏幕高度

jquery的各种高度首先来说一说$(document)和$(window),如下: $(document).height();//整个网页的高度 $(window).height();//浏览器可视窗口的高度 $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移) 用一句话理解就是:当网页滚动条拉到最低端时, $(document).height() == $(window).height() + $(window).scrollTop(). 注意,

line加人软件|line加粉软件|Line营销机器人2019版

line加人软件,line加粉软件 Line营销机器人2019版 QQ:83892778 全新上线更智能化的Line营销软件隆重登场目前Line正在稳步发展中,而衍生出来更多的商家是必然的,所以趁早进入Line市场是非常有必要的,如果你是希望想拓展你的业务到海外那么Line可是你小刀一试.目前Line市场还处于一个比较早期的时期,这个时候进入会让你接下来的开拓海外市场会容易很多. 我们的Line营销软件也是目前国内最全面的一款,实现了全自动化运作,非常方便省心.不敢说全国是我们最强,但是是服务

style.height、offsetHeight、clientHeight、scrollHeight的区别

style.height 包括元素的滚动条,不包括边框 clientHeight 不包括元素的滚动条和边框 offsetHeight 包括元素的滚动条和边框 scrollHeight offsetHeight+scrollTop 小贴士: 在IE下,创建一个oLi <style> li{/*不设置li的高度*/} </style> <script> var oLi = document.createElement('li'); oLi.innerHTML='我是li的内

How to Get Vertical Line from Point and Line

Description How to get vertical line cross one point which out of line in line. QPoint Line::VerticalPoint(QPoint pt) { QPointF ptCross = pt; double dtY = static_cast<double>(y1() - y2()); double dtX = static_cast<double>(x1() - x2()); double

CSS3学习笔记--line-height:150%与line-height:1.5的真正区别

代码: <div style="line-height:150%;font-size:16px;"> 父元素内容 <div style="font-size:30px;"> Web前端开发<br /> line-height行高问题 </div> </div> 其实区别就在于继承的问题上. 150%是先计算后继承,根据父元素的字体大小计算出行高,并且子元素依然沿用这个计算后的行高:子元素的行高 = 16*1

利用canvas图片剪切

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Jscript/jquery-1.

用CSS控制图片大小显示的方法

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示. 对于标准浏览器(如Chrome/Firefox),或者IE7/8浏览器,直接使用max-width,max-height:或者min-width,min-height的CSS属性即可.如: 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高

html练习（3）

1.这个小练习用到了css的四种选择器id选择器,类选择器,html选择器,通配符选择器. (1)如果一个元素中用到了各种选择器,并且选择器中的属性发生了冲突,则优先级为id选择器>类选择器>html选择器>通配符选择器. (2)如果一个元素中用到了同一种选择器的不同样式,若发生了属性冲突,则以在css文件中后一个定义的属性值为准. 2..用到了未访问的链接,鼠标悬浮的状态,以及已访问的链接的状态. html文件(test3.html): <!DOCTYPE HTML PUBLI

js改变盒子大小(上下左右)分析

js改变盒子大小知识点三个mouse事件:mousedown mousemove mouseup css的定位和cursor 思路先解决单边问题识别范围,得到所选区域 event. 根据距离,判断方向根据方向进行样式的增加减少,注意top和left的变化当然还要增加最小的限制注意识别改变的四个位置得到它们的范围判断改变范围的大小注意改变top和left的边的时候,注意将盒子的left变为this.offsetLeft-(原来的event.clientX减去现在的event.cli

.NET生成漂亮桌面背景

.NET生成漂亮桌面背景一天,我朋友指着某某付费软件对我说,这个东西不错,每天生成一张桌面背景,还能学英语(放置名人名言和翻译)!我说,这东西搞不好我也能做,然后朋友说,"如果你搞出来了,我愿意给你付费$$$$元",然后就有了今天的故事??. 该桌面背景效果如下: 该桌面背景有4个特点: 背景为一张从必应下载的壁纸英文为随机的名人名言,从API获取注意文件下文有阴影,使用Direct2D 英文被翻译成了中文,使用了Azure Cognitive Service 当然还有重要的,需