css知識略寫

1.在使用div+css佈局時，儘量避免指定元素的寬度和高度，這種砌磚頭的寫法這會帶來許多不確定的影響，增加除錯麻煩，

2.div高度是由其內部文件流元素高度綜合決定的（核心）；文件流：文件內元素的流動的方向；

3.注意理解定位相關方面的知識，尤其是position:relative,position:absolute,position:fixed,在日常佈局中經常使用，

4.對於內聯元素需要設定width,height,padding，margin時，可以使用display：inline-block;block,（基礎）

5.理解偽元素和偽類的區別，偽元素：直意為偽造的元素，為了達到某種效果，增加一個元素，然後再新增樣式，例:

p:first-letter {color: red}
I love Web.</p>
複製程式碼

I love Web

//偽元素：frist-letter新增樣式到第一個字母

如果不是用偽元素的話，就得按照下面的方法做：

.first-letter {color: red}
<p><span class='first-letter'>I</span> love Web.</p>
複製程式碼

//給首字母新增一個span元素，然後給 span 增加樣式。偽類：本質上是一個類選擇器，為了達到在特定狀態下呈現樣式，可以使用偽類諸如：a:hover;a:visited…… 例:

p>i:first-child {color: red}
<p>
<i>first</i>
<i>second</i>
</p>
複製程式碼

first
second

//偽類 :first-child 新增樣式到第一個子元素如果我們不使用偽類，而希望達到上述效果，可以這樣做：

.first-child {color: red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>
複製程式碼

即我們給第一個子元素新增一個類，然後定義這個類的樣式。

所以兩者的區別就是：

偽類的效果可以通過新增一個實際的類來達到，而偽元素的效果則需要通過新增一個實際的元素才能達到，這也是為什麼他們一個稱為偽類，一個稱為偽元素的原因。
複製程式碼

6.瞭解css float相關知識，佈局時經常使用，

7.line-height可以控制元素的高度，一些情況下可以不用寫height

8.vertical-align在內聯元素居中對齊方面發揮重要作用，詳細瞭解相關知識

9.字型不同，字型的高度也不同，內聯元素的預設行高受到瀏覽器的影響也不盡相同，

10.兩種盒模型，content-box和border-box，border-box目前在佈局上越來越成為趨勢了。

11.幽靈空白節點一詞出自張鑫旭的部落格，原文應為“strut”,譯為“支柱”，個人認為這個解釋還是很通俗易懂的，

張鑫旭老師說，只要有“內聯盒子”在，就一定會有“行框盒子”，而每個“行框盒子”前面都有一個“幽靈空白節點”，這個“空白節點”永遠透明，不佔據任何寬度，看不見也無法通過指令碼獲取，就好像幽靈一樣，但又確確實實地存在，表現如同文字節點一樣，同時具有該元素的字型和行高屬性的0 寬度的內聯盒。

(注意，這裡有一個前提，文件宣告必須是HTML5 文件宣告（HTML 程式碼如下），如果還是很多年前的老宣告，則不存在“幽靈空白節點”。)

那為什麼下面這樣span為高度為0,沒有觸發幽靈空白節點？空的span不算內聯盒子嗎？以下原文來自思否@xqxian，謝謝這位的解釋，讓我茅塞頓開/。

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

意思就是如果一個line box裡沒有文字、保留的空格、非0的margin或padding或border的inline元素、或其他in-flow內容（比如圖片、inline-block或inline-table元素），且不以保留的換行符結束的話，就會被視作高度為0的line box。

問題裡的<div><span></span></div>就剛好符合這種特殊情況，設定成inline-block就不符合了。題主也可以試著把display改成inline-table，或者設定非0的margin、padding、border等，總之只要不滿足上述任一種情況，那麼就會受“幽靈空白畫素”（官方說法應該叫"strut"元素）的影響從而出現行高.

css知識略寫

css知識略寫

相關文章