CSS Position Relative 基本應用 - 四角定位

Ref: CSS Position Relative : 基本應用 - 四角定位

CSS中的Position設定數值分別為 absolute, relative, fixed, inherit 和預設的 static。而最常用的則是Relative 和 Absolute，而Fixed…IE 6是完全不支援的關係下，儘量也不建議使用。

初 學者通常也分別不到Relative 和 Static用法的分別。Relative擁有Top, right, bottom, left 的屬性。不過這對初學者用處不大，平時預設(Static)時也會用Margin的寫法來控制物件和物件之間的距離。

Relative最實 用的例子就是，有些常在其中一個Div上設置右上/右下的icon。用最基本的寫法也許是img上加上position absolute，再利用margin-left慢慢推過去。雖然absolute也是擁有Top, right, bottom, left 屬性。可是你用上Right : 0，它卻走到畫面最右端。

其實只要在Absolute的外層再加入一個Relative的屬性，你的 Top, right, bottom, left 就會跟隨Relative的DIV。

Example:

Absolute bottom

這個寫法亦可以用在圓邊排版上，不過這個設定時要留意一下IE 6，通常利用CSS Hack，加入 _bottom:-1px 就可以解決。

Font Conversion - typeface.js , Cufón

What is Font Conversion

Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use it and write in plain HTML and CSS.

Font Converter typeface.js , Cufón

Examples from typeface.js

Quick stats

(Information from : http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/ )

Cufón and Typeface are very similar, here’s a quick list of their properties:

	Cufón	Typeface.js
File size	14.0kb (compressed)	16.3kb (uncompressed)
Supported browsers	Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome and Internet Explorer6+	Firefox 1.5+, Safari 2+, and Internet Explorer 6+, but not 8
Supported file types	.ttf, .otf, PFB, postscript	.ttf
Supported font styling	font-size, font-style, font-weight, line-height, text-shadow, color	font-size, font-style, font-weight, font-stretch, letter-spacing, line-height
Selectable text?	not yet	not yet
	Cufón	Typeface.js

中文文字對齊,CSS justify

引用: CSS 中文文字對齊 (Wing R)

文字對齊要在td,div或p之類的tag中設定align="justify" 或用上css設定text-align:justify;

全文完

不對，單純英文文字對齊那是可行的，可是你在中文頁面上設定的話，你也會發現是沒有對齊的效果。由於這問題，早期的網頁是無法做出對齊效果。

中文對齊要利用CSS設定text-align及text-justify的數值，text-justify是css 2.0以外的屬性，如果要通過w3c的話這一點要多加留意。

一般我自己也會設定成 .justify{ text-align:justify; text-justify: inter-ideograph;}

每當我想要對齊文字時我只要利用它一次就可以。

<div class="style01 justify"> Content <div>Sub Content</div> </div>

P.S.: 有一點需要注意，舊式的Browser支援justify效果不好，最常見的情況是當你的網頁中同時擁有Flash動畫，Div的scrolling內容，內容再加上justify。舊式的Browser會出現嚴重拖慢的情況。(部份css亦發生同樣情況)

另一個情況同是Div的scrolling內容，內容再加上justify，而Div內容中有一部份利用CSS Background設定。舊式的Browser在Scrolling上亦會出現嚴重拖慢的情況。