css教程css3中设置文本的行高属性是什么

 所属分类:web前端开发

 浏览:118次-  评论: 0次-  更新时间:2022-10-18
描述:更多教程资料进入php教程获得。 css中设置文本行高的属性是“line-height”,该属性用于设置文本行的距离,语法为“line-height:value”;...
更多教程资料进入php教程获得。

css中设置文本行高的属性是“line-height”,该属性用于设置文本行的距离,语法为“line-height:value”;属性值为数字时会设置数字与当前的字体尺寸相乘为行高,属性值单位为“%”时会基于当前字体尺寸的百分比设置行高。

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3中设置文本的行高属性是什么

在css中,设置文本的行高属性是line-heigh。

line-height 属性设置行间的距离(行高)。不允许使用负值。

该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。

其中属性值如下:

09.png

示例如下:

<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>
<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
</body>
</html>
登录后复制

输出结果:

10.png

(学习视频分享:css视频教程)

以上就是css3中设置文本的行高属性是什么的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: css,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!