CSS入門系列：第二部分 屬性（三）

——摘自《CSS入門經典（第3版）》 Lan Pouncey、Richard York著

【盒模型：控制外邊距、邊框、內邊距、寬高】

·margin外邊距

屬性	值
margin	[<length>|<percentage>|auto]{1,4}
margin-top margin-right margin-bottom margin-left	<length>|<percentage>|auto

//margin帶有3個值遵循上、左右、下的順序約定；margin帶有2個值遵循上下、左右順序約定；margin帶有1個值同時設定四條邊。

·border-width控制盒邊框的寬度。

屬性	值
border-top-width border-right-width border-bottom-width border-left-width	<border-width> 初始值：medium
border-width	<border-width>{1,4} 初始值：medium
<border-width>值包括：thin|medium|thick|<length>

//不允許使用百分比值。

·border-style指定邊框的樣式

屬性	值
border-style 值包括：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset	<border-style>{1,4} 初始值：none
border-top-style border-right-style border-bottom-style border-left-style	<border-style> 初始值：none

//簡寫屬性遵循上右下左的順序。

·邊框簡寫屬性

屬性	值
border-top border-right border-bottom border-left	<border-width>||<border-style>||<color>
border	<border-width>||<border-style>||<color>

·padding內邊距是內容和邊框之間的地區。

屬性	值
padding	[<length>|<percentage>]{1,4}
padding-top padding-right padding-bottom padding-left	<length>|<percentage>

·overflow溢出

屬性	值
overflow	visible|hidden|scroll|auto 初始值：visible
overflow-x	visible|hidden|scroll|auto 初始值：visible
overflow-y	visible|hidden|scroll|auto 初始值：visible

//auto和scroll的區別在，即使內容小於指定的寬度或高度，scroll也總會顯示滾動欄，而auto只在必要的時候顯示滾動欄。

【浮動和垂直對齊】·float浮動元素

屬性	值
float	left|right|none

//浮動元素的外邊距不會摺疊；只有浮動元素後面的元素內容會受影響；浮動元素會被當作區塊層級元素對待。

//以下代碼使用浮動的導航列表。h1{Float:left;Margin-top:0;}.navigation{Float:right;Margin:0;List-style:none;}.navigation li{Display:block;Margin-left:0.5em;Padding:0.5em;Border:1px solid #CCC;Color:#233;Text-decoration:none;}...<h1>Recipes for Cheese</h1><ul class=”navigation”><li><a href=”#”>Home</a></li><li><a href=”#”>Recipes</a></li><li><a href=”#”>Suggestions</a></li></ul>

·clear取消浮動內容

屬性	值
clear	none|left|right|both 初始值：none

//使用float元素之後再繼續編輯段落文本，段落中的文本從浮動元素之間的空隙中開始，而不是我們想要的那種文本跟在標題的後面。這種情況使用clear取消浮動對標題後面文本的影響，如下。

.intro{Clear:both;}

針對Internet Explorer編寫CSS 因為低版本瀏覽器中存在的一些bug，導致CSS無法實現效果。這裡介紹兩種技術：條件注釋和hack。 條件注釋 <!--[if lte IE 6]> <![endif]--> //如果版本低於或等於IE6。。。這意味著如果運行這段代碼的瀏覽器是Internet Explorer，並且其版本為6或更低，將會輸出註解區塊中的內容，而不是將其當作普通的注釋。 Hack Hack是一些技巧，使用這些技巧可以利用CSS分析器中的bug。介紹兩種hack。 第一種是底線hack，它允許編寫只用於IE6的CSS。其文法如下：     p{          _height:1px;     } 可以看到，普通的height屬性前面帶有一個底線。因為這不是有效CSS屬性，大多數瀏覽器會忽略它，但是IE6不同，它只忽略底線。 第二種是星號hack。其工作方式與底線hack相同，但使用目標是IE6和IE7，文法如下：     p{          *width:100px;     } 原理於底線hack相同，大多數瀏覽器會忽略，而IE6、IE7隻會忽略星號。 p{      width:100px;      _width:97px; } 這條規則對所有瀏覽器中的段落應用值為100px的寬度，但是IE6為97px。順序十分重要，因為兩種屬性聲明都可以應用於IE6，帶有底線的必須放在最後才能被應用。 Hack要少用，過度使用hack會使CSS難以閱讀和維護。如果要特別針對某個版本編寫大量CSS，那麼建議使用條件注釋包含一個不同的樣式表。

·vertical-align垂直對齊內容

vertical-align屬性主要用於兩種情況：1、垂直對齊段落行中出現的文本，如建立上標和下標；2、對齊表儲存格中的內容。

屬性	值
vertical-align	baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length> 初始值：baseline

//vertical-align之適用於內嵌元素，例如<img/>和<span>。

//該屬性應用於表儲存格時，只能使baseline、top、middle和bottom關鍵字，並且vertical-align屬性在此用來對齊整個表單的內容。

top和text-top的主要區別：top會導致文本的頂部和包含內聯盒子的行的頂部對齊，這個頂部由line-height決定；而text-top則與字型中最高的字元對齊。

//建立上標和下標文本：……<style type="text/css">h1 span{font-size:0.5em;}.superscript{vertical-align:super;}.subscript{vertical-align:sub;}</style>……<h1><span class="superscript">Tasty</span>Recipes for<span class="subscript">Tasty</span>Cheese<h1>……

：