當瀏覽者查看一份網頁文件時，通常使用者代理(User Agents, UA, 瀏覽器)會提供給瀏覽者一個視區(視窗或者是畫面裡的其它可視區域)。當我們調整視區大小時，UA 就有可能會改變文件上佈局。

當視區比文件所呈現的 Canvas 區域還小時，UA 可能會提供一個捲軸的機制來讓您一窺文件的全貌。理論上每個 Canvas 最多只能有一個視區，不過 UA 可以產生一個以上的 Canvas(例如在同一份文件上提供不同的可視區域, 如框架格)。

承載區塊(Containing Blocks)

如果一些 box 的位置與大小是以其它相關的「矩行方塊」的邊緣(edges)來計算的話，我們就將這樣的「矩行方塊」稱之為承載區塊(Containing Blocks)。再簡單的講，所謂承載區塊指的是，離「該元素」最近的區塊級親代元素；無論「該元素」的定位或者是浮動，皆是以它的承載區塊來做參考基準(除了 fixed 定位方式)。

底下是一個簡單的承載區塊示意圖(demo-two 的承載區塊為 demo-one)。

• 當親代元素為區塊型元素時，其承載區塊的大小是到內緣距離。
• 當親代元素為單列型元素時，其承載區塊的大小是到內容邊緣。

正常流向(Normal Flow)

什麼是正常流向呢？由上而下、由左至右這樣的走向就是所謂的正常流向；我們拿超文件標記語言來說好了，其原始碼撰寫的方向是從上而下由左至右，這就是正常流向。而瀏覽器也是依據這樣的走向來解譯(直譯)我們的原始碼。

換個角度來說，在大部分的情況下，正常流向指的是在網頁裡頭，顯示元素標籤的方式。另外，多數的 HTML 元素標籤都是屬於 inline box 或 block box。block box 裡可以包含 inline box；反之，inline box 裡不能包含有 block box。

position

用來將 HTML 元素所產生的 box 定位在我們想要讓它呈現的位置上。

Static Positioning | 靜態位置的定位

依照撰寫原始碼時的順序來定位。白話的講就是依序我們撰寫 HTML 元素所產生的 box 讓它自然地排在原本流向應該在的位置上。static 這個值不用特別去指定它，因為它是預設值，也就是說所有的 box 元素一開始通通在本來應有的位置上。並且不適用 bottom、left、right 與 top 這四個屬性。

Relative Positioning | 相對位置的定位

相對於原本的位置(不是相對於其它的元素的位置)。將元素定位在相對於原本的位置；該元素會移動到我們所定位的地方，而原本位置的大小會在承載區塊中被保留。

Absolute Positioning | 絕對位置的定位

相對於承載區塊的位置。該元素會從 HTML 的流向中移除，然後依據承載區塊來重新定位給該元素應有的空間，而原本位置的大小會在承載區塊中被清除。其親代元素的定位值不可為 static。

Fixed Positioning | 固定位置的定位

相對於瀏覽器視窗的視區座標，將位置固定住不再隨捲軸的移動而改變。

bottom, left, right, top

這四個屬性是用來設定已定位目標元素與承載區塊的邊界距離。須注意的是，這四個值均可設為負數；當為負數時，該元素的位置會跑到承載區塊的邊界外。

z-index

用來讓元素之間相互堆疊覆蓋。其值越大表示越上層(也可使用負值)。

clip

用來修剪內容可視的範圍。

<shape>

• rect rect(上, 右, 下, 左) 從元素的左上角開始剪出。
• inset inset(上, 右, 下, 左) 類似於 rect 方式，不過它是從元素的邊界往內剪出。

用來轉換文字大小寫的體裁效果，其值有如下的意義：

• none：沒有任何的影響。
• capitalize：將每個單字的第一個字元(母)轉換為大寫，而單字中的其它字元則不受影響。
• uppercase：將每個單字的字元全部轉換為大寫字母。
• lowercase：將每個單字的字元全部轉換為小寫字母。
• full-width：將所有的字元轉換成全形(fullwidth)格式。如果想轉換的字元並沒有相對應的全形格式時，它將會保持原來的格式。
• full-size-kana：將所有的小型日本字母轉換成正常的日本字母。例如右圖裡，半形日文片假名(half-width katakana)將會對應轉換成全形片假名。

p#demo {
	text-transform: uppercase;		/* 將所屬 p 元素內的單字全部轉換為大寫 */
}

用來設定文字陰影的效果。另一個相類似的效果請參考 box shadow。

h1#demo {
	text-shadow: #666666 5px 5px 3px;
}

上述例子裡：

text-shadow: #666666 5px 5px 3px;

• #666666 表示陰影顏色(放在最前或最後都可以)。
• 第一個 5px 表示水平(X 軸)位移，正值代表陰影往右移動，負值則是向左移動。
• 第二個 5px 表示垂直(Y 軸)位移，正值代表陰影往下移動，負值則是向上移動。
• 3px 表示柔焦的光暈半徑。
• ※單位為長度單位。

用法很簡單。底下是我目前 archive.php 檔案裡列出文章迴圈的寫法。須注意的是第二列裡的參數，每個參數須以 & 做開頭，參數與參數間用 . 相連。

<?php global $query_string;
query_posts( $query_string . '&order=ASC' . '&orderby=title' ); ?>
<?php while (have_posts()) : the_post(); ?>
			<div class="arc_post_title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>

如果您的主題並未有該功能的話，則必須在 functions.php 檔案中加入以下語句：

if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus(
		array(
			'primary' => __( 'Primary Navigation' ),
		)
	);
}

加入完畢並重新整理之後，您就會多看到一個選項(如下圖所示)。

當然啦，以上只是開啟該功能而已。如果想要在主題上顯示其效果，則必須將以下語句放在您想要呈現出來的地方(通常放在 header.php)。

<?php wp_nav_menu(); ?>

若無特殊需求的話，以上就夠用了。更多詳盡用法請考官方的 Navigation Menus 文件。

如何使用 Navigation Menus 功能

拖曳完成後，記得還要儲存，便可。