##CSS基线 阅读CSS基线之道 总结
对于个人站或以设计为主导的网站, 用基线控制总体的排版, 会提高整体的可阅读性,视觉自信等。
但是相对来说, 这会为CSSer 带来相当大的困扰, 因为细节所以繁琐, 具体情况具体再分析吧~
1. 基线是由line-height控制, 即最小行宽度为body > line-height的值
2. 所有元素的line-height, margin, padding 应为body line-height 的倍数
body{
line-height:22px;
}
h1 {
font-size:40px;
line-height:44px;
margin-bottome:22px;
}
p {
font-size:14px;
line-height:22px;
margin-bottome:22px;
}
3. 高度可用em代替, font-size计算以body为基准, 元素的line-height以该元素的font-size为基准
4. 文本未落在基线上可用padding 来修复
5. 当添加其他元素, 例如border 用margin等补偿其高度, 维持基线的间隔
h1 {
border-top:3px;
pading-top:22px;
margin-bottome:19px;
/* 22px-3px */
}
6. 使用SASS或REM 会减少计算量
7. 当基线高度过大时 可适当成倍缩小 body line-height的高度
8. 多列文本对齐时, 由于字体大小计算的line-height 不同, 排版不会对齐,这时可用margin,padding 等调整细节
以上会让代码变得更为复杂和难以维护, 但相对可以提高网站的排版与审美, 取舍之道再议.