CSS中的BoxModel盒屬性介紹

我們為大家收集整理了關於CSS中的BoxModel盒屬性，以方便大家參考。可以顯而易見的看出盒模型由 4 部分組成。從內到外分別是：

content -> padding -> border -> margin

按理來說一個元素的寬度(高度以此類推)應該這樣計算：

總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

但是不同浏覽器(你沒有猜錯，就是那個與眾不同的浏覽器)對寬度的诠釋不一樣。符合 W3C 標准的浏覽器認為一個元素的寬度只等於其 content 的寬度，其余都要額外算。於是你規定一個元素：

CSS Code復制內容到剪貼板

.example {

width: 200px;

padding: 10px;

border: 5px solid #000;

margin: 20px;

}

則他最終的寬度應為：

寬度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

而在 IE(低於IE9) 下，最終寬度為：

寬度 = width(200px) + margin(20px * 2) = 240px;

我個人覺得 IE 的更符合人類思維，畢竟 padding 叫內邊距，邊框算作額外的寬度也說不下去。W3C 最後為了解決這個問題，在 CSS3 中加了 box-sizing 這個屬性。當我們設置 box-sizing: border-box; 時，border 和 padding 就被包含在了寬高之內，和 IE 之前的標准是一樣的。所以，為了避免你同一份 css 在不同浏覽器下表現不同，最好加上：

CSS Code復制內容到剪貼板

*, *:before, *:after {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

這裡還有兩種特殊情況：

無寬度 —— 絕對定位(position: absolute;) 元素

無寬度 —— 浮動(float) 元素

它們在頁面上的表現均不占據空間(脫離普通流，感覺像浮在頁面上層一樣，移動它們不影響其他元素的定位)。

CSS3 Flexible Box Model

相關屬值：

box-orient　確定子元素的方向

box-flex　　按比例分配父標簽的寬度或高度空間。且值至少為1時起作用。當子元素中有寬度值的時候，此元素就定寬處理，剩下的空間再按比例分配。

box-direction 用來確定子元素的排列順序

box-align 決定了垂直方向空間使用，也就是垂直方向上的對齊表現。

box-pack 決定了父標簽水平空間的使用

語法：

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(兩端對齊);

box-sizing: content-box|border-box|inherit:

box-shadow: h-shadow v-shadow blur spread color inset;

例子：

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

CSS Code復制內容到剪貼板

.container {

display: box;

box-align: stretch;

box-orient: vertical;

}

.container span{box-flex:1;}

實例：CSS 3 Flexible Box Model

注意：

外層必須具有寬度。內層必須具有BFC。

希望大家可以學會CSS中的BoxModel盒屬性想了解更多精彩內容，請關注我們的網站!

相關推薦：

CSS中圖片於文本的基線對齊設置方法介紹