前言
初學 css 的時候 div 的一些寬高問題經常會引起一些不好理解的問題，這裡做乙個關於css盒模型的分享。
問題
下面的**可以直接複製出去執行哦
lang
="en"
>
>
charset
="utf-8"
>
>
css盒模型title
>
head
>
type
="text/css"
>
.content
style
>
>
class
="content"
id="zwkkkk1"
>
div>
body
>
html
>
這裡我們會發現明明我們設定了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屬性
css 兩種盒模型
w3c 模型 box sizing border box content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。border box 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都...
CSS 兩種盒模型
第一種是w3c標準的盒子模型 標準盒模型 第二種ie標準的盒子模型 怪異盒模型 標準盒模型width指的是內容區域content的寬度 height指的是內容區域content的高度 w3c標準盒模型下盒子的大小 width content border padding margin 怪異盒模型中的...
CSS的兩種盒模型
關於css的盒子模型相信學習前端的同學都有所耳聞，因為它太基礎太重要了。提起盒子模型，大家可能會想到content，padding，border，margin這些詞彙，還有也許還會想起盒子模型有兩種，比如ie的盒子模型與w3c的盒子模型，那麼我們怎麼來區分呢？先來看看w3c的盒子模型 w3c 盒子模...