盒模型的簡單理解

2021-09-01 11:40:14 字數 505 閱讀 2933

盒子模型有兩種,w3c和ie盒子模型

(1)w3c定義的盒子模型包括margin、border、padding、content

元素的width=content的寬度

(2)ie盒子模型與w3c的盒子模型唯一區別就是元素的寬度,元素的width=content+padding+border

我個人認為w3c定義盒子模型與ie定義的盒子模型,ie定義的比較合理,元素的寬度應該包含border(邊框)和padding(填充),這個和我們現實生活的盒子是一樣的,w3c也認識到自己的問題了,所以在css3中新增了乙個樣式box-sizing,包含兩個屬性content-box 和 border-box。

加分項

1.對於行級元素,margin-top和margin-bottom對於上下元素無效,margin-left和margin-right有效

2.對於相鄰的塊級元素margin-bottom和margin-top 取值方式

盒模型簡單理解

盒模型 由內而外,由context padding border margin組成的模型 分類 1.標準盒模型 2.ie盒模型 區別 ie盒模型的寬度由context padding border組成。標準盒模型的寬度為context寬度。css設定 標準 box sizing context bo...

盒模型理解

參考 盒模型理解 前端的盒模型包括兩種,分別是w3c盒模型和ie盒模型。w3c盒模型包括content padding border margin。其中width content ie盒模型包括content padding border margin。其中width content padding...

理解盒模型

div css有兩種盒模型 標準w3c盒模型 ie盒模型 如何讓瀏覽器能夠按標準盒模型來處理,就是在網頁的頂部加上doctype宣告。如果不加 doctype宣告,那麼各個瀏覽器會根據自己的行為去理解網頁。標準盒模型中width和height指的是內容區域的寬度和高度,增加內邊距 邊框和外邊距不會影...