CSS中行高的继承和单位之间的关系

最新推荐文章于 2024-07-18 09:15:23 发布
最新推荐文章于 2024-07-18 09:15:23 发布
阅读量2.8k 收藏 5
点赞数 2
分类专栏： CSS 文章标签： html css 前端 line-height 行高
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k491022087/article/details/52389184
版权
本文探讨了CSS中行高的继承特性以及与像素、em、百分比和无单位值的关系。当父元素设置行高为em或%时，子元素会根据自身字体大小计算行高；若设置为无单位值，子元素将继承该值后再计算行高。这种差异可能导致预期之外的布局效果，因此在设置行高时需谨慎选择单位。
摘要由CSDN通过智能技术生成

我们知道行高是可以继承的并且行高的单位有四种情况。

1具体像素值      如：line-height: 16px;

2 em

em是指当前标签设置的字体大小，比如当前标签字体大小是16px

最低0.47元/天 解锁文章
安静的对折
关注
专栏目录
CSS继承之行高
qq_51558433的博客
07-29 552
记个笔记， css继承的行高继承 行高可以带单位，也可以不带单位，1.5表示，作用于继承的子元素的字体大小的1.5倍，此时div的行高就是1.5*16=24 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
深入理解CSS中的行高
从入门到放弃
04-13 213
1. 基线、底线、顶线 行高指的是文本行的基线间的距离。 基线并不是汉字的下端沿，而是英文字母"x"的下端沿 2. 行距、行高 3. 内容区 底线和顶线包裹的区域，实际中不一定看得到，但却是存在。 4. 行内框 行内框只是一个概念，它无法显示出来，但是它又确实存在 它的高度就是行高 在没有其他因素（padding）影响的时候，行内框等于内容区域 5. 行框 行框...
CSS 行高 三大特性 盒子模型
最新发布
m0_72498273的博客
07-18 995
行高我们利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐。做法就是：文字的行高等于盒子的高度。总结：1. 上距离和下距离总是相等的，因此文字看上去是垂直居中的。2. 如果行高等于height高度，文字会垂直居中3. 如果行高大于高度，文字会偏下4. 如果行高小于高度，文字会偏上。
理解CSS中的行高
weixin_34144848的博客
06-22 126
1. 基线、底线、顶线 2. 行距、行高 3. 内容区 4. 行内框 5. 行框 元素对行高的影响 扩展阅读 1. 基线、底线、顶线 行高指的是文本行的基线间的距离。 基线并不是汉字的下端沿，而是英文字母"x"的下端沿. 2. 行...
css行高继承
qq_43667537的博客
10-25 309
标题
CSS 行高的继承
weixin_44879122的博客
05-07 393
格式 font: 字体大小/数字 如果数字后面加单位，则父元素及其子元素行高都是固定的；如果不跟单位，则父元素及其的子元素行高都是各自字体大小的此数字倍。 举例 <style> .a { font: 20px/2 'Microsoft Yahei'; } .c { font-size: 14px; } </style> <body> <div class="a">父..
CSS行高继承（重点）、覆盖和优先级
weixin_42501248的博客
07-15 157
CSS三大特性
css 行高
oldchao的博客
03-15 466
我们可以试想一下，为什么会要有行高。我现在不需要行高不是完全可以的嘛。我们可以仔细看看这个，这不是很正常的嘛。那我们来看看这个，那当我们第一次看到这个的时候你觉得是横着度，还是竖着读。合理的行高可以让我们阅读文章的时候更加的清晰。那我们回归主题，那什么是行高， 其实可以把它理解为理解为所占据的高度。注意这里面的一行，而不是某一个元素的高度。也就是一行文本的基线到另一行文本的基线，这段距离就是行高。此时有一个注意的是我们此时给一个元素设置高度，那这一行的元素的高度就等于是这个行高。
CSS行高
qq_48858031的博客
07-16 461
5.如果一个盒子中存储的是文字，一般情况下以盒子左边的内边距为基准，不会以右边的内边距为基准（右边的内边距有误差，文字放不下会换行）6.顶部的内边距不是边框到文字顶部的距离，而是边框到行高顶部的距离。4.如果盒子中有多行文字，只能通过设置padding让文字居中。3.在开发中常将盒子的高度和行高设置为一样，来保证。在css中所有的行都有自己的行高。2.文字在行高中默认是垂直居中的。1.行高和盒子高度不是一个概念。在盒子的高度中是垂直居中的。...
css设置行高
enthan809882的博客
03-13 546
↭↭↭↭↭↭↭↭ ↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭
CSS中行高的总结
IT晓可程序员之路
06-03 720
行高=文字大小+上下间距（文字大小+2倍间距）
CSS基础-行高（height和line-height)【学习笔记】
lilien的博客
11-21 478
1 行高测量 行高的测量方法： 2 单行文本垂直居中 行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。 文字的行高等于盒子的高度。 这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。 行高 = 上距离 + 内容高度 + 下距离 上距离和下距离总是相等的，因此文字看上去是垂直居中的。 行高和高度的三种关系 如果 行高 等 高度 文字会 垂直居中 如果行高 大于 高度 文字会 偏下 如果行高小于高度 文字会 偏上 ...
css 行高解析
weixin_43294560的博客
12-14 546
当设置了font-size时,设置行高会有误差,解决方案: .jf-badge-news::after { content: " "; display: inline-block; width: 0; height: 100%; vertical-align: middle; /* margin-top: 1px; */ }
css 行高-张鑫旭博客
sentimental_dog的博客
08-09 1744
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=384 一些字面意思 “行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是
CSS的层叠性、继承性以及行高的继承
剑来的博客
03-22 2391
前端学习
行高的继承
weixin_42900834的博客
02-27 355
1.代码： <!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"> <titl
行高的继承性
Fky_mie的博客
03-28 751
特殊的行高 淘宝头css文件中写的这一句: body{ font: 12px/1.5 'Microsoft Yahei'; } //一般缩写格式: font{ font: 字体大小/行高 '字体形式' } 首先, 行高是可继承的属性; 其次, 行高可以跟单位也可以不跟单位, 不跟单位时就是指当前元素的字体大小的倍数(12*1.5=18px) 什么叫"当前元素的字体", 举个栗子: body时设定了"12px/1.5" 跟写 "12px/18px"是不一样的 body{ font: 12px/1.
CSS继承性-行高的继承性
Queen741740155的博客
03-31 434
子元素可以通过显式设置自己的行高来覆盖从父元素继承的行高。此外，行高的继承也受到CSS优先级和层叠性的影响，即如果有多个样式规则同时作用于一个元素，那么最终的行高值将取决于这些规则的优先级和层叠顺序。例如，如果父元素的行高设置为1.5（这通常是相对于字体大小的倍数），那么子元素的行高也会是1.5倍，这有助于保持文本在不同元素之间的垂直对齐和视觉一致性。简单来说，如果一个元素（父元素）设置了行高（line-height），那么它的子元素会继承这个行高值，除非子元素本身也设置了行高。
理解CSS继承：元素间的树状关系与规则应用
在CSS的世界里，继承关系是一个核心概念，它决定了元素间的样式传递。本文将深入探讨HTML文档结构与CSS继承规则之间的联系，以便理解如何在编写样式时利用这一特性。 首先，让我们从HTML文档树说起。所有的HTML文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值