1 盒模型

概念：CSS盒模型本質是一個盒子，包括：外邊距margin、邊框border、內邊距padding、內容content

分類：標準盒模型（W3C）和怪異盒模型（IE）
標準盒模型：width的值就是content的值

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

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

不要給子元素設置內邊距

可以給父元素加內邊距或者給子元素加外邊距

3 CSS3指定盒模型

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

content-box：標準模型

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()

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。