其他
优质
小牛编辑
138浏览
2023-12-01
其他
- 如果需要 CSS Hacks,需详细注明解决什么问题。
- 尽量避免使用 IE 中的 CSS filters。
font-weight
普通字重使用normal
,加粗使用bold
。大部分字体只有两个字重,所以
不建议使用容易混淆的数值表示方法。- 如无特别精确的要求,推荐使用不带单位的
line-height
,这样当前元素的行高只与自身font-size
成比例关系,使排版更加灵活。例如line-height:1.5
line-height: 1.5 ≠ line-height: 150%
<div class="box">
<p>line-height</p>
</div>
.box {
line-height: 50px;
font-size: 20px;
}
/**
* 这里 p 的行高直接继承父元素的行高,最终
p { line-height: 50px; }
*/
p {
font-size: 40px;
}
.box {
line-height: 150%;
font-size: 20px;
}
/**
* p 的行高计算过程为:
* 1. 先计算出父元素的行高(150% * 20px = 30px)
* 2. 然后 p 继承父元素的行高,最终
p { line-height: 30px; }
*/
p {
font-size: 40px;
}
.box {
line-height: 1.5;
font-size: 20px;
}
/**
* p 的行高计算过程为:
* 1. 先继承父元素的 1.5(1.5 * 40px = 60px)
* 2. 然后乘以 p 的 font-size,最终
p { line-height: 60px; }
*/
p {
font-size: 40px;
}