盒模型與box sizing

2021-10-14 13:12:54 字數 585 閱讀 4872

盒模型這個詞我們經常聽到過,不過沒有細細的了解。

其實我們平常都有常用盒模型就是w3c標準的盒模型,標準盒模型的是height+width+pading+border+margin,這樣就組成乙個盒模型。

盒模型分為2種:

他們不同之處就是計算內容的寬高不同,ie盒模型寬度是包括width+pading+border,三部分組成,而w3c盒模型寬度就是witdh一部分。

w3c盒模型:

ie盒模型:

其實就是方便我們在不同宣告文件下來回使用w3c盒模型和ie盒模型。

屬性值大概如下:

box-sizing: content-box|border-box|inherit;

box-sizing: content-box;看著不就是w3c的標準盒模型的計算方式麼?而box-sizing: border-box;就是ie盒模型的計算方式。

盒模型 box sizing 屬性

css3增添了盒模型 box sizing 屬性,box sizing屬性值 可以有下面三個值 content box 預設值,讓元素維持w3c的標準盒模型。元素的寬度 高度 width height 所佔空間 等於元素邊框寬度 border 加上元素內邊距 padding 加上元素內容寬度 高度 ...

box sizing與盒模型的認識

box sizing屬性 content box default border box。content box,border和padding不計算入width之內 border box,border和padding計算入width之內,其實就是怪異模式了 盒模型一共有兩種模式,一種是 標準模式 st...

標準盒模型與怪異盒模型

1 盒子模型 box model 在html中,可以把元素看做盒子,盒子包括 實際內容 content 內邊距 padding 邊框 border 外邊距 margin 2 標準盒模型與怪異盒模型 對比兩種模型的區別 1.標準盒模型 標準盒模型 w3c盒子模型 設定的width或height是對 實...