css細節複習筆記——基本視覺格式化，css細節複習筆記

css細節複習筆記——基本視覺格式化，css細節複習筆記

css包含如此開放、如此強大的一個模型，對於這樣一個模型，可以有無數種方法結合應用各種屬性，可以得到的效果數不勝數。

 

基本框

css假定每個元素都會產生一個或多個矩形框，這稱為元素框。各元素中心有一個內容區，這個內容區周圍包含可選的內外邊距和邊框（之所以認為是可選，是因為可以設定為0）。

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

包含塊

每個元素都相當於包含塊擺放；可以這麼說，包含塊就是一個元素的”布局上下文“，css2.1定義了一系列規則來確定元素的包含塊。

 

常用名詞：

正常流，文本從左向右，從上向下顯示。要讓一個元素不在正常流中，唯一的辦法是使之成為浮動或定位元素。

非替換元素，如果元素的內容包含在文檔中，則稱之為非替換元素。

替換元素，指用作為其他內容預留位置的一個元素。替換元素的一個經典例子就是img元素。它只是指向一個影像檔，這個檔案將插入到文檔流中該img元素本身的位置。

區塊層級元素，這是指段落、標題或div之類的元素。這個元素在正常流中，會在其框之前和之後產生”換行“，所以處於正常流中的區塊層級元素會垂直擺放。通過聲明display:block，可以讓元素產生塊級框。

行內元素，這是指strong或span之類的元素。這個元素不會在之前或之後產生”行分割符“，它們是區塊層級元素的後代。通過聲明display:inline，可以讓元素產生vyige行內框。

根項目，位於文檔流頂端的元素，在html文檔中，這就是元素html。

 

區塊層級元素-水平格式化

width並不是指可見元素框的寬度，如果為一個元素宣告了內編劇、邊框以及寬度，他們指定的寬度則是左外邊界到右外邊界的距離。可以通過設定box-sizing：content-box來類比ie6的怪異現象，即使得元素的寬度為實際設定的寬度width，而不是width+padding+border。

使用auto

<div class ="container1"><p>A paragraph</p></div>

.container1{width: 400px;border: 1px solid #000;}.container1 p{margin-left:auto;margin-right: 100px;width: 100px;}

假設padding-left(padding-right)、margin-left(margin-rignt)、width，border-left-right(border-right)七個屬性的和必須等與外容器的寬度，即400px，設定左邊距auto，那麼左邊距的寬度將是200px。就是說，auto是用來”填補“所需的距離，使元素的總寬度等於其包含塊的width。

.container1 p{background: #ccc;margin-right: auto;
margin-left: auto;width: 100px; }

效果如下：

因此，如果設定margin-left和margin-right都為auto：

將兩個外邊距設定為相等的長度是將元素置中的一個正確方法，這不同於使用text-align(text-align只應用與區塊層級元素的內聯內容，所以將元素的text-align設定為center並不能將這個元素置中)。

如果設定width和marin-left都為auto，那麼margin-left將會被設定為0：

.container1 p{        background: #ccc;margin-right: 100px;        margin-left: auto;width: auto;    }

設定負外邊距，

.container1 p{        background: #ccc;margin-right: 100px;        margin-left: -100px;width: auto;    }

width的值為400px-100px（+margin-left）+100px。因為marin-left的為負值，因此content的實際width要加上(負的margin-left值)

 

區塊層級元素-垂直格式化

一個元素預設的高度由其內容決定。高度還會受內容寬度的影響；段落越窄，相應地就會越高，以便容納其中所有的內聯內容。

如果正常流中一個塊元素的margin-top或margin-bottom設定為auto，它會自動計算為0.遺憾的是，如果值為0，就不能你容易地將正常流元素在其包含塊中置中。也就是說，如果將一個元素的上、下外邊距設定為auto。實際上它們都會被重設為0，使得元素沒有外邊距。

 

 合并垂直外邊距

垂直格式化的另一個重要方面是垂直相鄰外邊距的合并。這種合并性為只應用於外邊距。如果元素有內邊距和邊框，它們絕對不會合并。

舉個例子，一個無序列表，其清單項目前後相鄰。

li{margin-top: 10px;margin-bottom: 15px;}

每個清單項目有10px的上外邊距和15px的下外邊距。不過，在顯示這個列表時，相鄰清單項目之間的距離是15px而不是25px：

之所以會這樣，是因為相鄰外邊距會沿著豎起軸合并。換句話，兩個外邊距中較小的一個會被比較大的一個合并。

如果相鄰有多個外邊距，也會出現合并，如列表的最後。對前面的例子進行補充，假設應用一下規則：

ul{margin-bottom:15px}li{margn-top:10px;margin-bottom:20px;}h1{margin-top:28px;}

最後列表合并外邊距為28px.

如果其中一個外邊距為負數，那麼實際外邊距就是最大的外邊距減去負數外邊距的絕對值。

 

行內元素的行布局

對於行內元素來說，這沒有區塊層級元素那麼簡單和直接，區塊層級元素知識產生框，通常不允許其他內容與這些框並存。

文本使用text-align進行兩端對其時，word-spacing的值可能被覆蓋（如果letter-spacing是一個長度值，這個值不能被覆蓋）。

基本術語和概念

匿名文本，是指所有未包含在行內元素中的字串<p>I'm<em>so</em>happy!</p>

序列中I'm和happy!都是匿名文本。

em框，em框在字型中定義，也成為字元框。實際的字形可能比其em框更高或更矮。

內容區，在非替換元素中，內容區可能有兩種。內容區可以是元素中個字元的em框串在一起構成的框，也可以是由元素中字元字形描述的框。

行間距，是font-size值和line-height值只差，這個差實際上要分為兩半，分別應用到內容區的頂部和底部。為內容區增加的這兩部分分別稱為版兼具。行內距只應用於非替換元素。

行內框，這個框通過向內容區增加行間距來描述。對於非替換元素，袁術行內框的高度剛好等於line-height的值。對於替換元素，元素行內框的高度則恰好等於內容區的高度，因為行間距不應用到替換元素。

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

1）內容區類似於一個區塊層級元素的內容框。

2）行內元素的背景應用於內容區及所有內邊距。

3）行內元素的邊框要包圍內容區及所有內邊距和邊框。非替換元素的內邊距、邊框和外邊距對行內元素或其產生的框沒有垂直效果；也就是所它們不會影響元素行內框的高度。

4）替換元素的外邊距和邊框確實會影響該元素行內框的高度，相應地，也可能影響包含該元素的邊框高度。

 

行內非替換元素

假設有一下標記：

<p style="font-size:12px;line-height:12px;">    This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="font-size:24px;">strongly emphasized</strong>and which is<br>larger than the surrounding text.</p>

效果如下：

大多數文本的font-size都是12px，只有一個行內非替換元素中的文字大小是24px。不過，所有文本的line-height都是12px，因為line-heght是一個繼承屬性。因此strong元素的line-height也是12px。 

由於行內框的頂端在元素內容區內部，所以元素的內容落在了行框的外邊，實際上與其他行框發生了重疊。其結果是，文本行看上去很不規則。

<p style="font-size:12px;line-height:14px;">    This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="font-size:24px;verical-align:4px">strongly emphasized</strong>and which is<br>larger than the surrounding text.</p>

把元素上升4像素，折回同時提升其內容區和行內框。由於strong元素的行內框頂端已經是行中的最高點，對垂直對其的這個修改會把整個行框的頂端也向上移4像素。效果

垂直對齊影響行框高度。

如果line-height不使用單位，而是用值小於1的數值，那麼line-height將會相對於元素本省font-size設定行高，而不是相對於父元素設定。