1. 程式人生 > >CSS對box-sizing屬性理解

CSS對box-sizing屬性理解

正常盒模型

IE盒模型:一般較多出現在大部分瀏覽器中

正常盒模型:又叫w3c盒模型。即塊狀元素box-sizing屬性為content-box的盒模型。w3c盒模型是指:盒模型的大小包括content,padding,border,並且先做content,由內向外擴充套件。w3c盒模型的大小會以內容優先自動擴充套件,內部子元素超過父元素給定的大小,會將父元素撐大。

IE盒模型

IE盒模型:一般較多出現在IE瀏覽器中

box width = content width + padding left + padding right + border left + border right
box height = content height + padding top + padding bottom + border top + border bottom                                                          IE盒模型是指:即塊狀元素box-sizing屬性為border-box的盒模型。盒模型的大小包括content,padding,border,但是先做盒,在做border,padding,content。即保證盒模型優先,先做盒再放內容,不管內容是否放得下,一般三列布局使用的更多。更通俗的說,怪異盒模型中,父元素的盒模型確定,子元素是無法撐開父元素的盒模型,只能在盒模型剩餘空間展示。