史考特部落格園地 - CSS

利用text-align:justify完成單行文字兩端對齊

scooter.tw@gmail.com(admin) — Sun,18 Jan 2009 22:18:41 +0800

text-align:justify只能對多行中的非最後一行進行兩端對齊。對於單行自己沒辦法，IE有text-justify 可以解決問題，對了非IE的我的方式比較垃圾，因為只在特殊場合下才會用。

程序代碼

.justify{
height:1.1em;
overflow:hidden;
text-align:justify;
text-justify :distribute-all-lines;
}
div.cn:after {
content: "__________________________________________";
font-size:100px;
}

對了非IE的我是使用content還增加內容達到有第二行，才會在第一行兩端對齊。

不過各瀏覽器對中文的理解不一樣。Firefox 是直接分割中文，Opera不會分割中文，只認空格，要是在中文中間插點半角的英文或者標號它還會對不齊，safari接近Opera。都是不加空格沒法分

英文比較好，因為大家只能用空格分來單詞，不過IE用text-justify :distribute-all-lines來分真是難看得要命。本來想過用htc或者js幫IE，可是發現,IE6好笨的說，家裡沒IE7不知道怎樣。

或者敲空格是一種比較好的方式，可firefox這種只放大文本的瀏覽器一放大文字就XX了，寫的那個爛方法也只有在一定的情況下有用，想起一句話：珍惜生命，遠離Firefix!(作者的想法，我的想法全世界只有一個瀏覽器就好！)

line-height屬性的繼承問題

scooter.tw@gmail.com(admin) — Wed,30 Jul 2008 22:05:55 +0800

淘寶商城的detail 頁面「產品詳情」部分是商家自定義區塊，曾出現這樣一個問題：

程序代碼

            品牌：XZX

            市場價：145元

            顏色：黑色

            面料：棉

            尺碼：S  M  L

            衣長：S 89  M 90   L 91

            肩寬：S 35  M 36   L 37

            胸圍：S 88  M 92   L 96

            下擺：S 104 M 108  L 112

            袖長：S 17  M 17.5 L18

            由於測量方法不同，誤差在2CM左右！

你會發現上面例子的文字會重疊在一起！這是什麼原因呢？

由於.detail-content 中的 p 元素繼承了默認設置的全局樣式 line-height:17px，而自定義區塊又是由商家自定義，其內字體被設置為了 font-size:30px;（可能為任意值），根據 Inline formatting model，得知該文字的 line-box 高為 17px，多出的字體部分上下溢出，所以會出現字體重疊的現象。

那這個問題如何解決呢？

解決方案：我們給 .mdse-detail 下的 p 元素設定樣式屬性 line-height:1.4。

為什麼解決方案裡的 1.4 不帶單位？

元素的 line-height 屬性值會繼承父元素（或祖先元素）的 line-height 屬性值，如果屬性值有單位，則繼承的值是換算後具體的 px 值而非原始的值（比如：em、%），而如果屬性值沒有單位，則瀏覽器會繼承數值（無單位），然後根據該元素的 font-size 值重新解析得到新的 line-height 值。這個和 table 的 tr 設置 display 屬性有一點點類似（tr.style.display = 」;，IE 顯示 block，而 Firefox 等標準瀏覽器顯示 table-row）。

還有另外一個相對低效的方法，但也不失為一個快捷的解決方案：

程序代碼

.mdse-detail p * {
line-height:140%;
}

參考閱讀：《Unitless line-heights》http://www.blueidea.com/tech/web/2008/6014.asp

個人會建議使用em這個單位來解決，例如：1.6em，另外關於繼承的問題，始於文字屬性的部份都是會繼承的，好比文字大小、字型、顏色、行距、字元間距等，這些都是會繼承的，其他屬性是不可以繼承的，好比寬度，一個DIV裡面又包了幾個DIV，外面DIV(父)設定寬度100PX，裡面(子)也繼承為100PX，這樣不就天下大亂了！

CSS的十八般技巧

scooter.tw@gmail.com(admin) — Fri,01 Dec 2006 11:26:11 +0800

一.使用css縮寫
使用縮寫可以幫助減少你CSS檔的大小，更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫語法總結》，這裏就不展開描述。

二.明確定義單位，除非值為0
忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以只寫width="100"，但是在CSS中，你必須給一個準確的單位，比如：width:100px width:100em。只有兩個例外情況可以不定義單位：行高和0值。除此以外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。

三.區分大小寫
當在XHTML中使用CSS，CSS裏定義的元素名稱是區分大小寫的。為了避免這種錯誤，我建議所有的定義名稱都採用小寫。
class和id的值在HTML和XHTML中也是區分大小寫的，如果你一定要大小寫混合寫，請仔細確認你在CSS的定義和XHTML裏的標籤是一致的。

四.取消class和id前的元素限定
當你寫給一個元素定義class或者id，你可以省略前面的元素限定，因為ID在一個頁面裏是唯一的，而clas s可以在頁面中多次使用。你限定某個元素毫無意義。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以寫成
#content { /* declarations */ }
.details { /* declarations */ }
這樣可以節省一些位元組。

五.預設值
通常padding的預設值為0，background-color的預設值是transparent。但是在不同的流覽器預設值可能不同。如果怕有衝突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，象這樣：
* {
margin:0;
padding:0;
}

六.不需要重複定義可繼承的值
CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中可以直接繼承，不需要重複定義。但是要注意，流覽器可能用一些預設值覆蓋你的定義。

七.最近優先原則
如果對同一個元素的定義有多種，以最接近(最小一級)的定義為最優先，例如有這麼一段代碼
Update: Lorem ipsum dolor set
在CSS檔中，你已經定義了元素p，又定義了一個class"update"
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
這兩個定義中，class="update"將被使用，因為class比p更近。你可以查閱W3C的《 Calculating a selector’s specificity》瞭解更多。

八.多重class定義
一個標籤可以同時定義多個class。例如：我們先定義兩個樣式，第一個樣式背景為#666；第二個樣式有10 px的邊框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在頁面代碼中，我們可以這樣調用
這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。是的，這樣做是可以的，你可以嘗試一下。

九.使用子選擇器(descendant selectors)
CSS初學者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的class定義。我們來看下面這段代碼：

•    Item 1
•    Item 1
•    Item 1

這段代碼的CSS定義是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代碼

•    Item 1
•    Item 1
•    Item 1
樣式定義是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。

十.不需要給背景圖片路徑加引號
為了節省位元組，我建議不要給背景圖片路徑加引號，因為引號不是必須的。例如：
background:url("images/***.gif") #333;
可以寫為
background:url(images/***.gif) #333;
如果你加了引號，反而會引起一些流覽器的錯誤。

十一.組選擇器(Group selectors)
當一些元素類型、class或者id都有共同的一些屬性，你就可以使用組選擇器來避免多次的重複定義。這可以節省不少位元組。
例如：定義所有標題的字體、顏色和margin，你可以這樣寫：
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用時，有個別元素需要定義獨立樣式，你可以再加上新的定義，可以覆蓋老的定義，例如：
h1 { font-size:2em; }
h2 { font-size:1.6em; }

十二.用正確的順序指定鏈結的樣式
當你用CSS來定義鏈結的多個狀態樣式時，要注意它們書寫的順序，正確的順序是：:link :visited :hover :active。抽取第一個字母是"LVHA"，你可以記憶成"LoVe HAte"(喜歡討厭)。為什麼這麼定義，可以參考Eric Meyer的《Link Specificity》。
如果你的用戶需要用鍵盤來控制，需要知道當前鏈結的焦點，你還可以定義:focus屬性。:focus屬性的效果也取決與你書寫的位置，如果你希望聚焦元素顯示:hover效果，你就把:focus寫在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover後面。

十三.清除浮動
一個非常常見的CSS問題，定位使用浮動的時候，下面的層被浮動的層所覆蓋，或者層裏嵌套的子層超出了外層的範圍。
通常的解決辦法是在浮動層後面添加一個額外元素，例如一個div或者一個br，並且定義它的樣式為clear: both。這個辦法有一點牽強，幸運的是還有一個好辦法可以解決，參看這篇文章《How To Clear Floats Without Structural Markup》(注：本站將儘快翻譯此文)。
上面2種方法可以很好解決浮動超出的問題，但是如果當你真的需要對層或者層裏的物件進行clear的時候怎麼辦？一種簡單的方法就是用overflow屬性，這個方法最初的發表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被廣泛討論。
上面那一種clear方法更適合你，要看具體的情況，這裏不再展開論述。另外關於float的應用，一些優秀的文章已經說得很清楚，推薦你閱讀：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.橫向居中(centering)
這是一個簡單的技巧，但是值得再說一遍，因為我看見太多的新手問題都是問這個：CSS如何橫向居中？你需要定義元素的寬，並且定義橫向的margin，如果你的佈局包含在一個層(容器)中，就象這樣：
你可以這樣定義使它橫向居中：
#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
}
但是IE5/Win不能正確顯示這個定義，我們採用一個非常有用的技巧來解決：用text-align屬性。就象這樣：
body {
text-align:center;
}
#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
text-align:left;
}
第一個body的text-align:center; 規則定義IE5/Win中body的所有元素居中(其他流覽器只是將文字居中) ，第二個text-align:left;是將#warp中的文字居左。

十五.導入(Import)和隱藏CSS
因為老版本流覽器不支持CSS，一個通常的做法是使用@import技巧來把CSS隱藏起來。例如：
@import url("main.css");
然而，這個方法對IE4不起作用，這讓我很是頭疼了一陣子。後來我用這樣的寫法：
@import "main.css";
這樣就可以在IE4中也隱藏CSS了，呵呵，還節省了5個位元組呢。想瞭解@import語法的詳細說明，可以看這裏《centricle’s css filter chart》

十六.針對IE的優化
有些時候，你需要對IE流覽器的bug定義一些特別的規則，這裏有太多的CSS技巧(hacks)，我只使用其中的兩種方法，不管微軟在即將發佈的IE7 beta版裏是否更好的支持CSS，這兩種方法都是最安全的。
•    1.注釋的方法
o    (a)在IE中隱藏一個CSS定義，你可以使用子選擇器(child selector):
html>body p {
/* 定義內容 */
}
o    (b)下面這個寫法只有IE流覽器可以理解(對其他流覽器都隱藏)
* html p {
/* declarations */
}
o    (c)還有些時候，你希望IE/Win有效而IE/Mac隱藏，你可以使用"反斜線"技巧：
/* \*/
* html p {
declarations
}
/* */
•    2.條件注釋(conditional comments)的方法
另外一種方法，我認為比CSS　Hacks更加經得起考驗就是採用微軟的私有屬性條件注釋(conditional comments)。用這個方法你可以給IE單獨定義一些樣式，而不影響主樣式表的定義。就象這樣：

十七.調試技巧：層有多大？
當調試CSS發生錯誤，你就要象排版工人，逐行分析CSS代碼。我通常在出問題的層上定義一個背景顏色，這樣就能很明顯看到層佔據多大空間。有些人建議用border，一般情況也是可以的，但問題是，有時候border 會增加元素的尺寸，border-top和boeder-bottom會破壞縱向margin的值，所以使用background更加安全些。
另外一個經常出問題的屬性是outline。outline看起來象boeder，但不會影響元素的尺寸或者位置。只有少數流覽器支援outline屬性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代碼書寫樣式
在寫CSS代碼的時候，對於縮進、斷行、空格，每個人有每個人的書寫習慣。在經過不斷實踐後，我決定採用下面這樣的書寫樣式：
selector1,
selector2 {
property:value;
}
當使用聯合定義時，我通常將每個選擇器單獨寫一行，這樣方便在CSS檔中找到它們。在最後一個選擇器和大括弧{之間加一個空格，每個定義也單獨寫一行，分號直接在屬性值後，不要加空格。
我習慣在每個屬性值後面都加分號，雖然規則上允許最後一個屬性值後面可以不寫分號，但是如果你要加新樣式時容易忘記補上分號而產生錯誤，所以還是都加比較好。
最後，關閉的大括弧}單獨寫一行。
空格和換行有助與閱讀。

用CSS在IE中顯示透明PNG圖像

scooter.tw@gmail.com(admin) — Thu,19 Oct 2006 16:22:13 +0800

PNG格式圖片優於GIF實在有太多地方
光是在透明度的表現上就能明顯看出
但是很可惜的至今的IE6.0還是無法呈現這PNG優秀的透明度視覺功能
但是瀏覽器雖不支援，我們還是可以使用CSS的的AlphaImageLoader和Alpha濾鏡，來完成透明的PNG在IE正常顯示的使命唷！

CSS部份

Page 部份

如何正確實作出固定寬度且置中的版型

scooter.tw@gmail.com(admin) — Wed,09 Aug 2006 23:28:25 +0800

以往，網頁開發者都會碰到這樣的問題：有時候他們會在網頁上擺放一些圖層 (像是滑鼠移過去就會出現的下拉式選單) ，但這些圖層的位置都是絕對的 ( position: absolute ) 。因此只要他們把整個版面置中後，就會發現圖層沒有跟著跑，所以這些網頁開發者僅能選擇把整個版型往左靠。但是為了符合一般瀏覽者的螢幕寬度(800 x 600)，就必須把版面的寬度固定 (例如 760px) ，所以當螢幕可以顯示的範圍較大時 (1024 x 768) ，你就會看到右邊有一大塊空白的區域了。

傳統的作法，都是用表格排版來解決這種問題。但是表格畢竟不是用來排版的，而且一但使用表格排版，頁面的版型就定死了，毫無靈活度可言；因此我將把表格排版這項解決方案丟到垃圾筒，改以 CSS 作為我排版的利器。

如何用 CSS 正確實作出固定寬度且置中的版型呢？我們有兩種方式可以達到這樣的目的。不過在此之前，我們必須先將所有的網頁內容用一個 <div> 標籤包起來，就像下面這樣：

<html> <head>[略]</head> <body> <div id="container"> [網頁內容] </div> </body> </html>

我們指定這個 <div> 標籤的 id 屬性為 container ， id 屬性在整個頁面裡必須是唯一的。雖然大部份瀏覽器不限制頁面裡的標籤可以擁有重覆的 id 屬性，但我不建議這麼做，因為透過 JavaScript (ECMA Script) 的 document.getElementById 抓取標籤元素時，重覆的 id 屬性會造成混亂。

接下來，我們介紹第一種方式，請看下面的 CSS ：

html, body { margin: 0; text-align: center; } #container { position: relative; margin: 0 auto; width: 760px; text-align: left; }

我們一行一行解釋：

html, body - 這行表示我們對 <html> 及 <body> 標籤做樣式設定。大部份瀏覽器的頁面內容都是以 <body> 為基準，但某些瀏覽器則是以 <html> 為基準，所以我兩個都指定。

margin: 0; - 一般我們都會在 <body> 加上 topmargin="0" 及 leftmargin="0" ，使得頁面內容和瀏覽器邊緣間沒有空隙。但是 topmargin 和 leftmargin 屬性都已被 W3C 廢棄了，所以我改用 CSS 的 margin 屬性來指定。

text-align: center; - 重點之一，有些瀏覽器無法很正確地使版型置中，透過這個屬性，我們可以使 <body> 內的所有內容置中。注意，我說的是所有內容，包含所有的標籤、文字、圖片等，所以等會我們必須把它調整回來。

#container - 這行表示我們將會一個 id 屬性值為 container 的標籤做設定。也可以這樣寫： div#container ，如此就很明確地指定是一個 id 屬性值為 container 的 <div> 標籤。

position: relative; - 將元素指定為相對定位。其實這行有沒有並無太大關係，但為了相容性，我還是指定了這個屬性。絕對定位和相對定位的差別我以後有空再說明。

margin: 0 auto; - 重點之二，這會使得 div#container 這個元素與 <bod> 標籤的上下邊界空間設為 0 ，而左右兩邊則自動調整。完整的寫法是 margin: 0 auto 0 auto; ，不過如果有重覆的設定時， CSS 可以讓我們只寫一次，因此 0 auto 0 auto 就可以等於 0 auto 。

width: 760px; - 這就是我們所要指定的版面寬度囉。

text-align: left; - 重點之三，因為我們在 <body> 標籤中指定所有內容置中，而這個設定讓我們把 <div> 標籤裡的所有內容又回到靠左對齊的狀態。

好了，第一種方式介紹到這裡；接下來我們看第二種方式：

html, body { margin: 0; } #container { position: relative; left: 50%; margin-left: -380px; width: 760px; }

這個方式也可以達到同樣的效果，我們挑重點解釋：

html, body { margin: 0; } - 我們在這裡拿掉了 text-align: center ，因為第二種方式沒有用到自動調整邊界。另外 CSS 可以讓我們把多個屬性設定值寫在一行裡，但是如果屬性值太多的話，建議你還是拆開成多行，比較容易維護。

#container - 我們拿掉了margin: 0 auto; 及 text-align: left; 。因為第二種方式是以位置的移動來達到置中的目的，所以我們加入了 left: 50%; 及 margin-left: -380px; 。注意我們保留了 position: relative; ，這樣 left 屬性才會有作用。

left: 50%; - 將 div#container 的左邊的相對位置，置於畫面的中央。圖 1 是原本 div#container 應該在的位置，當我們設定 left: 50% 後，就會像圖 2 一樣了。

http://www.oophp.idv.tw/tutorial/css_center/css_center_1.gif">http://www.oophp.idv.tw/tutorial/css_center/css_center_2.gif">

margin-left: -380px; - 這個設定比較難解釋，簡單說就是把整個元素的左邊界往回拉 380px (記得負值就是往回拉的意思) 。如圖三所示，我們可以看到整個版面置中了。

http://www.oophp.idv.tw/tutorial/css_center/css_center_3.gif">

OK ，這兩種方式就能夠使版面置中。而且因為我們將所有頁面內容包在 div#container 元素裡，所以在它裡面的所有元素，其絕對位置都會以 div#container 為基準。因此以後如果有下拉式選單的話，也不用擔心它會跑位囉。

CSS 的 ID 和 CLASS 有什麼不同？

scooter.tw@gmail.com(admin) — Wed,09 Aug 2006 23:26:34 +0800

class 指的是「同一類型的元素」，像是 Blog 首頁每篇文章，其內容樣式都要一樣，所以我們就可以指定 class="blogbody" 來表示這些內容是同類型的。

id 則是元素唯一的名稱，就像每個人的身份證號碼一樣不能有重覆 (雖然大多數瀏覽器允許) ，這樣我們才能透過標準的 JavaScript (ECMAScript) 及 DOM 來取得這個元素。例如：<div id="container"> ，意思就是整個頁面裡只會有一個名為 container 的主要 div 容器。

而 class 和 id 的命名儘可能反應這些元素所代表的意義，而非以它們會呈現的樣式來命名。例如說 class="blogbody" 比 class="bgBlue" 來得好，因為我們可能會更換樣式。如果以樣式呈現的方式命名，那麼一旦更換樣式，且呈現方式變化過大的話，這樣的名稱就相當難以維護了。

CSS 排版觀念：Position

scooter.tw@gmail.com(admin) — Wed,09 Aug 2006 23:18:14 +0800

CSS 排版觀念：Position

很多人都會用圖層來製作網頁，或許常會聽到所謂的絕對位置和相對位置。其實它們都是 CSS 中 position 的設定值，透過設定 position ，便能讓我們隨意移動元素的位置。

不過它們之間到底有什麼不同呢？本文做個簡單的說明。

首先我把其中的關係整理成表：

CSS 排版觀念 position 參數說明
position 參數 / 參數說明	absolute	relative	static(預設值)	fixed
中文意義	絕對位置	相對位置	靜態位置	固定位置
畫面位置參考基準	父元素內容區邊界	原本應該在的位置	不變	不指定：原本應該在的位置指定：螢幕視窗最大可視範圍邊界 (或框架邊界)
移動參考基準	文件	文件	文件	螢幕視窗最大可視範圍
可改變顯示位置	是	是	否	是
可調整大小	是	display 為 block ：是 display 為 inline ：否	display 為 block ：是 display 為 inline ：否	是
從顯示流程中去除	是	否	否	是

當我們對元素的 position 屬性，指定了 absolute、 relative 或 fixed 後，這個元素就可以移動了。我們可以用 top, left, right, bottom 這四種屬性來指定元素要呈現的位置。

由於 IE 不支援 position: fixed ，使得固定位置這個好用的技巧一直不受大家的重視。但在這裡我還是提一下。你可以使用 FireFox 來感受一下固定位置的強大威力，或是等待新版的 IE 支援。

接下來我們來解釋上面的表列裡，每個參數說明的意義。

畫面位置參考基準

以絕對位置 (position: absolute) 而言，故名思義，它是以父元素的邊界為絕對起點。例如如果我們設定 top: 50px ，那麼這個元素就會在距離父元素內容區上邊界 50px 的地方呈現，如下圖：

http://www.oophp.idv.tw/tutorial/css_position/absolute_1.png" width=200>

補充：如果父元素的 position 不是 absolute 或 relative 時，那麼元素的位置就會再對應到父元素的上層元素；如果其親代元素的 position 都沒有設定 absolute 或 relative 時，就以螢幕視窗最大可視範圍邊界為基準。

而以相關位置 (position: relative) 而言，其意義就是相對於原本的位置。例如我們指定 top: 50px 時，那麼這個元素就會從原本應該呈現的位置往下移動 50px 。如下圖，紅色虛線部份就是未設定 position: relative 前，元素原該應該在的位置：

http://www.oophp.idv.tw/tutorial/css_position/relative_1.png" width=200>

而固定位置 (position: fixed) 指的就是固定在螢幕視窗最大可視範圍上，如果不指定位置 (top, left, right, bottom) 時，那元素就會固定在原本的位置；而指定位置後，就會以螢幕視窗最大可視範圍的邊界為絕對基準點。如果頁面內容超過螢幕視窗最大可視範圍大小時，那麼不論我們如何捲動頁面，元素都會固定在螢幕視窗最大可視範圍上我們所指定的位置。

移動參考基準

當頁面可以捲動的時候，absolute 、 relative 、 static 都會跟著移動。只有 fixed 會固定在螢幕視窗最大可視範圍上，不會跟著移動。

可改變顯示位置

就是我們可以透過指定元素的 top, left, right, bottom 四個屬性，使元素改變顯示位置。如果元素是 position: static 時，會自動忽略所設定的 top, left, right, bottom 。

可調整大小

我們可以透過 width, height 來調整元素內容區的大小，不過當 position 是 relative 或是 static 時，元素的 display 屬性必須為 block 才可調整其大小。

從顯示流程中去除

顯示流程的意義就是頁面上的每一個元素的呈現，換句話說，就是該元素會出現的位置，及其佔用的空間等等。

我們可以將原來的頁面想成是一個圖層，每個元素都是一個一個緊接在前一個元素後面。如下圖，在尚未指定 position 時，粉紫色區塊會緊接在淺藍色區塊後。

http://www.oophp.idv.tw/tutorial/css_position/layer1.png" width=300>

請注意，我在這裡提到的圖層，指的是瀏覽器去解譯 HTML 後，將元素呈現出來的圖層，而非一般我們所認為，以絕對位置呈現的圖層；你可以把它想像成是 Photoshop 裡的圖層。

當我們指定淺藍色區塊的 position 屬性為 absolute 或 fixed 後，淺藍色區塊就會跑到另一個圖層；而粉紫色區塊因為淺藍色區塊已經從原圖層的顯示流程中去除了，所以它就自動往上跑。如下圖，紅色虛線就是粉紫色區塊原本的位置。

http://www.oophp.idv.tw/tutorial/css_position/layer2.png" width=300>

而元素如果指定為 relative 時，雖然也能移動，但原本的頁面圖層還是會保留該元素所佔有的空間。

後記

或許你在看完這篇文章之後，還是無法很清楚地了解 position 屬性的運作方式。建議你打開你的瀏覽器 (最好是用 FireFox)，再用你慣用的 HTML 編輯器去試試它們之間的差異。然後回來看看這篇文章，你也許就能明白我的意思。

補充：如果頁面在框架裡時 (frame 或 iframe) ，所有參照螢幕視窗最大可視範圍邊界的元素就會改為參照框架邊界。

範例

以下這個範例，你可以看到設定 position 前及設定 position 後的關係：

http://www.oophp.idv.tw/tutorial/css_position/position_test.htm" width="80%" height=300>

CSS 排版觀念：Box Model

scooter.tw@gmail.com(admin) — Wed,09 Aug 2006 23:16:16 +0800

CSS 排版有一個很重要的觀念： Box Model 。它描述了元素之間的彼鄰關係，同時也左右了我們是否能夠成功透過 CSS ，完成整個頁面的呈現。

Box Model 的意思是說，每一個元素我們都可視它為一個 Box 。一個 Box 由以下屬性組成：margin 、 padding 、 border 、 content 。一個 Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成，如下圖 (取自 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp">MSDN)：

http://msdn.microsoft.com/library/en-us/dnie60/html/boxdim.gif">

所以一般我們指定的 width 和 height 是 content 的寬和高，而沒有包含 border 和 padding 。換句話說，一個元素真正佔用的視覺空間，應該是 content + padding + border ，這是標準的 CSS 規範。

不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾，但是也不是沒不是沒有辦法解決。http://tantek.com/CSS/Examples/boxmodelhack.html">Box Model Hack 提供了解決之道，重點在於利用 IE5/5.5 對 CSS 解讀上的 Bug ，讓我們所希望之元素正確的寬高能正確地在 IE5/5.5 顯示出來。

對於 absolute 和 fixed 而言，錯誤的 Box Model 或許影響較小 (不過也絕對不是沒有影響，像是如果要正確控制圖層的寬度時)；但對 relative 和 static 來說，因為它們都還是會保留其所佔有的空間。因此如何正確地調整 content 的大小，就會影響到我們的排版。

以下我們來看看 Box Model 的各個組成分子。

(請特別注意：我在以下圖示中，元素上色的部份，除了有特別說明外，都是包含 border + padding + content ，這點非常重要！因為除了 body 標籤外，元素的 background 屬性的作用都不會包含 margin。)

border

border 是一個「加上去」的屬性，換句話說，一般都是用來區隔元素與元素用的。 border 的外圍即為元素的最外圍，因此計算元素實際的寬高時，就一定要將 border 納入。換句話說， border會佔有空間，所以在計算精細的版面時，一定要將 border 的影響考慮進去。

如下圖，黑色虛線部份即為 border ：

http://www.oophp.idv.tw/tutorial/css_boxmodel/border1.png" width=200>

還有一點要特別注意，如果我們在元素上設定背景色時， IE 是作用在 padding + content ，而 Firefox 則是作用在 border + padding + content 上。

padding

padding 會在元素內容的周圍加上我們所指定大小的空間；而如果我們沒有指定元素的寬高時，那麼該元素的內容就會受到 padding 所擠壓。如下圖：

http://www.oophp.idv.tw/tutorial/css_boxmodel/padding1.png" width=200>

如果元素的內容中有行內顯示元素時，我們可以利用 padding 的設定來讓它們在我們想要的地方折行，而不用對 content 指定寬度；這樣的技巧我用在全版面的兩欄式版面上，使得我不用對難用的 width 屬性傷腦筋。

其實 padding 就這麼簡單，不過可別小看它，在 CSS 排版裡， padding 加上 margin 的設定，就能夠使版面千變萬化。

margin

margin 的意義就是該元素與其他元素間的邊界距離，它的應用大概也算是 CSS 排版很重要的技術之一。所以我打算多花一點時間解釋它。

我們可以分以下兩種狀況解釋：「元素與相鄰元素的距離」及「元素與父元素間的距離」。

「元素與相鄰元素的距離」指得是元素間是緊鄰的 (不論是區塊顯示元素或行內顯示元素) ，而沒有階層關係。例如：

<span id="i1>行內顯示元素1</span><span id="i2">行內顯示元素2</span>

這兩個 span 元素就是緊鄰關係。而 <span> 屬於行內顯示元素(display: inline) ，因此它們的邊界距離就是 i1 的 margin-right 加上 i2 的 margin-left ，如下圖。

http://www.oophp.idv.tw/tutorial/css_boxmodel/margin1.png" width=300>

另一種緊鄰關係是區塊顯示元素，例如：

<div id="b1">區塊顯示元素1</div><div id="b2">區塊顯示元素2</div>

<div> 屬於區塊顯示元素，也就是在它的前後會加入換行的控制。要注意的是，區塊顯示元素它們的邊界距離是重疊的！而當 b1 的 margin-bottom 大於 b2 的 margin-top 時， b1 和 b2 實際的距離就以 b1 的 margin-bottom 為準，如下圖。

http://www.oophp.idv.tw/tutorial/css_boxmodel/margin2.png" width=300>

還有一種緊鄰關係是浮動元素，基本上它會是個區塊顯示元素，但 margin 的呈現關係和行內顯示元素是很像的，這我會在介紹浮動元素時再加以說明。

「元素與父元素間的距離」就是指元素之間有階層關係時的邊界距離。例如：

<div id="b3"> <div id="b4">內部區塊</div> </div>

其中 b3 就是父元素， b4 則是子元素。它們的邊界關係如下圖：

http://www.oophp.idv.tw/tutorial/css_boxmodel/margin3.png" width=400>

我們可以看到，子元素的邊界起始會以父元素的 Content 區為基準。

上面我們都是將 margin 設為正值，例如將元素的 margin-top 設為 20px ，那麼元素上面就會多出 20px 的空間。注意，我是說多出空間，而非向下移動！有什麼差別呢？

向下移動的定義是我們讓元素成為區塊顯示(display: block)或是它原本就是區塊顯示元素，然後指定它的 position 為 relative ，最後設定它的 top 為正值。

而多出空間則不論它的 position 設定為何，硬是擠進我們指定的空間。而且設定 margin 之後，頁面內容超過螢幕顯示範圍，即時有捲軸也無法呈現完整的內容。

不過 IE6 和 FireFox 兩者對 Box Model 在 margin 的實作又有點不太一樣。IE6 就算指定了父元素的 height ，如果子元素的高度超過父元素的 height ，父元素就會被撐大，然後保留子元素 margin-bottom 的空間；而 FireFox 就不會。哪個實作是對的，我也不太清楚。

margin 也可以指定為負值，例如我在這篇「http://blog.yam.com/jaceju/archives/77741.html">如何正確實作出固定寬度且置中的版型？」裡，運用到了將 margin-left 設定為負值的技巧。這裡我再加以說明，將 margin 設定為負值是怎麼一回事。

在「元素與元素間緊鄰」時，我們將 margin 設定為負值，會使得 margin 設定為負值的元素「疊」到另一個元素上 (不過還是要視另一個元素所設定的邊界距離而定) 。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。

「元素間有階層性關係」時的關係，如果子元素的所指定的 margin 負值的絕對值大於父元素的 border + padding 時，就會使得子元素跑到父元素的外部去了。如圖，我們指定藍色元素的 margin-left 為 -100px ，那麼該元素就會往左跑 100px ；這時如果其父元素 (淺黃色) 的 border-left 和 padding-left 相加小於 100px ，我們就會看到該元素就會突出於父元素的左邊。

http://www.oophp.idv.tw/tutorial/css_boxmodel/margin4.png" width=200>

總而言之，將 margin 指定為負值在 CSS 排版上有非常大的用處，如果能將它了然於胸，相信你在 CSS 排版的功力一定會大增的。

這篇我僅描述了 CSS Box Model 的一些基本觀念，雖然不是非常深入，但希望能夠讓大家對它們有基本的認知。而 CSS 排版除了 Position 和 Box Model 外，還有一樣非常值得探討的技術，就是浮動 (float) ；我將會在下次的文章中談到它。

CSS 排版觀念：Float

scooter.tw@gmail.com(admin) — Wed,09 Aug 2006 23:13:54 +0800

CSS 排版觀念：Float

如果說浮動 (float) 是 CSS 排版的重要技巧之一，實在一點也不為過；很多著名的 CSS 版型都會用到浮動技巧。本文就來介紹浮動所需要注意的地方，以及可能會碰到的問題。

浮動是設定元素的 float 屬性，我們能設定向左 (left) 或向右 (right) 浮動。浮動基本上會使得元素在有足夠的空間時，往父元素的左邊或右邊靠緊。接著原本跟在這個元素後面的其他元素，就會自動往上跑 (不過這裡會有部份要考量的地方，稍後再談)。當元素被設定浮動時，會自動變成區塊顯示元素 (display: block) ，這時候我們就可以設定元素的 width 和 height 了。

不過要注意一點：當我們把 position 設為 absolute 時，浮動會失效。

浮動會因為元素先後順序而有所影響，例如我們有 A 、 B 兩個區塊顯示元素如下圖，其中虛線部份的內部為父元素的內容區：

http://jaceju.staff.doubleservice.com/tutorial/css_float/float1.png" width=200>

如果我們把 A 元素設為向右浮動，那麼 B 元素就會自動往上跑，如下圖：

http://jaceju.staff.doubleservice.com/tutorial/css_float/float2.png" width=200>

而把 B 元素向右浮動的話， A 元素並不會受到干擾， B 元素也不會往父元素的上邊靠，如下圖：

http://jaceju.staff.doubleservice.com/tutorial/css_float/float3.png" width=200>

那如果不往右浮動，而是向左浮動呢？那就非常複雜了。為什麼呢？因為各家瀏覽器的實作不同！如果我們試著把 A 元素向左浮動，就會發現 IE 會讓 B 元素跑到 A 元素的右邊；可是在 Firefox 和 Opera 上，雖然 A 元素會靠到父元素內容區的左邊，但是則會讓 B 的 Content 區被擠到 A 元素的下方 (詭異的是 B 元素的背景區卻靠向父元素內容區的上方)。所以在排版時，要特別注意這種情況。

如果我們不希望在緊跟在 A 元素及 B 元素後面的元素被浮動所影響，那麼就該對此元素設定 clear: both。

另外元素的 Box Model 也會影響元素的浮動，我在 http://blog.yam.com/jaceju/archives/100724.html">CSS 排版觀念：Box Model 裡提到了一些要點，這裡再說明一下。

Box Model 正確的寬度，通常就是影響浮動是否能正常的關鍵。如下圖，是我們常見的置中兩欄式 float 排版。Sidebar 往左浮動，Content 則是往右浮動。

http://jaceju.staff.doubleservice.com/tutorial/css_float/float4.png" width=200>

在浮動 Sidebar 時，如果沒有考慮好 Content 的 margin 和 padding，或是 Content 裡的內容過長無法折行時，Sidebar 的部份就會整個往下掉，如下圖。

http://jaceju.staff.doubleservice.com/tutorial/css_float/float5.png" width=200>

因此在利用浮動製作版面時，一定也要記得和 Box Model 相互搭配，這樣才能夠製作正確而實用的版型。

總而言之，浮動技巧是 CSS 排版中非常重要的一門學問。下次我們就來正式挑戰一些常見的版型，不但告訴你怎麼做，還告訴你為什麼要這樣做。

word-break屬性,實現換行

scooter.tw@gmail.com(admin) — Thu,06 Apr 2006 10:58:31 +0800

語法：

word-break : normal | break-all | keep-all

參數：

normal : 　依照亞洲語言和非亞洲語言的文本規則，允許在字內換行
break-all : 　該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 　與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本

說明：

設置或檢索物件內文本的字內換行行為。尤其在出現多種語言時。
對於中文，應該使用break-all 。
對應的腳本特性為wordBreak。請參閱我編寫的其他書目。

示例：

div {word-break : break-all; }