1  显示元素

在运用中有时需要改变元素的显示状态，这时使用 display属性 来改变元素的显示：

h1 { display: none }/*使 h1 不显示*/

p { display: inline } /* 使 p 显示为内联元素 */

运行效果：

图中 h1 不显示，且不占位置      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 帮助