頁(yè)面上顯示的每個(gè)元素（包括內(nèi)聯(lián)元素）都可以看作一個(gè)盒子，即盒模型( box model )。請(qǐng)看 Chrome DevTools 里的截圖：

可以顯而易見(jiàn)的看出盒模型由 4 部分組成。從內(nèi)到外分別是：

content -> padding -> border -> margin
按理來(lái)說(shuō)一個(gè)元素的寬度（高度以此類推）應(yīng)該這樣計(jì)算：

總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是不同瀏覽器（你沒(méi)有猜錯(cuò)，就是那個(gè)與眾不同的瀏覽器）對(duì)寬度的詮釋不一樣。符合 W3C 標(biāo)準(zhǔn)的瀏覽器認(rèn)為一個(gè)元素的寬度只等于其 content 的寬度，其余都要額外算。于是你規(guī)定一個(gè)元素：

則他最終的寬度應(yīng)為：

 寬度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) =  270px;
而在 IE（低于IE9） 下，最終寬度為：

寬度 = width(200px) + margin(20px * 2) = 240px;
我個(gè)人覺(jué)得 IE 的更符合人類思維，畢竟 padding 叫內(nèi)邊距，邊框算作額外的寬度也說(shuō)不下去。W3C 最后為了解決這個(gè)問(wèn)題，在 CSS3 中加了 box-sizing 這個(gè)屬性。當(dāng)我們?cè)O(shè)置 box-sizing: border-box;  時(shí)，border 和 padding 就被包含在了寬高之內(nèi)，和 IE 之前的標(biāo)準(zhǔn)是一樣的。所以，為了避免你同一份 css 在不同瀏覽器下表現(xiàn)不同，最好加上：

這里還有兩種特殊情況：

無(wú)寬度 —— 絕對(duì)定位（position: absolute;） 元素
無(wú)寬度 —— 浮動(dòng)（float） 元素
它們?cè)陧?yè)面上的表現(xiàn)均不占據(jù)空間（脫離普通流，感覺(jué)像浮在頁(yè)面上層一樣，移動(dòng)它們不影響其他元素的定位）。

相關(guān)屬值：

box-orient　確定子元素的方向
box-flex　　按比例分配父標(biāo)簽的寬度或高度空間。且值至少為1時(shí)起作用。當(dāng)子元素中有寬度值的時(shí)候，此元素就定寬處理，剩下的空間再按比例分配。
box-direction 用來(lái)確定子元素的排列順序
box-align 決定了垂直方向空間使用，也就是垂直方向上的對(duì)齊表現(xiàn)。
box-pack 決定了父標(biāo)簽水平空間的使用

語(yǔ)法：

box-align: start|end|center|baseline|stretch;
box-direction: normal|reverse|inherit;
box-flex: value;
box-flex-group: integer;
box-lines: single|multiple;
box-ordinal-group: integer;
box-orient: horizontal(水平) | vertical(垂直) | inline-axis | block-axis | inherit
box-pack: start|end|center|justify(兩端對(duì)齊);
box-sizing: content-box|border-box|inherit:
box-shadow: h-shadow v-shadow blur spread color inset;

例子：

使用靈活的盒模型容器內(nèi)平均分配子元素很容易：

實(shí)例：CSS 3 Flexible Box Model

注意：

外層必須具有寬度。內(nèi)層必須具有BFC。

最新評(píng)論