1 ?顯示元素
在運(yùn)用中有時(shí)需要改變元素的顯示狀態(tài)，這時(shí)使用 display屬性 來改變元素的顯示：
h1 { display: none }/*使 h1 不顯示*/
p { display: inline } /* 使 p 顯示為內(nèi)聯(lián)元素 */
運(yùn)行效果：
display 屬性的其他應(yīng)用：
display: block /*顯示為塊級(jí)元素*/
display: inline-block /*顯示為內(nèi)聯(lián)塊級(jí)元素*/
2 ?float 浮動(dòng)和清除浮動(dòng)
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
img {
? width: 200px;
? height: 200px;
? float: right
}
運(yùn)行效果：
float（懸?。傩裕?float: right /*右浮動(dòng)*/ 或 float: left /*左浮動(dòng)*/
clear屬性，清除浮動(dòng)
div { float: left }
img {
? width: 200px;
? height: 200px;
? padding: 10px
}
.div { clear: both }/*清除兩側(cè)浮動(dòng)*/
運(yùn)行效果：
clear（清除）屬性： clear: both/*清除兩側(cè)浮動(dòng)*/ ， clear: right /*清除右浮動(dòng)*/ 或 clear: left /*清除左浮動(dòng)*/ ?
3 ?水平菜單
ul {
? float: left;
? width: 100%;
? text-align: center;
? list-style-type: none
}
a {
? float: left;
? width: 100px;
? height: 40px;
? font-size: 25px;
? color: #FFF;
? background-color: #8A2BE2;
? text-decoration: none
}
a:hover {
? background-color: #F30
}
運(yùn)行效果：
若將上例中的左浮動(dòng)（float: left），改為右浮動(dòng)（float: ?right） <ul>中的顯示順序?qū)l(fā)生變化，因從第一個(gè)<li>開始依次向右浮動(dòng)，所有顯示內(nèi)容好像倒過來顯示一樣
如圖：
4 改變光標(biāo)
<span style="cursor: crosshair"> Crosshair </span
<span style="cursor: pointer"> Pointer </span>
<span style="cursor: move"> Move </span>
<span style="cursor: e-resize"> e-resize </span>
<span style="cursor: ne-resize"> ne-resize </span>
運(yùn)行效果：
cursor（光標(biāo)）屬性：
? auto 自動(dòng)
? crosshair 十字準(zhǔn)線
? default 違約
? pointer 指示器
? move 移動(dòng)
? e-resize 向東的箭頭
? ne-resize 箭頭朝右上
? nw-resize 西北箭頭
? n-resize 向北的箭頭
? se-resize 東南箭頭
? sw-resize 左下箭頭
? s-resize 向下箭頭
? w-resize 向西箭頭
? text 文本
? wait 等待
? help 幫助
