css中怎么设置一段文字的高度

html-css014

css中怎么设置一段文字的高度,第1张

方法一：内嵌样式(为了方便查看效果我给这个段落加了个红色的边框)

方法二：内链样式(为了方便查看效果我给这个段落加了个蓝色的边框)

方法三：外链样式，同方法二，只不过将样式新建一个文件引入即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

<style>

.duangao{

height:100px border:1px solid #00f

}

</style>

</head>

<body>

方法一内嵌样式(为了方便查看效果我给这个段落加了个红色的边框)：

<p style="height:100px border:1px solid #f00">这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.</p>

方法二内链样式(为了方便查看效果我给这个段落加了个红色的边框)：

<p class="duangao">这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.这是一段文字，这是一段文字，测试文字的高度.</p>

方法三外链样式，同方法二，只不过将样式新建一个文件引入即可

</body>

</html>

最终效果图如下：

如果想使单行文字垂直居中，即文字不多，将行高和段落设为一样的数值即可。如：height:100pxline-height:100pox

字体的大小是根据字体的高度来定的（而不是你自认为的对角线），等宽字体的半角字符（如英文字母、数字、符号等）的宽度是高度的一半，全角字符（如汉字）的宽度和高度则相等，而在比例字体（通常只有英文字体中才有比例字体，汉字都是等宽的）中，宽度则是不相等的（比如W的宽度就远大于i的宽度），但会以大写的M作为基准，M的宽和高是相等的。

行高=字符的高度+行间距

如果已设定font-size:12px，而line-height:16px，则行间距为16-12=4px

用p元素输出一行文本后：

①line-height(行高)=font-size(字符大小)+word-spasing(上下行间距)

例如：行高设置为100px时，若字符大小为30px，那上下行间距就分别为35px；

重点是：字符上行间距和下行间距的大小是相同的。

②如果你知道height是块级元素的属性，没行内元素什么事，那你对你的问题就不难理解：

试想，一个100px高的div，它的上下padding都设置为35px；中间的content就是30px，此时，它的height(高)=content(内容大小)+padding(上下填充值)。

③结合以①②中的两个等式：当设置line-height等于height时，字符大小就是内容大小，而上下相同的行间距就相当于上下相同的padding。故，div中的内容居中=p元素的字符(撑满容器)居中。

“如果此时我把行高调为60px，那么文字中心点距上或者距下各为30px，那不仍然是垂直居中吗？”

你想想，你说的“垂直居中”是相对什么居中？相对于上一行的文本和下一行的文本垂直居中？确实是这样，但这不是相对包围他们的容器。