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
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的格式化模型多又細微,無法在此一一舉立說明。 唯有在實際操作過程中,不斷的實做練習,比較快熟悉。若有問題時,再進一步查詢。