css知識略寫

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"元素）的影響從而出現行高.