盒模型 標準盒及怪異盒區別及使用

2021-10-05 16:00:45 字數 750 閱讀 8106

盒子模型可以用來對元素進行布局,包括內邊距,邊框,外邊距,和實際內容這幾個部分。

盒子模型分為兩種 第一種是w3c標準的盒子模型(標準盒模型) 、第二種ie標準的盒子模型(怪異盒模型)

區別:寬度: width = 內容區域(content)的寬度

高度: height = 內容區域(content)的高度

盒子所佔的大小:標準盒 = content + border + padding + margin

寬度: width = 內容(content)+填充(padding)+邊框(border)的寬度

高度: height =內容(content)+填充(padding)+邊框(border)的高度

盒子所佔的大小:標準盒 = width + margin

盒模型可以分為以下兩種,需要在css內進行設定

/* 標準模型 */

box-sizing:content-box;

/*ie模型*/

box-sizing:border-box;

border-box 是css3屬性,ie8以下不相容弄,需要在使用屬性時新增字首。

標準盒模型 怪異盒模型

盒子模型的組成 盒子模型一般由 內容 content 邊框 border 左右外邊距 margin left margin right 左右內邊距 padding left padding right 這些部分組成。css中盒子模型分為兩種 w3c標準盒模型和ie標準盒模型 標準盒子模型 標準盒模型...

標準盒模型 怪異盒模型 彈性盒模型

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 四個屬性。由於目前大部分主流的瀏覽器...