line-height失效或者被过滤器过滤的问题

水深无声 2022-04-24 02:12 115阅读 0赞

# line-height #

是设置行间距离（行高） 的一种方法该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值；我在程序中遇见这种问题

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>圆角按钮</title>
    		<style type="text/css">
    			a {
    				width: 200px;
    				height: 200px;
    				display: inline-block;
    				text-decoration: none;
    				text-align: center;
    				line-height: 200px;
    				border-radius:150px;
    				border: 2px solid red;
    				background-color: #0000FF;
    				box-shadow: 3px 3px 3px rgba(255,1,1,0.9);
    				font: 20px "微软雅黑";
    				color: #000000;
    
    			}
    
    			a:hover {
    				background-color: #FFFF00;
    			}
    		</style>
    	</head>
    	<body>
    		<a href="#">金</a>
    		<a href="#">木</a>
    		<a href="#">水</a>
    		<a href="#">火</a>
    		<a href="#">土</a>
    	</body>
    </html>

其所展示的结果为：

![代码运行的结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70]

因为line-height属性设置的行高 当font属性设置字体时会影响line-height属性使其无法居中，这需要将line-height属性设置在font属性之后 其 结果为

![结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 1]

这样就成功改变了行高 使文字居中

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70]: /images/20220221/76affc1818d24dd49475c62959171352.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E5MTg5MjI3MDNfMQ_size_16_color_FFFFFF_t_70 1]: /images/20220221/2428fe433c684e05b20419e95a03bf0d.png