淺談box-sizing屬性
前言
初學 css 的時候 div 的一些寬高問題經常會引起一些不好理解的問題，這裡做一個關於css盒模型的分享。
問題
下面的程式碼可以直接複製出去執行哦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css盒模型</title>
</head>
<style type="text/css">
.content {
width: 300px 上面程式碼的邏輯很簡單，就是設一個寬300px，高400px的div，並設定5px的邊框和20px的padding。然後我們來看效果：
這裡我們會發現明明我們設定了300*400
350*450的盒子呢？ 接著讓我們開啟除錯頁面一探究竟。
我們可以找到下面的這張示意圖：
在這張圖中，我們發現我們設定的300*400出現在了最裡面的那個藍框中，與此同時我們可以發現在這個盒模型中除了我們設定的內容（content），還有margin（外邊距）、border（邊框）、padding（內邊框）
margin(外邊距)- 清除邊框外的區域，外邊距是透明的。
border(邊框)- 圍繞在內邊距和內容外的邊框。
padding(內邊距)- 清除內容周圍的區域，內邊距是透明的。
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標準盒模型
而這裡盒模型的選取更傾向於專案和開發者的習慣，並沒有絕對的好壞之分。
box-sizing的使用
如果想要切換盒模型也很簡單，這裡需要藉助css3的box-sizing屬性
box-sizing: content-box是W3C盒子模型
box-sizing: border-box是IE盒子模型
box-sizing的預設屬性是content-box