Inline-Block（內聯塊）
inline-block值混合塊和內聯特性。
盒子的外部被視為內聯元素。因此，不會為元素建立新行。
框的內部被視為塊元素，並應用諸如寬度，高度和邊距的屬性。
block
li、
inline
a、
background
僅針對width和padding，不針對border、margin
浮動
1、浮動後，子元素父元素若不設定寬度，將預設設定為width：100%，即子元素的寬度等於父元素。
2、浮動後，若子元素設定寬度，父元素不設定寬度，子元素將撐開父元素。float後width示意demo
z-index
z-index需要與postion：absolute/relative/fixed/inherit配合使用。
margin
兩個magin相遇時，他們會重合，取較大者形成間距。margin重疊示意DEMO
注意：若子元素超出父元素，父元素會與父元素進行排布，不會理會其父元素的子元素。
父元素與父元素進行比較
transition
用於漸變的一個屬性
W3C文件
height：0與overflow配合的效果 VS 清除浮動時的height：0與overflow配合
overflow:hidden在清除浮動時給父元素設定可以讓父
元素從height：0變為有高度（子元素高度），但是
若父元素內部不是浮動的子元素，你這樣設定height：
0，將使子元素隱藏。
tab標籤純CSS實現
參考文章：用純css實現下拉選單的幾種方式
法1：hover+display：none大法
思路：用ul、li做導航條，然後加上偽類hover，控制display在none與block之間切換。
侷限性：滑鼠移開導航條就沒了
法2：radio+label+display：none大法
思路：用input的radio型別，關聯label，然後設定input為display：none；通過點選label來控制display與block之前切換。
侷限性：？
法3：overflow大法
思路：將下拉選單的內容部分與導航欄放在一個盒子裡面，然後將導航欄與盒子height設定為一樣，同時設定overflow：hidden；將下拉選單的內容部分隱藏起來。
此法需要注意Z-index。
法4：ul高度設為0+opacity大法
思路：同法3 只是把overflow替換成opacity。
上面的幾種方法都是不能新增過渡效果的，滑鼠滑過時下拉選單就馬上彈出來了，使用者體驗不是很>好，下面這種方法可以新增過渡的效果來實現一定時間內來彈出
法5：absolute大法
思路：將下拉選單用absolute放到瀏覽器外面看不到的地方【left：-999px；】，顯示時再拿回來【left：0；】