1. 程式人生 > >CSS框模型(Box Model)初學理解

CSS框模型(Box Model)初學理解


HTML中所有的元素都可以是一個框,css的框模型我覺得和table標籤單元格挺像的,還是要拿這個圖說明一下。

一個HTML頁面中可以有很多元素,有很多div。

我這裡的框暫時理解為一個裝電視機啊或者顯示器啊之類貴重物品,並且怕摔的箱子。只不過我們現在中的那個箱子是三維立體的,而css這裡這個是二維平面的。

Margin:有多個這樣的箱子,存放的時候可以挨著放,也可以隔開一段放一個。就是框和框之間的區域,距離產生美。

Border:箱子的厚度。也就是框的邊,擁有屬於自己的style,可以粗可以細,還可以調色,還有不同長相的邊(實線的,虛線的,點線的,3D的)。

Padding:咱們買的貴重物品,一般都會拿一些泡沫塑料之類的東西將它包裹起來然後再放進箱子裡,以免在運輸過程中貴重物品與箱子的內壁直接接觸,進一步保護物品。這些泡沫塑料填充的區域就是Padding,內容與邊之間的區域,可以設定填充的厚度。

Content:貴重物品。可以是元素,可以是文字,可以是任何要裝進來的東西,可以是一個,也可以有多個。可以根據它們的種類設定屬於它們自己的style。

初學者的一點淺薄理解。僅作為學習筆記。