CSS 教學二：排版功能
Simon Asika
2014
三大重要指令
display
設定一個元素所佔空間的方式，或不顯示
float
浮動元素，用來左右排列元素
position
元素定位，設定元素在頁面中的哪個位置
display 屬性
none 完全隱藏，看不見 block 區塊元素。向左右拉伸滿版，佔滿空間 inline 行內元素。可以在文字內，無法設定寬高。 inline-block 行內，但會在自己的寬高空間內佔滿版
block 區塊元素
p, div 等，左右拉伸至滿版
p
p
div
inline 行內元素
這是文字
接著又是文字
這是inline元素
span, em, strong 等皆是 inline 元素，與文字並存在同一排（會折行）
無法設定寬高
inline-block 元素
這是文字
接著又是文字
這是inline元素
與文字並存在同一排（會折行），
但可以設定寬高。
float 浮動元素
讓元素浮起來，向left或right依序排列。
會使該元素失去頁面空間，成為浮起來的元素，並蓋在其他元素上面。
後面的元素會補到他原本的空間上。
尚未設定 float
<div>
<div></div>
<div></div>
</div>第一個元素設定 float
<div>
<div style="float:left;"></div>
<div></div>
</div>float:left
他就不再佔空間了
兩個元素皆設定 float
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
</div>float:left
float:left
兩者皆不佔空間，綠色div便縮成一條線
一直加下去
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
</div>float:left
float:left
float:left
float:left
會持續向左排列
加上清除浮動
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"></div>
</div>float:left
float:left
float:left
float:left
用clear:both當佔位符，可以讓綠色div被正常拉開
clear:both
也可以向右浮動
<div>
<div style="float:left;"></div>
<div style="float:right;"></div>
</div>float:left
float:left
一邊向左，一邊向右
再次加上佔位符
<div>
<div style="float:left;"></div>
<div style="float:right;"></div>
</div>float:left
float:left
讓綠色 div 被拉開
clear:both
常見的格狀排版
float:left
clear:both
float:left
float:left
float:left
float:left
float:left
float:left
position 指令
先設了 position 成為 relative, absolute 或 fixed 後。
可用 top, bottom, left or right 四項屬性設定所在位置
可用負數，單位px
relative 相對位置。
根據母元素，或者自己本身應該處在的位置為起始點。
即使移走了，還是會佔空間
頁面
母元素
position: relative;
left: -300px;
top: 400px ;
原點
用 relative 向左下方移動
absolute 絕對位置
以頁面最左上角位置為起始點。
若不移動，會佔空間。一旦移走了，空間就會消失。
※當母元素設有absolute, relative, fixed 時，子元素的absolute原點會從母元素的左上角開始
頁面
母元素
position: relative;
left: -300px;
top: 400px ;
原點
absolute 會從頁面左上角作為原點
頁面
母元素設有position時
position: relative;
left: -300px;
top: 400px ;
原點
母元素設有position時會從母元素左上角開始
附錄
- 外距與內距
- 盒模型
- 連續技寫法
- 長度單位
- 顏色表示法
外距與內距
外距： margin
由元素本身向外延伸，將週遭的元素推開。兩個元素的上下外距會重疊在一起，左右不會。
內距： padding
由元素向內產生的內距，會把整體寬度拉開。已經精確算好長寬時，要謹慎使用內距
邊框： border
邊框的寬度會把元素長寬也向外拉，同樣要注意。
CSS 盒模型
連續計寫法
通常有多種類似項目的元素，可以合在同一行寫。
例：
margin-top: 5px;
margin-right: 10px;
margin-bottom: 6px;
margin-left: 7px;
可寫成簡寫（順序：上右下左）
margin: 5px 10px 6px 7px;
常見連續計寫法
margin: 10px ;
全部10px
margin: 10px 20px;
上下 / 左右
margin: 10px 0px 30px 15px;
上 / 右 / 下 / 左（順時針）
常見連續計寫法
border: 1px solid #000;
邊框寬度 / 線條類型（實線）/ 顏色。
background: #ccc url(img.png) no-repeat ;
顏色 / 圖片 / 不重複
background: #ccc url(img.jpg) center top repeat-y;
顏色 / 圖片 / 左右對齊 / 上下對齊 / 重複方向
長度單位
不隨螢幕大小變動(絕對)
- in 英吋
- cm 釐米
- mm 毫米
- pt 磅 (1 pt 等於 1/72 英吋)
隨螢幕大小變動(相對)
- % 百分比
- em 目前字體的100%尺寸
- px 像素 (螢幕上的一個點)
- pc 12 點活字 (1 pc 等於 12 點)
顏色表示法
顏色名稱
red, white, black, green, blue
網頁色碼 #FF647D, #6666BE #CCCCCC 可簡寫成 #CCC
RGB
rgb(255, 60, 75)
rgba(255, 60, 75, 0.8) 最後代表透明度
Thank You
CSS 課程二
By Simon Asika
