CSS实例教程:line

日期:2021-03-16 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图


原文:http://www.planabc.net/2008/07/25/unitless-line-heights/
淘宝商城的detail 网页页面“商品详细信息”一部分是商家自定区块,曾出現这样1个难题:

<style type="text/css">
p {
line-height:17px;
}
</style>
<div class="mdse-detail">
<p>
<strong style="font-size:30px">
品牌:XZX<br />
销售市场价:145元<br />
色调:黑色<br />
面料:棉<br />
尺码:S M L<br />
衣长:S 89 M 90 L 91<br />
肩宽:S 35 M 36 L 37<br />
胸围:S 88 M 92 L 96<br />
下摆:S 104 M 108 L 112<br />
袖长:S 17 M 17.5 L18<br />
因为精确测量方式不一样,偏差在2CM上下!
</strong>
</p>
</div>

你会发现上面事例的文本会重合在1起!这是甚么缘故呢?
因为.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 特性有1点点相近(tr.style.display = ”;,IE 显示信息 block,而 Firefox 等规范访问器显示信息 table-row)。
也有此外1个相对性低效的方式,但也不失为1个便捷的处理计划方案:
.mdse-detail p * {
line-height:140%;
}

参照阅读文章:《Unitless line-heights》