css3增添了盒模型
box-sizing
屬性，box-sizing屬性值
可以有下面三個值：
content-box：預設值，讓元素維持w3c的標準盒模型。元素的寬度
/高度（
width/height
）（所佔空間）等於元素邊框寬度（
border
）加上元素內邊距（
padding
）加上元素內容寬度
/高度（
content width/height
）即：element width/height = border+padding+content width/height
。border-box：讓元素維持ie6及以下版本盒模型
。元素的寬度/高度（所佔空間）等於元素內容的寬度/高度
。這裡的content width/height包含了元素的
border,padding,
內容的width/height
。即：element width/height =width /height-border-padding
。inherit：繼承父元素的盒模型模式。
具體適用場景：
<div
class
>
<
div
id="header"
>頁首
div>
<
div
class
="sidebar"
>側邊欄
div>
<
div
class
="content"
>內容內容內容內容內容內容內容內容內容內容內容
div>
<
div
id="footer"
>頁尾
但如果又被要求改好看點，比如內容區加內邊距，邊框什麼的修飾一下。
如果直接加上padding、
border
什麼的，馬上就破壞了布局
因為box-sizing預設是
content-box
，內容區大小不會變，加上
padding
、margin
、border
的話，就會往外撐開，從而破壞布局結構
這時，使用border-box就可以完美解決了
.content這樣，元素所佔空間不會變，加了padding、border的話，會往內擠，保持外面容器不被破壞
（注意，
margin不包含在元素空間，加了
margin
會向外撐開）
盒模型與box sizing
盒模型這個詞我們經常聽到過，不過沒有細細的了解。其實我們平常都有常用盒模型就是w3c標準的盒模型，標準盒模型的是height width pading border margin,這樣就組成乙個盒模型。盒模型分為2種 他們不同之處就是計算內容的寬高不同，ie盒模型寬度是包括width pading ...
box sizing與盒模型的認識
box sizing屬性 content box default border box。content box，border和padding不計算入width之內 border box，border和padding計算入width之內，其實就是怪異模式了 盒模型一共有兩種模式，一種是 標準模式 st...
盒模型屬性
邊框 border 邊界 邊距 margin 補白 填充 padding 內容區 content 1 邊框 border 1 border 盒子的邊緣。2 用法 1 邊框的寫法 divborder width 邊框的寬度 border color 邊框的顏色 border style 邊框的樣式 邊...