css中的線及vertical-align

標籤：也有   屬性   lin   mat   基準   設定圖   word   等於   文檔流   

行內元素格式化順序：font-size-->em框-->內容區-->行內框-->根據基準放置行內框-->確定行框高度

相關概念： 
leading（行間距）：指填充在兩行文字間的鉛條，等於line-height 和 font-size之差，其中一半leading加到文字上方，另一半leading加到文字下方，只用於非替換元素。

em框：em框指示沒有行間距時基準之間的距離，不指定字元間的邊界，實際的字形可能比其em框更高或更矮。

font-size ：確定給定字型的em框（em box）的高度，但不能保證實際顯示的字元就是這種大小。font-size屬性和實際字型大小的具體對應關係由字型的設計者確定。

基準：the line upon which most letters "sit" and below which descenders extend，並不是漢字的下端沿，而是英文字母"x"的下端沿。

內容區（content area）：非替換元素即em框串在一起組成的框，間接由font-size確定；替換元素：即元素固有的高度加可能的邊距和框。

行內框（inline box）：虛擬矩形框，無法顯示，大小為內容區加leading。對非替換元素，等於line-height值；對替換元素，等於內容區的高度。同一行內的若干元素可以有不同的行高和行內框高。

行框（line box）：包含該行內所有行內框的最高點和最低點的最小框，行框的高度只同本行內元素的行高有關，而和line-height無直接關係，和父元素的高度（height）也無關。行內框在行中根據其vertical-align屬性值垂直對齊。

匿名文本：指所有未包含在行內元素中的字串。

line-height：指文本行基準之間的距離，確定了各個元素框增加或減少多少，預設為元素本身字型大小的1.2倍。

line-height值從父元素繼承時，要繼承在父元素上計算的值，而不是在子項目上計算的值（em等）。如果是縮放因子（沒有單位的純數字值），則繼承的是縮放因子，不是計算的值，最終會計算縮放因子和子項目的font-size的乘積。

圖1：

圖2：css中的線

圖3：確定行框高

替換元素
替換元素的邊距和邊框會影響該元素的行內框，繼而影響行框的高度。
其內容不受CSS視覺格式化模型控制的元素,比如<img>、<input>、<textarea>、<select>、<object>，標籤起到預留位置的作用，實際內容不在文檔中，叫做替換元素。瀏覽器會根據元素的標籤類型和屬性來顯示這些元素。比如,img元素的內容通常會被其src屬性指定的映像替換掉。替換元素通常有其固有的尺寸:一個固有的寬度,一個固有的高度和一個固有的比率。比如一幅位元影像有固有用絕對單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個空白的html文檔。
CSS渲染模型不考慮替換元素內容的渲染。這些替換元素的展現獨立於CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。

非替換元素

替換元素之外的所有其他元素都是非替換元素,實際內容在文檔流中，由CSS的視覺格式化模型負責非替換元素的渲染。
非替換元素的邊距和邊框不會影響行元素行內框的高度。

vertical-align：垂直對齊，只適用於行內元素、替換元素和表儲存格，不能被繼承。
　　預設值為baseline，將行內元素的基準和所在行的基準對齊；文本都是按基準對齊的。如果一個垂直對齊元素沒有基準，比像、表單輸入元素或其他替換元素，則把該元素的底端與其父元素的基準對齊。

      

　　There is space below that line for the descenders you find onletters like f, j, p and q.修複方法：通過設定圖片的vertical-align的屬性值或改變dislay:block；或者修改父元素的font-size/line-height使行內框的高度小於圖片。在父元素的font-size:0;的極端情況下，中線和基準會重合。
　　bottom：將元素行內框的底端和行框的底端對齊。
　　middle：把行內元素框的中線與基準上方0.25em處的一個點對其，也等於與基準的距離為小寫字母x高度的一半（即0.5ex）。x字元的中點並不是內容區的絕對中線，因為x字元會有所下沉。
　　百分數：相對於元素的line-height計算。行內可替換元素的line-height的作用就是協助計算vertical-align。
　　具體長度的值：把一個元素相對於父元素基準升高或降低指定的距離。垂直對其的文本並不會覆蓋其他行的文本，只會影響當前行的行高，以使足以包含最高行內框的頂端和最低行內框的底端。

行內塊：inline-block，行內塊元素會作為替換元素放在行中，即行內塊的底端預設放在文本行的基準上。ie6/ie7要使用{display:inline; zoom:1;...}才生效。通常用於橫向菜單列表或不等高列表元素整齊排列。但是li標籤之間的空格會當作inline元素在頁面顯示4px的空白，可以通過父元素font-size:0,子項目font-size:12px;消除空白。對於ie6/ie7/safari需要使用word-spacing和letter-spacing加以調整。 

行內塊預設是baseline對齊，但是baseline的確定有特殊規定。Thebaseline of an ‘inline-block‘ is the baseline of its last line box in thenormal flow, unless it has either no in-flow line boxes or if its ‘overflow‘property has a computed value other than ‘visible‘, in which case the baselineis the bottom margin edge.所以會出現如顯示的布局，可以通過改變vertical-align:top;修複。 

css中的線及vertical-align