作為前端工作者，想必對於盒模型這個概念應該並不陌生，我們在平日的工作中無時無刻不在使用它，但是作為剛剛踏入這個行業的小白來講，對於標準盒模型和怪異盒模型的理解或許還是傻傻分不清，這裡小編我就來跟大家聊一聊關於我理解中的盒模型的那些事兒~希望對剛剛踏入這個行業的小夥伴們有所幫助！！！廢話不多說，我們走起~~~~
首先我們要了解一下什麼是盒模型？下面甩出盒模型的解釋！！
通俗的講，盒模型是css布局的基礎，它的作用是規定了網頁元素在網頁上如何顯示以及元素之間的相互關係，css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白（填充）、邊框、邊界(外邊距)。
上圖很明白的就可以看出來，盒模型由以下幾部分組成：
內容區(content):元素的寬和高
補白（填充）(padding)：元素內容和外邊緣之間的空間
邊框(border)：盒子的外邊緣
邊界(外邊距)(margin)：盒子外邊緣以外的空間
這其實就是乙個標準的盒模型。
那麼接下來，我們再來看看什麼是怪異盒模型吧。下圖所示：
可以明顯的看出，怪異盒模型的組成部分則只劃分為了兩個部分，分別為：
width/height(元素的內容寬或高)：內容區(content)、補白（填充）(padding)以及邊框(border)的總和
邊界(外邊距)(margin)：盒子外邊緣以外的空間
不難看出，怪異盒模型的乙個構成形式為元素的寬高包含了填充以及邊框所占有的空間，也就是說當我們頁面元素為怪異盒模型的時候，給予元素padding或者border屬性之後並不會改變元素原有寬高的值，而如果我們給標準盒模型的元素新增padding或者border屬性之後，元素最終的寬高值會發生變化，盒子會變大，這也就是標準盒模型與怪異盒模型區別所在。（下面通過案例以及給與對比加深理解）
1標準盒模型的呈現形式為：doctype html
>
2<
html
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>
title
>
6<
style
type
="text/css"
>
7.box
15style
>
16head
>
17<
body
>
18<
div
class
="box"
>
div>
19body
>
20html
>
上可以看到，div的值由原始的300加上padding和border的值最後變為了360x360。
怪異盒模型的呈現形式為：
可以看到，加上padding和border值之後，div的寬度和高度依舊為300x300不變，填充以及邊框屬性值都包含在了元素的體內。
相信看到這裡，大家應該能夠理解他們的不同之處了吧？
ps :我們可以通過css3屬性進行盒模型之間的轉換操作，下面是它的乙個屬性設定：
1通過設定該屬性，我們可以轉換元素的盒模型進行自己想要的效果呈現，當然我們常用的一些元素中也有自帶怪異盒模型屬性的，例如我們大家熟知的頁面提交按鈕，還有**table，其實他們都是屬於怪異盒模型的，所以在以後的工作中，應該明白為什麼明明設定了填充元素高度依舊不夠的緣故了吧？border-sizing: border-box
/*表示怪異盒模型 */2
border-sizing: content-box
/*表示標準盒模型
*/
結束語-------------------分享知識從我做起，大家一起高飛猛進！
標準盒模型和怪異盒模型
ie盒模型 怪異盒模型 和標準盒模型的區別就是，ie盒模型中width和height除了content區域外，還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下，width和heigh...
標準盒模型和怪異盒模型
盒子模型眾所周知，這裡先簡單介紹一下。可以看到，在標準盒模型 box sizing content box 下，width和height是內容區域即content的width和height。而盒子總寬度為 在標準模式下，乙個塊的總寬度 width margin 左右 padding 左右 borde...
標準盒模型和怪異盒模型
盒模型的組成，由內而外只要由 content，padding，border和margin組成。標準盒模型和怪異盒模型的主要區別就是所包含的內容。標準盒模型的內容就是content的大小 怪異盒模型的內容是content padding border 怪異盒模型的寬 content的寬 padding...