CSS邊界設定
總論:
如果有一區塊物件，區塊內有一段文章，則區塊到視窗距離為邊界(margin)
區塊到左視窗稱為:margin-left、區塊到上視窗稱為:margin-top、區塊到下視窗稱為:margin-bottom、區塊到右視窗稱為:margin-right區塊本身可以加上編框(border)，文章至區塊邊框稱為邊距(padding)
文章到左區塊邊框稱為:padding-left、文章到上區塊邊框稱為:padding-top、文章到下區塊邊框稱為:padding-bottom、文章到右區塊邊框稱為:padding-right
 | 邊界設定：
CSS編輯器→方塊(BOX)→間隔(Margin)
margin-left:左邊界
margin-right:右邊界
margin-top:上邊界
margin-bottom:下邊界
邊界值為附單位數值、%或是auto
margin: 一個值，表示上下左右用同一值
margin: 二個值，表示值一：上下，值二：左右
margin: 三個值，表示值一：上，值二：左右，值三：下
margin: 四個值，表示值一：上，值二：右，值三：下，值四：左
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。 |
邊距設定(padding)：
CSS編輯器→方塊(BOX)→內邊界(Padding)
padding-left:左邊距
padding-right:右邊距
padding-top:上邊距
padding-bottom:下邊距
邊界值為附單位數值、%或是auto
padding: 一個值，表示上下左右用同一值
padding: 二個值，表示值一：上下，值二：左右
padding: 三個值，表示值一：上，值二：左右，值三：下
padding: 四個值，表示值一：上，值二：右，值三：下，值四：左
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
框線粗細設定(padding)：
CSS編輯器→邊框→寬度
border-top-width:上框線粗細
border-bottom-width:下框線粗細
border-left-width:左框線粗細
border-right-width:右框線粗細
框線粗細值為附單位數值、thin、medium、thick
border-width: 一個值，表示上下左右用同一值
border-width: 二個值，表示值一：上下，值二：左右
border-width: 三個值，表示值一：上，值二：左右，值三：下
border-width: 四個值，表示值一：上，值二：右，值三：下，值四：左
 | 框線顏色設定(padding)：
CSS編輯器→邊框→顏色
border-top-color:上框線顏色
border-bottom-color:下框線顏色
border-left-color:左框線顏色
border-right-color:右框線顏色
border-color: 一個值，表示上下左右用同一值
border-color: 二個值，表示值一：上下，值二：左右
border-color: 三個值，表示值一：上，值二：左右，值三：下
border-color: 四個值，表示值一：上，值二：右，值三：下，值四：左
|
 | 框線樣式設定(border-style)：none hidden dotted dashed solid double groove ridge inset outset
CSS編輯器→邊框→樣式
border-top-style:上框線樣式
border-bottom-style:下框線樣式
border-left-style:左框線樣式
border-right-style:右框線樣式
border-style: 一個值，表示上下左右用同一值
border-style: 二個值，表示值一：上下，值二：左右
border-style: 三個值，表示值一：上，值二：左右，值三：下
border-style: 四個值，表示值一：上，值二：右，值三：下，值四：左
|
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
當文字超出框線時之處理設定：
 | 超出框線時之處理設定：
CSS編輯器→方塊(BOX)→超出界限時
overflow:顯示形式
顯示形式:
visible(超出時仍顯示)
hidden(超出時隱藏)
scroll(超出時產生捲軸)
auto(超出時自動處理)
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。 |
框線統一設定：
border-top:上框線設定
border-bottom:下框線設定
border-right:右框線設定
border-left:左框線設定
border:框線設定
例:border: ridge 10px #cc00ff
區塊寬高與位置
區塊寬高:
 | 區塊寬高設定：
CSS編輯器→方塊(BOX)→寬度與高度
width:寬度
height:高度
寬度值為附單位數值、%或是auto
|
文繞圖:
 | 文繞圖設定(floating)：
CSS編輯器→方塊(BOX)→Float
float:left right none
|
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
絕對位置:統一以左上角為原點
 | 區塊絕對位置設定：
CSS編輯器→方塊(BOX)→位移
CSS編輯器→方塊(BOX)→位置
position:absolute
top:距離→從頂端距離
bottom:距離→從底端距離
left:距離→從左端距離
right:距離→從右端距離
寬度值為附單位數值、%
|
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
相對位置:
相對位置:是指未經過css指定時之位置為相對原點，依據此原點之距離式微相對位置。
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
區塊相對位置設定：
CSS編輯器→方塊(BOX)→位移
CSS編輯器→方塊(BOX)→位置
position:relative
top:距離→從頂端距離
bottom:距離→從底端距離
left:距離→從左端距離
right:距離→從右端距離
寬度值為附單位數值、%
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
固定位置:類似絕對位置
當捲軸移動時，在此CSS設定下不會移動
 | 區塊絕對位置設定：
CSS編輯器→方塊(BOX)→位置
position:fixed
top:距離→從頂端距離
bottom:距離→從底端距離
left:距離→從左端距離
right:距離→從右端距離
寬度值為附單位數值、%
|
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
重疊順序:
| 區塊絕對位置設定：
CSS編輯器→方塊(BOX)→位置
z-index:重疊順序，值越大越在上層
top:距離→從頂端距離
bottom:距離→從底端距離
left:距離→從左端距離
right:距離→從右端距離
寬度值為附單位數值、%
|
。
顯示:
 | 顯示設定：
CSS編輯器→方塊(BOX)→是否隱藏
display:none，變成沒有元素
visibility:hidden，隱藏元素
visibility:collapse，折疊隱藏元素
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。 |
