轉載自：http://www.zblog.us/programing/web/css/cssbox-introduce-2.html

盒子模型定義

如果CSS對HTML文檔元素生成了一個描述該元素在HTML文檔布局中所占空間的矩形元素框（element box），那么我們可以形象地將其看作是一個盒子。CSS圍繞這些盒子產生了一種“盒子模型”概念，通過定義一系列與盒子相關的屬性（內容、填充、邊框、邊界），可以控制各個盒子乃至整個HTML文檔的表現效果和布局結構。雖然CSS中沒有盒子這個單獨的屬性對象，但它卻是CSS中無處不在的一個重要組成部分。

盒子模型如下：

margin 比較特別，它不會影響盒子本身的大小，但是它會影響和盒子有關的其他內容，因此 margin 是盒模型的一個重要的組成部分。

一些HTML元素如div、p等塊元素，默認情況下就是一個盒子，有些內聯元素如span、a等雖然默認不是盒子，但也可以通過CSS中的display屬性將其聲明成盒子，在HTML文檔中，不是盒子的元素各自的寬度為其所呈現的信息內容寬度，它們彼此間互相緊靠從左到右依次排列，直到占滿整個瀏覽器窗口后自動行。對于是盒子的元素，如果沒有特殊設置，其默認總是占單獨一行，寬度為瀏覽器窗口的寬度，在其前后的元素不管是不是盒子只能排列在它的上面或者下面，即上下累加著進行排列。每個盒子都可以看成是由從內到外的四個部分構成，即內容、填充、邊框和邊界，CSS為這四個部分規定了相關的屬性，通過對這些屬性的控制可以豐富盒子的實際表現效果。

四個組成部分及各自具備的屬性

CONTENT

內容是盒子模型的中心，它呈現了盒子的主要信息，這些信息可以是文本、圖片等多種類型。內容是盒子模型必備的組成部分，其他的三部分都是可選的。內容有三個屬性，width、height和overflow。使用width和height屬性可以指定盒子內容的高度和寬度，其值可以是長度計量值或者百分比值。當內容信息太多，超出內容區所占范圍時，可以使用overflow溢出屬性來指定處理方法。屬性值為hidden時，溢出部分將不可見；為visible時，溢出的內容信息可見，只是被呈現在盒子的外部；當為scroll時，滾動條將被自動添加到盒子中，用戶可以滾動顯示內容信息；當為auto時，將由瀏覽器決定如何處理溢出部分。

PADDDING

填充是內容和邊框之間的空間，可以被看作是內容的背景區域。填充的屬性有五種，即padding、padding-top、padding-bottom、padding-left、padding-right。使用這五種屬性可以指定內容與各方向邊框間的距離，對應的屬性值類型與width和height相同。同時通過對盒子背景色屬性的設置可以使填充部分呈現相應的顏色。

BORDER

邊框是內容和填充的邊界。邊框的屬性有border、border-style、border-width和border-color。邊框樣式屬性border-style是邊框最重要的屬性，根據CSS規范，如果沒有指定邊框樣式，其他的邊框屬性都會被忽略，邊框將不存在。CSS規定了dotted、doshed、solid等九種邊框樣式。使用邊框寬度屬性border-width可以為邊框指定具體的厚度，其屬性值可以是長度計量值，也可以是CSS規定的thin、medium和thick。使用border-color屬性可以為邊框指定相應的顏色，其屬性值可以是RGB值，也可以是CSS規定的顏色名。

MARGIN

邊界位于盒子的最外圍，它不是一條邊線而是添加在邊框外面的空間。邊界使元素盒子之間不必緊湊地連接在一起，是CSS布局的一個重要手段。邊界的屬性有五種，即margin、margin-top、margin-bottom、margin- left、margin-right，其具體的設置和使用與填充屬性類似。對于兩個鄰近的都設置有邊界值的盒子，他們鄰近部分的邊界將不是二者邊界的相加，而是二者的重疊，若二者鄰近的邊界值大小不等，則取二者中較大的值。同時，CSS容許給邊界屬性指定負數值，當指定負邊界值時，整個盒子將向指定負值方向的相反方向移動，以此可以產生盒子的重疊效果。采用指定邊界正負值的方法可以移動網頁中的元素，這是CSS布局技術中的一個重要方法。

盒子計算

盒子本身的大小是這樣計算的：

Width?
width + padding-left + padding-right + border-left + border-right

Height?
height + padding-top + padding-bottom + border-top + border-bottom

值為未明的情況

如果未聲明 padding 或者 border，那他們或者值為零(使用 css reset 時)，或者為瀏覽器的默認值(很可能不是零，尤其是那些通常沒有重置的表單元素)。

如果未聲明盒子的width(而且這個盒子是一個塊級元素)，那么事情就變得有點奇怪，看下面的幾種情況。

塊級盒的默認寬度

如果沒有聲明寬度，而且盒子是靜態或者相對定位，那么寬度將保持100%且padding和border將向內推動而不是向外擴展。

如果明確的確定寬度為100%，那么padding就會向外擴展。

上面這個圖形中，第一個是沒有設置寬度，并且padding為20px的盒子。第二個是設置寬度為100%，并且padding為20px的盒子。

從這個例子可以看出，盒子的默認寬度并不是100%，也可能是其他值，應該了解這種特別有價值的情況，因為在現存的很多情況下，它對于設置/不設置寬度是很多幫助的。

我遇到的最大的麻煩就是 textarea(文本框) 元素了，它們需要設為寬度為所需的”cols”屬性，并且不能包含子元素。因此通常需要明確的設置 textarea 的寬度為 100%，但有 padding 時，就會延 展 textarea 的寬度。固定寬度環境下，通?？梢栽O置為合適的像素值寬度，但是變寬情況就沒那么幸運了。

無寬度的絕對定位盒子

未設定寬度的絕對定位的盒子的表現有點不一樣。它們的寬度只需要適合它們所包含的內容即可。因此，如果盒中只有一個單詞，盒子就會像那個詞的表現一樣寬。如果變成兩個詞，盒子的寬度也會相應增加

這種情況會持續到盒子的寬度達到父元素寬度的 100%（最近的相對定位的父元素或者瀏覽器窗口），然后就會折行。
對盒子來說，垂直擴展以適應包含的內容是很自然的。值得奇怪的是，不僅僅是不同平臺下的文本表現不同，不同的瀏覽器處理這個問題時，也有不同，所以要注意。

無寬度浮動盒子?

同無寬度的絕對定位盒子的表現一樣。盒子的寬度只需要擴展到所包含內容的寬度，直到其父元素的寬。（其父元素不必是相對定位的）。

內聯元素也是盒子?

我們這里一直把重點放在塊級元素的盒子上。很容易就可以把塊級元素想象為盒子，但是內聯元素也是盒子。可以把他們想象為非常長而窄的長方形，它們也可以像其它盒子一樣有 margin, padding 和 border。

?

折行使它看起來有些不好理解。如上所示的左 margin 把盒子推向右邊，但是只在第一行有效，因為那是盒子的起點。padding 正常的應用在文本的上部或下部，當折行時它會忽略上面行的 padding 并且以行高(line-height)要求的位置作為起點。

轉載于:https://www.cnblogs.com/webkong/p/4342296.html

總結

以上是生活随笔為你收集整理的CSS 盒子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。