CSS样式之行高

最新推荐文章于 2023-11-10 15:25:27 发布

AnyBisks

最新推荐文章于 2023-11-10 15:25:27 发布

阅读量1.5k

点赞数

分类专栏：前端css

本文链接：https://blog.csdn.net/AnyBisks/article/details/78710145

版权

前端css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS样式之行高

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 浏览器默认文字大小：16px
			 * 行高=文字高度+上下边距
			 * 行高：是基线与基线之间的距离
			 * 一行文字行高和父元素高度一致的时候，垂直居中显示。
			 * 
			 * 行高的单位	文字大小	值
			 * 20px 	20px 	20px
			 * 2em 		20px    40px
			 * 150% 	20px 	30px
			 * 2 		20px 	40px
			 * 
			 * 总结:单位除了像素以为，行高都是与文字大小乘积。
			 * 总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
			 * 推荐行高使用像素为单位。
			 */
			
			body {
				text-align: center;
			}
			
			a {
				display: inline-block;
				height: 58px;
				width: 120px;
				text-align: center;
				text-decoration: none;
				line-height: 50px;
			}
			
			a.one {
				background: url(../../img/bg1.png);
			}
			
			a.two {
				background: url(../../img/bg2.png);
			}
			
			a.three {
				background: url(../../img/bg3.png);
			}
			
			a.four {
				background: url(../../img/bg4.png);
			}
			
			a.five {
				background: url(../../img/bg5.png);
			}
			
			a:hover {
				background: url(../../img/bg7.png);
			}
		</style>
	</head>

	<body>
		<a href="" class="one">五彩导航</a>
		<a href="" class="two">五彩导航</a>
		<a href="" class="three">五彩导航</a>
		<a href="" class="four">五彩导航</a>
		<a href="" class="five">五彩导航</a>
	</body>

</html>

AnyBisks

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式之行高

CSS样式之行高 /* * 浏览器默认文字大小：16px * 行高=文字高度+上下边距 * 行高：是基线与基线之间的距离 * 一行文字行高和父元素高度一致的时候，垂直居中显示。 * * 行高的单位文字大小值 * 20px 20px 20px * 2em 20px 40px
复制链接

扫一扫

专栏目录