css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
?所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面咱們看一段代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css盒模型</title> </head> <style type="text/css"> .box {width: 500px;height: 400px;border: 10px solid deepskyblue;padding: 20px;background-color: darkorange;margin:15px } </style> <body><div id="box" class="box"></div><script>console.log("box實際寬度="+document.getElementById("box").offsetWidth)console.log("box實際高度="+document.getElementById("box").offsetHeight)</script> </body> </html>?上面代碼在頁面渲染了設一個寬500px，高400px的div，并設置10px的邊框和20px的padding。然后我們來看效果：
這里我們會發現明明我們設置了500*400長寬比，為什么呈現出來的是一個560*460的盒子呢？?
接著讓我們打開調試頁面一探究竟。?
我們可以找到下面的這張示意圖：
在這張圖中，我們發現我們設置的500*400出現在了最里面的那個藍框中，與此同時我們可以發現在這個盒模型中除了我們設置的內容（content），還有margin（外邊距）、border（邊框）、padding（內邊框）?
margin(外邊距) - 清除邊框外的區域，外邊距是透明的。 border(邊框) - 圍繞在內邊距和內容外的邊框。 padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。 content(內容) - 盒子的內容，顯示文本和圖像。為了正確設置元素在所有瀏覽器中的寬度和高度，你需要知道盒模型是如何工作的。
而我們在測試效果圖看到的560*460盒子，?
560（width） =? ?500（content） +? ?20（padding）* 2? ?+? 10（border）* 2?
460（height）=? ?400（content）?+? ?20（padding）* 2? ?+? 10（border）* 2?
下面我們來看css的兩種盒模型
css的兩種盒模型
一? ?W3C的標準盒模型（標準盒模型）
在標準的盒子模型中，width指content部分的寬度二? IE盒模型 （怪異盒模型）
我們可以看出我們上面的使用的默認正是W3C標準盒模型?
而這里盒模型的選取更傾向于項目和開發者的習慣，并沒有絕對的好壞之分。?
box-sizing的使用
如果想要切換盒模型也很簡單，這里需要借助css3的box-sizing屬性
??box-sizing: content-box /**是W3C盒子模型 */box-sizing: border-box /*是IE盒子模型*/總結
以上是生活随笔為你收集整理的css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软考高级 真题 2012年上半年 信息系
- 下一篇： 用户记忆设计：如何设计印象深刻的用户体验