close

本文引用自weimicozoe1216 - 必學的部落格CSS語法(二)-定位、間距與內襯

 

檢查了一下SiteTag的Blog資訊
赫然發現必學的部落格CSS語法第二篇竟然沒有補上
趁著過年放鬆的時刻將後三招補齊
我想自己修修改改Blog學這六招足矣

就我自己的經驗用CSS在設計Blog或網頁時
花最多的時間都是在"調位子"
因為寫CSS時不像以往在Dreamweaver或photoshop時能所見即得
必須不段地預覽後再來調整
而用來調整的三項利器就是position(定位)、margin(間距)和padding(內襯)
尤其margion和padding是最容易讓人搞混的
在Blog中每一個元素(element)都是區塊(Box)
區塊與區塊間的距離就是間距
而區塊中放置的是內容(content)
內容與區塊內邊的距離就是內襯
看以下這張圖應該就能明白
CSS必學語法圖說1
接下來就介紹position(定位)、margin(間距)和padding(內襯)三種常用的語法
部落格CSS語法第四招:position與float-定位與浮動間的妙用

position:;
定位規則有absolute | relative | static(預設值)分別表示絕對位置、相對位置和靜態位置
top:數值;right:數值;bottom:數值;left:數值;
這是指元素各邊緣與定位點的偏移量,就絕對定位而言定位點是包含元素的區塊;就相對定位而言定位點是元素原本的位置。

所謂的絕對位置指得是該原素相對於父元素(parent elemnt)的位置。這父元素聽起來很繞口,還記得上一篇講過,部落格裡就是一個區塊包含著一個區塊,包含其他區塊的元素就是父元素。
絕對位置示意圖
而相對位置就是相對於元素本來的位置
相對位置示意圖
那他們之間的變化究竟是如何呢,木笛用圖像來表現各位會更容易明白。
在沒做任何設定之前,網頁預設是每一個元素不管寬度多少,都是由上而下緊密地相連接(見下圖)。當element1定位為絕對位置時,他就會"跳到"與element2不同的層次顯示,而element2就會在所屬的層次上移,這時兩個元素區塊就會重疊在一起。
CSS必學與法圖說2
此時若要調整回原本的樣子,就必須將element2改成相對定位且對上邊緣做偏移,因此網友在為blog區塊套上絕對定位和相對定位時要小心,可能會產生位置完全跑掉的情況。
CSS必學與法圖說3

float:;
浮動規則有right | left分別是靠右排列與靠左排列
在之前介紹用ul和li製作導覽列的文章有用到float,不過並沒有做深入的介紹。到底在CSS中各區塊是如何浮動呢?上一段有提到在預設情況下,每一個元素不管寬度多少,都是由上而下緊密地相連接,這樣我們就不能製作雙排或是三排版面的部落格樣式,但透過float語法就可以讓區塊像是浮在水上般彼此可靠攏。為了達到雙欄式版面必須仔細調整區塊寬度,否則不會有並排效果。
CSS必學語法圖說5


部落格CSS語法第五招:margin控制區塊間距的巧手

margin:數值 數值 數值 數值;
用空格分隔四個數值分別代表該區塊的上、右、下、左與鄰近區塊的距離,所以你可以填上不同的數值,如果你四周數值都一樣,那你只要填一個數值即可。
margin-top:數值;margin-left:數值;margin-down:數值;margin-right:數值;
若你只想為特定一邊設定間距,也可以使用這個語法針對單一邊緣設定


部落格CSS語法第六招:padding替區塊內容微調

padding:數值 數值 數值 數值;
用空格分隔四個數值分別代表該內容的上、右、下、左與包含區塊的距離,所以你可以填上不同的數值,如果你四周數值都一樣,那你只要填一個數值即可。
padding-top:數值;padding-left:數值;padding-down:數值;padding-right:數值;
若你只想為特定一邊設定內襯,也可以使用這個語法針對單一邊緣設定
其實padding在概念上有點像是word編排上的縮排功能,最常使用在清單導覽列,透過padding來加大文字與背景圖示的距離。
CSS必學語法圖說4

<注意事項>
1.絕對定位若沒有父元素則以瀏覽器邊緣為定位點。
2.margin可以使用負值
3.你不需要為每個box都設float效果
4.絕對定位會使float效果無法正常發揮功能

本文引用自fennser - 必學的部落格CSS語法(二)-定位、間距與內襯

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 小霝 的頭像
    小霝

    霝兒收藏屋

    小霝 發表在 痞客邦 留言(0) 人氣()