[转]line-height1.5和line-height:150%的区别
2024-08-27 10:38:53
line-height1.5和line-height:150%的区别
一、区别
区别体现在子元素继承时,如下:
- 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。
- 父元素设置line-height:150%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
二、举例
比如父元素设置属性:font- size:14px;line-height:1.5,child设置font-size:26px;
那么父元素:line-height = 14px * 1.5 = 21px,子元素:line-height = 26px * 1.5 = 39px。
父元素设置属性:font-size:14px;line-height:150%,child设置font-size:26px;
那么父元素:line-height = 14px * 150% = 21px,子元素:line-height = 父元素的line-height = 21px。
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<title></title>
<style type="text/css">
.father {
width: 400px;
border: 1px solid pink;
display: inline-block;
}
.son {
width: 350px;
border: 1px solid green;
}
.father1 {
font-size: 14px;
line-height: 1.5;
}
.son1 {
font-size: 26px;
}
.father2 {
font-size: 14px;
line-height: 150%;
}
.son2 {
font-size: 26px;
}
</style>
</head>
<body>
<div class="father father1">
父元素font-size:14px;line-height:1.5;计算值是21px
<div class="son son1">
子元素font-size:26px;line-height会继承父元素的1.5,计算值是39px
</div>
</div> <div class="father father2">
父元素font-size:14px;line-height:150%;计算值是21px
<div class="son son2">
子元素font-size:26px;line-height=父元素的line-height=21px
</div>
</div>
</body>
</html>
转自:http://www.cnblogs.com/starof/p/4742323.html
最新文章
- JavaScript知识架构学习路径(一)- 变量篇
- C# --System.Timers.Timer 定时方法
- 2、C#基础整理(运算符、数据类型与转换、var关键字)
- Leetcode#146 LRU Cache
- delphi提示错误行号之Assert(断言)
- Summary: How to calculate PI? Based on Monte Carlo method
- (转)js获取url参数值
- Linux进程的状态转换图
- 华为OJ: 公共字符串计算
- SpringMVC框架(二)注解 (转)
- centos yum源配置 与yum配置文件
- angular4.0单个标签不能同时使用ngFor和ngIf
- Windows平台下的内存泄漏检测
- 使用Ext JS,不要使用页面做组件重用,尽量不要做页面跳转
- Visual Studio 2017
- 原 HTML5+规范:barcode(条码扫描)
- ajax请求,函数外无法获取请求的数据问题解决
- UVA1626-Brackets sequence(动态规划基础)
- Java Web之Servlet的三大作用域对象
- JavaScript 把字符串类型转换成日期类型
热门文章
- uva-679 Dropping Balls UVA - 679
- 非递归全排列 python实现
- PAT 1111 Online Map
- SpringMVC demo 小例子,实现简单的登录和注册
- linux学习3-简单磁盘管理
- 从零搭建流媒体服务器+obs推流直播
- 用c++编程:用两个栈实现队列
- 【ACM】hdu_1004_Let the Balloon Rise_201308141026-2
- 【ACM】hdu_2007_平方和与立方和_201307261533
- 洛谷 P3184 [USACO16DEC]Counting Haybales数草垛