分类

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）

中的显示顺序将发生变化，因从第一个
• 开始依次向右浮动，所有显示内容好像倒过来显示一样

  如图：

  

  4 改变光标

  Crosshair

  Pointer

  Move

  e-resize

  ne-resize

  运行效果：

  
  
  
  
  

  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 帮助