mj 標準CSS盒模型和IE瀏覽器盒模型

2021-10-25 06:30:29 字數 646 閱讀 3352

css盒子模型又稱為框模型,它裡面包含了外邊距margin,邊框border,內邊距padding,以及元素內容content。由內到外分別是從content,padding,border,以及margin。

標準盒模型的width為盒子中的content的寬度,通常設定背景時設定的是內容,內邊距,邊框。當邊框為透明色時會顯示background-color色彩。

元素框的寬高分別與content,padding,border,margin有關。

ie盒模型中的width為其中content,border,padding有關,元素框的寬高與width,margin有關。

css盒模型預設將對乙個元素設定的width和height應用到這個元素的內容區,如果元素有邊框和內邊距值,繪製時就會加上。這樣對響應式布局不友好,box-sizing屬性可用來調整這些。

使用方法:

屬性值含義

content-box

預設屬性,若元素寬為50px,則內容區有50px的寬,並且邊框和內邊距額寬度也會被增加到最後繪製出來的元素寬度中

border-box

告訴瀏覽器:設定的邊框和內邊距包含在width中,也就是說,內容區的實際寬度是width-border-padding

css盒模型(IE和標準)

文件中每個元素都會被描述為乙個矩形盒子,盒子有乙個邊界,分別為margin edge,border edge,padding edge,content edge。盒子模型分為標準盒子模型和ie盒子模型 微軟沒有遵從w3c標準 這兩者的關鍵差別在於 w3c盒子模型 屬性高 height 和屬性寬 wi...

CSS盒模型(標準模型和IE模型)

css盒模型就是乙個盒子,封裝周圍的html元素,包括border 邊框 padding 內邊距 margin 外邊距 content 實際內容 css盒模型 標準模型和ie模型 標準盒模型 width是內容區的寬度,width會跟隨padding margin,border變化而變化,元素真正的寬...

標準盒模型和IE盒模型

盒子模型是css中乙個重要的概念,理解了盒子模型才能更好的排版。其實盒子模型有兩種,分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同,先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content,並...