首页 > 其他分享 >CSS高度单位

CSS高度单位

时间:2023-10-12 22:26:00浏览次数:46  
标签:继承 元素 高度 height 单位 line 行距 CSS

line-height属性的细节  (子元素 继承 父元素 系数)
与大多数CSS属性不同,line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。

语法
line-height: normal | <number> | <length> | <percentage>
normal 根据浏览器决定,一般为1.2。
number 仅指定数字时(无单位),实际行距为字号乘以该数字得出的结果。可以理解为一个系数,子元素仅继承该系数,子元素的真正行距是分别与自身元素字号相乘的计算结果。大多数情况下推荐使用,可以避免一些意外的继承问题。
length 具体的长度,如px/em等。
percentage 百分比,100%与1em相同。

有单位(包括百分比)与无单位之间的区别
有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。

标签:继承,元素,高度,height,单位,line,行距,CSS
From: https://www.cnblogs.com/qfy0411/p/14738893.html

相关文章

  • html5+css3
    一、HTML1、浏览器内核又可以分成两部分:渲染引擎(layoutengineer)和JS引擎(renderingengine)后来的JS的发展独立出来,常用5大浏览器分别是:IE(edge)、Chrome、Firefox、Safari、opera。浏览器内核有那些?分别被使用在那些浏览器?Trident(IE)国内很多双核浏览器其中一核就是trident......
  • Dear Reality推出SPATIAL CONNECT for Wwise——XR音频制作新高度
    (DearReality演示视频截图)游戏混音的未来在头戴式设备中DearReality推出SPATIALCONNECTforWwise——XR音频制作新高度沉浸式音频专家DearReality宣布启动“SPATIALCONNECTforWwise”项目,该项目旨在支持游戏音频设计师在交互式VR和AR音频制作中实现完全沉浸式工作。这项......
  • 【前端css】全局修改css让网页置灰,去掉色彩
    html{filter:grayscale(100%);//IE浏览器-webkit-filter:grayscale(100%);//谷歌浏览器-moz-filter:grayscale(100%);//火狐-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);......
  • 【vue2】实现css动效逐个顺序展示的效果(简陋版)
    效果(进入预约里程碑模块后,小人从第一个台阶逐个闪烁出现在当前预约等级之前的台阶并消失,最终停留在当前预约等级的台阶上): 虽然很low但是!就是这么设计的!于是在原本静态的代码上稍加了些修改(为什么,为什么,想问天问大地)首先是台阶部分的代码:<div:class="$style.reserveBox......
  • S12700 CSS主备倒换
    导致集群主备倒换的原因较多,在此主要介绍由于主控板故障引起的主备倒换以及通过命令行执行的主备倒换。主控板故障引起的主备倒换集群系统主控板的故障可能会引起集群系统内角色的变化。集群系统主用主控板故障集群系统主用主控板故障后,集群系统角色的变化如图3-21所示。图3-21 集......
  • css伪类和伪元素
    一、伪类说明  定义:伪类⽤于向某些选择器添加特殊的效果  超链接(a标签)伪类:a标签我们在日常工作和学习中用的很多,我们只知道默认状态下为蓝色,但是a标签其实有四种状态。    1、未访问前为蓝色(如果a标签使用不是蓝色而是紫色,那么近期访问过该网站,需要去浏览器删除近期记......
  • 使用HTML和CSS做出心形图案
    今天我们要做一个心形图案,闲来无事可以尝试做一些其他图案。也可以用来逗心爱的女孩开心。例如:先看步骤先给正方形上方和右方两侧做两个圆圆的做法就是border-radius:50%,就是圆形了最后给他们翻转45°下面是整体代码,大家想尝试直接复制到自己代码中<!DOCTYPEhtml><htmllang="en......
  • 记录--纯CSS实现骚气红丝带
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助在本文中,我们将探讨如何使用CSS以最少的代码创造出精美的CSS丝带形状,并最终实现下面这个效果:下面我们使用html和css来实现这个效果。我们使用内容自适应方式布局,不用担心里面的文字长度。本文介绍两种丝带:左......
  • 开局就集成tailwindcss(一)
    1.使用cli创建项目npmcreatevite@latest项目名--templatereact-ts 2.因为css功底偏弱,所以必须也是完全有必要的,在这里必须集成一下tailwindcss,npminstalltailwindcssautoprefixerpostcss-cli#额外的安装2个配套的插件#autoprefixer自动添加样式的前缀,很......
  • CSS 多行文本超链接下划线动效
    先看效果乍一看,是不是感觉很简单,仔细一瞅发现事情好像没有那么简单。如果十分钟还没想出怎么实现,那就把简历上的“精通css”改成“了解css”……......