CSS規範 8 盒模型 Box Model

2017-07-20: 關於外邊距摺疊, 推薦問題:

url:

translator : haoycn

date: 15th of aug, 2015

每個盒都有乙個內容區域content（如，文字，等）以及可選的圍繞在周圍的內邊距、邊框和外邊距區域；每個區域的大小由本文後述的屬性指定。下圖展示了這些區域的關聯以及用於描述外邊距、邊框和內邊距的各部分的術語。

外邊距、邊框和內邊距可以被分解到上、右、下、左各部分（如，在上圖中，lm表示左外邊距，rp表示右內邊距，tb表示上邊框等）。

四種區域（內容、內邊距、邊框、外邊距）的邊界被稱作乙個「邊緣edge」，因此每個盒有四種邊緣：

內容邊緣content edge或內邊緣inner edge

內容邊緣圍繞著由盒的寬和高所指定的矩形，該矩形通常由元素的已渲染內容rendered content所決定。四個內容邊緣規定了盒的內容盒content box。

內邊距邊緣

內邊距邊緣圍繞著盒的內邊距。如果內邊距寬度為0，則內邊距邊緣即是內容邊緣。四個內邊距邊緣規定了盒的內邊距盒padding box。

邊框邊緣

邊框邊緣圍繞著盒的邊框。如果邊框寬度為0，則邊框邊緣即是內邊距邊緣。四個邊框邊緣規定了盒的邊框盒border box。

外邊距邊緣或外邊緣

外邊距邊緣圍繞著盒的外邊距。如果外邊距寬度為0，則外邊距邊緣即邊框邊緣。四個外邊距邊緣規定了盒的外邊距盒margin box。

每個邊緣都可以被分解成上、右、下、左邊緣。

盒內容區域的尺寸——即內容寬度content width和內容高度content width——由這些因素所決定：生成盒的元素是否設定了width和height屬性；盒是否包含了文字或其他盒；盒是否為**；等等。盒的寬度和高度將在視覺格式化模型詳述一章中討論。

盒的內容、內邊距以及邊框區域的背景樣式由生成盒的元素的background屬性所規定。外邊距的背景始終為透明。

下例展示了外邊距、內邊距和邊框如何互動。html文件：

下面的第一圖展示了例子的結果。第二圖展示了ul元素及其li子元素的外邊距、內邊距和邊框之間的關係。（不成比例）

注意：外邊距的各屬性規定了盒的外邊距區域的寬度。margin設定所有四個方向的外邊距，而其他外邊距屬性則只設定各自方向寬度。這些屬性應用於所有元素，但垂直外邊距在非替代行內元素上無效。

譯者注：此處以及下文的各屬性介紹均略，可查css手冊

在css中，兩個及以上的（不一定是同胞）盒的相鄰外邊距可能合併為乙個單獨的外邊距。以這種方式的合併的外邊距被稱為摺疊collapse，合併後的外邊距被稱為摺疊外邊距collapsed margin。

相鄰垂直外邊距發生摺疊，除了：

水平外邊距不重疊。

兩個外邊距為相鄰關係，當且僅當：

如果乙個摺疊外邊距與另一外邊距的任何一邊相鄰，則視二者相鄰。

注意：不是同胞或祖先關係的元素也可以產生相鄰外邊距。

注意：上述規則表明了：

當兩個及以上外邊距摺疊，合併後的外邊距寬度是發生摺疊的外邊距中的最大寬度。如果發生摺疊的外邊距中有負數，則為最大正數相鄰外邊距減去最小負數相鄰外邊距的絕對值。如果不存在正數外邊距，則為零減去最小負數相鄰外邊距的絕對值。

如果乙個盒的上下外邊距相鄰，則外邊距可能穿過盒而摺疊collapse through it。這種情況下，元素的定位取決於它同其他外邊距摺疊的元素的關係。

需要注意的是，被摺疊穿過的元素的定位對與之外邊距摺疊的其他元素的定位無影響；其上邊框邊緣的定位僅用於布局其後代元素。

對每個行盒而言，使用者**必須按視覺順序（而非邏輯順序）渲染其生成的行內盒的外邊距、邊框和內邊距。

當元素direction屬性值為ltr，元素呈現的第乙個行盒的最左生成盒擁有左外邊距、左邊框和左內邊距，而元素呈現的最後乙個行盒的最右生成盒擁有右內邊距、右邊框和右外邊距。

當元素direction屬性值為rtl，元素呈現的第乙個行盒的最右生成盒擁有右外邊距、右邊框和右內邊距，而元素呈現的最後乙個行盒的最左生成盒擁有左內邊距、左邊框和左外邊距。

譯者讀畢此文，細心揣摩，將經驗和疑問總結如下：

本章節描述了w3c的標準盒模型，同時還存在ie6在怪異模式quicks mode的另一種盒模型。此處簡述二者的區別如下——

w3c標準下：盒總寬/高度 = width/height + padding + border + margin

怪異模式下：盒總寬/高度 = width/height + margin = 內容寬/高度 + padding + border + margin

css3中，box-sizing預設為content-box，即採用w3c標準盒模型，若取值border-box則採用怪異模式盒模型。

css規範道：

盒的內容、內邊距以及邊框區域的背景樣式由生成盒的元素的background屬性所規定。外邊距的背景始終為透明。

如下css：

html

外邊距摺疊中，很多地方敘述了「有空隙的元素」，這是什麼意思呢？其意義即是說，該元素清除了浮動。

點此閱讀：

如果讀者已經掌握清除浮動和空隙的知識，那就讓我們來看乙個有空隙的情景。

如果乙個有空隙的元素的上下外邊距相鄰，其外邊距將同其後同胞的相鄰外邊距摺疊，但不同父塊的下外邊距摺疊。

共同css：

html,body

/*橫線，直觀對比摺疊情況*/
.line 
.mt.mb
#b#c

不同父塊的下外邊距摺疊

html：

如果乙個盒不建立新的塊格式化上下文、min-height計算值為零、height計算值為零或auto、沒有在文件流內的子盒，其上下外邊距

建立新塊格式化上下文，如overflow: hidden

設定min-height

設定固定高height

新增文件流內（即非浮動、非絕對定位）子盒

需要注意最後一種辦法，子盒要麼有邊框或內邊距，要麼有內容，否則父盒的自身垂直外邊距同樣會摺疊。而如果子盒只有垂直外邊距，該垂直外邊距將同父盒的垂直外邊距摺疊，而不會阻止父盒自身垂直邊距摺疊。

Css規範整理 2 css 盒模型

盒基本的模型就是 裡面 和 外面，界定它的就是四條邊。css 盒模型的表現，有以下的規則 每個盒都有一塊 內容區 content area 和周圍可選的padding，border和margin區域，每塊區域的尺寸通過下面定義的屬性指定。margin，border和padding可以分為上，右，下和...

css盒模型 標準盒模型 怪異盒模型

css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...

CSS 盒模型和怪異盒模型

盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...