網頁程式設計 學習紀錄(九) Box Model 與 定位方式
包含以下七個部分：
- Box Model
- 邊界屬性
- 留白屬性
- 框線屬性
- 定位方式
- 多欄位排版
- 媒體查詢
1.Box Model
Box Model(方塊模式)與 定位方式，主導了網頁的編排與顯示方式
Box Model 指的是CSS將每個HTML元素看成一個矩形方塊(BOX)
由 內容(content)、留白(padding)、框線(border)、邊界(margin) 組成
以下為CSS官方文件的圖片說明：
內容(content)：網頁上的資料
留白(padding)：環繞在內容四周的部分(背景色彩、圖片)
框線(border)：加在留白之外的線條
邊界(margin) ：控制HTML元素彼此之間的距離
※留白、框線、邊界的預設值為0
※當兩個邊界重疊時，只會取較大的邊界作為兩著的距離
2.邊界屬性
常用的邊界屬性如下：
表示方式：長度、百分比、auto，預設值為0
| 屬性 | 說明 |
| margin-top | 指定HTML元素的上邊界大小 |
| margin-bottom | 指定HTML元素的下邊界大小 |
| margin-left | 指定HTML元素的左邊界大小 |
| margin-right | 指定HTML元素的右邊界大小 |
| margin | 簡便表示方法：一個值(上下左右邊界)，兩個值(上下，左右邊界)，三個值(上，左右，下邊界)，四個值(上右下左邊界) |
以下為範例程式碼：
margin-top:長度|百分比|auto margin:設定值1 [ 設定值2 [ 設定值3 [ 設定值4] ] ]
3.留白屬性
常用的留白屬性如下：
表示方式：長度、百分比、auto，預設值為0
| 屬性 | 說明 |
| padding-top | 指定HTML元素的上留白大小 |
| padding-bottom | 指定HTML元素的下留白大小 |
| padding-left | 指定HTML元素的左留白大小 |
| padding-right | 指定HTML元素的右留白大小 |
| padding | 簡便表示方法：一個值(上下左右留白)，兩個值(上下，左右留白)，三個值(上，左右，下留白)，四個值(上右下左留白) |
以下為範例程式碼：
padding-top:長度|百分比|auto padding:設定值1 [ 設定值2 [ 設定值3 [ 設定值4] ] ]
4.框線屬性
(1)框線樣式(border-style)
設定值有：none(不顯示框線)(預設)、hidden(不顯示框線)、dotted(點狀框線)、dashed(虛線框線)、soild(實線框線)、
double(雙線框線)、groove(3D立體內凹框線)、ridge(3D立體外凸框線)、inset(內凹框線)、outset(外凸框線)
| 屬性 | 說明 |
| border-top-style | 指定HTML元素的上框線樣式 |
| border-bottom-style | 指定HTML元素的下框線樣式 |
| border-left-style | 指定HTML元素的左框線樣式 |
| border-right-style | 指定HTML元素的右框線樣式 |
| border-style | 簡便表示方法：一個值(上下左右框線樣式)，兩個值(上下，左右框線樣式)，三個值(上，左右，下框線樣式)，四個值(上右下左框線樣式) |
以下為範例程式碼：
border-top-style:設定值 border-style:設定值1 [ 設定值2 [ 設定值3 [ 設定值4] ] ]
(2)框線色彩(border-color)
CSS提供color屬性來指定顏色，語法如下：
|
1
|
color:色彩名稱 | rgb(rr, gg, bb) | #rrggbb | rgba(rr ,gg ,bb, alpha) |
| 屬性 | 說明 |
| rgb(rr,gg,bb) | 以紅、綠、藍混和比例指定色彩 |
| #rrggbb | 指定方式的十六進位制表示法，以#符號開頭 |
| rgb(rr,gg,bb,alpha) | 這是CSS3的新指定方式，參數alpha用來表示透明度 |
| opacity | 指定HTML元素的透明度 |
這裡可以用transparent來表示透明
| 屬性 | 說明 |
| border-top-color | 指定HTML元素的上框線色彩 |
| border-bottom-color | 指定HTML元素的下框線色彩 |
| border-left-color | 指定HTML元素的左框線色彩 |
| border-right-color | 指定HTML元素的右框線色彩 |
| border-color | 簡便表示方法：一個值(上下左右框線色彩)，兩個值(上下，左右框線色彩)，三個值(上，左右，下框線色彩)，四個值(上右下左框線色彩) |
以下為範例程式碼：
border-top-color:色彩 | transparent border-color:色彩1 [ 色彩2 [ 色彩3 [ 色彩4] ] ]
(3)框線寬度(border-width)
設定值有：medium(中)(預設)、thin(細)、thick(粗)、長度單位
| 屬性 | 說明 |
| border-top-width | 指定HTML元素的上框線寬度 |
| border-bottom-width | 指定HTML元素的下框線寬度 |
| border-left-width | 指定HTML元素的左框線寬度 |
| border-right-width | 指定HTML元素的右框線寬度 |
| border-width | 簡便表示方法：一個值(上下左右框線寬度)，兩個值(上下，左右框線寬度)，三個值(上，左右，下框線寬度)，四個值(上右下左框線寬度) |
以下為範例程式碼：
border-top-width:設定值 border-width:設定值1 [ 設定值2 [ 設定值3 [ 設定值4] ] ]
(3)border(框線屬性簡便表示法)
有border-top、border-bottom、border-left、border-right、border等屬性
沒有先後順序之分，中間以空白字元隔開
以下為範例程式碼：
border-top:[border-top-style 設定值] [border-top-color 值] [border-top-width 值]
h1 {border-top:dashed thin}
(4)框線圓角(border-radius)
設定值有：none(不顯示框線)(預設)、hidden(不顯示框線)、dotted(點狀框線)、dashed(虛線框線)、soild(實線框線)、
double(雙線框線)、groove(3D立體內凹框線)、ridge(3D立體外凸框線)、inset(內凹框線)、outset(外凸框線)
| 屬性 | 說明 |
| border-top--left-radius | 指定HTML元素的左上角成圓角 |
| border-top--right-radius | 指定HTML元素的右上角成圓角 |
| border-bottom-left-radius | 指定HTML元素的左下角成圓角 |
| border-bottom-right-radius | 指定HTML元素的右下角成圓角 |
| border-style | 簡便表示方法：一個值(套用四個角)，兩個值(左上右下、右上左下)，三個值(左上，右上左下，右下)，四個值(左上、右上、右下、左下) |
以下為範例程式碼：
border-top-left-radius:長度1 |百分比1 |[長度2 |百分比2] border-radius:設定值1 [ 設定值2 [ 設定值3 [ 設定值4] ] ]
5.定位方式
定位方式是有分別對於區塊層級(block level)、行內層級(inline level)
a.區塊層級
區塊層級指的是元素會在瀏覽器中另起一行
針對HTML區塊層級元素所產生的矩形方塊，稱為Block box
由內容、留白、框線 、邊界所組成
彼此之間的距離是以上下邊界來計算
b.行內層級
行內層級指的是元素不會在瀏覽器中另起一行
針對HTML行內層級元素所產生的矩形方塊，稱為Inline box
由內容、留白、框線 、邊界所組成
彼此之間的距離是以左右邊界來計算
(1)display (HTML元素的顯示層級)
HTML已有預設的顯示層級，但還是可以加以變更：
display: 設定值
display的預設值為inline(行內層級)，其他的設定值為：
none(不顯示元素)、block(指定為區塊層級)、inline(指定為行內層級)、list-item(將元素指定為清單項目)
(2)width、height、top、bottom、left、right(block box的寬高上下左右位移量)
width與height屬性指定寬、高度
而當position屬性的值為relative(相對定位)、absolute(絕對定位)、fixed(固定定位)時，
可以用top、bottom、left、right屬性指定上下左右位移量
設定值有長度、百分比、自動(預設為auto)
width:長度|百分比|auto height:長度|百分比|auto top:長度|百分比|auto bottom:長度|百分比|auto left:長度|百分比|auto right:長度|百分比|auto
(3)max-width、min-width、max-height、min-height(block box的寬高的最大與最小值)
除了將Block box的寬高指定為固定大小
也可以使用這些屬性來指定最大與最小值，避免block box出現太大的變化導致版面混亂
設定值有長度、百分比、自動(預設為auto)
max-width:長度|百分比|auto max-height:長度|百分比|auto min-width:長度|百分比|auto min-height:長度|百分比|auto
(4)position(Box 的定位方式)
CSS提供了正常順序(normal flow)、絕對定位(absolute positioning)、文繞圖(floats)
可以使用 position 屬性指定 Box 的定位方式
position:static| relative| absolute| fixed
- static:表示正常順序，此為預設值
- relative:表示相對定位，相對於正常順序來定位
- absolute:表示絕對定位
- fixed:表示固定定位，屬於絕對定位的一種，但位置不會隨內容捲動而移動
(5)正常順序與相對定位
前面的例子都屬於正常順序，接下來則是要介紹相對定位
也就是相對於正常順序來定位，不過改成相對定位之後的box可能會與其他的box重疊到
首先是正常順序：
範例程式碼：
<!DOCTYPE html>
<html>
<head>
<title>正常順序</title>
<style type="text/css">
p {display: block; line-height:2 }
span {display: inline}
.note {font-size:12px; color: blue}
</style>
</head>
<body>
<p>第一行 <span class="note">正常順序1</span></p>
<p>第二行 <span class="note">正常順序2</span></p>
<p>第三行 <span class="note">正常順序3</span></p>
</body>
</html>
再來是是相對定位：
範例程式碼：
<!DOCTYPE html>
<html>
<head>
<title>正常順序</title>
<style type="text/css">
p {display: block; line-height:2 }
span {display: inline}
.note {position:relative; top:10px; font-size:12px; color: blue}
</style>
</head>
<body>
<p>第一行 <span class="note">相對定位1</span></p>
<p>第二行 <span class="note">相對定位2</span></p>
<p>第三行 <span class="note">相對定位3</span></p>
</body>
</html>
(6)絕對定位與固定定位
絕對定位會將HTML元素從Box中抽離出來，顯示在我們指定的位置
絕對定位是相對於包含該元素的區塊來做定位，可以使用top、bottom、left、right屬性來指定上下左右位移量
固定定位和絕對定位的差異則是固定定位固定在相同位置，不會隨內容捲動
(7)float、clear(指定文繞圖、解除文繞圖)
使用float指定文繞圖方向，語法如下：
float:none(預設)|left|right
使用clear清除文繞圖動作，語法如下：
clear:none(預設)|left|right|both
(8)z-index(重疊順序)
使用z-index屬性指定HTML元素的重疊順序，語法如下：
z-index:整數
預設值為auto，整數數字越大，重疊順序就越上面
(9)box-shadow(Box 陰影)
Box shadow指定Box陰影，語法如下：
「none」表示無，「水平位移」是陰影在水平方向的幾像素，「垂直位移」是陰影在垂直方向的幾像素
「模糊」是陰影的模糊為幾像素，「色彩」是陰影的色彩，也可以指定多重陰影
text-shadow:none| [[水平位移 垂直位移 模糊 色彩] ,[...]]
(10)vertical-align(垂直對齊)
使用vertical-align屬性指定行內層級的垂直對齊方式，語法如下：
vertical-align:baseline(預設值) | top | text-top | middle | bottom | text-bottom | sub | super | 長度 | 百分比
| 屬性 | 說明 |
| baseline | 指定行內層級的基準線對齊包含該元素之顯示區塊的基準線 |
| top | 指定行內層級元素的上緣對齊包含該元素之顯示區塊的上緣 |
| text-top | 指定行內層級元素的上緣對齊上一層元素所包含的文字上緣 |
| middle | 指定行內層級元素的中線對齊上一層元素所包含的文字中線 |
| bottom | 指定行內層級元素的下緣對齊包含該元素之顯示區塊的下緣 |
| text-bottom | 指定行內層級元素的下緣對齊上一層元素所包含的文字下緣 |
| sub | 指定將行內層級元素的基準線降低至包含該元素之顯示區塊的下標 |
| super | 指定將行內層級元素的基準線提升至包含該元素之顯示區塊的上標 |
| 長度 | 指定將行內層級元素的垂直位移長度 |
| 百分比 | 指定將行內層級元素的垂直位移百分比 |
6.多欄位排版
(1)column-count、column-width、columns(欄位數目與寬度)
column-count 屬性可以指定欄位數目，預設為auto(根據版面自動決定)，n為大於0的正整數，表示欄位數目
column-count:auto | n
column-count 屬性可以指定欄位寬度，預設為auto(根據版面自動決定)
column-count:auto | 長度
column 屬性可則是上述兩者的簡便表示方法
columns:設定值1 [設定值2]
(2)column-gap(欄位間距)
column-gap 屬性可以指定欄位之間的間距，預設為normal 通常為 1 em：
column-gap:normal | 長度
(3)column-rule(欄位分隔線)
column-rule-color 屬性可以指定分隔線的色彩，設定值同border-color屬性的設定值：
column-rule-color:n色彩 | transparent
column-rule-style 屬性可以指定分隔線的樣式，
設定值有：none(不顯示框線)(預設)、hidden(不顯示框線)、dotted(點狀框線)、dashed(虛線框線)、soild(實線框線)、
double(雙線框線)、groove(3D立體內凹框線)、ridge(3D立體外凸框線)、inset(內凹框線)、outset(外凸框線)：
column-rule-styler:none | [設定值]
column-rule-width 屬性可以指定分隔線的寬度，設定值同border-width屬性的設定值：
column-rule-width:medium(預設) | thin | thick | 長度
column-rule 屬性則是上述三種的簡便表示法：
column-rule:設定值1 [設定值2[設定值3]]
(4)column-span(跨欄顯示)
column-span 屬性可以指定跨欄顯示，預設值為none，跨欄顯示則使用all：
column-span:none | all
7.媒體查詢
(1)媒體類型
針對不同的媒體類型，可以套用不同的CSS樣式表
以下舉例說明：
當媒體類型為screen的時候就套用sans-serif.css樣式表
當媒體類型為print的時候套用serif.css樣式表
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">
或是使用 @media 指令，根據不同媒體力行指定不同的CSS樣式
@media screen {
h1 {color:green}
}
@media print {
h1 {color:red}
}
下方為常用的媒體類型：
| 媒體類型 | 說明 |
| screen | 螢幕 |
| 印表機 | |
| projection | 投影機 |
| braille | 點字機 |
| speech | 聲音合成器 |
| tv | 電視 |
| handheld | 可攜式裝置 |
| all(預設值) | 全部 |
(2)Media Queries
隨者行動裝置的使用者逐漸增加，要根據PC或行動裝置的特徵來設計不同的樣式
CSS3的 Media Queries 模組所定義的媒體特徵，該模組已經成為推薦標準
| 特徵與設定值 | 說明 | 是否可以使用最大最小值 |
| width:長度 | 瀏覽器畫面的寬度 | 是 |
| height:長度 | 瀏覽器畫面的高度 | 是 |
| device-width:長度 | 裝置螢幕的寬度 | 是 |
| device-height:長度 | 裝置螢幕的高度 | 是 |
| orientataion:portrait | landscape | 裝置的方向(垂直|水平) | 否 |
| aspect-ratio:比例 | 瀏覽器畫面的長寬比(ex. 16/9 表示16:9) | 是 |
| device-aspect-ratio:比例 | 裝置螢幕的長寬比(ex. 1280/720) | 是 |
| color:正整數 | 彩色裝置每個色彩的位元數目 | 是 |
| color-index:正整數 | 裝置的色彩表中有幾筆色彩 | 是 |
| monochrome:正整數 | 單色裝置每個像素的位元數目 | 是 |
| resolution:解析度 | 裝置螢幕的解析度，dpi或dpcm為單位 | 是 |
| scan:progressive | interlace | 電視的掃描方式(循序式 | 交錯式) | 否 |
| grid:1 | 0 | 裝置為grid 或 bitmap(1為網格，0為點陣) | 否 |
以下為範例，指定瀏覽器的寬度小於767時，文字大小為50%
介於768與1279時文字大小為100%，大於等於1280時文字大小為150%
首先使用套用不同樣式表的方式：
<link rel="stylesheet" type="text/css" href="L.css" media="screen"> <link rel="stylesheet" type="text/css" href="M.css" media="screen and (min-width:768px) and (max-width:1279px)"> <link rel="stylesheet" type="text/css" href="S.css" media="screen and (max-width:767px)">
或是使用 @media 的方式：
@media screen and (max-width:767){
body {font-size:50%}
}
@media screen and (min-width:768) and (max-width:1279){
body {font-size:100%}
}
@media screen and (min-width:1280{
body {font-size:150%}
}
留言列表
NAS (1)