Skip to content

Instantly share code, notes, and snippets.

@zD98
Last active March 2, 2016 10:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zD98/85f4f124528dd61a9b43 to your computer and use it in GitHub Desktop.
Save zD98/85f4f124528dd61a9b43 to your computer and use it in GitHub Desktop.

##CSS基线 阅读CSS基线之道 总结

对于个人站或以设计为主导的网站, 用基线控制总体的排版, 会提高整体的可阅读性,视觉自信等。

但是相对来说, 这会为CSSer 带来相当大的困扰, 因为细节所以繁琐, 具体情况具体再分析吧~

1. 基线是由line-height控制, 即最小行宽度为body > line-height的值 
2. 所有元素的line-heightmarginpadding 应为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. 当添加其他元素, 例如bordermargin等补偿其高度, 维持基线的间隔
	h1 {
		border-top:3px;
		pading-top:22px;
		margin-bottome:19px;
		/* 22px-3px */
	}
6. 使用SASSREM  会减少计算量
7. 当基线高度过大时  可适当成倍缩小 body line-height的高度
8. 多列文本对齐时, 由于字体大小计算的line-height 不同, 排版不会对齐,这时可用margin,padding 等调整细节 

以上会让代码变得更为复杂和难以维护, 但相对可以提高网站的排版与审美, 取舍之道再议.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment