IE的盒模型
問題
下面的代碼可以直接復制出去運行哦
?<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css盒模型</title>
</head>
<style type="text/css">
.content {
width: 300px;
height: 400px;
border: 5px solid #242424;
padding: 20px;
background-color: #898989;
}
</style>
<body>
<div class="content" id="zwkkkk1"></div>
</body>
</html>上面代碼的邏輯很簡單，就是設一個寬 300px，高 400px 的 div，并設置 5px 的邊框和 20px 的 padding。然后我們來看效果：
這里我們會發(fā)現(xiàn)明明我們設置了 300*400 長寬比，為什么呈現(xiàn)出來的是一個 350*450 的盒子呢？接著讓我們打開調試頁面一探究竟。
我們可以找到下面的這張示意圖：
在這張圖中，我們發(fā)現(xiàn)我們設置的300*400出現(xiàn)在了最里面的那個藍框中，與此同時我們可以發(fā)現(xiàn)在這個盒模型中除了我們設置的內容（content），還有margin（外邊距）、border（邊框）、padding（內邊框）
?
margin(外邊距)? - 清除邊框外的區(qū)域，外邊距是透明的。?
border(邊框)? - 圍繞在內邊距和內容外的邊框。?
padding(內邊距)? - 清除內容周圍的區(qū)域，內邊距是透明的。?
content(內容)?- 盒子的內容，顯示文本和圖像。
為了正確設置元素在所有瀏覽器中的寬度和高度，你需要知道盒模型是如何工作的。
而我們在測試效果圖看到的? 350*450? 盒子，
350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2
450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2
CSS 的兩種盒模型
而引起上面效果的原因來自于 css 的兩種盒模型的不同，這里我先對兩種盒模型做個介紹。
W3C的標準盒模型
在標準的盒子模型中，width 指 content 部分的寬度
IE的盒模型
在 IE 盒子模型中，width 表示 content+padding+border 這三個部分的寬度
我們可以看出我們上面的使用的默認正是 W3C 標準盒模型
而這里盒模型的選取更傾向于項目和開發(fā)者的習慣，并沒有絕對的好壞之分。
box-sizing的使用
如果想要切換盒模型也很簡單，這里需要借助 CSS3的box-sizing屬性
box-sizing: ?
content-box? 是W3C盒子模型
box-sizing: ?border-box?是IE盒子模型
box-sizing 的默認屬性是 content-box
