CSS盒子模型

2016-10-22

《css入門經典》第6章

1.每個HTML元素對應於一個顯示盒子，但不是所有的元素都顯示在螢幕上。

2.HTML元素顯示為CSS顯示盒子的真正方法稱為「可視格式化方式」。可視格式化方式告訴瀏覽器應該如何在螢幕上顯示HTML內容。

3.元素類型：

（1）區塊元素（block）：以新行開始和結束。

，,
等。

（2）內嵌元素（inline）：沒有獨佔一行，而是包含於文字流之中。 ，，,等。

4.display屬性

透過設定display屬性值可以改變元素的類型

display:none;不顯示

display:block;設定為區塊元素

display:inline;設定為內聯元素

5.匿名盒

當標籤包含混合內容，例如文字和一些HTML標籤時，會產生沒有HTML標籤的盒子，稱為匿名盒。匿名盒的樣式設定與其包含盒相同。

eg.

Hello World!

  由圖可知：文本Hello為匿名盒。

6.在HTML中，標籤的定義為display:none;。所以我們在頁面中看不到標籤的內容。

7.盒子的顯示屬性

邊距：margin

邊框：border

填充：padding

（1）邊距margin:即兩個盒子之間的間距。邊距總是透明的。

注意：重疊邊距，即兩個垂直方向的盒子，它們在垂直方向的間距使用兩個元素間的最大值。邊距只在塊元素上重疊，並且是在垂直方向重疊，不是水平方向。

（2）邊框border：

border屬性設定：選擇符{ border:大小 樣式 顏色; }

border-width	規定邊框的寬度。
border-style	規定邊框的樣式。
border-color	規定邊框的顏色。
inherit	規定應該從父元素繼承 border 屬性的設定。

 

Width:

thin	定義細的邊框。
medium	預設。定義中等的邊框。
thick	定義粗的邊框。
length	允許您自訂邊框的寬度。
inherit	規定應該從父元素繼承邊框寬度。

 

Style:

none	定義無邊框。
hidden	與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted	定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed	定義虛線。在大多數瀏覽器中呈現為實線。
solid	定義實線。
double	定義雙線。雙線的寬度等於 border-width 的值。
groove	定義 3D 凹槽邊框。其效果取決於 border-color 的值。
ridge	定義 3D 壟狀邊框。其效果取決於 border-color 的值。
inset	定義 3D inset 邊框。其效果取決於 border-color 的值。
outset	定義 3D outset 邊框。其效果取決於 border-color 的值。
inherit	規定應該從父元素繼承邊框樣式。

 

 

描述

最不可預測的邊框樣式是 double。它定義為兩條線的寬度再加上這兩條線之間的空間等於 border-width 值。不過，CSS 規範並沒有說其中一條線是否比另一條粗或兩條線是否應該是一樣的粗，也沒有指出線之間的空間是否應當比線粗。所有這些都有用戶代理決定，創作人員對這個決定沒有任何影響。 （W3School）

（3）填滿padding:內容周圍的空間。填充總是和內容本身的背景顏色相同。

注意：

（1）表格單元

即不是內聯元素也不是塊元素，表格單元的顯示值為display:table-cell。 table-cell元素不能有邊距。

（2）行長em：在CSS中，一行長定義為等於位置大小的量度，是一個正方形，高度和寬度等於字體的高度。