更新時間：2015-01-29盒模子是CSS中的緊張觀點之一,它是一切結構節(jié)制的根基,在1996年CSS1方才推出時,就保舉把一切的HTML元素都扭轉在一個盒子中,而后經由過程對這個盒子的表面節(jié)制來完成全部頁面的表面節(jié)制,這便是所謂的盒模子.
在CSS尺度中,一個盒模子包含4個區(qū),分別是:內容,內邊距,邊框和外邊距,在指定的一個元素的巨細時,便是依據(jù)盒模子中各個部門的巨細來決定的.比方:
div#div1
{
width:100px;
border-width:2px;
padding:5px;
margin:5px;
}
這里,width指定內容的寬度,border-width指定邊框的寬度,padding指定內邊距的寬度,margin指定外邊距的寬度,全部div#div1的寬度應當為:100px+2px+2px+5px+5px=114px.這是依據(jù)CSS尺度盤算出來的寬度,但事實上,分歧瀏覽器的表示會有所分歧,比方firefox是精確按上述尺度來盤算的,而IE中則把width認為是全部盒模子的寬度,是以在IE中,現(xiàn)實內容的寬度應當為:100px-2px-2px-5px-5px=86px.這被認為是IE的一個Bug,恰是因為它對盒模子的這類剖析,給應用CSS計劃帶來了一些艱苦.
