css中的線及vertical-align實例詳解
- 零下一度原創
- 2017-06-24 11:57:111763瀏覽
行內元素格式化順序：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視覺格式化模型控制的元素,例如、、