1 盒模型

概念：CSS盒模型本質(zhì)是一個(gè)盒子，包括：外邊距margin、邊框border、內(nèi)邊距padding、內(nèi)容content

分類：標(biāo)準(zhǔn)盒模型（W3C）和怪異盒模型（IE）
標(biāo)準(zhǔn)盒模型：width的值就是content的值

怪異盒模型：width的值等于content+padding+border

2 如何解決樣式兼容性問題

不要給子元素設(shè)置內(nèi)邊距

可以給父元素加內(nèi)邊距或者給子元素加外邊距

3 CSS3指定盒模型

可以使用box-sizing指定盒模型的類型：

content-box：標(biāo)準(zhǔn)模型

border-box：怪異模型

inherit：繼承父元素

4 容易混淆的API

// 獲取的是content的寬度，而不是width屬性的值 document.getElementById('#div).width() // 獲取的是width屬性的值 document.getElementById('#div).css('width') // innerWidth獲取的是padding+content的值，不含border document.getElementById('#div).innerWidth()

總結(jié)

以上是生活随笔為你收集整理的【HTML/CSS】CSS盒模型及其理解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。