（一）水平對齊1.使用margin屬性水平對齊可通過將左和右外邊距設置為 "auto"，來對齊塊元素。除非已經聲明瞭 !DOCTYPE，否則使用 margin:auto 在 IE8 以及更早的版本中是無效的。 如果寬度是 100%，則對齊沒有效果。 2.使用 position 屬性進行左和右對齊對齊 ...
（一）水平對齊
1.使用margin屬性水平對齊
可通過將左和右外邊距設置為 "auto"，來對齊塊元素。
除非已經聲明瞭 !DOCTYPE，否則使用 margin:auto 在 IE8 以及更早的版本中是無效的。
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
如果寬度是 100%，則對齊沒有效果。
2.使用 position 屬性進行左和右對齊
對齊元素的方法之一是使用絕對定位
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
3.使用float屬性來進行左和右對齊
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
（二）尺寸
尺寸屬性：
height 設置元素高度
line-height 設置行高
max-height 設置元素最大高度
max-width 設置元素最大寬度
min-height 設置元素最小高度
min-width 設置元素最下寬度
width 設置元素寬度
（三）分類
分類屬性用來控制如何顯示元素
clear 設置元素側面是否允許其他浮動元素
cursor 設置顯示的游標類型
crosshair 十字線
pointer 一隻手
move 四個方向鍵
e-resize 向東移動
n-resize 向北移動
text 文本輸入游標
wait 載入
help 問號
display 規定元素應該生成的框的類型
none 該元素不會被顯示
block 顯示為塊級元素
inline 顯示為內聯元素，前後沒有換行符
float 定義元素那個方向浮動
position 把元素放置到靜態的，相對的，絕對的或者固定的位置中
visibility 設置元素是否可見
預設可見，hidden隱藏
（四）導航條
導航欄 = 鏈接列表
導航欄基本上是一個鏈接列表，因此使用 <ul> 和 <li> 元素是非常合適的：
ul
{
list-style-type:none;
margin:0;
padding:0;
} 去掉圓點和外邊距
list-style-type:none - 刪除圓點。導航欄不需要列表項標記。
把外邊距和內邊距設置為 0 可以去除瀏覽器的預設設定。
a
{
display:block;
width:60px;
} 構建垂直導航欄
display:block - 把鏈接顯示為塊元素可使整個鏈接區域可點擊，同時也允許我們規定寬度。
width:60px - 塊元素預設占用全部可用寬度。我們需要規定 60 像素的寬度。
li { display:inline; }構建水平導航欄的方法之一是將 <li> 元素規定為行內元素
li
{
float:left;
}
a
{
display:block;
width:60px;
} 對列表項進行浮動
float:left - 使用 float 來把塊元素滑向彼此。
display:block - 把鏈接顯示為塊元素可使整個鏈接區域可點擊（不僅僅是文本），同時也允許我們規定寬度。
width:60px - 由於塊元素預設占用全部可用寬度，鏈接無法滑動至彼此相鄰。我們需要規定 60 像素的寬度。
<ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul>
（五）圖片透明度
opacity 來定義透明度
值的設置從0.0到1.0，值越小，越透明
hover效果
img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}
透明框中的文本
<!DOCTYPE html> <html> <head> <style> div.background { width: 400px; height: 266px; background: url('/i/tulip_peach_blossom_w.jpg') no-repeat; border: 1px solid black; } div.transbox { width: 338px; height: 204px; margin:30px; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } div.transbox p { margin: 30px 40px; } </style> </head> <body> <div class="background"> <div class="transbox"> <p> This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. </p> </div> </div> </body> </html>
首先，我們創建一個 div 元素 (class="background")，它有固定的高度和寬度、背景圖像，以及邊框。然後我們在第一個 div 內創建稍小的 div (class="transbox")。"transbox" div 有固定的寬度、背景色和邊框 - 並且它是透明的。在透明 div 內部，我們在 p 元素中加入了一些文本。
