CSS 关于line-height详细讲解
CSS 详细 关于 讲解 line height
2023-06-13 09:15:11 时间
文章目录
前言
下面图片来自网络:
MDN对line-height定义
line-height
CSS 属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。
line-height单位
- 数字:该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小
- 长度:指定<长度>用于计算 line box 的高度;如:px、em 等
- 百分比:计算值是给定的百分比值乘以元素计算出的字体大小
line-height的计算
line-height
是参考font-size
的值计算的,如下图为无单位赋值;另外百分比、px等类似。
font-size:12px;
line-height:1;
/* 此时line-height=1*font-size=12px */
其次当
line-height
的值等于font-size
的值时,即此时行距为0,但实际显示效果如下。
HTML:
<div class="f1">
<span class="p1">测试一下line-height属性</span>
</div>
<div class="f2">
<span class="p2">测试一下line-height属性2.0</span>
</div>
CSS:
.p1 {
line-height: 40px;
outline: 1px solid #3d08fc;
font-size: 40px;
}
.p2 {
line-height: 40px;
outline: 1px solid #07f02a;
font-size: 40px;
}
.f1 {
outline: 1px solid red;
}
.f2 {
outline: 1px solid rgb(204, 255, 0);
}
效果:
实际开发案例:
个人认为在实际开发中,line-height
主要是对文字内容进行css样式调整,这里我们探讨一下其对块盒和行盒的区别。
对于块盒
该属性是块盒content
区域中行盒的最小高度,不涉及padding、border区域,在实际开发,通常用来使文字内容居中显示;且在块盒没有设置高度的前提下,则块盒高度默认等于line-height
的值。
第一张图片:父元素中设置的
line-height
值等于其自身盒子(border+padding+content)高度,导致其子元素中的文字内容下移。
第二张图片:父元素中的
line-height
值设置等于其自身盒子content区的高度,则其子元素继承后,其文字内容能在父元素中居中显示。
对于行盒
该属性的值就是该行盒的高度,但是用 Computed
在控制台得不到其高度(元素为inline,则不显示宽高);
CSS:
span{
line-height: 20px;
outline: 1px solid #3d08fc;
font-size: 20px;
}
div{
outline: 1px solid red;
}
HTML:
<div>
<span>测试一下line-height属性</span>
</div>
效果:
相关文章
- html精灵图跟img标签,css精灵图怎么使用?
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- css opacity属性_CSS中的opacity属性[通俗易懂]
- 再来利用java学学javaweb——–html+css+ JavaScript[通俗易懂]
- 【罗盘时钟(星空版)—使用html,js,css编写。(附全部源代码+效果)】[通俗易懂]
- 【说站】css中clear属性是什么
- 【说站】css网格区域如何理解
- 【说站】css中order属性的介绍
- 常用的HTML和CSS(content)特殊字符图标
- CSS实现图片磨砂玻璃效果
- CSS 03 线性渐变、径向渐变与重复性渐变
- 【CSS教程】紫色渐变登陆布局html+css代码
- 【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
- 【CSS】定位 ② ( 静态定位 | 相对定位 )
- The Shapes of CSS(css的形状)详解编程语言
- CSS 尺寸样式
- CSS 溢出控制
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 又一个典型css实例
- CSS规则层叠的应用css必须要注意的几点
- 简单的加密css地址防止别人下载你的CSS文件的方法
- css实现会折叠、展开的菜单导航栏效果
- 多个js与css文件的合并方法详细说明
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- JS批量操作CSS属性详细解析