替換/非替換元素
替換元素
不直接顯示html元素內容的元素，如img、input、iframe等
替換元素尺寸
video、iframe等預設寬高為300px、150px，img預設尺寸為0，載入後預設尺寸為原始尺寸 寬高可以通過width、height屬性設定，或用css設定
非替換元素
元素內容直接顯示在元素生成的框中，如div、span等
塊級/行內元素
塊級元素
寬度預設填充parent的content區，獨佔一行（即前後換行）
行內元素
寬度預設包裹內容，可換行
設定width、height對行內非替換元素不生效，垂直padding、border有顯示效果但不影響布局，垂直margin無效
示例
span
如圖可見，每行的高度僅由line-height控制並產生了行間距；border和paddin**平方向生效，垂直方向只有顯示效果（由背景和邊框看出）；margin水平方向生效，垂直方向無效；background會延伸到border中（同塊級元素，將border設定成transparent時可見）
一些基本概念
匿名行內文字
不在任何行內元素中的字串
示例
這是匿名行內文字
hehe
對非替換元素
em框為非替換元素中乙個字元形成的框
em框高度 = font-size（不等於實際渲染大小，實際渲染大小取決於字型） = 1em
內容區由em框串在一起組成
對替換元素
不存在em框
文字基線
可以按小寫字母x的下邊沿來理解
1ex = 字母x的高度 行間距
由line-height屬性產生（如圖，灰色框為行間距）
對非替換元素
line-height = font-size + 行間距（上下等分）
對替換元素
line-height不直接影響替換元素布局（只在替換元素的vertical-align設定為百分比時有影響，參見下文）
行內框inline-box
對非替換元素
inline-box高度 = line-height
對替換元素
inline-box高度 = 元素自身高度 + 垂直padding + 垂直border + 垂直margin（行內有垂直margin時，行框高度被這個margin影響了，而行框包裹inline-box，可見替換元素的inline-box高度包含margin）
行框垂直方向包含一行中所有inline-box的上下邊界，其最終高度受行內各元素vertical-align影響（因為vertical-align會導致inline-box在垂直方向上移動）
幽靈空白節點
每個行框前都有乙個虛擬的寬度為0的inline空白節點，font-size、line-height繼承自父元素
重要css屬性詳解
font-size
指定文字em框高度（字型實際顯示大小由字型決定）
如圖，實線框為em框，虛線框為em框拼接成的內容區
設定行內元素形成的乙個或多個行框之間的對齊方式
用於block、inline-block元素（inline-block對外表現為inline、對內為block）
可繼承 示例
text-align: center;
當內部只形成乙個行框時，行框整體居中
當形成多個行框時，各行框居中對齊
多個行框左右兩側對齊，最後一行無效
設定行高
對非替換元素來說，line-height = font-size + （上下等分的）行間距 = inline-box高度
可見非替換元素的inline-box高度完全由line-height決定
可用於任意元素
可繼承只直接影響行內非替換元素
line-height設定於塊級元素時不直接生效，但決定了其內部行內元素形成行框時的最小高度
由於行框最前面存在的「幽靈空白節點」，該節點繼承父元素（即外層的塊級元素）的line-height，所以這個節點形成的inline-box高度為line-height，而行框需要包含一行中所有inline-box的上下邊界，所以決定了行框的最小高度
vertical-align
指定行內元素在其所在行框中的垂直對齊方式
只能用於行內元素和替換元素
不可繼承
首先解釋兩個概念
元素基線（baseline）
非替換由字型決定，可理解為小寫字母x的下邊緣
替換元素為其inline-box的底部
行框基線
可以理解為在幽靈節點中的插入乙個虛擬的小寫字母「x」，行框基線則是這個字母「x」的底部
因為這個虛擬的字母x無法設定其vertical-align，同時vertical-align也不會發生繼承，所以這個虛擬節點的vertical-align值永遠是預設值baseline，所以可以代表行框的基線
display: inline-block;
對外表現為是inline元素，對內表現為block元素
在行框中的表現基本同替換元素
inline-block的基線
若inlin-block元素內部有inline元素，則基線為元素中最後乙個行框的基線
若inlin-block元素內部沒有inline元素，則基線為inline-block元素margin-box的底部
深入理解子元素的width與父元素的width關係
對於這一部分內容，如果理解準確，可以更容易控制布局，節省不必要的 這裡將簡單研究。演示如下 父子元素width關係 這時，我們在審查元素時可以發現，span和a的width 和height 的寬度是auto，即寬度是由其內容撐起來的，故為auto。如下 class parent class son ...
深入理解子元素的width與父元素的width關係
對於這一部分內容，如果理解準確，可以更容易控制布局，節省不必要的 這裡將簡單研究。演示如下 父子元素width關係 這時，我們在審查元素時可以發現，span和a的width 和height 的寬度是auto，即寬度是由其內容撐起來的，故為auto。如下 class parent class son ...
子元素蓋住父元素邊框
做tab選項卡頁的時候,當前活動的選項卡有邊框,同時下邊和面板之間無邊框 記得以前實現過,但再用的時候卻又不會了.現在實現如下.tab頁標題區域的html 乙個div下的若干span,每個span對應乙個選項卡.home profile 選項卡下面的線,是tabs框的下邊框 tabs border ...