CSS 8.3 高级-display，visibility和cursor

来源：互联网发布：金十数据官网财经报告编辑：程序博客网时间：2024/06/05 01:04

CSS 8.3 高级-display，visibility和cursor

一．display属性

最常用的none、block、inline、inline-block

1.none，此元素不会被显示，且不保留元素位置。

<html>  <head>    <style type="text/css">      div {display: none}      div+b{        color:red;      }    </style>  </head>  <body>  <b>本例中把display设置成none属性</b><div>div 元素的内容不会显示出来！</div><b>我们发现div元素的内容不被显示且保留元素本该显示的空间，但是 visibility: hidden是会保留的。这就是两者的区别。</b>  </body></html>

结果：

2.block，块元素，前后换行

所有块元素都可以设置width，height，margin，padding属性

当块元素不设置宽高时，宽=浏览器宽度，高=所需高度

3.inline，内联元素(行内元素)，前后不换行

①行内可替换元素，如img，input，可以设置width，height，margin，padding属性

当行内可替换元素不设置宽高时，宽高=所需宽高

②行内不可替换元素，如span，b，strong等，width、 height不起作用。margin，padding左右起作用，上下不起作用。用line-height来控制高度。

当行内不可替换元素不设置宽高时，宽高=所需宽高（字的高度及字数的宽度）

设置时，宽度=元素+padding+margin，与元素字数有关。

注：关于li元素横向显示

1.用inline，将块元素li转换为内联，其高度用line-height，宽度与li内容相关

2.用浮动float，因为li是块元素，可以设置宽高，使字数不同的li大小一样。

4.inline-block，内联块元素

可以设置width，height，margin，padding属性，前后不换行。

注：当不设置宽高时，与inline元素一样。

5.其他

可能的值

描述

none

此元素不会被显示。

block

此元素将显示为块级元素，此元素前后会带有换行符。

inline

默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block

行内块元素。（CSS2.1 新增的值）

list-item

此元素会作为列表显示。

run-in

此元素会根据上下文作为块级元素或内联元素显示。

compact

CSS 中有值 compact，不过由于缺乏广泛支持，已经从CSS2.1 中删除。

marker

CSS 中有值 marker，不过由于缺乏广泛支持，已经从CSS2.1 中删除。

table

此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。

table-row-group

此元素会作为一个或多个行的分组来显示（类似 <tbody>）。

table-header-group

此元素会作为一个或多个行的分组来显示（类似 <thead>）。

table-footer-group

此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。

table-row

此元素会作为一个表格行显示（类似 <tr>）。

table-column-group

此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。

table-column

此元素会作为一个单元格列显示（类似 <col>）

table-cell

此元素会作为一个表格单元格显示（类似 <td> 和<th>）

table-caption

此元素会作为一个表格标题显示（类似 <caption>）

inherit

规定应该从父元素继承 display 属性的值。

二．visibility属性

可能的值

描述

visible

默认值。元素是可见的。

hidden

元素是不可见的。

collapse

当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

inherit

规定应该从父元素继承 visibility 属性的值。

例如1：

<p>------------<span style="visibility:hidden;">我看不见</span>------------<br />------------<span style="visibility:visible;">我看的见</span>------------<br /></p>

结果：

例如2：

<table border="1">  <tr>    <td>Adams</td>    <td>John</td>  </tr>  <tr style="visibility:collapse;">    <td>Bush</td>    <td>George</td>  </tr>  <tr>    <td>Adams</td>    <td>John</td>  </tr></table>

结果：

三．cursor属性 ['kɝsɚ] 游标,光标,指针

值

描述

url

需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default

默认光标（通常是一个箭头）

auto

默认。浏览器设置的光标。

crosshair

光标呈现为十字线。

pointer

光标呈现为指示链接的指针（一只手）

move

此光标指示某对象可被移动。

e-resize

此光标指示矩形框的边缘可被向右（东）移动。

ne-resize

此光标指示矩形框的边缘可被向上及向右移动（北/东）。

nw-resize

此光标指示矩形框的边缘可被向上及向左移动（北/西）。

n-resize

此光标指示矩形框的边缘可被向上（北）移动。

se-resize

此光标指示矩形框的边缘可被向下及向右移动（南/东）。

sw-resize

此光标指示矩形框的边缘可被向下及向左移动（南/西）。

s-resize

此光标指示矩形框的边缘可被向下移动（南）。

w-resize

此光标指示矩形框的边缘可被向左移动（西）。

text

此光标指示文本。

wait

此光标指示程序正忙（通常是一只表或沙漏）。

help

此光标指示可用的帮助（通常是一个问号或一个气球）。

0 0