CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)

之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作中开发问题总结相关的内容; 不积跬步，无以至千里, 戒焦戒躁。

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

line-height 三种单位简书

 1. 带有单位的 line-height 会被计算成 px 后继承 。2. 子元素的 line-height = 父元素的 line-height * font-size （如果是 px 了就直接继承）。3. 而不带单位的 line-height 被继承的是倍数，子元素的 line-height = 子元素的 font-size * 继承的倍数 。

1. 第一种设置 line-height 方式: 在需要的元素标签下设置 line-height: XXpx;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> CSS line-height 三种赋值方式的区别 </title>
</head><style>
.w_line-height p {padding: 0;margin: 12px 0;
}
/* 单位: px */
.w_line-height-px {line-height: 80px;
}
.w_line-px {font-size: 32px;/* 我们在这里可以注释掉当前 line-height 设置, 会发现当前元素的 line-height 是父元素设置的 line-height;反之, 当我们在当前元素设置了 line-height 行高, 会覆盖父级元素设置的行高 。*/line-height: 160px;background-color: gold;
}
</style>
<body><div class="w_line-height-px w_line-height"><p class="w_line-px">单位: px === 父级元素设置 font-size: 16px; 时, 当前元素设置 line-height: 20px; 时 的高度为 20px</p></div></div>
</body></html>

2. 第二种设置 line-height 方式: 父级元素设置 font-size: aapx; 时, 当前元素设置 line-height: bbem; 时的高度为 aa * bb = yy px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> CSS line-height 三种赋值方式的区别 </title>
</head><style>
.w_line-height p {padding: 0;margin: 66px 0;
}/* 单位: em */
.w_line-height-em {font-size: 16px;
}
.w_line-em {line-height: 3em;background-color: cornflowerblue;
}</style>
<body><div class="w_line-height-em w_line-height"><p class="w_line-em">单位: em  ===   父级元素设置 font-size: 16px; 时, 当前元素设置 line-height: 3em; 时 的高度为 48px</p></div></div>
</body></html>

3. 第三种设置 line-height 方式: 父级元素设置 line-height: 16; 时, 当前元素设置 font-size: 12px; 时的高度为 10 * 18 = 180 px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> CSS line-height 三种赋值方式的区别 </title>
</head><style>
.w_line-height p {padding: 0;margin: 66px 0;
}
/* 单位: 纯数字 */
.w_line-height-num {line-height: 10;
}
.w_line-num {font-size: 18px;/* line-height: 20px; */background-color: cyan;
}</style>
<body><div class="w_line-height-num w_line-height"><p class="w_line-num">单位: 纯数字  === 父级元素设置 line-height: 16; 时, 当前元素设置 font-size: 12px; 时 的高度为 10 * 18 = 180 px</p></div>
</body></html>

4. 第四种设置 line-height 方式: 父级元素设置 line-height: 500%;(如果浏览器默认 line-height 为 12时计算结果为 5 * 12 ; 如果浏览器默认行高为 16时则计算结果为 5 * 16 ) 时, 当前元素设置 font-size: 24px; 时的高度为 80px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> CSS line-height 三种赋值方式的区别 </title>
</head><style>
.w_line-height p {padding: 0;margin: 66px 0;
}
/* 单位: 百分比 */
.w_line-height-percentage {/* 谷歌浏览器的默认行高是 16px */line-height: 500%;
}
.w_line-percentage {font-size: 24px;background-color: deepskyblue;
}</style>
<body><div class="w_line-height-percentage w_line-height"><p class="w_line-percentage">单位: 百分比  === 父级元素设置 line-height: 500%; 时, 当前元素设置 font-size: 24px; 时 的高度为 80px</p></div>
</body></html>

5. 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> CSS line-height 三种赋值方式的区别 </title>
</head><style>
.w_line-height p {padding: 0;margin: 66px 0;
}/* 单位: px */
.w_line-height-px {line-height: 80px;
}
.w_line-px {font-size: 32px;/* 我们在这里可以注释掉当前 line-height 设置, 会发现当前元素的 line-height 是父元素设置的 line-height;反之, 当我们在当前元素设置了 line-height 行高, 会覆盖父级元素设置的行高 。*/line-height: 160px;background-color: gold;
}/* 单位: em */
.w_line-height-em {font-size: 16px;
}
.w_line-em {line-height: 3em;background-color: cornflowerblue;
}/* 单位: 纯数字 */
.w_line-height-num {line-height: 10;
}
.w_line-num {font-size: 18px;/* line-height: 20px; */background-color: cyan;
}/* 单位: 百分比 */
.w_line-height-percentage {/* 谷歌浏览器的默认行高是 16px */line-height: 500%;
}
.w_line-percentage {font-size: 24px;background-color: deepskyblue;
}</style>
<body><div class="w_line-height-px w_line-height"><p class="w_line-px">单位: px === 父级元素设置 line-height: 80px; 时, 当前元素设置 line-height: 160px; 时 的高度为 20px</p></div><div class="w_line-height-em w_line-height"><p class="w_line-em">单位: em  ===   父级元素设置 font-size: 16px; 时, 当前元素设置 line-height: 3em; 时 的高度为 48px</p></div><div class="w_line-height-num w_line-height"><p class="w_line-num">单位: 纯数字  === 父级元素设置 line-height: 16; 时, 当前元素设置 font-size: 12px; 时 的高度为 10 * 18 = 180 px</p></div><div class="w_line-height-percentage w_line-height"><p class="w_line-percentage">单位: 百分比  === 父级元素设置 line-height: 500%; 时, 当前元素设置 font-size: 24px; 时 的高度为 80px</p></div>
</body></html>

如果对你有所帮助，大家可以点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。

CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)相关推荐

[css] 说下line-height三种赋值方式有何区别？
[css] 说下line-height三种赋值方式有何区别? line-height 可以有带单位及不带单位的写法(感觉其实是两种).div{line-height: 24px;line-height ...
CSS/HTML 如何在网页中添加空格(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
bootstrap的td可以增加title样式_3.CSS样式的三种使用方式
1.内链样式表内联样式,又有人称行内样式.行间样式.内嵌样式.是通过标签的style属性来设置元素的样式,其基本语法格式如下: Title 码海无际 2.嵌入式样式表内嵌式是将CSS代码集中写在H ...
css样式的三种引入方式
第一种:行内式(也称内联) 直接将样式写在标签中,属于权重最高级别例如: 第二种:内部式在head中写上style标签,将想要的样式写在style中,再通过id或class引用第三种:外部式这种 ...
CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式使用style属性引入CSS样式. 示例: <h1 style="color:red;">s ...
JAVA数组的3种赋值方式
基本数据类型数组的3种赋值方式第一种赋值方式 int[] arr = {1,2,3}; 第二种赋值方式 int[] arr2 = new int[]{1,2,3}; 第三种赋值方式 int[] ar ...
CSS 属性 content 有什么作用? 有什么应用?(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
css三种引入方式以及其优先级的说法
css 三种引入方式方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用分号 : ...
006 CSS三种引入方式
CSS三种引入方式一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)

line-height 三种单位简书

1. 第一种设置 line-height 方式: 在需要的元素标签下设置 line-height: XXpx;

2. 第二种设置 line-height 方式: 父级元素设置 font-size: aapx; 时, 当前元素设置 line-height: bbem; 时的高度为 aa * bb = yy px

3. 第三种设置 line-height 方式: 父级元素设置 line-height: 16; 时, 当前元素设置 font-size: 12px; 时的高度为 10 * 18 = 180 px

4. 第四种设置 line-height 方式: 父级元素设置 line-height: 500%;(如果浏览器默认 line-height 为 12时计算结果为 5 * 12 ; 如果浏览器默认行高为 16时则计算结果为 5 * 16 ) 时, 当前元素设置 font-size: 24px; 时的高度为 80px

5. 完整代码

CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)相关推荐

最新文章

热门文章

CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)

line-height 三种单位简书

1. 第一种设置 line-height 方式: 在需要的元素标签下设置 line-height: XXpx;

2. 第二种设置 line-height 方式: 父级元素设置 font-size: aapx; 时, 当前元素设置 line-height: bbem; 时 的高度为 aa * bb = yy px

3. 第三种设置 line-height 方式: 父级元素设置 line-height: 16; 时, 当前元素设置 font-size: 12px; 时 的高度为 10 * 18 = 180 px

4. 第四种设置 line-height 方式: 父级元素设置 line-height: 500%;(如果浏览器默认 line-height 为 12时计算结果为 5 * 12 ; 如果浏览器默认行高为 16时则计算结果为 5 * 16 ) 时, 当前元素设置 font-size: 24px; 时 的高度为 80px

5. 完整代码

CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)相关推荐

最新文章

热门文章

2. 第二种设置 line-height 方式: 父级元素设置 font-size: aapx; 时, 当前元素设置 line-height: bbem; 时的高度为 aa * bb = yy px

3. 第三种设置 line-height 方式: 父级元素设置 line-height: 16; 时, 当前元素设置 font-size: 12px; 时的高度为 10 * 18 = 180 px

4. 第四种设置 line-height 方式: 父级元素设置 line-height: 500%;(如果浏览器默认 line-height 为 12时计算结果为 5 * 12 ; 如果浏览器默认行高为 16时则计算结果为 5 * 16 ) 时, 当前元素设置 font-size: 24px; 时的高度为 80px