[TOC] ## 前言 也許你自認為非常熟悉基本的css2屬性以及效果，但有些知識盲區你還是不清楚的。 ## 置換元素 * 有些元素本身，你認為是行內元素但是卻可以設置高寬，比如input、button、img等，這些元素本身其實是行內塊級元素，具有行內塊級的基本特征。 * 置換元素設置padding-top以及padding-bottom是有效的，設置line-height無效；而行內非置換元素無效，兩者對于padding-left,padding-right都是有效的。 * 拓展延伸：行內非置換元素設置行高無效，高度識別自動。 ## margin塌陷 1. 行內非置換元素，在寫外邊距時，如果外層盒模型沒有padding,border時，行內元素的margin-top會移植到父元素的margin-top實現，而本身沒有margin-top效果，俗稱margin塌陷。下面代碼的最終效果p margin-top:15px,span沒有margin-top的效果。（外層模型有padding,border可以正常實現外層10px 內層15px的外間距） ~~~ <p style="margin-top:10px"> <span style="margin-top:15px">我是行內非塊級元素</span> </p> ~~~ 2. 行內置換元素，不管外層是否有padding,border時，都會正常實現外層10px 內層15px的外間距。 ~~~ <p style="margin-top:10px"> <img style="margin-top:15px" src=""> </p> ~~~ ## 同級元素margin合并問題 1. 本元素margin-bottom與下一個元素margin-top ,取較大值15px ~~~ <p style="margin-bottom:15px"> </p> <p style="margin-top:10px"> </p> ~~~ 1. 本元素margin-right與下一個元素margin-left ,取和也就是25px ~~~ <span style="margin-right:15px;"> sdv </span> <span style="margin-left:10px"> sdv </span> ~~~ ## 同時篩選出符合多個條件 * 中間不加任何空格,多用于追加active樣式，前提在保證語法正確的情況下 ~~~ .a.active{} <span class="a active"></span> ~~~