1 显示元素
在运用中有时需要改变元素的显示状态，这时使用 display属性 来改变元素的显示：
h1 { display: none }/*使 h1 不显示*/
p { display: inline } /* 使 p 显示为内联元素 */
运行效果：
display 属性的其他应用：
display: block /*显示为块级元素*/
display: inline-block /*显示为内联块级元素*/
2 float 浮动和清除浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
img {
width: 200px;
height: 200px;
float: right
}
运行效果：
float（悬浮）属性： float: right /*右浮动*/ 或 float: left /*左浮动*/
clear属性，清除浮动
div { float: left }
img {
width: 200px;
height: 200px;
padding: 10px
}
.div { clear: both }/*清除两侧浮动*/
运行效果：
clear（清除）属性： clear: both/*清除两侧浮动*/ ， clear: right /*清除右浮动*/ 或 clear: left /*清除左浮动*/
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
}
运行效果：
若将上例中的左浮动（float: left），改为右浮动（float: right） <ul>中的显示顺序将发生变化，因从第一个<li>开始依次向右浮动，所有显示内容好像倒过来显示一样
如图：
4 改变光标
<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>
运行效果：
cursor（光标）属性：
auto 自动
crosshair 十字准线
default 违约
pointer 指示器
move 移动
e-resize 向东的箭头
ne-resize 箭头朝右上
nw-resize 西北箭头
n-resize 向北的箭头
se-resize 东南箭头
sw-resize 左下箭头
s-resize 向下箭头
w-resize 向西箭头
text 文本
wait 等待
help 帮助
