理解盒模型

2021-09-06 16:30:17 字數 526 閱讀 3716

div+css有兩種盒模型

標準w3c盒模型

ie盒模型

如何讓瀏覽器能夠按標準盒模型來處理,就是在網頁的頂部加上doctype宣告。如果不加 doctype宣告,那麼各個瀏覽器會根據自己的行為去理解網頁。

標準盒模型中width和height指的是內容區域的寬度和高度,增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸;但在ie6瀏覽器的width不是內容的寬度,而是內容、內邊距和邊框的寬度總和。

實際上ie的盒模型更加合理,w3c意識到了這個問題,重新定義盒模型是不可能的,所以在css3中,有這個屬性:box-sizing,其有兩個可選值,乙個是預設的content-box乙個是border-box,選用後者,盒模型將按ie6的方式進行處理。

盒模型理解

參考 盒模型理解 前端的盒模型包括兩種,分別是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指的是內容區域的寬度和高度,增加內邊距 邊框和外邊距不會影...

盒模型簡單理解

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