Day03 - CSS基本視覺格式


基本方框

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

方框種類介紹

  • 正常走向(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元素放到文字行內,就是這那個樣子。

水平屬性

設定水平格式的七個屬性分別為margin-left、border-left、padding-left、width、padding-right、border-right、 margin-right,這些屬性與區塊方框的水平格局息息相關。

<p style="width:200px;">my text here</p>
<p style="width:200px; padding:10px; margin:20px";>my text here</p>

圖示第一行的段落內容為200px;但是第二行則必須再加上兩側內距各10px,並加上兩側邊界範圍20px,所以總計寬度為260px。

使用auto

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

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

兩個auto

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

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

百分比

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

<p style="width:67%; padding-right:5%; padding-left:5%; margin-right:auto; margin-left:5%">my text here</p>

垂直屬性

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

管理line-height

透過將em單位與font-size有所變化的元素一同使用,將可避免各行間發生重疊。如下所示:

p {line-height:1em;}
big {font-size:250%; line-height:1em;}

小結

基本視覺格式讓我們對網頁的版面布局有了第一步的認識。而CSS的格式化模型多又細微,無法在此一一舉立說明。唯有在實際操作過程中,若有需要再進一步去查詢。下一篇文章,將介紹內距、邊框、輪廓、邊界範圍。

#block #inline #flow #margin #padding #border







你可能感興趣的文章

Jōtai 介紹

Jōtai 介紹

Virtual DOM 實作與原理解析

Virtual DOM 實作與原理解析

Day04: state 及 props 介紹

Day04: state 及 props 介紹






留言討論