当然,如果是大写字母,或者是汉字,那么就是文字的底边就是基线了。
所以,两行文字的基线之间的距离,就是行高了。事实上,只要指定一个标准,比如文字顶边之间的距离,或者中线之间的距离,都是行高!
补充说一下:行高减去字高就是行间距了
基线并不是汉字的下端沿,而是英文字母"x"的下端沿
对于行内元素如em、strong、span和等,其padding、margin、border-top、border-bottom 不会增加行高。padding会覆盖;margin将重置为0;border-top和border-bottom同样会覆盖。padding-left、padding-right、border-left和border-right可用。
img元素会影响行高
证明撑开div高度的是line-height而不是font-size
内联盒子/匿名内联盒子inline-boxes
行框盒子line-boxes 每一行就是一个“行框盒子”,每“行框盒子”由一个个“内联盒子组成”
包含盒子containing-box,由一行行的“行框盒子”组成
内容区域content-area,一种围绕文字看不见的盒子,大小与font-size大小有关
1.行高的垂直居中性
、、在单行或多行或图片垂直居中实现上的应用
单行文字的垂直居中对齐: line-height值设置为height一样大小的值可以实现单行文字的垂直居中;height值可以省略
多行文字的垂直居中对齐 : 要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体大小有大有小的情况怎么办呢?方法之一就是借助于line-height。
、 、图片的垂直居中
类似上面处理的方法,借助 i标签或伪元素
、 、使用缩放因子
方法一:内嵌样式(为了方便查看效果我给这个段落加了个红色的边框)
方法二:内链样式(为了方便查看效果我给这个段落加了个蓝色的边框)
方法三:外链样式,同方法二,只不过将样式新建一个文件引入即可
<!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