在網頁開發中,樣式是一項非常重要的內容。而CSS作為Web開發的重要組成部分,所包含的三種盒模型也是必須掌握的知識。
CSS中所包含的三種盒模型分別為IE模型、標準模型和CSS3模型。下面將會對這三種模型進行詳細介紹。
1. IE模型
box-sizing: border-box;
以該屬性值為border-box
為IE模型。其中,盒模型寬度=內容寬度+內邊距寬度+邊框寬度,高度計算方式相同。即盒子大小不會受到邊框和內邊距的影響。
2. 標準模型
box-sizing: content-box;
以該屬性值為content-box
的是標準模型。其中,盒模型寬度=內容寬度,盒模型高度=內容高度。即盒子大小不會受到邊框和內邊距的影響。
3. CSS3模型
box-sizing: border-box;
CSS3模型與IE模型是相同的。該屬性值為border-box
,盒模型寬度=外部寬度,盒模型高度=外部高度。即盒子大小會受到邊框和內邊距的影響。
總的來說,CSS的三種盒模型各有其優點和適用范圍。根據實際情況選擇不同的盒模型才能使網頁布局更加合理、準確。
下一篇css三維盒子代碼