轉(zhuǎn)載自：http://www.zblog.us/programing/web/css/cssbox-introduce-2.html

盒子模型定義

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

盒子模型如下：

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

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

四個(gè)組成部分及各自具備的屬性

CONTENT

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

PADDDING

填充是內(nèi)容和邊框之間的空間，可以被看作是內(nèi)容的背景區(qū)域。填充的屬性有五種，即padding、padding-top、padding-bottom、padding-left、padding-right。使用這五種屬性可以指定內(nèi)容與各方向邊框間的距離，對(duì)應(yīng)的屬性值類(lèi)型與width和height相同。同時(shí)通過(guò)對(duì)盒子背景色屬性的設(shè)置可以使填充部分呈現(xiàn)相應(yīng)的顏色。

BORDER

邊框是內(nèi)容和填充的邊界。邊框的屬性有border、border-style、border-width和border-color。邊框樣式屬性border-style是邊框最重要的屬性，根據(jù)CSS規(guī)范，如果沒(méi)有指定邊框樣式，其他的邊框?qū)傩远紩?huì)被忽略，邊框?qū)⒉淮嬖凇SS規(guī)定了dotted、doshed、solid等九種邊框樣式。使用邊框?qū)挾葘傩詁order-width可以為邊框指定具體的厚度，其屬性值可以是長(zhǎng)度計(jì)量值，也可以是CSS規(guī)定的thin、medium和thick。使用border-color屬性可以為邊框指定相應(yīng)的顏色，其屬性值可以是RGB值，也可以是CSS規(guī)定的顏色名。

MARGIN

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

盒子計(jì)算

盒子本身的大小是這樣計(jì)算的：

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

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

值為未明的情況

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

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

塊級(jí)盒的默認(rèn)寬度

如果沒(méi)有聲明寬度，而且盒子是靜態(tài)或者相對(duì)定位，那么寬度將保持100%且padding和border將向內(nèi)推動(dòng)而不是向外擴(kuò)展。

如果明確的確定寬度為100%，那么padding就會(huì)向外擴(kuò)展。

上面這個(gè)圖形中，第一個(gè)是沒(méi)有設(shè)置寬度，并且padding為20px的盒子。第二個(gè)是設(shè)置寬度為100%，并且padding為20px的盒子。

從這個(gè)例子可以看出，盒子的默認(rèn)寬度并不是100%，也可能是其他值，應(yīng)該了解這種特別有價(jià)值的情況，因?yàn)樵诂F(xiàn)存的很多情況下，它對(duì)于設(shè)置/不設(shè)置寬度是很多幫助的。

我遇到的最大的麻煩就是 textarea(文本框) 元素了，它們需要設(shè)為寬度為所需的”cols”屬性，并且不能包含子元素。因此通常需要明確的設(shè)置 textarea 的寬度為 100%，但有 padding 時(shí)，就會(huì)延 展 textarea 的寬度。固定寬度環(huán)境下，通常可以設(shè)置為合適的像素值寬度，但是變寬情況就沒(méi)那么幸運(yùn)了。

無(wú)寬度的絕對(duì)定位盒子

未設(shè)定寬度的絕對(duì)定位的盒子的表現(xiàn)有點(diǎn)不一樣。它們的寬度只需要適合它們所包含的內(nèi)容即可。因此，如果盒中只有一個(gè)單詞，盒子就會(huì)像那個(gè)詞的表現(xiàn)一樣寬。如果變成兩個(gè)詞，盒子的寬度也會(huì)相應(yīng)增加

這種情況會(huì)持續(xù)到盒子的寬度達(dá)到父元素寬度的 100%（最近的相對(duì)定位的父元素或者瀏覽器窗口），然后就會(huì)折行。
對(duì)盒子來(lái)說(shuō)，垂直擴(kuò)展以適應(yīng)包含的內(nèi)容是很自然的。值得奇怪的是，不僅僅是不同平臺(tái)下的文本表現(xiàn)不同，不同的瀏覽器處理這個(gè)問(wèn)題時(shí)，也有不同，所以要注意。

無(wú)寬度浮動(dòng)盒子?

同無(wú)寬度的絕對(duì)定位盒子的表現(xiàn)一樣。盒子的寬度只需要擴(kuò)展到所包含內(nèi)容的寬度，直到其父元素的寬。（其父元素不必是相對(duì)定位的）。

內(nèi)聯(lián)元素也是盒子?

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

?

折行使它看起來(lái)有些不好理解。如上所示的左 margin 把盒子推向右邊，但是只在第一行有效，因?yàn)槟鞘呛凶拥钠瘘c(diǎn)。padding 正常的應(yīng)用在文本的上部或下部，當(dāng)折行時(shí)它會(huì)忽略上面行的 padding 并且以行高(line-height)要求的位置作為起點(diǎn)。

轉(zhuǎn)載于:https://www.cnblogs.com/webkong/p/4342296.html

總結(jié)

以上是生活随笔為你收集整理的CSS 盒子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。