大部分網頁設計者依賴**來布局頁面元素，這是因為**可用於生成邊欄,可以為整個頁面的外觀建立複雜的結構。它也可以做些簡單的事情，如將文字放入有邊框的彩色框中。
假如用**來實現"文字放入有邊框的彩色框中"非常簡單。但如果需要的只是乙個有紅色邊框、黃色背景的段落，如果段落自身有邊框與背景，豈不是容易許多?
其實，css擁有為元素定義邊框的能力。如段落、標題、div、定位錨、影象及各種型別的可加邊框的元素。這些邊框用於將乙個元素同其他元素分開。除邊框外，在元素周圍還可以定義區域以控制邊框相對於內容如何放置，以及與其他元素可以有很多近的距離。在元素內容與邊框之間，是補白(padding)；在邊框的四周，是邊界(margin)。
上圖標示了p標籤相對於其父元素div的邊距(margin)與補白(padding)，這裡有乙個細節是很需要注意的，如果想得到預期的效果，需要給元素設定高度和寬度，請看下面示例:
<我們希望的效果是邊距和補白都為1cm，但實際執行效果卻不是這樣。這是因為容器的高度和寬度預設設定下比較大，我們可以設定乙個高、寬值，這個值並不需要精確，而且越小越好：div
style
="background-color:blue"
>
<
p style
="margin:1cm;padding:1cm;background-color:silver"
>演示文字
p>
div>
<上面修改的例子將容器div的高、寬值設定為1px,顯然這個值是很小的，但它(容器)卻可以隨著p所設定的邊距值或補白值自動增大以滿足要求。div
style
="width:1px;height:1px;background-color:blue"
>
<
p style
="margin:1cm;padding:2cm;background-color:silver"
>演示文字
p>
div>
1.margin值的設定
margin值可採用任何長度度量單位，如px、em、cm等，還可以採用百分比(%)來設定。用百分比設定依賴父元素的高、寬值。對margin和padding使用百分比是使頁面樣式能被多種**接受的最好方法。但不是所有的瀏覽器均支援這種行為。
margin:1cm設定了4個方向的邊距都是1cm，若4個方向邊距大小各不相同，可以分開設定，例如margin:1cm,2cm,3cm,4cm。分別對應著上、右、下、左4個方向，設定的順序可以想象成鐘錶的順時針方向。
如果以margin來設定時，值並不是4個，那瀏覽器會如何判斷呢？答案並不是省略，而是採取值複製的方式，left複製right，bottom複製top。如果只給出1個值，如margin:1cm，則4個方向都是1cm；給出2個值，如margin:1cm,2cm,則上下為1cm，左右為2cm;給出3個值，如margin:1cm,2cm,3cm,則上為1cm，右為2cm,下為3cm,左為2cm。
如果確實想指定單側邊距的值，就需要用到margin-top、margin-right、margin-bottom、margin-left。
2.壓縮邊界
正確實現的客戶**會壓縮縱向相鄰邊界，假如有下面的樣式定義:
li 則當兩個li元素相鄰出現時，間距取值較大的，按上面的定義會取30px，而不是10px或兩者之和。
邊界還可以設定為負值，可以產生一些文字重疊的效果：
<執行以後，剛開始只能看到第一段的內容，可以將瀏覽器慢慢縮下，這時候就能看到第二段內容隨著瀏覽器大小的變化而出現並且改變位置，甚至可以和第一段內容交疊起來。可見邊界的負值是相對于父元素的大小而言的，在這個例子中沒有顯式指定父元素，預設情況下是body。p>曹操看到孫權軍容整肅,軍紀嚴明,謂然嘆曰:「生子當如孫仲謀」
p>
<
p style
="margin:-20%"
>先帝創業未半,而中道崩殂;今天下三分,益州疲敝,此誠危急存亡之秋也。
p>
3.邊框
元素的邊框(border)就是一條(有時是多條)圍繞著元素內容及補白的線。
每個邊框都有三個特徵:寬度、樣式、顏色。邊框寬度的預設值是medium,medium沒有顯式定義，通常為兩個或三個畫素。但我們通常不會看到邊框，原因是其預設樣式為none,阻止了它們的出現。邊框的預設顏色是元素本身的前景色，如果沒有宣告邊框顏色，那麼，它的顏色將與元素的文字顏色相同。另一方面，如果乙個元素沒有文字，例如乙個只包含影象的**，顏色是由繼承得到的，邊框的顏色是其父元素的文字顏色。
css定義了9種不同樣式的border-style屬性，包括預設值none.下面是相同顏色下的各種不同樣式的邊框:
也可以給邊框定義多種樣式。例如:
<邊框樣式規則的定義規則和上面提到的margin定義規則相同。另外還有需要注意的一點：當部分瀏覽器無法支援一些邊框樣式，它將用solid來替代。style
>
p style
>
<
p>多樣式的邊框
p>
一旦指定了乙個樣式，下一步就是給它一定的寬度。這個步驟使用border-width屬性。也可以用border-top-width、border-right-width、border-bottom-width、border-left-width來分開設定。共有四種指定邊框寬度的方法：賦一長度值或使用三個關鍵字:thin、medium(預設值)和thick。這些關鍵字不必與某特定的寬度對應，只是簡單地定義了相互間的關係。它們的寬度關係為:thick>medium>thin。
設定邊框顏色十分容易。只有乙個border-color屬性，同樣可以按margin的值複製方式來賦值。如果沒有設定顏色，則預設顏色為元素的前景色。
如果要單獨設定某一邊的樣式，則可以用border-top、border-right、border-bottom、border-left。例如:p .實際值的排列順序並不重要。唯一不能缺少的值是邊框樣式，因為它預設為none。
一般情況下可以用border屬性來設定不太複雜的邊框樣式，例如:h1 .使用border的缺點是只能定義全域性樣式、寬度及顏色。但可以在後面再單獨定義其一條邊的屬性，則可以覆蓋掉border相同的定義值。例如:h1 .第二條規則將替換掉由第一條規則指定的左側邊框的寬度值。
4.補白
補白位於元素框的邊界與內容區之間。用於影響這個區域的屬性是padding。這個屬性可以接受任何長度值或乙個百分比。
元素的背景延伸到補白中，它還延伸到邊框的外部邊界。padding的預設值是0(zero),且補白的值不能為負值。
同margin一樣，元素的補白也可以設定成百分比，百分比是參考父元素寬度計算的。
可以使用padding-top、padding-right、padding-bottom、padding-left來分開設定單側補白。
5.浮動與清除
css允許任何元素浮動，從影象到段落到列表。在css中是由屬性float來完成這些行為的。
<浮動的元素在一些特性上脫離了普通的文件流，儘管它仍影響著布局。浮動的元素幾乎在它們自己的平面上出現，但仍對文件的其餘部分有重大的影響。p style
="width:30%"
>
<
img
src=""
style
="float:left"
>
p>
也可以為浮動賦負值，這樣也許會引起浮動元素超過父元素的範圍，但卻是允許的。
6.列表
為改變列表項的計數或專案符號型別，可以使用list-style-type。
list-style-type屬性值及結果：
list-style-type的預設值是disc，如果沒有特殊的宣告，所有列表(有序與無序)將使用圓盤作為每個項的專案符號。如果想取消專案符號的顯示，可以設定為none。但none並不中斷有序列表的計數。
有時，需要自定義的影象作為列表項。以前的做法是以效果來仿造，容易造成**非常冗長，現在只需要使用list-style-image宣告即可。例如:ul li
有時候會遇到部分瀏覽器不支援自定義影象，解決這個問題的方法是定義乙個備份的list-style-type。例如:ul li
還有乙個屬性:list-style-position，它用來設定專案符號相對於列表項內容的位置。有兩個允許值：inside和outside.預設值是outside。
下面是兩種取值後的效果:
為簡潔起見，可以組合三個列表樣式屬性為乙個屬性:list-style。允許值為《列表項型別》、《列表項影象》、《列表項位置》。例如: li
CSS尺寸與補白
width 長度值 百分比 auto 預設值 auto 適用於 除非置換內聯元素，table row,table row group之外的所有元素 繼承性 無 動畫性 當值為 長度值 百分比 時 計算值 指定的值 媒 體 視覺 定義元素的寬度。min width 長度值 百分比 預設值 0 適用於 ...
CSS 尺寸與邊框
作用改變元素的寬度 和 高度 寬度width 寬度 min width 最小寬度 max width 最大寬度 高度height 高度 min height 最小高度 max height 最大高度 頁面中允許設定尺寸的元素 所有的塊級元素都允許設定尺寸 div,p,h1,h2,ul,ol,dl,d...
CSS 尺寸與邊框
一 尺寸屬性 1.寬度 高度 屬性作用 width 寬度min width 最小寬度 max width 最大寬度 height 高度min height 最小高度 max height 最大高度 2.頁面中允許設定尺寸的元素 3.溢位處理 什麼時候出現溢位 內容多元素小時產生溢位，預設溢位是縱向溢...