文本行高——line-height属性

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非代替的 inline 元素，它用于计算行盒（line box）的高度。

一般情况下，浏览器默认的line-height为1.2。可以自定义 line-height 覆盖这个初始值，那么该怎样设置line-height呢？有以下5种方式：

normal 默认。
设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距，即number为当前font-size的倍数。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

1、normal

取决于用户端。桌面浏览器（包括 Firefox）使用默认值，约为1.2，这取决于元素的 font-family。

2、<数字>

该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。

3、<长度>

指定<长度>用于计算 line box 的高度。参考<长度>了解可使用的单位。以 em 为单位的值可能会产生不确定的结果（见下面的例子）。

4、<百分比>

与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果（见下面第二个例子）。

5、-moz-block-height Non-Standard

将行高设置为当前块的内容区域高度。

模拟题：修改诗歌行高

描述

您需要在 style.css 文件中实现如下功能

.para1 的行高为 40px
.para2 的行高为 2em，文字大小为 20px
.para3 的行高是文字大小的 2 倍
.para4 的行高为 12px

HTML：

<!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"><link rel="stylesheet" href="./style.css"><link rel="stylesheet" href="./common.css"><title>Sonnet</title>
</head><body><p class="para1">thy eternal summer shall not fade</p><p class="para2">Nor lose possession of that fair thou owest;</p><p class="para3">Nor shall death brag thou wander'st in his shade,</p><p class="para4">When in eternal lines to time thou growest:<br>So long as men can breathe or eyes can see,<br>So long lives this and this gives life to thee.</p>
</body></html>

样式css：

公共部分——common.css：

p {background-color: antiquewhite;margin: 10px;font-size: 16px;
}

作答部分——style.css：

.para1{line-height: 40px;
}
.para2{line-height: 2em;font-size: 20px;
}.para3{line-height: 200%;/* 或者写成line-height:1; */
}
.para4{line-height: 12px;
}

文本行高——line-height属性相关推荐

css文本行高是哪个属性_css属性行高line-height的用法详解
css属性行高line-height的用法详解发布时间:2014-08-02 23:21:52 作者:佚名我要评论本文介绍下css中的line-height属性的用法,通过实例学习css ...
css文本行高是哪个属性_CSS中的line-height行高属性的使用技巧小结
CSS中的line-hight属性是用来控制文本行之间的空隙的.它一般情况下没有单位的设定(如:line-height:1.4;)所以这是一个按字体尺寸的比例来计算.这对印刷版来说是一个很重要的属性. ...
css文本行高是哪个属性_CSS样式----CSS属性：字体属性和文本属性（图文详解）...
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位字体属性文本属性定 ...
html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
css文本行高是哪个属性_CSS字体属性和文本属性总结
1.CSS字体属性 1.1 字体 font-family 1.2 字号 font-size 1.3 字体粗细 font-weight font-weight : bold; font-weight ...
css字行高怎么设,css文本行高怎么设置-电脑自学网
css文本行高的设置方法:首先新建文件,使用div标签创建一行文字:然后编写样式,设置div标签的class属性为mybkkd:最后通过div标签的class属性mybkkd设置文字上下的行高. 本教 ...
div之间的间距如何去除_如何统一两端开发中的文本行高
之前写过一个<行高导致和开发间距不一致>:只介绍了行高不一致的原因,以及Android和iOS插件处理行高的方式,安卓字体太多暂时没做解析. 但常常我们都是以iOS为准一稿适配两端,那么如 ...
Java(实验三)类与对象-定义并实现一个长方体类（Cube），包含长（length）、宽（width）与高（height）等三个属性
一.实验目的: 1.学会定义并实现类. 2.学会定义并创建类的对象,通过类的对象访问类的成员属性与方法. 3.学会定义并实现派生类,学会使用派生类的对象. 4.理解并学会使用类的多态性. 二.实验环境 ...
窗口尺寸，文档高，元素宽高的获取方式
一.元素宽高: window.onload = function() { var oDiv = document.getElementById('div1'); /* ...

文本行高——line-height属性

文本行高——line-height属性相关推荐

最新文章

热门文章