css盒子模型理解

所有html元素可以看作盒子，在css中，"box model"這一術語是用來設計和布局時使用。

css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

margin(外邊距) - 清除邊框外的區域，外邊距是透明的。

border(邊框) - 圍繞在內邊距和內容外的邊框。

padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。

content(內容) - 盒子的內容，顯示文字和影象。

先說正經盒子模型。

<

!doctype html>
"en"
>
"utf-8"
>
盒子模型<
/title>
#box1 
<
/style>
<
/head>
"box1"
>我是正經的<
上面正經盒子模型應該呈現的展示情況，整個盒子占地兒寬度為
自身100+左右padding40+左右border40+左右margin20 = 200
占地兒高度計算同上。
所以當我們想要展示某個元素，這個元素除了設定自身寬度外，還設定了其他框屬性，那這個元素最終要佔的地方大小是把所有的邊邊框框寬度都加起來得結果。
那麼如果在螢幕上預留了300 * 300 的空地來裝盒子，就應該計算好盒子寬度高度不能超過300，不然就裝不下了。
那麼不正經的盒子啥樣呢
<
!doctype html>
"en"
>
"utf-8"
>
盒子模型<
/title>
#box1 
<
/style>
<
/head>
"box1"
>我是不正經的<
看上面的截圖，不正經的盒子字都裝不下。最後一張截圖的結構可以看到，中間藍色的塊塊就只有20，可是**裡面不是設定了width為100嗎？這就是盒子的怪異，其實它是將100的寬度分給了左右padding和左右border還有內容本身，所以最終怪異盒子的占地兒寬度就成了
100+左右margin10 = 120。
這就很麻煩了，給我300的地兒展示元素，正經盒子下我就一頓加不超過300就完事了。但是不正經的盒子還需要我去計算怪異寬度。（上面沒提高度，因為高度同理，和寬度同等對待）
總結一下
標準盒模型下盒子的大小 = content + border + padding + margin
怪異盒模型下盒子的大小=width（content + border + padding） + margin
查過資料說一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，ie5.x和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。
ie8 及更早ie版本不支援設定填充的寬度和邊框的寬度屬性。
解決ie8及更早版本不相容問題可以在html頁面宣告 < !doctype html>即可。
自己電腦上的瀏覽器呈現的盒子模型都是正常的，之所以能模擬出不正常的效果，我用了乙個屬性。

可以通過屬性box-sizing來設定盒子模型的解析模式

可以為box-sizing賦三個值：
1content-box： 預設值，border和padding不算到width範圍內，可以理解為是w3c的標準模型(default)
2 border-box：border和padding劃歸到width範圍內，可以理解為是ie的怪異盒模型
3 padding-box：將padding算入width範圍
當設定為box-sizing:content-box時，將採用標準模式解析計算（預設模式）；
當設定為box-sizing:border-box時，將採用怪異模式解析計算；
在怪異盒子**中，我新增了box-sizing:border-box，所以能模擬出不正經盒子的狀態，屬實因為當前經驗太少，不清楚正式專案中如何解決這個問題。我的想法是直接用這個屬性，改變值來控制頁面盒子的狀態，或者子元素避免用padding、border，讓父元素元素去控制，不過想了想好麻煩，好多計算的東西。

CSS 理解盒子模型

什麼是盒子模型？對於初學者來說，很難說出來，但是對於生活中的盒子大家熟悉吧，哈哈，這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了，不然怎麼能起個名字叫 盒子模型 呢 好！既然和現實生活中的盒子一樣，那我們想一下，生活中的盒子內部是不是空的好用來存放東西，而裡面存放東西的區域我們給他起個名字...

css 盒子模型理解

盒子模型是html css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面布局。下面是自己積累和總結的關於css盒子模型的知識 希望對初學者有用。一 css盒子模型概念 css css盒子模型 又稱框模型 box model 包含了元素內容 content 內邊距 padding 邊...

css 理解 盒子模型

什麼是css的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子 箱子 上來理解，日常生活中所見的盒子也具有這些屬性，所以叫...