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原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。