CSS中的盒模型

時間 2019-12-14

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

CSS的盒模型描述了一些長方形盒子，這些長方形盒子被用來表示文檔樹中的元素，並根據視覺格式化模型進行定位。css

1. 盒子的尺寸

每一個盒子都有一個content區域（好比文本、圖片等）和可選的包圍content區域的padding、borde、margin區域。這些區域的大小由下面定義的屬性決定。下圖這些區域的相互關係以及與margin、border和padding相關的術語。

margin、border和padding能夠被拆分紅top、right、bottom和left段，舉例來講，上圖中的"LM"就表示left margin，"RP"表示 right padding，"TB"表示top border等等。
如上四個區域（content、padding、border和margin）的周界叫作邊界（edge），因此，每一個盒子都有四種邊界：html

content edge 或者說 inner edge
content edge 包圍由盒子寬度和高度決定的長方形，而這個長方形區域一般取決於元素的渲染內容。四個content邊決定了盒子的content box。
padding edge
padding edge包圍盒子的padding區域。若是padding的寬度爲0，則padding edge與content edge相同。四個padding邊決定了盒子的padding box。
border edge
border edge包圍盒子的border區域。若是border的寬度爲0，則border edge與padding edge相同。四個border邊決定了盒子的border box。
margin edge 或者說 outer edge
margin edge包圍盒子的margin區域。若是margin的寬度爲0，則margin edge與border edge相同。四個margin邊決定了盒子的margin box。django

每一個邊界均可以被拆分紅top，right，bottom和left邊。app

一個盒子的content area（content width和content height），取決於以下這些因素：生成盒子的元素是有設置了width和height屬性，盒子是否包含文本或其餘盒子，盒子是不是表格等。ide

content，padding，border區域的背景樣式有元素的background屬性指定，而margin區域的背景永遠是透明的。佈局

2. margin，padding，和border的例子

這個例子展現了margin，padding和border直接如何相互影響。spa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Examples of margins, padding, and borders</TITLE> <STYLE type="text/css"> UL { background: yellow; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* No borders set */ } LI { color: white; /* text color is white */ background: blue; /* Content, padding will be blue */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Note 0px padding right */ list-style: none /* no glyphs before a list item */ /* No borders set */ } LI.withborder { border-style: dashed; border-width: medium; /* sets border width on all sides */ border-color: lime; } </STYLE> </HEAD> <BODY> <UL> <LI>First element of list <LI class="withborder">Second element of list is a bit longer to illustrate wrapping. </UL> </BODY> </HTML>

這段代碼最終將會在文檔樹中產生一個UL元素和兩個LI子元素。
下面的這兩張圖中，第一張圖展現了上面的代碼最終顯示的樣式。第二張圖展現了UL元素的margin，padding，border之間的關係以及與它的子LI元素之間的關係。
code

說明：xml

每一個LI盒子的content width由從上到下計算而來；每一個LI盒子的包含塊由UL元素產生。
每一個LI盒子的margin box的高度由盒子的content height加上上下padding，再加上上下border，再加上上下margin計算而來。注意，LI盒子之間的豎直margin合併（collapse）了。
每一個LI盒子的right padding被經過padding屬性設置爲0。這個效果在第二張圖中被很明顯的展現出來。
LI盒子的margin是透明的，所以咱們看到的是UL元素padding和content區域的背景色黃色。
第二個LI元素經過border-style屬性指定了虛線border。

3. 外邊距屬性： margin-top，margin-right，margin-bottom，margin-left和margin

外邊距屬性指定了一個盒子的margin區域的寬度。"margin"屬性設置四個邊的margin，而其餘的外邊距屬性只指定單獨一邊。這些屬性能夠應用於全部元素，可是豎直的margin對不可替代的行內元素（non-replaced inline element）沒有任何影響。
上面這些屬性的取值類型以下：
<絕對數值>
採用固定的寬度
<百分比>
根據盒子的包含塊的寬度來計算百分比。注意，這對margin-top和margin-bottom一樣適用。若是包含塊的寬度由這個元素決定，那麼在CSS2.1中，結果爲未定義。
auto
自動
外邊距屬性值能夠爲負，可是這可能有特定的實現限制。htm

margin-top，margin-right，margin-bottom和margin-left指定了盒子的上、右、下、左外邊距。這些屬性能夠被應用於除表格顯示類型(除了table-caption，table和inline-table)之外的全部元素。margin-top和margin-bottom對不可替代的行內元素不起做用。
margin屬性是以上四個屬性的簡寫，能夠同時設置這四個屬性。若是指定了一個值，那麼應用於全部的邊。若是指定了兩個值，那麼第一個值設置top和bottom margin，第二個值設置left和right margin。若是設置了三個值，那麼第一個值設置top margin，第二個值設置left和right margin，第三個值設置bottom margin。若是設置了四個值，那麼依次設置top，right，bottom和left margin。

3.1 合併margin

在CSS中，兩個或多個盒子（這些盒子多是也可能不是兄弟盒子）的相鄰的margin會合併成一個單一的margin。外邊距合併也叫塌陷（collapse）。

相鄰的豎直margin會合並，除了：

根元素的盒子的margin不合並
若是有清除（clearance）的元素的top和bottom margin相鄰，那麼這個盒子的margin會與後面跟隨緊鄰的兄弟盒子的margin合併，可是合併後的margin不會與父塊的bottom margin合併。

水平的margin歷來不合並。

兩個margin相鄰，當且僅當：

都屬於在同一個塊格式化上下文中的正常文檔流中的塊級盒子
沒有行盒子（line box），沒有清除（clearance），沒有padding也沒有border分隔。（注意，某些零高度的行盒子會被會略，參見視覺格式化模型）
都屬於豎直相鄰的盒子的邊，也就是說：
- 一個盒子的top margin和這個盒子的第一個流內孩子盒子的top margin
- 盒子的bottom margin和這個盒子的下一個流內兄弟盒子的top margin
- 最後一個孩子盒子的bottom margin和它的父盒子的bottommargin（若是父盒子的高度是自動（auto）計算而來）
- 一個盒子的top和bottom margin，前提是這個盒子沒有創建新的塊格式化上下文，計算出來的min-height爲0，height爲0或auto，沒有在正常文檔流中的子元素。

若是一個合併後的margin的某個子margin與一個其餘的margin是相鄰的，那麼合併後的margin也認爲與這個margin相鄰。

相鄰的margin可能由彼此不相鄰或彼此不互爲祖前後代的元素產生。
上面這句話代表：

浮動盒子的margin和其餘任何盒子的margin不合並，即便是浮動盒子與其流內的子盒子的margin也不合並。

創建新的塊格式化上下文的元素（好比浮動元素和overflow的值不是visible的元素）的margin不與他們的流內的子元素的marign合併。

絕對定位的盒子的margin不合並，即便與他們的流內子盒子也不合並。

行內塊盒子的margin不合並，即便與他們的流內子盒子也不合並。

一個流內塊級盒子的bottom margin老是與它的下一個緊隨着的流內塊級兄弟盒子的top margin合併，除非這個兄弟盒子有清除（clearance）。

流內塊級元素的top margin會與它的第一個流內塊級子元素的top margin合併，前提是這個盒子沒有top border、top padding，而且子元素沒有應用清除。

一個height爲auto，min-height爲0的流內塊級盒子的bottom margin與它的最後一個流內塊級子盒子的bottom margin合併，前提是這個盒子沒有bottom padding、bottom border而且子盒子的bottom margin沒有與其餘的應用了清除的top margin合併。

一個盒子自己的margin會合並，前提是這個盒子的min-hieght屬性設置爲0，這個盒子沒有top或bottom border，沒有top或bottom padding，它的height爲0或者爲auto，而且它不包含任何行盒子，全部的流內子盒子的margin也合併。

當兩個或多個margin合併是，合併後的margin的寬度爲全部合併的寬度的最大值。若是有margin的值爲負值，那麼最後的合併margin絕對值值將是最大的正值扣除這個負值的所得。若是全部的margin爲負，那麼最後合併margin絕對值值將是0扣除最大的負值所得。

若是一個盒子的top和bottom margin相鄰，那麼margin可能直接穿過它。在這個狀況下，元素的位置就取決於它與和它有margin合併的元素的關係：

若是元素的margin與它的父元素的top margin合併，那麼這個元素的top border與父元素的的相同。
不然，要麼元素的父元素沒有參與margin合併，要麼父元素只有bottom margin參與合併，那麼這個元素的top border edge將與它有一個非0 bottom border時的top border edge同樣。

注意，被合併穿過（collapsed through）的元素的位置對與他進行margin合併的元素位置沒有任何影響，只有在給元素的子元素進行佈局的時候纔會參考top border edge的位置。

4. 內邊距屬性: padding-top, padding-right, padding-bottom, padding-left和padding

內邊距屬性指定了盒子的padding區域的寬度。"padding"屬性設置四個邊的padding，而其餘四個屬性設置特定邊的padding。
以上屬性的取值類型以下：
<絕對數值>
採用固定的寬度
<百分比>
根據盒子的包含塊的寬度來計算百分比。注意，這對padding-top和padding-bottom一樣適用。若是包含塊的寬度由這個元素決定，那麼在CSS2.1中，結果爲未定義。

不像外邊距屬性，內邊距屬性的值不能爲負。

padding-top，padding-right，padding-bottom，padding-left這四個屬性指定了盒子的上、右、下、左邊的padding，能夠應用於除了table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column之外的全部元素。

padding是上面四個屬性的簡寫形式，若是指定了一個值，那麼應用於全部的邊。若是指定了兩個值，那麼第一個值設置top和bottom padding，第二個值設置left和right padding。若是設置了三個值，那麼第一個值設置top padding，第二個值設置left和right padding，第三個值設置bottom padding。若是設置了四個值，那麼依次設置top，right，bottom和left padding。

5. 邊框屬性

邊框屬性指定了盒子的border area的寬度、顏色和樣式。這些屬性能夠應用於任何元素。

5.1 邊框寬度： border-top-width, border-right-width, border-bottom-width, border-left-width 和 border-width

邊框寬度屬性指定了border area的寬度。取值以下：
thin
細邊框
medium
中等寬度邊框
thick
粗邊框
<絕對數值>
邊框的粗細由指定的數值肯定，不能爲負。
前三個值的具體大小由UA決定，可是必須滿則下面這個條件：

thin <= medium <= thick

border-top-width, border-right-width, border-bottom-width, border-left-wdith四個屬性分別指定了上、右、下、左四個邊的邊框寬度。他們能夠被應用於任何元素。
border-width是上面四個屬性的簡寫形式，若是指定了一個值，那麼應用於全部的邊。若是指定了兩個值，那麼第一個值設置top和bottom border width，第二個值設置left和right border width。若是設置了三個值，那麼第一個值設置top border width，第二個值設置left和right border width，第三個值設置bottom border width。若是設置了四個值，那麼依次設置top，right，bottom和left border width。

5.2 邊框顏色： border-top-color, border-right-color, border-bottom-color, border-left-color 和 border-color

邊框顏色屬性指定了盒子邊框的顏色。
邊框顏色屬性取值爲：
<顏色>
具體的顏色值
transparent
邊框透明，可是依然保持有寬度。

border-top-color, border-right-color, border-bottom-color, border-left-color指定了上、右、下、左四個邊框的顏色，能夠被應用於全部元素。
border-color屬性是上面四個屬性的簡寫形式，它的取值與四個屬性的對應關係與border-width相同。

若是一個元素的邊框顏色沒有指定，那麼UA可能會使用元素的color屬性指定的顏色來做爲邊框的顏色。

5.3 邊框樣式： border-top-style, border-right-style, border-bottom-style, border-left-style 和 border-style

邊框樣式屬性指定了盒子邊框線條的樣式（實線、雙實線、虛線等）。屬性的取值以下:
none
沒有邊框，即邊框的寬度爲0.
hidden
與none相同。
dotted
邊框是一系列的點。
dashed
邊框是虛線。
solid
邊框是實線。
double
邊框是雙實線，兩條實線加上之間的寬度等於border-width的值。
groove
邊框看起來像是嵌入到畫布中同樣（邊框凹陷效果）。
ridge
與groove的效果相反，邊框看起來像是凸起來了（邊框凸起效果）。
inset
邊框使得盒子像是嵌入到畫布中同樣（盒子凹陷效果）。
outset
與inset的效果相仿，邊框使得盒子像是凸起來了（盒子凸起效果）。
全部的邊框都繪製在盒子的背景之上，邊框的顏色取決於元素的邊框顏色屬性。

border-top-style, border-right-style, border-bottom-style, border-left-style、右、下、左四個邊框的樣式，能夠被應用於全部元素。
border-style屬性是上面四個屬性的簡寫形式，它的取值與四個屬性的對應關係與border-width相同。

由於邊框樣式的初始值爲none，全部若是沒有設置邊框樣式的話，盒子的邊框不可見。

5.4 簡寫的邊框屬性： border-top, border-right, border-bottom, border-left 和 border

border-top, border-right, border-bottom和border-left屬性是盒子上、右、下、左邊框寬度、樣式和顏色的簡寫形式。如：

h1 { border-bottom: thick solid red }

被省略的屬性將使用它們的初始值。

H1 { border-bottom: thick solid }

border屬性能夠同時設置盒子的四個邊框的寬度、顏色和樣式。不像margin和padding屬性，border屬性不能給四個邊框設置不一樣的值。

考慮以下樣式，

blockquote { border: solid red; border-left: double; color: black; }

左邊框的顏色爲黑色，其餘邊框的顏色爲紅色。由於border-left覆蓋了border屬性對左邊框的設置，可是border-left沒有設置邊框顏色，全部使用了color屬性指定的顏色。

6. 雙向上下文中的行內元素的盒模型

對於每一個行盒子，UA必須按照視覺順序（非邏輯順序）爲這些行內盒子設置margin、border和padding。當元素的direction屬性值爲ltr是，元素的第一個行盒子的最左邊的行內盒子擁有left margin，left border和left padding，最後一個行盒子的最右邊的行內盒子擁有right padding， right border和right margin。當元素的direction屬性值爲rtl是，元素的第一個行盒子的最右邊的行內盒子擁有right margin，right border和right padding，最後一個行盒子的最左邊的行內盒子擁有left padding， left border和left margin。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。