線上教室

學習排版語言(CSS3)

講義

HTML 與 CSS

Lesson01

在網頁文件中，加入以下 HTML5 內容：

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>南港高中網頁程式設計</title>
</head>
<body>
   <ul>
       <li>飲料選單</li>
       <li data-category="tea" data-type="hot iced">菊花潽洱</li>
       <li data-category="tea" data-type="hot">烏龍茶</li>
       <li data-category="water" data-type="cold">白開水</li>
       <li data-category="juice" data-type="iced">柳橙汁</li>
       <li data-category="juice" data-type="iced">蘋果汁</li>
       <li data-category="juice" data-type="iced hot">金桔檸檬</li>
   </ul>
</body>
</html>

在網頁文件中，加入以下的 CSS 語法：

li[data-category]        {background-color: gold}
li[data-type="cold"]     {color: grey}
li[data-type="iced"]     {color: blue}
li[data-type~="hot"]     {border: 1px solid red}

將以下文字儲存成 lesson01.html

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網頁程式設計</title>
 <style type="text/css">
   li[data-category]        {background-color: gold}
   li[data-type="cold"]     {color: grey}
   li[data-type="iced"]     {color: blue}
   li[data-type~="hot"]     {border: 1px solid red}
 </style>
</head>
<body>
   <ul>
       <li>飲料選單</li>
       <li data-category="tea" data-type="hot iced">菊花潽洱</li>
       <li data-category="tea" data-type="hot">烏龍茶</li>
       <li data-category="water" data-type="cold">白開水</li>
       <li data-category="juice" data-type="iced">柳橙汁</li>
       <li data-category="juice" data-type="iced">蘋果汁</li>
       <li data-category="juice" data-type="iced hot">金桔檸檬</li>
   </ul>
</body>
</html>

網頁執行結果如下：-

偽選擇器(Pseudo-selector)

另外還有兩種比較進階的偽選擇器(Pseudo-selector)，它們不是用來選擇元素，而是用來指涉元素的某一部份，或者進一步描述元素處在某些特定狀態下。

偽類別(Pseudo-class)選擇器

CSS 偽類別是以冒號 : 附加在基本選擇器後方的一組關鍵字，用來指示只有在某種狀態之下的元素才需要被選取。舉例來說，我們可以在連結元素被滑鼠游標碰到的時候變更它的樣式，或者讓核取方塊(Checkbox)在被禁用或被核取時有不同的外觀，亦或者讓某元素的第一個子元素的樣貌與眾不同。

以下列出一些比較常用的偽類別選擇器：

偽類別\|說明	範例
`checked`	元素目前被核取，僅適用在`radio`(`<input type="radio">`)
`input[type="radio"]:checked`	`checkbox`(`<input type="checkbox">`), 或是`option`(`<select>`裡的`<option>`) 等表單輸入元素上
`disabled`	元素處在被禁用的狀態`input:disabled`
`empty`	此元素下無其它子元素的存在`ul.disp:empty`
`hover`	滑鼠游標目前在元素範圍內`.list-item:hover`
`first-child`	此元素為其親代元素的第 1 個子元素`.story>p:fist-child`
`first-of-type`	此元素為其親代元素的第 1 個同類子元素`.report span:first-of-type`
`nth-child()`	此元素其親代元素的第 n 個子元素`ul.strip>li:nth-child(2n+1)`
`nth-of-type()`	\|此元素其親代元素的第 n 個同類子元素`p:nth-of-type(3n+2)`
`only-child`	元素為其親代元素的唯一子代`ul.disp>li:only-child`
`optional`	此輸入元素非必填`input:optional`
`required`	此輸入元素為必填`input:required`

需要特別說明的是 :nth-child() 與 :nth-of-type() 這兩個可以夾帶參數的偽類別，在計算元素序位的時候，是以 1 號起算，第 1 個元素的序位就是 1 號。它們的參數可以是以下這幾種型態：

直接的整數值

表示只有指定序位的元素會被選取，例如：

li:nth-child(2) {background-color: silver}

僅親代的第二個 `li` 元素的背景色被指定為銀色(淺灰色)

An+B

A與 B 必須都是整數，表示每 A 個為一組，每組當中的第 B 個元素。例如：

li:nth-child(3n+1) {color: red}

將親代的第 $1, 4, 7, 10, 13, ... 3n+1$ 等序位的 `li` 元素的文字顏色指定為紅色

關鍵字 `odd`、`even`

表示要選取奇數(odd)序位或偶數(even)序位的元素，例如要讓表格的奇數列底色皆是白色，偶數列底色皆是淺灰色的話，可以這樣寫：

tr:nth-child(odd)    {background-color: white}
tr:nth-child(even)   {background-color: silver}

註：

odd 相當於指定 An+B 形式的 2n+1，而 even 則等同於 2n。

Lesson02

假設底下是某個餐廳的菜單頁面的 HTML5 原始檔：

請將以下的 CSS 文字儲存為「demo.css」。

nav {
   background-color: steelblue;
   color: white; 
   display: flex; 
   padding: 5pt;
}
.mtype  {width: 100%}
.mtitle {
   font-weight: bolder;
   font-size: 125%;
   margin-bottom: 5pt;
}

將以下文字儲存成 lesson02.html

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網頁程式設計</title>
 <link rel="stylesheet" href="demo.css">
</head>
<body>
   <nav>
       <div class="mtype">
           <div class="mtitle">中式餐點</div>
           <div class="mitem">炒烏龍麵</div>
           <div class="mitem">什錦炒飯</div>
       </div>
       <div class="mtype">
           <div class="mtitle">披薩</div>
           <div class="mitem">瑪格利特披薩</div>
           <div class="mitem">夏威夷披薩</div>
           <div class="mitem">乳酪四重奏披薩</div>
       </div>
       <div class="mtype">
           <div class="mtitle">義大利麵</div>
           <div class="mitem">奶油義大利麵</div>
           <div class="mitem">蕃茄義大利麵</div>
           <div class="mitem">青醬義大利麵</div>
       </div>
       <div class="mtype">
           <div class="mtitle">飲料</div>
           <div class="mitem">拿鐵咖啡</div>
           <div class="mitem">美式咖啡</div>
           <div class="mitem">義式濃縮咖啡</div>
           <div class="mitem">英式伯爵奶茶</div>
           <div class="mitem">日式煎茶</div>
           <div class="mitem">阿里山紅茶</div>
       </div>
   </nav>
   <main>
       <h1>主要內容</h1>
       <p>菜單在旁邊噢！</p>
   </main>
</body>
</html>

- ++第 5 行++，透過 <link> 標籤引用外部的樣式檔 `demo.css`
- ++第 8-35 行++的 <nav>...</nav> 定義了一組導覽列的結構，為了簡化範例，每個導覽項目僅以 <div></div> 標籤代表，

在正式的網站上，導覽項目應為使用 <a></a>定義的連結項目。
- mtype 類別用來標示餐點類別
- mtitle 類別用來標示餐點類別的標題文字
- mitem 類別用來標示餐點類別的選項

網頁執行結果如下：

然後試著編輯 `demo.css` 檔案來調整頁面的外觀：

- 調整 <nav>...</nav>的顯示方式，設定其底色，並將文字顏色調整為白色：

Lesson03

請將以下的文字儲存為「demo.css」。

body {
   display: flex;
}
main {
   width: 100%;
   border-left: 1px solid silver;
   margin-left: 5pt;
   padding-left: 5pt
}
nav {
   width: 200px;
   background-color: steelblue;
   color: white; 
   display: flex; 
   padding: 5pt;    
}
.mtype  {
   width: 100%;
}
.mtitle {
   font-weight: bolder;
   font-size: 125%;
   margin-bottom: 5pt;
}
.mtype:nth-child(even)  {
   background-color: dimgre;
}
.mtype:hover    {
   background-color: white;
   color: black;
}

- ++第 10-16 行++，調整 nav 標籤的顯示方式：
- ++第 12 行++，指定背景顏色
- ++第 13 行++，指定前景(文字)顏色
- ++第 14 行++，將呈現方式指定為 flex，排列內容項目
- ++第 15 行++，指定內邊界為 5pt
- ++第 17-19 行++，調整套用 mtype 類別元素的寬度需佔滿其親代元素的寬度。由於其親代元素 nav 指定其呈現方式為 flex，所以 nav 內套用 mtype 的 4 個 div 標籤的寬度被平均分配為 nav 元素的 1/4。
- ++第 20-24 行++，調整套用 mtitle 類別元素的屬性：
- ++第 21 行++，字體加粗
- ++第 22 行++，字體大小加大 25%
- ++第 23 行++，設定其下方的外邊界為 5pt

- ++第 25-27 行++ 為了區隔相鄰的餐點類別，調整一下偶數序位的 mtype 類別的背景色

- ++第 28-31 行++ 突顯被滑鼠游標碰到的餐點類別

將以下文字儲存成 lesson03.html

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網頁程式設計</title>
 <link rel="stylesheet" href="demo.css">
</head>
<body>
   <nav>
       <div class="mtype">
           <div class="mtitle">中式餐點</div>
           <div class="mitem">炒烏龍麵</div>
           <div class="mitem">什錦炒飯</div>
       </div>
       <div class="mtype">
           <div class="mtitle">披薩</div>
           <div class="mitem">瑪格利特披薩</div>
           <div class="mitem">夏威夷披薩</div>
           <div class="mitem">乳酪四重奏披薩</div>
       </div>
       <div class="mtype">
           <div class="mtitle">義大利麵</div>
           <div class="mitem">奶油義大利麵</div>
           <div class="mitem">蕃茄義大利麵</div>
           <div class="mitem">青醬義大利麵</div>
       </div>
       <div class="mtype">
           <div class="mtitle">飲料</div>
           <div class="mitem">拿鐵咖啡</div>
           <div class="mitem">美式咖啡</div>
           <div class="mitem">義式濃縮咖啡</div>
           <div class="mitem">英式伯爵奶茶</div>
           <div class="mitem">日式煎茶</div>
           <div class="mitem">阿里山紅茶</div>
       </div>
   </nav>
   <main>
       <h1>主要內容</h1>
       <p>菜單在旁邊噢！</p>
   </main>
</body>
</html>

偽元素(Pseudo-element)選擇器

偽元素與偽類別很相似，但是它是用來指涉元素的某一部份而非元素本身。需要用兩個冒號 `::` 將代表偽元素的關鍵字附加在基本選擇器之後。

偽元素	說明	範例
after	此元素的尾端	.clear::after
before	此元素的開端	.list-item::before
first-letter	此元素的第 1 個字元	p::first-letter
first-line	此元素的第 1 行	.story>p::first-line
selection	此元素被選取的範圍	.article::selection

例如：

.clear::after {
   clear: both;
}
p::first-letter {
   font-size: 150%;
   font-weight: bold;
}

- 自動在套用 `clear` 類別的元素後，清除浮動(`float`屬性)顯示的設定。
- 每個段落(`p`)元素的第一個字元，尺寸加大 50% 並以粗體顯示。

選擇器組合運算與群組

一次使用單一選擇器很方便，但在某些情況之下會顯得沒有效率。CSS 提供了幾種方式依據網頁元素彼此間的關係來選擇網頁元素：

子代 A > B

會選擇 A 下一層的 B 元素。HTML範例如下：

<div class="title">主目錄</div>
<div class="card">
   <div class="title">子目錄1</div>
   <div>
   <div class="title">子目錄2</div>
   </div>
   <div class="title">子目錄3</div>
</div>

若 CSS 規則為：

.card>.title {color: dimgrey; font-size: 18pt}

則僅有「子目錄1」還有「子目錄3」會被套用到這條規則。

後代 A B

會選擇 A底下的 B元素，只要 B 元素被 A 包含即可，不管其間有幾層。

HTML 範例同上，但 CSS 規則修改為：

若 CSS 規則為：

.card .title {color: dimgrey; font-size: 18pt}

則「子目錄1」、「子目錄2」、「子目錄3」都會被套用到這條規則。

同層直接相鄰 A + B

會選擇與 A 同層，但是緊鄰它的 B 元素。也就是說只有當 A 元素下一個元素為 B 的情況下，這些 B 元素會被選取出來。

Lesson04

將以下文字儲存成 lesson04.html

<!DOCTYPE html>
<html lang="zh-hant">
<head>
 <title>網頁程式設計</title>
 <link rel="stylesheet" href="demo.css">
</head>
<body>    
   <div class="example">
   <div class="item">項目1</div>
   <div class="item">項目2</div>
   <div id="pivot" class="item">項目3</div>
   <div class="item">項目4</div>
   <div class="item">項目5</div>
   </div>
</body>
</html>

欲套用的 CSS 規則為：

#pivot + .item {border: 1px dotted silver}

這樣只有「項目4」會套用到這個規則。

同層相鄰 A ~ B

會選擇與 A 同層，但是在它之後的 B 元素。也就是說只有當 A 元素之後的元素為 B 的情況下，這些 B 元素會被選取出來。

假設 HTML 網頁文件同上，但 CSS 規則若修改為：

#pivot ~ .item {border: 1px dotted silver}

則「項目4」與「項目5」都會套用這條規則。

群組(Grouping)

若是好幾組元素有共同的屬性設定，可以用群組的方式先將所有的篩選條件列成群組清單，然後再一起寫一組屬性設定就好。例如：

h1 {font-family: helvetica, 'sans serif'}

h2 {font-family: helvetica, 'sans serif'}

h3 {font-family: helvetica, 'sans serif'}

h4 {font-family: helvetica, 'sans serif'}

.title {font-family: helvetica, 'sans serif'}

可以用 , 合併為

h1, h2, h3, h4, .title {font-family: helvetica, 'sans serif'}

CSS Box Model

在正式介紹 CSS 的屬性之前，先介紹 CSS Box Model，中文有人翻成區塊模型，也有譯為盒模型。你可以想像，網頁上的每個可視的 HTML 元素都被放置在一個個的盒子(Box)裡，如下圖：

- 元素的最外圍是框線(border)
- 外邊界(margin)是元素與周圍其他元素要保持的距離
- 內邊界(padding)是邊框與實際內容要保持的間距
- 內容(content)才是實際要顯示的內容
- 元素的寬度(width)與高度(height)，預設是指元素內容的寬與高，不包含內邊界與框線佔用的空間

常用CSS屬性

數值

指定數值型的設定值可以用以下方式：

- 絕對單位：以數值加上單位的方式，常用的單位如下：
- px: 畫素
- q, mm, cm, inch: 1/4公厘, 公厘, 公分, 英吋
- pt, pc: 點(Point, 1/72 英吋), Picas(12個點，也就是 1/6 英吋)
- 相對單位：
- em:
- 相對比例：以數值加上 % 的方式表示與其親代元素屬性值的相對比例。

顏色

指定顏色的設定值可以使用下列方式：

- 顏色名稱：

例如：red, blue, green, white, black, yellow, ... 等，完整的顏色名稱請參見 mdn web docs 網頁。

但其中有一個特殊的顏色名稱 transparent 代表透明，通常用在指定背景顏色時使用。

- 16進位色碼：

# 後面以 3 組 16 進位數字來表示紅、綠、藍三原色的強度，每組數字的範圍從 00 至 FF，對應到 10 進位的數值為 0 ~ 255，例如：

#64a57c

- RGB函數：

rgb() 函數接受 3 個參數，依序代表紅、綠、藍三原色的強度，每個參數的範圍由 0 ~ 255，例如：

rgb(100, 165, 110)

<span style="background-color: rgb(100, 165, 110); padding: 3pt">123</span>

- RGBA函數：

rgba() 函數接受 4 個參數，前 3 個同 rgb() 函數，第 4 個參數代表透明度 alpha 值，範圍為 0 ~ 1 之間的浮點數值，用 0 表示完全透明，1 表示完全不透明，例：

rgba(100, 165, 110, 0.4)

<span style="background-color: rgba(100, 165, 110, 0.4); padding: 3pt">123</span>

文字屬性

font-family 指定欲使用的字體的順序，例如：

body {
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
   
.title {
   font-family: "微軟正黑體", "標楷體", "細明體";
}

- font-size 指定元素的字體大小，例如：

.title {
   font-size: 15px;
}

- font-weight 指定字重(字的粗細)，例如：

.title {
   font-weight: bold;
}

其屬性的設定值有以下方式：

- 級數
一般通用的字重級數為 100、200、...、800、900 等整百數值，但是顯示效果要看套用的字型是否支援。但是在最新的 CSS 4 標準中，則放寬到 1 ~ 1000 間的任意整數值皆可。
- 關鍵字
- normal: 標準，對應到的級數為 400
- bold: 粗體，對應到的級數為 700
- 相對關鍵字
- bolder: 比親代元素稍粗一點
- lighter: 比親代元素稍細一點

下表為對照關係：

繼承自親代元素的字重級數	bolder對應級數	lighter對應級數
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

- color 指定元素的前景色，通常是指元素內容文字的顏色

例如：

body {color: grey}
h1, h2, h3 {color: #ff8a74}
.note {color: rgb(70, 98, 180)}

- text-decoration 指定文字裝飾方式，為以下 3 個屬性的縮寫：

- text-decoration-line 裝飾線的類型：

- underline <span style="text-decoration: underline">底線</span>

- line-through <span style="text-decoration: line-through">刪除線</span>
- overline <span style="text-decoration: overline">頂線</span>
- none 無裝飾線

註：若為 none 的話，則不需設定以下兩項。

- text-decoration-style 裝飾線樣式：
- solid <span style="text-decoration: underline solid">實線</span>
- double <span style="text-decoration: underline double">雙實線</span>
- dotted <span style="text-decoration: underline dotted">點虛線</span>
- dashed <span style="text-decoration: underline dashed">短虛線</span>
- wavy <span style="text-decoration: underline wavy">波浪線</span>

- text-decoration-color 裝飾線顏色同 color 指定方式

如果要取消預設的裝飾線(例如連結元素 <a>瀏覽器在顯示的時候預設會有連結項目下方的裝飾底線)，可以將此屬性設定為 none，例如：

.bookname {text-decoration: underline wavy dimgrey}
a {text-decoration: none}

也可以分別指定各個屬性，例如：

.bookname {
   text-decoration-line: underline;
   text-decoration-style: wavy;
   text-decoration-color: dimgrey;
}

元素背景

- background-color 指定背景顏色

同 color 指定方式，例如：

.content {background-color: white}
.title {background-color: dimgrey; color: white}

- background-image 指定背景圖片

以 url() 函數來指定圖片來源，例如：

.content    {background-image: url('back.jpg')}
.title      {background-color: url('https://openclipart.org/image/300px/svg_to_png/288017/happy_python.png')}

清單

- list-style
- list-style-type
- list-style-position
- list-style-image

元素框線與陰影

- border
- border-left, border-right, border-top, border-bottom
- border-radius
- border-color
- box-shadow 盒陰影

<span style="box-shadow: 2px 2px 3px">aaa</span>

- text-shadow 文字陰影

<span style="text-shadow: 2px 2px 3px blue">123</span>

排版類

- width, height 元素尺寸：寬度、高度

例如：

.box1 {
   width: 25%;
   height: 100px;
}

將套用 box1 類別的元素的寬度設定為其親代元素的 `25%`，高度指定為 100 個像素。

- box-sizing 元素尺寸的計算方式

回想一下前面提過的盒模型：

指定元素的寬度與高度的時候，預設指的是元素內容的寬度與高度，而內邊界與框線所佔用的空間則是另外計算的。例如：

<div id="parent">
   Parent Content
   <div id="child">
       Child Content
   </div>
</div>

#parent {
   width: 100%;
   border: 1px solid grey;
}
#child {
   margin-top: 10px;
   width: 100%;
   border: 1px solid red;
   padding: 10px;
}

顯示效果如下所示：

Parent Content

Child Content

內部的 #child 元素，寬度竟然超過它上層的 #parent 元素。這是因為 width 的設定值 100% 指的是內容寬度，再加上內邊界(`padding`)的 `20px` (左右內邊界各 `10px`)，以及框線 `2px` (左右框線各 `1px`)，因此內部的 `#child` 元素實際佔用的寬度比它的親代元素 `#parent` 多了 `22px`，所以在畫面上會看到它超出 `#parent` 的範圍。

`box-sizing` 屬性可以用來調整這個狀態，它的設定值有以下 2 種選項：

- content-box 這是預設值，元素的寬高設定值僅針對其內容。
- border-box 元素的寬高設定值包含整個邊框以內的範圍，因此元素內容實際佔用的空間，就需扣除邊框與內邊界。

延續原本的範例，若將 #child 的 box-sizing 屬性指定為 border-box 的話，整個 #child 所佔用的空間就會被 #parent 所包覆：

#child {
   margin-top: 10px;
   width: 100%;
   border: 1px solid red;
   padding: 10px;
   box-sizing: border-box;
}

<div style="width: 100%; border: 1px solid grey">
   <p>Parent Content</p>
   <div style="margin-top: 10px; width: 100%; border: 1px solid red; padding: 10px; box-sizing: border-box">
           Child Content
   </div>
</div>

- margin 外邊界(四周與其他元素的距離)

外邊界的設定方式，依據給定的設定值的個數與其代表的邊界意義如下：

- 僅給定一個設定值表示要同時設定上下左右四個方向的邊界，例：

.demobox {margin: 5px}

- 給定 2 個設定值，第 1 個表示上下邊界，第 2 個表示左右邊界，例：

.demobox {margin: 3px 5px}

- 給定 4 個設定值，依序表示上、右、下、左四個方向的邊界，例：

.demobox {margin: 0 6px 5px 3px}

- margin 的屬性值除了指定數值之外，也可以指定為 auto 讓瀏覽器自動計算。例如：

<div class="outerdiv">
   <div class="innerdiv">
   </div>
</div>

.outerdiv {
   height: 200px;
   border: 1px solid grey;
}
.innerdiv {
   height: 100px;
   width: 100px;
   margin: 50px auto;
   border: 1px solid red;
}

顯示效果示意如下：

outerdiv

innerdiv

- 套用 innerdiv 類別的 div 元素，因為左右邊界的設定值被指定為 auto，因而造成它被水平置中了。
- 另外，若要單獨指定某個方向的外邊界的話，則可使用下列這些屬性名稱：margin-left, margin-right, margin-top, margin-bottom。例：

.title {margin-top: 5pt; margin-bottom: 10pt}

- padding 內邊界(與內部內容的間距)
- 與 margin 設定方式相同。
- 若要單獨指定某方向的內邊界，可透過 padding-left, padding-right, padding-top 以及 padding-bottom 這幾個屬性名稱來操作

<div class="box-container">
   <div class="p1">p1 content</div>
   <div class="p2">p2 content</div>
</div>

.box-container {border: 1px solid grey; padding: 5pt}
.p1 {border: 1px solid green; padding: 5px; margin-bottom: 5pt}
.p2 {
   border: 1px solid red;
   padding-top: 3px;
   padding-bottom: 20px;
   padding-left: 10pt;
}

顯示效果如下：

p1 content

p2 content

- display 顯示類型

這個屬性用來指定元素的顯示類型，由元素如何生成盒模型的 2 個的基本特徵所組成：

- 外部顯示類型：用來定義元素的盒模型如何被排版，常用的有以下選項：
- block 此元素被當成區塊元素來排版。一般說來，區塊元素不與其它元素並排，可以指定寬度與高度。
- inline 此元素被當成行內元素來排版。行內元素可與其它行內元素並排在同一行，直到超出整行的寬度，才會被排到下一行。元素的寬度與高度僅由內容決定，無法人為指定。
- 內部顯示類型：用來定義元素內容如何編排，常用的選項如下：
- flow 預設值，表示視內部元素為 block 或 inline 來編排內容。
- table 將內容以表格形式來編排。
- flex 彈性盒子佈局(flexible box layout)，這種編排方式的子元素可以由任意方向開始編排(由下而上，由右往左都可以)，而且子元素的尺寸也可以彈性自動調整，像是自動延展來佔滿未使用的空間，或是緊縮尺寸以避免超出其親代元素，也可以很方便的操作子元素的水平與垂直對齊方式。
- grid 格線佈局(grid layout)，將元素的內容空間切割成二維的格子，將子元素依照切分出來的格子進行編排。子元素的寬度與高度的設定可改由要佔用幾個格子的數量來指定。

例如：

nav.main-menu   {
   display: block flex;
}

除了上述的設定值之外，還有以下幾種常用的選項：

- list-item 將元素當成清單項目來顯示。
- none 在排版時略過此元素，畫面上不會顯示此元素，就像此元素不存在，頁面上也不會預留此元素佔用的空間。
- inline-block 元素本身是行內元素，但寬度與高度可人為指定。

- position 元素在文件中的定位方式

依照定位方式的不同，搭配 top, right, bottom, left 等 4 個屬性，可決定元素最終的擺放位置。常用的設定選項有：

- static 靜態定位

此為預設值。指元素使用正常的規則進行佈局，在此定位方式下，top, right, bottom, left, z-index 等屬性無效。

- relative 相對定位

指元素使用正常的規則進行佈局，但與 static 不同的是，top, right, bottom, left 的設定值是指相對於其原預設位置的偏移值。

- absolute 絕對定位

指元素被從正常的佈局規則中移除，頁面上不會保留其排版空間，也就是頁面在排版時，會先略過絕對定位的元素，最後再根據其 top, right, bottom, left 屬性來安排元素的在頁面上的擺放位置，而這 4 個屬性的值是指相對該元素最接近的非靜態定位先代(ancestor)元素的偏移值。

- fixed 固定定位

指元素被從正常的佈局規則中移除，頁面上不會保留其排版空間，也就是頁面在排版時，會先略過固定定位的元素。它會固定在頁面可視範圍(viewport)畫面的指定位置，不會隨著頁面捲動而移動。它的 top, right, bottom, left 屬性指的是相對於可視範圍的偏移值。如果想做一個固定出現在畫面上方的導覽列，可將其定位方式設為 `fixed`。

- left, right, top, bottom 元素座標

左上角X座標、右下角X座標、左上角Y座標、右下角Y座標，相對於其參考對象的偏移值。例：

#back-to-top {
   position: fixed;
   right: 5pt;
   bottom: 5pt;
}

- 將 id 為 back-to-top 的元素固定在可視範圍的右下角。

- float 浮動排版

將元置往其容器的左邊或右邊放置，並致使文字與其它的行內元素環繞該元素。如果你在 Word 的文件裡使用過圖片，也許對「文繞圖」這功能會有點印象。

若要將套用 fl-right 類別的元素指定為靠右浮動，其它行內元素與其左方保持 5pt 的邊界，可這樣設定：

.fl-right {
   float: right;
       margin-left: 5pt;
}

示意範例：

fl-right

測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字... 魚

- text-align 行內元素的水平對齊方式

常用的設定值有：

- left 靠左對齊
- right 靠右對齊
- center 置中對齊

- justify 分散對齊

雜項

- cursor 指定游標移到元素上方時游標的樣式
- visibility 顯示與否

指是否要在頁面上顯示此元素，常用的設定值為：

- visible 將元素設為可視狀態
- hidden 隱藏元素

要讓元素在頁面上不顯示可以透過 visibility 或 display 屬性來指定，但兩種方式有一點點差異：

- visibility: hidden 在排版時會保留元素的空間，只是讓它不顯示而已。
- display: none 在排版時會略過元素，不會在頁面上保留該元素的空間。