1. 程式人生 > >CSS深入理解學習筆記之line-height

CSS深入理解學習筆記之line-height

初始 -a 上下 normal 每一個 不同 單行 盒子模型 等於

1、line-height的定義

  定義:兩行文字基線之間的距離。

  註:不同字體之間的基線是不同的。

2、line-height與行內框盒子模型

  行內框盒子模型:

  ①內容區域(content area),是一種圍繞文字看不見的盒子,大小與font-size有關;

    技術分享圖片

  ②內聯盒子(inline boxes),不會讓內容成塊顯示,而是排成一行。如果外部含inline水平標簽,則屬於內聯盒子;如果是個光禿禿的文字,則屬於”匿名內聯盒子“;

    技術分享圖片

  ③行框盒子(line boxes),每一行就是一個行框盒子,每一個行框盒子又是由一個個內聯盒子組成。

    技術分享圖片

  ④包含盒子(containing box),由一行行行框盒子組成。

    技術分享圖片

3、line-height與內聯元素的高度機理

  關於內容區域高度:①內容區域高度只與字體以及字號有關,與line-height沒有任何關系;②在simsun字體下,內容區域高度等於文字大小值。

  行的高度不是由於行高造成的。

  因為:①行高由於其繼承性,影響無處不在,即使單行文本也不例外;②行高這是幕後黑手,高度表現不是行高,而是內容區域和行間距。

  只不過:技術分享圖片

  行間距 = line-height - font-size

  行間距一般是上下均分的。

  總結:行高決定內聯盒子高度;行間距墻頭草,可大可小可負值,保證高度正好等同於行高。

4、line-height各類屬性值

  line-height:normal/<number>/<lenght>/<percent>/inherit;

  normal:默認屬性值。與瀏覽器和元素字體相關。因此為了讓各個瀏覽器兼容性一致,要初始化line-height。

  <number>:使用數值作為行高值。line-height = number * font-size

  <lenght>:使用具體長度值作為行高值。em/rem/px/pt

  <percent>:使用百分比作為行高值。line-height = percent * font-size

  inherit:行高繼承。IE8+

  問題:line-height:1.5/150%/1.5em的區別

  答:計算無差別。1.5所有可繼承元素根據font-size重新計算行高;150%/1.5em當前元素根據font-size計算行高,繼承給下面的元素。

  技術分享圖片

  body全局數值行高使用經驗:

    匹配20px使用,為了方便心算:line-height = 20px / 14px = 1.42857

    由於chrome是19px,所以body{font-size:14px;line-height:1.4286;}

5、line-height與圖片的表現

  行高不會影響圖片實際占據的高度。

  問題:如何消除圖片底部間隙?

  技術分享圖片

  答:①圖片塊狀化—無基線對齊img{display:block;};①圖片底線對齊img{vertical-align:bottom;};③行高足夠小-基線位置上移.box{line-height:0;}

6、line-height的實際應用

  (1)大小不固定的圖片、多行文字的垂直居中

  技術分享圖片

  技術分享圖片

  (2)代替height,避免IE6/IE7下的haslayout

  在IE6/IE7下,block元素設置height會破壞block規則,而line-height不會。

  技術分享圖片

CSS深入理解學習筆記之line-height