第一種是w3c標準的盒子模型（標準盒模型）
第二種ie標準的盒子模型（怪異盒模型）
標準盒模型width指的是內容區域content的寬度；
height指的是內容區域content的高度
w3c標準盒模型下盒子的大小 = width （ content ） + border + padding + margin
怪異盒模型中的width指的是內容、邊框、內邊距總的寬度；
height指的是內容、邊框、內邊距總的高度
怪異盒模型下盒子的大小 = width （ content + border + padding ） + margin
box-sizing屬性是用來切換盒模型
box-sizing的預設屬性是content-box
屬性值意義
box-sizing:content-box;
元素的寬高只包含content（w3c標準盒模型）
box-sizing:pandding-box;
元素寬高包含padding和content
box-sizing:border-box;
元素的寬高包含border、padding和content （常用，ie怪異盒模型）
box-sizing: inherit;
規定應從父元素繼承 box-sizing 屬性的值。
css 兩種盒模型
w3c 模型 box sizing border box content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。border box 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都...
CSS的兩種盒模型
關於css的盒子模型相信學習前端的同學都有所耳聞，因為它太基礎太重要了。提起盒子模型，大家可能會想到content，padding，border，margin這些詞彙，還有也許還會想起盒子模型有兩種，比如ie的盒子模型與w3c的盒子模型，那麼我們怎麼來區分呢？先來看看w3c的盒子模型 w3c 盒子模...
css的兩種盒模型
前言 初學 css 的時候 div 的一些寬高問題經常會引起一些不好理解的問題，這裡做乙個關於css盒模型的分享。問題下面的 可以直接複製出去執行哦 lang en charset utf 8 css盒模型title head type text css content style class co...