建站软件 优化软件 编程软件 网页辅助 站群程序 网站程序 图像处理 资源教程 字体下载 推荐软件


您的位置:首页 > div+css > CSS里面line-height有哪些属性

CSS里面line-height有哪些属性

时间:2016-07-11 16:56:01  来源:免费模板网 作者:风雪 阅读次数 tags属性CSS

我们先看下面一段html代码,帮助我们理解css里面常用的line-height属性
<style type="text/css">
p {
line-height:17px;
}
</style> 
<div class="mdse-detail">
<p>
<strong style="font-size:30px">
由于.detail-content 中的 p 元素继承了默认设置的全局样式 line-height:17px,而自定义区块又是由商家自定义,其内字体被设置为了 font-size:30px;(可能为任意值),根据 Inline formatting model,得知该文字的 line-box 高为 17px,多出的字体部分上下溢出,所以会出现字体重叠的现象。 
那这个问题如何解决呢? 
解决方案:我们给 .mdse-detail 下的 p 元素设定样式属性 line-height:1.4。 
为什么解决方案里的 1.4 不带单位? 
元素的 line-height 属性值会继承父元素(或祖先元素)的 line-height 属性值,如果属性值有单位,则继承的值是换算后具体的 px 值而非原始的值(比如:em、%),而如果属性值没有单位,则浏览器会继承数值(无单位),然后根据该元素的 font-size 值重新解析得到新的 line-height 值。这个和 table 的 tr 设置 display 属性有一点点类似(tr.style.display = ”;,IE 显示 block,而 Firefox 等标准浏览器显示 table-row)。 
还有另外一个相对低效的方法,但也不失为一个快捷的解决方案: 
.mdse-detail p * {
line-height:140%;
}
 

本文地址:https://www.freemoban.com/bjrm/2016/0711/2647.html

猜你喜欢
栏目推荐
模板推荐

Copyright:www.freemoban.com 免费模板网 All Rights Reserved 网站备案:辽ICP备19014872号-2   辽公网安备 21010602000376号  辽公网安备:42900402000182号

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,我们会及时删除侵权内容,联系QQ:1615187561 谢谢合作!