瞭解CSS的基本視覺格式

Written by Wanding on 28 August 2020

1. 基本方框

CSS的核心假設，認為所有的元素都會產生一個以上的矩形方框(element box)。每個矩形方框的中心是內容區域(content area)，內容區域的周圍是不定量的內距(padding)、邊框(border)、輪廓(outline)、邊界範圍(margin)。這些元素都能夠透過特定屬性，如margin-left或padding-top分別進行設定，輪廓沒有特定方向限定的屬性也比較少用到。內容的背景預設是在內距之內，邊界範圍一定是透明的，能過顯示出親代元素的背景。內距不可以為負值，但是邊界範圍可以是負值。邊框是透過定義solid或inset等樣式產生，顏色則是由boder-color設定，若沒有指定顏色，邊框會是內容區的前景顏色。元素的方框的各個部份會受到width或height屬性影響。

2. 方框種類介紹

正常走向(normal flow)：一般西方語言由左而右，由上而下的文字呈現方向，同時也是傳統的HTML文件排版文字使用的方向。大多數的元素都會在正常的流向，要讓元素離開正常流向唯一的方法是浮動(float)、定置(positioned)或放到flexble box或grid layout元素當中。
非置換元素(nonreplaced element)：這類元素的內容包含在文件當中，例如段落(p)就是非置換元素，可以在元素內看到段落的文字內容。
置換元素(replaced element)：這種元素是作為其他東西的替身，置換元素最典型的例子是<img>元素，指向一個會插入文件流向的影像檔，插入的位置就是<img>出現的位置，大多數的表單元素都是可置換元素。如<input type="radio">。
根元素(root element)：文件樹最上層的元素，就是<html>元素。
區塊方框(block box)：段落、標題、或div等元素產生的方框，在正常的流向中，這類方框前後會換行，使得區塊方框會形成垂直堆疊。而透過display:block宣告也能讓元素產生區塊方框。
行內方框(inline box)：如strong或span等元素產生的方框，這類方框前後不會產生斷行，透過display:inline宣告能讓元素產生行內方框。
行內區塊方框(inline-block box)：這個比較特別，內部行為類似區塊方框，但是外部行為如同行內方框，它的行為類似於置換元素，可以想像將div元素放到文字行內，就是這那個樣子。

3. 水平屬性的運用

<p style="width:200px;"> My letter for you </p>
<p style="width:200px; padding:10px; margin:20px;"> My letter for you </p>

設定水平格式的七個屬性分別為margin-left、border-left、padding-left、width、padding-right、border-right、 margin-right，這些屬性與區塊方框的水平格局息息相關。圖示第一行的段落內容為200px；但是第二行則必須再加上兩側內距各10px，並加上兩側邊界範圍20px，所以總計寬度為260px。瀏覽器畫面呈現如下圖：

使用auto

div {width:500px;}
p {margin-left:auto; margin-right:100px; width:250px;}

如果將margin-left設為auto，margin-right和width有確定值，這時auto的屬性就會設為對應需要的長度。如下方所示margin-left就等於500-100-250=150px。

使用兩個auto

div {width:500px:}
p {margin-left:auto; margin-right:auto; width:300px;}

我們可以在左右對稱的屬性，左右都使用auto，如此會將內容呈現居中的狀態。如下所示：margin-left為100px，margin-right也會是100px。

使用百分比

<p style="width:67%; padding-right:5%; padding-left:5%; margin-right:auto; margin-left:5%">My letter for you </p>

當寬、內距、邊界範圍設定為百分比時，也必須符合總數加起來等於100％的規則。

置換元素的水平屬性

<img src="vision.jpg" style="display: block; width: 50px; margin: 0;">
<img src="vision.jpg" style="display: block; width: 100px; margin: 0;">
<img src="vision.jpg" style="display: block; width: 200px; margin: 0;">

我們也可以透過指定影像的width屬性，來配置它的水平寬度呈現，瀏覽器顯示如下：

4. 垂直屬性的運用

如同水平格式，垂直格式也包含了7個屬性：margin-top、border-top、padding-top、height、padding-bottom、 border-bottom、margin-bottom。這七個屬性值的總和必須等於區塊方框的高。

七個元素裡只有三個能夠設為auto，元素的height、上下方的邊界範圍。上下方的內距與邊框都必須指定特定值，否則會預設為0。

如果區塊方框的margin-top與margin-bottom其中之一設為auto，那麼兩者都會被計算為0，而0值會讓正常流向的方框很難在容器方框裡垂直置中，放置，這也表示如果將元素的上下邊界範圍設為auto，實際上的效果是將兩者為0，邊界範圍將從元素方框消失。

百分比高

<div style="height: 10em;">
     <p style="height: 50%">一半的高度</p>
</div>

如上所示，文字內容的高度將為區塊高度的50％，也就是等於5em。

auto高度

<div style="height:auto; background:yellow;" >
     <p style="margin-top: 2em; margin-bottom: 2em;">Good Luck</p>
</div>
<div style="height:auto; border-top:1px solid; border-bottom: 1px solid; background:yellow;">
     <p style="margin-top: 2em; margin-bottom: 2em;">Good Luck</p>
</div>

設定height:auto的區塊方框，其高度會足以包含自行行內內容的行方塊，也就是邊界範圍會決定包含這些元素的高。上列的程式碼，在瀏覽器內呈現的樣子如下：

Good Luck

管理line-height

<ol>
     <li>香煎鮭魚</li>
     <li>客家小炒</li>
     <li>蛤蠣絲瓜</li>
     <li>酸菜白肉鍋</li>
</ol>
<hr>
<ol style="line-height:2.5em">
     <li>香煎鮭魚</li>
     <li>客家小炒</li>
     <li>蛤蠣絲瓜</li>
     <li>酸菜白肉鍋</li>
</ol>

改變line-height的設定，可以增加或減少文字行與行之間的高度。若針對區塊方框亦可同理應用。
上列的原始碼，在瀏覽器的輸出如下所示：

香煎鮭魚
客家小炒
蛤蠣絲瓜
酸菜白肉鍋

香煎鮭魚
客家小炒
蛤蠣絲瓜
酸菜白肉鍋

小結

基本視覺格式讓我們對網頁的版面布局有了第一步的認識。而CSS的格式化模型多又細微，無法在此一一舉立說明。唯有在實際操作過程中，不斷的實做練習，比較快熟悉。若有問題時，再進一步查詢。

回目錄頁

瞭解CSS的基本視覺格式