div和span的區別
div:
div是一個塊級元素，可以包含段落，表格等內容，用於放置不同的內容。一般我們在網頁通過div來布局定位網頁中的每個區塊。
Span:
span是一個內聯元素，沒有實際意義，它的存在純粹是為了應用樣式，給一段內容加上<span></span>標記可以通過在span上定義樣式來設定其內容的樣式。
div和 span元素最大的特點是默認都沒有對元素內的對象進行任何格式化渲染。主要用於應用樣式表。
比如：代碼：
<html>
<head>
<title>div與span的區別</title>
</head>
<body>
<p>div標記不同行：</p>
<div><img src="www.csscss.org_CSS在線_logo.gif" border="0"></div>
<div><img src="www.csscss.org_CSS在線_logo.gif" border="0"></div>
<div><img src="www.csscss.org_CSS在線_logo.gif" border="0"></div>
<p>span標記同一行：</p>
<span><img src="www.csscss.org_CSS在線_logo.gif" border="0"></span>
<span><img src="www.csscss.org_CSS在線_logo.gif" border="0"></span>
<span><img src="www.csscss.org_CSS在線_logo.gif" border="0"></span>
</body>
</html>
輸出結果：
區別：
兩者最明顯的區別在於div是塊元素，而span是行內元素。
所謂塊元素：
是以另起一行開始渲染的元素，
行內元素：
不需另起一行，
測試一下下面的代碼你會有更形象的理解：
如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在線-示例</title>
<style type="text/css">
</style>
</head>
<body>
測試<span>緊跟前面的"測試"顯示</span><div>這里會另起一行顯示</div>
</body>
</html>
輸出結果：
測試緊跟前面的"測試"顯示
這里會另起一行顯示
塊元素和行內元素也不是一成不變的，通過定義CSS的display屬性值可以互相轉化
如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在線-示例</title>
<style type="text/css">
</style>
</head>
<body>
測試<div style="display:inline">緊跟前面的"測試"顯示</div><span style="display:block">這里會另起一行顯示</span>
</body>
</html>
輸出結果：
測試緊跟前面的"測試"顯示
這里會另起一行顯示
應用：
因為div與span元素的特殊性，所以一般用於應用樣式表，比如說用CSS定義為層，而需要分清的是塊元素和行內元素的區別，還有兩者間的相互轉化。
一般而言：div一般用做渲染html 的容器,而span指定內嵌文本容器。
讓div在html面中垂直居中
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>aaaaaaaa</title>
<style>
*{margin:0; padding:0;}
body{border:5px solid}
body,html{height:98%;}
#outer{width:100%; height:92%;position:relative;}
#outer[id]{display:table;}
#middle{position:absolute;top:50%;}
#middle[id]{display:table-cell; position:static;vertical-align:middle}
#inner{position:relative; top:-50%;}
#content{width:500px; height:300px; margin:0 auto; background:#eee;}
</style>
<body>
<p style="height:3%">我們都是好孩子</p>
<div id="outer">
<div id="middle">
<div id="inner">
<div id="content">div在html面中垂直居中div在html面中垂直居中div在html面中垂直居中div在 html面中垂直居中div在html面中垂直居中</div>
</div>
</div>
</div>
<p style="height:3%">我們都是好孩子</p>
</body>
</html>
輸出結果：
Div的float屬性
float浮動屬性是布局中非常重要的屬性，我們常常通過對div元素應用float浮動來進行布局，不但對整個版式進行規划，也可以對一些基本元素如導航等進行排列。
float屬性基本釋義：
該屬性的值指出了對象是否及如何浮動。當該屬性不等於none引起對象浮動時，對象將被視作塊對象(block-level)，即display屬性等於block。也就是說，浮動對象的display特性將被忽略。
float屬性的參數：
none：對象不浮動
left：對象浮在左邊
right：對象浮在右邊
如一：不浮動
如果float取值為none則不會發生任何浮動，塊元素獨占一行，緊隨其后的塊元素將在新行中顯示，如：
輸出結果：
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#content_a {width:200px; height:80px; border:1px solid
#000; margin:10px; background:#ccc;}
#content_b {width:200px; height:80px; border:1px solid
#000; margin:10px; background:#999;}
</style>
</head>
<body><div id="content_a">這是第一個</div>
<div id="content_b">這是第二個</div>
</body>
</html>
如二：content_a應用向左的浮動，而content_b不應用任何浮動
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
#content_a {width:200px; height:80px; float:left; border:1px solid
#000; margin:10px; background:#ccc;
}#content_b {width:200px; height:80px; border:1px solid
#000; margin:10px; background:#999;}
</style>
</head>
<body>
<div id="content_a">這是第一個DIV 向左浮動</div>
<div id="content_b">這是第二個DIV 不應用浮動</div>
</body>
</html>
輸出結果：
在IE7中的效果：
在FF中的效果：
在IE中，對content_a應用向左的浮動后，content_a向左浮動，content_b在水平方向僅跟着它的后面。
在FF中，對content_a應用向左的浮動后，content_b在水平方向容器不可見，只留下了文字。這是由於未清除浮動所造成的現象，關於清除浮動，可以參考這里：http://www.52css.com/article.asp?id=132 這就是IE與FF對此種情況的不同解決，我們在實際布局中，應該避免這樣的情況發生。
如三：同時對這兩個容器應用向左的浮動
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
#content_a {width:200px; height:80px; float:left; border:1px solid
#000; margin:10px; background:#ccc;}
#content_b {width:200px; height:80px; float:left; border:1px solid
#000; margin:10px; background:#999;}
</style>
</head>
<body>
<div id="content_a">這是第一個DIV 向左浮動</div>
<div id="content_b">這是第二個DIV 向左浮動</div>
</body>
</html>
輸出結果：
在IE7中的效果如圖：
在FF中的效果如圖：
在IE與FF中，他們的效果基本取得了一致。在布局中，我們可應用這類IE與FF兼容的方法。
如四：content_a不應用任何浮動, 而content_b應用向左的浮動
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
#content_a {width:200px; height:80px; border:1px solid
#000; margin:10px; background:#ccc;}
#content_b {width:200px; height:80px; float:left; border:1px solid
#000; margin:10px; background:#999;}
</style>
</head>
<body>
<div id="content_a">這是第一個DIV 不應用浮動</div>
<div id="content_b">這是第二個DIV 向左浮動</div>
</body>
</html>
輸出結果：
在IE7中的效果如圖：
在FF中的效果如圖：
在IE與FF中均未有太大的變化。在IE中，應用浮動后的content_b卻造成了一個雙邊距的BUY。關於IE的雙邊距BUY請參考這里：http://www.136z.com/article.asp?id=144
向左浮動會出現何種狀態呢？在向右浮動后，最大的變化就是在HTML中，前面的元素在最右邊，后面的元素跑到了最左邊。
如五：兩個元素同時應用向右的浮動
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
#content_a {width:200px; height:80px; float:right; border:1px solid
#000; margin:10px; background:#ccc;}
#content_b {width:200px; height:80px; float:right; border:1px solid
#000; margin:10px; background:#999;}
</style>
</head>
<body>
<div id="content_a">這是第一個DIV 向右浮動</div>
<div id="content_b">這是第二個DIV 向右浮動</div>
</body>
</html>
輸出結果：
在IE7中的效果如圖：
在FF中的效果如圖：
同時對兩個元素應用向右的浮動基本保持了一致，但請注意方向性，第二個在左邊，第一個在右邊。
對於其它頁面構成元素，浮動的原理基本是一樣的。
Div的position屬性（四個）
在CSS布局中，Position發揮着非常重要的作用，很多容器的定位是用Position來完成。
Position屬性有四個可選值，它們分別是：static、absolute、fixed、relative。我們下面來共同學習它們的不同的用法，在學習中我們應該去思考在什么布局情況下，應該使用它們其中的哪一種。
position:static 無定位(默認情況)
該屬性值是所有元素定位的默認情況，在一般情況下，我們不需要非凡的去聲明它，但有時候碰到繼續的情況，我們不願意見到元素所繼續的屬性影響本身，從而可以用position:static取消繼續，即還原元素定位的默認值。
如：#nav { position:static; }
position:absolute 絕對定位(能夠很准確的將元素移動到你想要的位置)
使用position:absolute，能夠很准確的將元素移動到你想要的位置，讓我將nav移動到頁面的右上角。我們可以這樣寫：nav { position:absolute; top:0; right:0; width:200px; }
使用絕對定位的nav層前面的或者后面的層會認為這個層並不存在，也就是在z方向上，它是相對獨立出來的，絲毫不影響到其它z方向的層。所以position:absolute用於將一個元素放到固定的位置很好用，但是假如需要層相對於四周的層來確定位置就無能為力了。只能用下面討論到的相對定位了。
這里有個Win IE的bug需要提到，就是假如為絕對定位的元素定義一個相對的寬度，那么在IE下它的寬度取決於父元素的寬度而不是整個頁面的寬度。
position:fixed 相對於窗口的固定定位(IE6不支持CSS中的position:fixed屬性)
這個定位屬性值是什么意思呢？元素的定位方式同absolute類似，但它的包含塊是視區本身。在屏幕媒體如WEB瀏覽器中，元素在文檔滾動時不會在瀏覽器視察中移動。例如，它答應框架樣式布局。在頁式媒體如打印輸出中，一個固定元素會出現於第一頁的相同位置。這一點可用於生成流動標題或腳注。我們也見過相似的效果，但大都數效果不是通過CSS來實現了，而是應用了JS腳本。
請非凡注重，IE6不支持CSS中的position:fixed屬性。真的非常遺憾，要不然我們就可以試試這種酷酷的效果了。
position:relative 相對定位
所謂相對定位到底是什么意思呢，是基於哪里的相對呢？我們需要明確一個概念，相對定位是相對於元素默認的位置的定位。既然是相對的，我們就需要設置不同的值來聲明定位在哪里，top、bottom、left、right四個數值配合，來明確元素的位置。假如要讓nav層向下移動20px,左移40px:
我們可以這樣寫：#nav { position:relative; top:50px; left:50px; }
但您需要注重下面的情況，相對定位緊隨他的層woaicss是不會出現在nav的下方，而是和nav發生一定的重疊！
例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.mb5u.com</title>
<style type="text/css">
#nav {
width:200px;
height:200px;
position:relative;
top:50px;
left:50px;
background:#ccc;
}
#woaicss {
width:200px;
height:200px;
background:#c00;
}
</style>
</head>
<body>
<div id="nav"></div>
<div id="woaicss"></div>
</body>
</html>
輸出結果：
注意：
position:relative並不是很好用的，nav已經移走了，相對於原來的位置，向右向左各移了50px。但我們的另一個容器woaicss什么也沒有察覺，當作nav是在原來的位置上(即0 0的位置，而不是50 50)，不依不饒的緊跟在nav的后面。大家在使用時要注重方法與總結經驗。
position屬性 父級對象和同級對象
div+css布局要素：文檔流position屬性、父級對象和同級對象。
從學div+css以來，一直對position幾個屬性的理解不夠清晰。自己對position這一屬性有了更深入和清晰的認識，同時讓自己對整個div+css布局有了更深入的認識。
因為div實質是一個四方塊，被很多業界人士形象的比喻成盒子。那么div+css布局的過程其實就是擺放這些盒子的過程。最近一周來，專門針對這個問題進行了深入的思考和研究。結果通過對這一問題的研究不僅讓自己對position這一屬性有了更深入和清晰的認識，同時讓自己對整個div+css布局有了更深入的認識。
因為div實質是一個四方塊，被很多業界人士形象的比喻成盒子。那么div+css布局的過程其實就是擺放這些盒子的過程。
而我覺得控制或者說影響這些盒子的擺放的因素主要有一下幾個屬性：position、float、clear、margin、left、top、right、bottom、z-index；另外還要深入理解並確定好“父級對象”及“同級對象”，還有要很好的理解並想象出“文檔流”的概念。下面根據自己的理解對以上元素的作用和彼此間的聯系做詳細的解釋說明。
1、什么是“文檔流”？
關於“文檔流”有位網友這樣解釋：將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素。我能理解這位網友的意思，其實他的理解和我是一樣的，只是他有一點小的失誤，就是他把“文檔流”定義成一種“行為”了——如何擺放元素。但很明顯，“文檔流”是個名詞，實質上它指“通過這種行為而產生的一個實體，即展現在瀏覽者眼前的頁面。”
那么，我們經常看到“正常文檔流”和“脫離正常文檔流”的字樣。我想要想很清晰的理解這個問題，要從理解“div+css布局”與“table布局”的一個和大的不同說起。從我的理解而言，table布局是一個二維空間的布局（即一個平面上的布局）；而“div+css布局”是個三維空間的布局（即一個空間上的布局）。
那么“div+css”是如何將平面轉換為空間的呢？這要歸功於以下五個屬性：left、right、top、bottom、z-index，可以將right（left）、top（bottom）、z-index（正負值）想象成三維坐標軸中的x、y、z軸。“正常文檔流”可以想象成x、y平面。“脫離正常文檔流”就是跳出了x、y平面，獨立開辟新的層面。
2、何為“父級對象”“同級對象”？
如果說要找塊div1的父級對象，那么簡單的說就是誰直接包含了div1，誰就是他的父級對象。同級對象，是指具有同一父級對象的兩個或兩個以上的對象。例如：
<div id=”out”>
<div id=”in1”>
<div id=”in2”></div>
<div id=”in3”></div>
</div>
</div>
其中in1的父級對象是out，而in2、和in3的父級對象是in1，不是out。in2和in3為同級對象。
3、float和clear屬性詳解及關聯？
很多網友認為，被定義float（屬性值不為none時）的對象，脫離了正常的穩定流。當然，我也同意被定義這一屬性的對象，其位置不再遵循正常文檔流中的默認值，而是被重新定義了。但是，我還是覺得這樣的對象並沒有脫離原來的文檔流，因為它依然處於原來的平面（原來的文檔流）之內，只是他位置被重新定義，強制改變了，但對象與對象之間還是不能重疊的。而float和clear便是影響這一改變的屬性。
其中float有兩個作用。一是重新定義當前對象的浮動方式——向左或向右，二是定義在其之后文檔流的跟隨方式——跟隨在當前對象的右邊或左邊。Float：left指當前對象向左移動，其后文檔流跟隨在他的右側。反之float：right指當前對象向右移動，其后文檔流跟隨在他的左側。
而Clear：用以清除當前對象兩邊的浮動對象（即被定義了float：left或float：right的對象。），這里的浮動對象是針對當前對象之前的浮動對象。
注：float和clear之間的影響和清除作用只適用於處在同一文檔流中的對象。
4、position屬性詳解。
position 屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
static： 默認。位置設置為 static 的元素，它始終會處於頁面流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。
relative： 位置被設置為 relative 的元素，可將其移至相對於其正常位置的地方，因此 “left:20″ 將向元素的 LEFT 位置添加 20 個像素。
absolute： 位置設置為 absolute 的元素，可定位於相對於包含它的元素的指定坐標。此元素的位置可通過 “left”、”top”、”right” 以及”bottom” 屬性來規定。
fixed： 位置被設置為 fixed 的元素，可定位於相對於瀏覽器窗口的指定坐標。此元素的位置可通過 “left”、”top”、”right” 以及”bottom” 屬性來規定。不論窗口滾動與否，元素都會留在那個位置。工作於 IE7（strict 模式）。
補充說明：
Relative：相對父級相對定位，不可重疊。因為此時當前對象依然處在正常文檔流中（當position定義為static的時候也一樣），所以float和clear屬性依然對其有作用。
Absolute:相對父級絕對定位，可以重疊。脫離正常文檔流，開辟新的層面。所以float和clear屬性對其已經失去意義。
Position被定義為以上四種值的對象之間，可以根據不同的需求，相互包含。
Div的z-index屬性(z-index:auto | number)
屬性(決定了一個HTML元素的層疊級別)
這點很重要：div必須是浮動的
Z-index屬性決定了一個HTML元素的層疊級別。元素層疊級別是相對於元素在Z軸上（與X軸Y軸相對照）的位置而言。一個更高的Z-index值意味着這個元素在疊層順序中會更靠近頂部。這個層疊順序沿着垂直的線軸被呈現。如下圖，更能清楚的表明意思。
下面先來看一下z-index屬性的值：
z-index:auto | number
auto:默認值
number:無單位的整數值，可為負數。
z-index值較大的元素將疊加在z-index值較小的元素之上，對未指定此屬性的定位對像，z-index值為正數的對象會在其之上，而z-index值為負數的地像在其之下。
下面來講講：
定位元素間的Z值比較及z-index在不同瀏覽器下默認值的影響
在ie下默認值(缺省)為：z-index:0; 而FF下則缺省為：z-index:auto;
1.(導致瀏覽器z值的不同)
z-index正是IE/FF下這一點區別導致ie,ff下z值的不同表現。
2. (兄弟（同級）元素后者居上，父子之間子高於父)
正常情況下：兄弟（同級）元素后者居上，父子之間子高於父。
3.(Z值大小比較)
對於定位元素，（不論IE還是FF）非同級關系和非父子關系元素之間的Z值大小比較，須要回溯至其為兄弟關系的兩個祖先元素上，先比較這兩個元素的z- index值，只有當“兄”的z-index大於“弟”的z-index值，“兄”的各個后代元素，才能超過“弟元素”及其子孫元素。
4. (缺省值: IE,元素的z-index缺省值是0, FF,元素的z-index缺省值是auto)
對於IE,元素的z-index缺省值是0，如果不另外設置“兄”，“弟”元素的z-index值，那么”兄”的z-index就無法大於“弟”的z- index。那么”兄”元素及其子孫就無法蓋過”弟”元素及其子孫。而一旦“兄”的z-index大過了”弟”元素的z-index,那么情況就翻轉了，“弟”元素及其子孫將無法蓋過“兄”元素及其子孫。
而對FF,元素的z-index缺省值是auto,auto的意思是什么，就是說“隨便，不關我事”，那么子孫們的z值等級就只跟他們自己本身的z-index有關了。
DIV+CSS排版技巧
1、CSS盒子(CSS box) CSS中沒有box這個屬性。CSS的 盒子 (box)是由以下幾個部分組成的：內容(content)、填充(padding)、邊框(border)和邊界(margin)。盒子的內容當然是必須有的，而填充、邊框和邊界
1、CSS盒子(CSS box)
CSS中沒有box這個屬性。CSS的盒子(box)是由以下幾個部分組成的：內容(content)、填充(padding)、邊框(border)和邊界(margin)。盒子的內容當然是必須有的，而填充、邊框和邊界都是可選的。如果把CSS的盒子看做現實生活中的盒子，那么內容就是盒子里裝的貨物；而填充就是怕貨物損壞而添加的泡沫或者其它抗震的東西；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能與其他物體緊挨在一起，而必須有一段空隙。當然了，CSS中的盒子是平面的。
CSS邊框(border)：
border主要有以下參數：none : 無邊框；hidden : 隱藏邊框；dotted :點線；dashed:虛線；solid : 實線邊框；double : 雙線邊框；groove : 3D凹槽；ridge : 菱形邊框；inset : 3D凹邊；outset : 3D凸邊。
邊框的值將是四個，如果提供全部四個參數值，將按上－右－下－左的順序作用於四個邊框。
如果只提供一個，將用於全部的四條邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
邊框(border)和邊界(margin)主要用來定位，它們將以上下左右四個值來定義。
2、鏈接（a）的四個屬性：a:link、a:visited、a:hover和a:active，順序不能顛倒
CSS鏈接有四個屬性：其中a:link、a:visited、a:hover和a:active分別對應未訪問的鏈接、已經訪問過的鏈接、鼠標懸停的鏈接和激活的鼠標鏈接(按下鼠標左鍵的時候)。這幾個樣式的順序不能顛倒，否則可能造成部分樣式無法正常顯示。每個樣式里可以更改字體屬性、下划線、背景等等。
3、CSS加入網頁方法：分為三種：內部樣式表、行內樣式表(內嵌樣式表)、外部樣式表
主要分為三種：內部樣式表、行內樣式表(內嵌樣式表)、外部樣式表。內部樣式表主要定義在<head>內；行內樣式表可直接使用style屬性定義在標簽內部；使用外部樣式表時，CSS文件與網頁文件(html)是分離開來的，分開的文件要用 <link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" />鏈接起來，這主要針對CSS樣式表較多的網頁中，特別是要與DIV結合的網頁。
4、如何設定文字字體、顏色、大小 —— 使用font ，可以寫在一行font屬性里（除了color屬性需要單獨寫）
font-style設定斜體，比如font-style: italic;
font-weight設定文字粗細，比如font-weight: bold;
font-size設定文字大小，比如font-size: 12px;（或者9pt，不同單位顯示問題參考CSS手冊）
line-height設定行距，比如line-height: 150%;
color設定文字顏色（不是font-color），比如color: red;
font-family設定字體，比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;（這是通用的寫法）
以上都可以寫在一行font屬性里（除了color屬性需要單獨寫）：
font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;
5、如何控制段落排版 —— 使用margin，text-align
中文段落使用<p>標簽，左右（相當於縮進）、段前段后的空白，都可以用margin。比如：
p{
margin: 18px 6px 6px 18px; /*分別是上、右、下、左，十二點開始的順時針方向*/
}
文字的對齊方式用text-align，比如：
p{
text-align: center; /*居中對齊*/
}
對齊方式還有left、right和justify（兩端對齊）
PS.談起margin，我習慣於在寫CSS的時候為所有的標簽定義margin: 0; 因為時而出現由於默認的margin值導致頁面排版問題，而自己找不到原因（特別注意的是ul/ol/p/dt/dd等標簽）
6、豎排文字 —— 使用writing-mode
writing-mode屬性有兩個值lr-tb和tb-rl，前者是默認的左-右、上-下，后者是上-下、右-左。
比如：
p{
writing-mode: tb-rl;
}
可以結合direction排版。
7、項目符號的問題 —— 使用list-style
在CSS里項目符號有disc（實心圓點）、circle（空心圓圈）、square（實心方塊）、decimal（阿拉伯數字）、lower-roman（小寫羅馬數字）、upper-roman（大寫羅馬數字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。比如設定一個列表（ul或ol）的項目符號為方塊，如：
li{
list-style: square;
}
另外list-style還有一些值，比如可以采用一些小圖片作為項目符號，在list-style下直接寫url(“圖片地址”)就可以了。注意如果一個項目列表的左外補丁（margin-left）設為零的時候，list-style-position: outside（默認是outside）的項目符號不會顯示。可惜的是上述的項目符號似乎並不能設定大小，圓點和方塊始終是那么點。並且不能設定垂直方向上的對齊。
8、首字下沉 —— 使用:first-letter
偽對象:first-letter配合font-size、float可以制作首字下沉效果。
比如：
p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}
9、首行縮進 —— 使用text-indent
text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個漢字。可以這么寫：
p{
text-indent: 2em; /*em是相對單位，2em即現在一個字大小的兩倍*/
}
如果font-size是12px的話，那么text-indent: 2em則縮進24px。
10、關於漢字注音 —— 使用ruby標簽和ruby-align屬性
比如說<ruby>注音<rt style="font-size: 11px;">zhu yin</rt></ruby>，可以利用ruby-align設置對齊方式。這是在CSS手冊里面看到的，具體可以自行查閱ruby-align項。
11、固定寬度漢字截斷 —— 使用text-overflow
用后台語言可以對從數據庫里的字段內容做截斷處理，比如說截12個漢字（之后用省略號）。但是有時還需要html標簽的過濾等，而用CSS來控制則沒有這個問題。比如對列表應用以下樣式：
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
不過只能處理文字在一行上的截斷，不能處理多行。
12、固定寬度漢字（詞）折行 —— 使用word-break
舉個例子，比如說要在一個固定寬度容器里面顯示很多地名（假設以空格分隔），為了避免地名中間斷開（即一個字在上面而另一個字折斷到下一行去了）。則可以使用word-break。比如：
<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>
值得注意的是里面的空格不能以 代替（最少要有一個軟空格）。
13、設置背景屬性 —— 使用(background)
background屬性包含很多子屬性，如background-color設置背景顏色；background-image設置背景圖片；background-repeat設置背景圖片的重復設置，background-repeat:no-repeat為不重復， background-repeat:repeat-x為只水平方向重復， background-repeat:repeat-y為只垂直方向重復； background-position設置背景圖片的顯示位置，background-attachment為固定圖片在某個位置顯示。
以上圖片屬性均可寫在一起，如：background:url(絕對路徑或相對路徑);background-repeat:no-repeat;background-position:x y坐標或百分比;