可以上在 div 上的

width, min-width, max-width

height, min-height, max-height

background, border-radius

JS Bin

background

JS Bin

MDN Reference : background

url() 可以填絕對路徑（http 開頭、/ 開頭）、相對路徑。

相對路徑以 CSS 檔的位置起算；../ 是「上一層資料夾」。

CSS Shorthand Properties

background: #000 url(images/bg.gif) no-repeat top right;

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

MDN 相關文件

Shorthand Property 預設值陷阱

JS Bin

background 中沒有定義顏色 → transparent。

background-color: red;

/* background 會展開為下列三條規則 */
background-color: transparent;
background-image: url(http://mrorz.github.io/webdev/images/css/selector.gif);
background-position: left center;

單位

• px : 1px = 螢幕上的像素高
• em : 1em = 當前字型大小
• % : 父元素值的百分比

JS Bin

CSS Color

JS Bin

MDN CSS Colors

漸層

JS Bin

Ultimate Gradient Editor

特殊值 inherit

所有 CSS 屬性，均可設為「inherit」。

部分 CSS 屬性預設不會繼承自父元素，明確指定 inherit 才會繼承。

JS Bin

特殊值 inherit（續）

input，textarea，select，button 等 replaced element，樣式不會自動 inherit 自父元素。

JS Bin

Generic Font Family

font-family 的特殊值

serif, sans-serif, cursive, fantacy, monospace

JS Bin

瀏覽器對各種 Generic font family 有預設字體

襯線、無襯線、等寬

Serif

有襯線；明體

Sans Serif

無襯線；黑體

「襯線」

monospace 字型的每個字元都一樣寬，適合排版程式碼。

字體顏色

color 屬性

font-family

font-family: '文泉驛微米黑', 'LiHei Pro', '微軟正黑體', sans-serif;

字體在使用者電腦裡沒有 → 用下一個

最後一個通常放 Generic font family。

常用之 font-family

Web Font

JS Bin

• Server 提供字體給 Browser 來抓
• 通常抓下來不能直接裝在電腦上，只能顯示
• Google Web Font 英文的 Webfont
• @font-face generator 上傳字型檔後，會轉檔為 web font 並提供範例

大小與行高

font-size: 12px

line-height: 1.4

font-family: Arial, sans-serif

/* All-in-one shorthand */
font: 12px/1.4 Arial, sans-serif;

line-height：純數字（幾倍於字體大小）或 數字px

了解更多

粗體、斜體、大寫小字

與字體本身相關的，為 font- 開頭。

font-style: normal | italic

font-weight: normal | bold | 數字

font-variant: small-caps

JS Bin

Shorthand: font

font: italic bold .8em/1.2 Arial, sans-serif;

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

裝飾線、排版

text-decoration: none | underline | line-through

text-align: left | right | center

JS Bin

CSS 看起來怪怪的嗎？

• Ctrl + Shift + i 永遠是好朋友
• 用 jsbin 做測試或拿去問人

Chrome DevTool Elements 頁籤

Styles

• 根據 selector 分類規則
• 點兩下可修改

Computed Styles

• 根據 CSS property 分類，方便追蹤。

你已經知道了

• background, width, height
• font, line-height, font-size, font-style, font-weight
• 長度（em, px, %）、顏色、特殊值 inherit
• Chrome Developer Tool 的「Element」頁籤
• CSS shorthand property
• Webfont

tag, .class, #id

JS Bin

tag, .class, #id

多個 Selector 套用相同樣式

用逗號 , 將 Selector 分開

JS Bin

Box

• 排文字與元素時
• 蓋成長方形 box

CSS Box Model

margin, border, padding

圖片來源：W3C Box Model

心室肥大

JS Bin

注意 .heart 的寬度與高度。

內容區域 != 背景區域

背景顏色寬(高)度 = 內容寬(高) + padding 寬(高)

和 Word / PowerPoint 不同。

上下左右 margin、padding

margin 是下面四個 property 的 shorthand：

• margin-top
• margin-bottom
• margin-left
• margin-right

padding 以此類推。

上下左右 margin、padding shorthand

JS Bin

1：全部；2：上下、左右；3：上側下；4：上右下左。

border

border 為下面三個 property 的 shorthand：

• border-style 樣式（預設： none）
• border-width 粗細（預設： medium）
• border-color 顏色（預設： 與 color 相同）

JS Bin

上下左右 border

上下左右 border 的寬度、顏色、樣式可以分開設定。

border-bottom 是 border-bottom-style、border-bottom-width、border-bottom-color 的 shorthand。

JS Bin

（以此類推 border-top、border-left、border-right）

上下左右 border shorthand

border-style、border-width、border-color 都可以設定 1~4 個值。

規則同 margin。

JS Bin

border 與 outline

JS Bin

border 會佔有空間、推開周圍元素；outline 不會。

邊界重疊 Margin Collapsing

垂直邊界有時候會重疊在一起，只表現比較大的那一個。 （margin-left、margin-right 永遠不會重疊。）

JS Bin

Margin collapsing 出沒之處：

1. 相鄰元素彼此之間
2. 沒有 border 與 padding 的 parent 元素與其 child 元素之間（margin 會出現在 parent 之外）
3. 空元素自己的上下邊界

改變 box model 的 width 與 height

box-sizing: border-box 瀏覽器支援

width = border + padding + content

JS Bin

Percentage values

以下屬性都可以設定百分比。

• width & height
• margin
• padding

那 100% 是以什麼為準？

Containing block

Box A 的 Containing block ＝ A 的 ancestor 中，與 A 最近的 Block-level box 的 content edge。

Block-level box：display 為 block 之類的 box。

JS Bin

Initial containing block

網頁呈現在螢幕時，就是視窗螢幕（viewport）

JS Bin

Percentage margin / padding on heights

垂直的 margin 與 padding 若為 percentage value，

100% = containing block 的寬度。

JS Bin

display Property

• <p> 的 box 呈上下排列
• <em> 的 box 排在字裡行間

display 的值

JS Bin

• block 自成一行，寬度佔滿滿。
• inline 塞在字裡行間，會被斷行。寬度同內容。
• inline-block 塞在字裡行間，自成一格不分離。寬度同內容。

觀察：display 與 margin

JS Bin

• block 上下左右皆退開。寬度變小了。
• inline 只有左右有影響。
• inline-block 上下左右皆退開。

觀察：display 與 padding

JS Bin

• block 上下左右都加上填充、擠開內容。
• inline 上下左右都加上填充，但只有左右會擠開旁邊內容。
• inline-block 上下左右都加上填充、擠開內容。

觀察：display 與 width、height

JS Bin

• block 寬度與高度都有效果、推開旁邊內容。
• inline 寬度與高度都沒效果。
• inline-block 寬度與高度都有效果、推開旁邊內容。

實務上最常接觸到的會是 div。

其預設為 display: block。

以下詳細介紹 display: block 的行為。

display: block 的寬度

display: block 元素在寬度上，需要符合這個等式：

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block

display: block 預設值

• margin：0
• border-width：0
• padding: 0
• width: auto

特殊值 auto

「請瀏覽器幫我算」

計算 auto 的實際寬度

1. 若只有一個 auto 值，就用等式來解 auto。
2. 若 width: auto，則其他任何 auto 都會被計算為 0，然後用等式來算 width
3. 若式子裡沒有任何 auto 的值，則忽略 margin-right 的設定，改成用等式計算 margin-right。（看上去會像是靠左對齊）
4. 若 margin-left 與 margin-right 同時是 auto，那設寬度時會使 margin-left = margin-right。

應用：display: block 置中與置右

JS Bin

margin-left 和 margin-right 同為 auto 時，元素會水平置中。（前提是左右邊界之間的寬度不要寬過 containing block）

計算 auto 的實際高度

• margin-top、margin-bottom 的 auto 等於 0。
• 若 height: auto，則高度就會被設成「上 content edge」到內容底端的距離。（「內容」僅包含「在 Normal flow 內」的元素）
• 否則，height 則為 0。

綜合以上，形成 block 元素上的 height、垂直 padding 與垂直 margin 「推開」上下元素的效果。

display: block 百分比高度

1. 百分比高度，以 containing block 高度為 100%
2. containing block 高度，預設為 auto（看內容文字或子元素高度）

如果設定 height: 50%，那元素與其 containing block 的高度會發生什麼事情？

--> 如果 containing block 沒有指定高度，height 就會被視為 auto（所以會看內容文字或子元素高度）。

JS Bin

display 大複習

JS Bin

其他 display 值

• none: 連 box 都沒有。完全沒有容身之處。
• table 系列：當成 table 來排版，見 SPEC。

JS Bin

Flex 的特色

1. 按照特定方向 (flex-direction) 排列 box
2. 大小是 Flex 的（flex）
3. 可以調整對齊方式（justify-content、align-items）
4. 顯示順序可以透過 CSS 調整 (order)

Flex containers & items

display: flex

• Flex container：display: flex 的元素
• Flex items：Flex container 的 children。

JS Bin

排版設定 - flex-direction

flex-direction: row | column | row-reverse | column-reverse

• 寫在 flex container／預設 row
• 沿著 flex-direction 方向為 “Main axis”、大小叫 “Main size”
• 與 flex-direction 垂直的方向為 “Cross axis”、大小叫 “Cross size”

排版設定 - flex-wrap

flex-direction: nowrap | wrap | wrap-reverse

• 寫在 flex container／預設 nowrap
• nowrap：無論如何，將所有 flex item 排成一條線
• wrap：flex item 可以有很多行，寬度不夠就換行
• wrap-reverse：同 wrap，但是從最後一行開始排到第一行。

JS Bin

排版設定 shorthand

上面 2 個 CSS property 可以合併成下面 shorthand

flex-flow: <flex-direction> <flex-wrap>

JS Bin

決定 Main size - flex-basis

flex-basis: content | width 與 height 能用的值

• 寫在 flex item／預設 auto
• content：內容大小。
• auto：看 main size property（width 或 height）；如果其為 auto，則視為 content。

JS Bin

決定 Main size - flex-grow

flex-grow: 0 | <positive number>

• 寫在 flex item／預設 0
• flex item 依照 flex-basis 排列好後，如果 main axis 方向排不滿一行（flex line），瀏覽器會依照每個 flex item 所寫的數字為比例來增加該 flex line 每個 flex item 的 main size，直到佔滿 flex line。

JS Bin

決定 Main size - flex-shrink

flex-shrink: 0 | <positive number>

• 寫在 flex item／預設 1
• flex item 依照 flex-basis 排列好後，若 main axis 方向的大小超出 flex container，瀏覽器會依照每個 flex item 所寫的數字、乘上寬度後，依比例來減少 main size，直到恰好佔滿 main axis 的一行（flex line）。

JS Bin

決定 Main size - flex-shrink

多行的狀況下⋯⋯

• 空間不夠會先斷行（建立新 flex line）
• 若有 flex line 只剩下一個 flex item，才有可能會縮小：
  • flex line 的寬度還是超過 flex container
  • flex-shrink 不為 0

JS Bin

決定 Cross size

• 每個 flex-item 的 cross-size property（height 或 width）
• align-items 的設定

Cross axis 對齊 - align-items

align-items: flex-start | flex-end

• 寫在 flex container／預設 stretch

Main axis 對齊 - justify-content

justify-content: flex-start | flex-end

• 寫在 flex container／預設 flex-start

Concept: Normal Flow

文字由左邊往右邊，超過邊界就折到下一行

JS Bin

由上而下、由左而右 → Normal Flow

display: block 之元素垂直排列，
display: inline / inline-block 之元素水平排列。

Positioning Schemes

除了 Normal flow 之外，還有：

Floats

float: left | right

position: static

毫無反應，就是個預設值。

position: relative

left, top, bottom, right

• 挪動自己 box 的距離。
• left、right 之中只能設定一個；top、bottom 之中只能設定一個。無論如何元素寬度與高度都不會被影響。
• 若為百分比，以 containing block 的寬 or 高為 100%。

JS Bin

Positioning Schemes

除了 Normal flow 之外，還有：

Floats

float: left | right

Absolute positioning

position: absolute：脫離 Normal flow

JS Bin

Absolute positioning (2)

position: fixed：脫離 Normal flow，黏在 viewport 上

JS Bin

containing block

Containing block 的定義，會隨著 position 不同而變化！

position: static, relative

containing block 為 ancestor 中，最接近的 block-level box（之前的 slide）。

position: fixed

containing block 為 viewport。

position: absolute

containing block 為 ancestor 中，最接近而且 position 不是 static 的元素的 padding edge)。

position: absolute 的寬度

position: absolute 的元素在寬度上，需要符合這個等式：

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block

left, right 可以是 auto。

position: absolute 與 left, right

left, top, bottom, right

• 距離 containing block 的 padding edge 的距離。
• 可以影響元素的寬或高。
• 若為百分比，以 containing block 的寬 or 高為 100%。

JS Bin

.child 的第一個 position != static 祖先是 .world。

.child 的 containing block 是 .world。

因此 .child 的 bottom、right 是以 .world 為準。

position: fixed

left, top, bottom, right 同 position: absolute

Containing block = 視窗內容（viewport）。

position 與容器高度

height: auto 計算高度時，只會計算 Normal flow 內的元素高度。

JS Bin

Positioning Schemes

Normal Flow

position: static | relative;
float: none;

除了 Normal flow 之外，還有：

Absolute Positioning

position: absolute | fixed

Floats

JS Bin

使 .outer 變為 float 或 absolute positioning，可以脫離 normal flow。

float：文繞圖

JS Bin

細說 float

JS Bin

• 文字圍繞 floated elements。
• 複數個 float 會比鄰而居。
• 設置 clear 屬性可終止圍繞。

細說 float (2)

不會撐開 parent，要 clear
或用 overflow: auto|hidden。

JS Bin

position, display & float 力氣排行榜

JS Bin

上面的屬性會蓋過下面的。

正常狀況

怪怪的

還是怪怪的

Layered Presentation

決定誰在「前面」誰在「後面」

「Stacking Context」: 疊東西的地方＝樓層

一開始所有元素都在同一樓層
（Root stacking context ＝ <html>）

萬丈高樓平地起

圖片來源 - flickr

z-index = 樓層號碼（整數）

---

形成 stacking context（新樓層）

• position: 非 static
• z-index != auto 或 opacity < 1

巢狀 Stacking Context

• 樓層內加蓋
• 不同樓層的樓中樓，不會交錯

JS Bin

另一種比喻

「Stacking Context」: 疊東西的地方。

疊東西的地方。

圖片來源：酪梨壽司 - 愛妻便當

允許樓中樓。

圖片來源：樂天拍賣

特別感謝 Lucien - 淺談 CSS 開發與除錯

處理 z-index

• 替 topbar（含 dropdown menu）建立 stacking context。
• 替網頁主體建立 stacking context。
• 讓 topbar 的 z-index 高過網頁主體。

萬丈高樓平地起

蓋房子順序：

地基 → 地下室 → 低樓層 → 高樓層

1. stacking context 之背景與邊界
2. 負 z-index 的 element
3. 地表：z-index:0 | auto 的 element
4. 正 z-index 的 element

JS Bin

同一層裡面

z-index 相同的元素，用下面規則分高下。

（由低至高）

1. Normal flow 中的 block elements
2. float elements
3. 文字等 inline elements
4. position != static 的 element (Positioned elements)

若兩元素同一層，則先寫在 HTML 檔裡的，會被壓在下面。

Stacking Order

Positioned 元素 > Inline 元素 > float 元素 > block in Normal Flow

JS Bin

Stacking Order

加上 z-index JS Bin

Z-Index And The CSS Stack: Which Element Displays First?

側欄

想要做的目標網頁

.sidebar 佔據螢幕右邊 33%

側欄 - 作法一

左欄：.intro 與 .main；右欄：.sidebar

把 .intro 和 .main 包起來、然後水平排列左欄和右欄

水平排列 → float 或 display: inline-block

側欄 - 作法二

左欄：.intro 與 .main；右欄：.sidebar

不修改 HTML 的作法

.intro 和 .main 66%

右欄 position: absolute 移到視窗右邊

下拉式選單

範例結果（範例 CSS 檔）

• 橫向排列的 li 元素
  
  • 可以用 float
  • 可以用 display: inline-block
• 巢狀 list: <li> 裡可以有 <ul>
• :hover magic

Descendant & Child Selector

• .root div: .root 的子孫中為 div 者。
• .root>div: .root 的孩子裡為 div 者。

JS Bin

Universal Selector

JS Bin

*：任意元素。

.root *: .root 的子孫。

Attribute Selector

JS Bin

中括號； [屬性 運算子 值]

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Pseudo-Class

JS Bin

依狀態套用的「假的」class

幾乎所有元素都可用 :hover

a 元素：:link, :visited, :active

避免定義相互覆蓋的順序：LoVe HAte

Pseudo-Class

JS Bin

老大 :first-child, 老么 :last-child

老 N :nth-child()

Pseudo-Element

JS Bin

• 需有 content 屬性。
• ::before 像是一個 span 元素
  加在 start tag 之後、內容之前。
• ::after 像是一個 span 元素
  加在 end tag 之前、內容之後。
• 亦可只用一個冒號（:before, :after）

Sibling Selector

• :checked : 「被勾選」之 pseudo-class。

JS Bin

• input + * 選出 input 的最大的弟弟妹妹。
• input ~ * 選出 input 的所有弟弟妹妹。

小結

MDN Reference

Basic Selector

tag, #id, .class, [attr], *

Pseudo-elements & Pseudo-classes

:before, :hover

Combinator

A B, A>B, A+B, A~B

兩個定義打架

Value 不同的兩個定義，被套用在同一個元素上時……

JS Bin

CSS Specificity

Specificity：Selector 精準與否

Source: CSS Tricks

用字典順序比較 Specificity。

Specificity 相同的話，後定義者蓋過之前定義者。

打架調解委員會

JS Bin

• 此 div 會被 selector .loud 和 div 選中
• 兩 CSS 定義內均設有 color
• Specificity of .loud : 0,0,1,0
• Specificity of div : 0,0,0,1
• 0,0,1,0 > 0,0,0,1
  故套用 .loud 對 color 的定義

練習

練習

Takeaway

Specificty 越小越好

• 盡量用可重複使用的 class

  .btn, .panel, .media-box

• ID 用於分開不重複區塊

  #header .title

• Decendent / Child selector 別太深

  #header .banner nav ul li .title /* Avoid! */

box-shadow
text-shadow

JS Bin

transform 形變

JS Bin

transition 漸變

設定 duration 和 property

JS Bin

filter

• blur
• saturate