原文:
css設計指南之理解盒子模型
一.理解盒模型
每乙個元素都會在頁面上生成乙個盒子。因此，html頁面實際上是由一堆盒子組成的。預設情況下，每個盒子的邊框不可見，背景也是透明的，所以我們不能直接看到頁面中盒子的結構。使用webdeveloper工具條中的"outline"->"outline level element"選單項，可以方便地顯示盒子的邊框和背景，從而讓我們能從另外乙個角度來審視頁面的構成。
1.1 元素盒子的屬性
1.邊框(border):可以設定邊框的寬窄、樣式和顏色。
2.內邊距(padding):可以設定盒子內容區與邊框的間距，想像一下內邊距是從邊框向內推元素的內容。
3.外邊距(margin):可以設定盒子與相鄰元素的間距，想像一下外邊距是邊框向外推其他元素。
1.2 盒子邊框
邊框有3個相關的屬性:寬度(border-width)、樣式(border-style)、顏色(border-color)
1.3 盒子內邊距
內邊距是盒子內容區與盒子邊框之間的距離，如果不設定padding的值，那麼元素的文字就會緊挨著元素的邊距。如下圖所示，在顯式設定了width的前提下，padding值的設定會加大盒子的寬度。
1.4 盒子外邊距
1.如圖4所示，預設情況下，元素之間也會有外邊距，
推薦把下面這條規則作為樣式表的第一條規則:* ，這條規則把所有元素預設的外邊距和內邊距都設定為零。
2.垂直疊加外邊距
如上圖所示，div2設定了上外邊距，div3沒有設定外邊距，但是div1與div2的間距和div2與div3的間距是一樣的，由此說明div2此時設定的margin-top並沒有起作用。
也就是說，較寬的外邊距決定兩個元素最終離多遠，如果把div2的margin-top設定為15，效果如下圖，可以看到div1與div2的間距變寬了。
注意:疊加的只是垂直外邊距，水平外邊距不疊加。對於水平相鄰的元素，它們的水平間距是相鄰外邊距之和。
二.盒子有多大
2.1 塊級元素(block element)
1.沒有寬度
所謂沒有寬度，就是指沒有顯式地設定元素的width屬性，如果不設定塊級元素的width屬性，那麼這個屬性的預設值是auto,結果會讓元素的寬度擴充套件到與父元素同
寬。沒有顯式設定width屬性的元素始終會擴充套件到填滿其父元素的寬度為止，新增外邊距會導致元素盒子變小。
2.設定寬度
為設定了寬度的盒子新增邊框、內邊距和外邊距，會導致盒子擴充套件得更寬。擴充套件量等於水平邊框和內邊距之和。
2.2 行內元素
1.沒有寬度
inline元素會擴充套件到足以包裹其內容的寬度，新增內邊距和水平邊框會導致liline元素變寬，新增量等於水平邊框和內邊距的和。
2.有寬度的塊級元素
為設定了寬度的盒子新增邊框、內邊距和外邊距，會導致盒子擴充套件得更寬。擴充套件量等於水平邊框和內邊距之和。
css3新增box-sizing屬性，通過它可以將有寬度的盒子也設定成具有預設的auto狀態下的行為。
CSS 理解盒子模型
什麼是盒子模型？對於初學者來說，很難說出來，但是對於生活中的盒子大家熟悉吧，哈哈，這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了，不然怎麼能起個名字叫 盒子模型 呢 好！既然和現實生活中的盒子一樣，那我們想一下，生活中的盒子內部是不是空的好用來存放東西，而裡面存放東西的區域我們給他起個名字...
css 盒子模型理解
盒子模型是html css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面布局。下面是自己積累和總結的關於css盒子模型的知識 希望對初學者有用。一 css盒子模型概念 css css盒子模型 又稱框模型 box model 包含了元素內容 content 內邊距 padding 邊...
css 理解 盒子模型
什麼是css的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子 箱子 上來理解，日常生活中所見的盒子也具有這些屬性，所以叫...