盒子模型及box sizing的理解

部落格：

盒子模型：標準盒子模型和怪異（ie）盒模型；

寬度（width）：content內容區寬度（width），高度（height）也是內容區的高度（width）；

盒子的大小：margin+paading+border+width;

兩個盒子的之間的padding值的計算：上面盒子的padding-bottom：10px,下面盒子padding-top：10px；那麼padding值不會覆蓋；

上面盒子的margin值，淺黃色代表距離區域；

下面盒子的margin值：

兩個盒子的margin值計算：上面盒子的margin-bottom：10px；下面盒子的margin-top：10px；那麼盒子的距離marigin只會計算乙個值，他會覆蓋值，大的margin值會覆蓋小的margin值；

我是tashi

寬度(width)：border+padding+content值；

盒子大小：width+margin；

標準盒模型和ie盒模型的對比:

(標準盒模型)

（怪異（ie）盒子模型（通過box-sizing模擬的））

**：

我是

語法：box-sizing:content-box|border-box|inherit|padding-box;

div

box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。

content-box，border和padding不計算入width之內

padding-box，padding計算入width內

border-box，border和padding計算入width之內，其實就是怪異模式了~

ie8+瀏覽器支援content-box和border-box；

ff則支援全部三個值。

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

栗子：

box sizing盒子模型

正常盒模型 正常盒模型，是指塊元素box sizing屬性為content box的盒模型。一般在現代瀏覽器中使用的都是正常盒模型content box，它也是標準 w3c 盒子模型。正常盒模型的大小會以內容優先自動擴充套件，內部子元素超過父元素給定的大小，會將父元素撐大。怪異盒模型 怪異盒模型，是...

box sizing指定盒子模型

box sizing有兩個值可指定為content box,border box,這樣我們計算盒子大小的方式發生了改變 分為兩種情況 box sizing content box盒子大小width padding border 這也是預設的 box sizing border box盒子大小為wid...

css 盒子模型 以及 box sizing屬性

在標準的盒子模型下，css中 width，padding以及border的關係 關於css中的width和padding以及border的關係。在css中，width和height指的是內容區域的寬度和高度，增加padding,border,和margin不會影響內容區域的尺寸，但是會增加元素框的總...