那麼它為什麼叫盒子呢?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), css盒子模式都具備這些屬性。
我們可以把它想像成現實中上方開口的盒子,然後從正上往下俯視,邊框相當於盒子的厚度,內容相對於盒子中所裝物體的空間,而填充呢,相當於為防震而在盒子內填充的泡沫,邊界呢相當於在這個盒子周圍要留出一定的空間,方便取出。是不是這樣就很容易理解盒模型了。
所以整個盒模型在頁面中所佔的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成,而css樣式中width所定義的寬度僅僅是內容部分的寬度,這是許多朋友容易搞混的地方
這裡的邊界我們也稱之為:外邊距、外補丁;填充也叫:內邊距、內補丁
DIV CSS 盒子模型
盒子模型有兩種,分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同,先來看看我們熟悉的標準盒子模型 看不清楚?這裡檢視原圖 大圖 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content,並且 content 部分不包含其他部...
DIV CSS盒子模型
一 盒子模型css height width padding 內邊距 margin 外邊距 border 1.margin 外邊距 margin top 15px margin right 50px margin bottom 100px margin left 150px 或者margin 10p...
css盒子模型,div css布局
css盒子模型 border border width 邊框的寬度 border color 邊框的顏色 border style 邊框的線型 border top 上邊框 border bottom 下邊框 border left 左邊框 border right 右邊框 padding 代表邊框...