概念：css盒模型本質是乙個盒子，包括：外邊距margin、邊框border、內邊距padding、內容content
分類：標準盒模型（w3c）和怪異盒模型（ie）
標準盒模型：width的值就是content的值
怪異盒模型：width的值等於content+padding+border
不要給子元素設定內邊距
可以給父元素加內邊距或者給子元素加外邊距
可以使用box-sizing指定盒模型的型別：
content-box：標準模型
border-box：怪異模型
inherit：繼承父元素
// 獲取的是content的寬度，而不是width屬性的值
document.
getelementbyid
('#div)
.width()
// 獲取的是width屬性的值
document.
getelementbyid
('#div).css('width')
// innerwidth獲取的是padding+content的值，不含border
document.
getelementbyid
('#div)
.innerwidth
()
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
怪異盒模型 彈性盒模型
標準盒模型 我們平常狀態下所寫的，即為標準盒模型狀態下的css樣式 box怪異盒模型 ie盒模型 p box兩種模式的區別標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。標準模式 box sizing conten...