文章出處

1.content area 圍繞著文字的一種box,高度由font-size和font-family決定。在chrome控制器里,你用鼠標志向某個內斂元素,顯示的高度值。

2.inline box的高度由line-height決定,一半的line-height在content area的上面,另一半在下面。line-height從content area的水平中垂線開始計算。
想得到inline元素的inline box高度,把inline元素改變成inline-block(不手動設置高度)元素看看。

3.line box的高度由最高的inline box高度或inline-block高度決定。

4.inline子元素的vertical-align,是inline子元素化身為inline-block,基于父元素的line box進行對齊。

簡單來說:

vertical-align依賴line-box,line-box依賴于內部最高的inline-box,inline-box依賴于font-size或line-height或img

 

參考資料:

http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html


文章列表


不含病毒。www.avast.com
全站熱搜
創作者介紹
創作者 大師兄 的頭像
大師兄

IT工程師數位筆記本

大師兄 發表在 痞客邦 留言(0) 人氣()