理解CSS視覺格式化

前面的話

  CSS視覺格式化這個詞可能比較陌生，但提及盒模型可能就恍然大悟了。實際上，盒模型只是CSS視覺格式化的一部分。視覺格式化分爲塊級和行內兩種處理方式。理解視覺格式化，能夠肯定獲得的效果是應該顯示的正確效果，仍是瀏覽器兼容性的bug。下面將詳細介紹CSS視覺格式化

 

術語解釋

  瞭解CSS視覺格式化以前要先了解一些基本術語。而下面全部的術語中，最重要的就是基本框和包含塊

【基本框】

  CSS假定每一個元素都會生成一個或多個矩形框，這稱爲元素框。各元素框中心有一個內容區(content area)。這個內容區周圍有可選的內邊距、邊框和外邊距。之因此可選，是由於它們的寬度能夠設置爲0

  能夠用多種屬性設置外邊距、邊框和內邊距。內容的背景也會應用到內邊距。外邊距一般是透明的，從中能夠看到父元素的背景。內邊距不能是負值，可是外邊距能夠

  對於不一樣類型的元素格式化時存在着差異。塊級元素的處理不一樣於行內元素，而浮動元素和定位元素也分別有着各自不一樣的表現

【包含塊】

  每一個元素都相對於其包含塊擺放，包含塊就是一個元素的佈局上下文。對於正常的文本流中的一個元素而言，包含塊由最近的塊級祖先框、表單元格或行內塊祖先框的內容邊界構成

  [注意]行內元素的擺放方式並不直接依賴於包含塊

【其餘術語】

一、正常流

  文本從左向右、從上向下顯示，是傳統HTML文檔的文本佈局

二、非替換元素

  若是元素的內容包含在文檔中，則稱之爲非替換元素

三、替換元素

  指做爲其餘內容佔位符的一個元素(<img>、<video>、<audio>等)。但，inline-block元素在佈局中也看成替換元素處理。因此，又包含大量的表單類元素及表格類元素

四、塊級元素

  在正常流中，在其元素框以前和以後生成「換行」，且會垂直襬放的元素。經過聲明display:block可讓元素生成塊級框

五、行內元素

  在正常流中，不會在元素框以前或以後生成「行分隔符」，是塊級元素的後代。經過聲明display:inline可讓元素生成行內框

六、根元素

  位於文檔樹頂端的元素，在HTML文檔中，是元素HTML

 

盒模型

  盒模型又叫框模型，由寬高、內邊距、邊框和外邊距組成

【四個盒子】

  關於盒模型，首先要肯定四個盒子的概念

一、元素框是指margin box

  元素框: width/height + padding + border + margin

二、可視區域是指border box

  [注意]關於可視區域，一直都有兩個爭論，一個指border box，另外一個指padding box。但從字面去理解，可視區域應該就是指能夠看到的區域，應該以border box爲準

  可視區域：width/height + padding + border

三、客戶區(client)是指padding box

  [注意]關於客戶區這種說法來源於javascript中的clientWidth和clientHeight

  客戶區：width/height + padding

四、內容區是指content box(width和height組成)

  內容區：width/height

  對於水平和垂直佈局，有着不一樣的效果，下面以水平格式化和垂直格式化分別介紹

【水平格式化】

  水平格式化的規則是正常流中塊級元素框的水平總和等於父元素的width

  水平格式化的7大屬性是margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。7個屬性的值加在一塊兒是元素包含塊的寬度，這每每是塊元素的父元素的width值(由於塊級元素的父級元素幾乎都是塊級元素)

auto

  視覺格式化中比較重要的一個概念就是auto。auto值是用來彌補實際值與所需總和的差距

  在水平格式化的7個屬性中只有margin-left、width、margin-right三個屬性能夠設置爲auto，其他屬性必須設置爲特定的值，或者默認寬度爲0

一、1個auto

  若只有一個值爲auto，則根據7個水平屬性的總結等於父級width的公式，計算出auto所表示的值

  因爲width默認值爲auto，而margin、border和padding默認值都爲0。因此，會有塊級元素默認撐滿父元素的表現

二、2個auto

  若margin-left和margin-right爲auto，則元素將在父元素中居中顯示

  若margin-left和width爲auto，則margin-left將被重置爲0

  若margin-right和width爲auto，則margin-right將被重置爲0

三、3個auto

  若三個值都爲auto，則margin-left和margin-right都被重置爲0

四、0個auto

  若margin-left/width/margin-right三個屬性都設置爲非auto的某個值，這種狀況叫作格式化屬性過度受限。這樣margin-right將被重置爲auto

  關於水平auto的演示

替換元素

  上面介紹的是正常文本流中非替換塊級元素的水平格式化，而替換塊級元素管理起來則更簡單一些。非替換塊元素的全部規則一樣適用於替換塊元素，只有一個例外：若是width是auto，元素的寬度則是內容的固有寬度

  下面以圖片爲例子來講明塊級替換元素，但因爲圖片是行內替換元素，因此須要將display設置爲block

  若是一個替換元素的width不一樣於其固有寬度，那麼height值也會成比例變化，除非Height顯式設置一個特定值，反過來也同樣

【垂直格式化】

  一個元素的默認高度由其內容決定，高度還會受內容寬度的影響，段落越窄，相應地就會越高，以便容納其中全部的內聯內容

  在CSS中，能夠對任何塊級元素設置顯式高度。若是指定高度大於顯示內容所需高度，多餘的高度會產生一個視覺效果，就好像有額外的內邊距同樣；若是指定高度小於顯示內容所需高度，則會向元素添加一個滾動條。若是元素內容的高度大於元素框的高度，瀏覽器的具體行爲取決於overflow屬性

  與水平格式化的狀況相似，垂直格式化也有7個相關屬性：margin-top/border-top/padding-top/height/padding-bottom/border-bottom/margin-bottom

  垂直格式化7大屬性的和必須等於元素包含塊的height

auto

  在垂直格式化的7個屬性中，只有margin-top、height、margin-bottom三個屬性能夠設置爲auto

  與水平格式化不一樣，垂直格式化的auto處理較爲簡單。若是塊級正常流元素設置爲height:auto，顯示時其高度將剛好足以包含其內聯內容的行盒；若是margin-top或margin-bottom設置爲auto，它會自動計算爲0

  [注意]對於定位元素的上下外邊距的auto處理，則有所不一樣

 

行佈局

  行內元素沒有塊級元素那麼簡單和直接，塊級元素只是生成框，一般不容許其餘內容與這些框並存

  在瞭解行內元素視覺格式化以前要先了解一些涉及到的基本術語

【術語】

一、匿名文本

  匿名文本(anonymous text)是指全部未包含在行內元素中的字符串

二、em框

  em框在字體中定義，也稱爲字符框(character box)。實際的字形可能比其em框更高或更矮。在CSS中，font-size的值肯定了各個em框的高度

三、內容區

  在非替換元素中，內容區是元素中各字符的em框串在一塊兒構成的框；而在替換元素中，內容區就是元素的固有高度再加上可能有的外邊距、邊框或內邊距。內容區相似於一個塊級元素的內容框(content box)

四、行間距

  行間距(leading)是font-size和line-height之差。這個差實際上要分爲兩半，分別應用到內容區的頂部和底部

  [注意]行間距只應用於非替換元素

五、行內框

  行內框經過向內容區增長行間距來描述。對於非替換元素，元素行內框的高度等於line-height的高度；對於替換元素，元素行內框的高度則剛好等於內容區的高度，由於行間距不該用到替換元素

  [注意]行內框的區域與內聯元素背景顏色所在的區域無關

六、行框

  行框是包含該行中出現的行內框的最高點和最低點的最小框。換句話說，行框的上邊界要位於最高行內框的上邊界；而行框的底邊要放在最低行內框的下邊界

【構造行框】

  行框構造是行佈局中很是重要的一個環節，接下來介紹行框構造的步驟

  一、構造各元素的行內框

  a、對於替換元素來講，獲得各元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width、border-bottom-width值，把它們加在一塊兒(由於，行間距不該用到替換元素上，因此替換元素的內容大小等於行內框大小)

  b、對於非替換元素來講，獲得各行內非替換元素及不屬於後代行內元素的全部文本的font-size值和line-height值，再將line-height減去font-size，獲得行的行間距，這個行間距除以2，將其一半分別應用到em框的頂部和底部

  二、對於各內容區，肯定它在整行基線的上方和下方分別超出多少。對於非替換元素來講，肯定各元素及匿名文本各部分的基線的位置，並知道該行自己基線的位置，而後將其對齊；對於替換元素來講，將其底邊放在整行的基線上

  三、對於指定了vertical-align值的元素，肯定其垂直偏移量。由此可知，該元素的行內框要向上或向下移動多遠，並改變元素在基線上方或下方超出的距離

  四、既然已經知道了全部行內框會放在哪裏，再來計算最後的行框高度。爲此，只需將基線與最高行內頂端之間的距離加上基線與最低行內框底端之間的距離

  行的高度(又叫行框的高度)由其組成元素和其餘內容(如文本)的高度肯定。行高line-height實際上隻影響行內元素和其餘行內內容，而不會直接影響塊級元素

  在行佈局中，替換元素和非替換元素並不相同，接下來將分別進行介紹

【行內非替換元素】

  首先，對於行內非替換元素或匿名文本某一部分，font-size值肯定了內容區的高度。若是一個行內元素的font-size爲15px，則內容區的高度爲15px

  內容區加上行間距等於行內框。若是一個行內非替換元素的font-size爲15px，line-height爲21px，則相差6px。用戶代理將這6像素一分爲二，將其一半分別應用到內容區的頂部和底部，這就獲得了行內框

  當line-height小於font-size時，行內框實際上小於內容區

  行框定義爲行中最高行內框的頂端到最低行內框底端之間的距離，並且各行框的頂端挨着上一行行框的底端

  若是一行中存在行高相同但字體大小不一樣的行內元素，雖然全部行內框大小都相等，但它們排列得並不整齊，由於文本都是按照基線對齊的

  若是改變行內框的垂直對齊，好比設置垂直對齊爲4px，這會同時提高其內容區和行內框。若是設置的該行內框是行中的最高點，則會把整個行框的頂端也向上移動4像素

框屬性

  若是一個行內元素存在邊框或內邊距，而沒有設置一個足夠大的行高line-height來容納它們，就有覆蓋其餘行的危險

  內邊距和邊框不會改變內容區的尺寸，不過它會影響這個元素行內框的高度，但並不會影響行框的生成和佈局，即不改變行高。至於外邊距，它不會應用到行內非替換元素的頂端和底端，不會影響行框的高度

  儘管內邊距、邊框和外邊距不影響行高，可是它們確實能影響一個元素內容的佈局。可能將文本推離其左右兩端。實際上，若是左、右兩外邊距爲負，可能會把文本拉近行內元素，甚至致使重疊

  margin-left、padding-left、border-left應用到元素的開始處；而margin-right、padding-right、border-right應用到元素的結尾處

div{width: 200px;border: 1px solid red;
}
    
span{border: 1px solid black;background-color: yellow;padding: 6px;margin: 6px;font-size: 30px;line-height: 50px;
}

<div><span>測試文字測試文字測試文字</span></div>

【行內替換元素】

  通常地，行內替換元素(如圖像)都有固有的高度和寬度。有固有高度的替換元素可能致使行框比正常要高。但這不會改變行中任何元素的行高line-height值，包括替換元素自己。相反，只是讓行框高度剛好能包含替換元素

  行內替換元素須要行高line-height值，從而在垂直對齊時可以正確地定位元素。由於垂直對齊vertical-align的百分數值是相對於元素的行高line-height來計算的。對於垂直對齊來講，圖像自己的高度可有可無，關鍵是line-height的值

  因爲行內替換元素行內框的高度由高度height、內邊距padding、邊框border和外邊距margin共同決定。因此，盒模型屬性的變化會影響行內框的高度，進而可能會影響行框的高度

  默認地，行內替換元素位於基線上。若是向替換元素增長下內邊距、外邊距或邊框，內容區會上移。替換元素並無本身的基線，因此相對來講最好的辦法是將其行內框的底端與基線對齊。所以，其實是下外邊距邊界與基線對齊

div{width: 300px;border: 1px solid red;
}
    
span{border: 1px solid black;background-color: yellow;font-size: 30px;line-height: 50px;
}
img{height: 26px;padding: 2px;margin: 2px;
}

<div><span>測試文字測試<
img src="backup/lamp.gif" alt="測試圖片">文字測試文字</span></div>

 

最後

  關於盒模型，基本內容通常都比較熟悉，比較重要的內容就是水平方向和垂直方向上auto不一樣狀況的分析

  歡迎交流