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>
结果:
本例中把display设置成none属性我们发现div元素的内容不被显示且不保留元素本该显示的空间,但是 visibility: hidden是会保留的元素本该显示的空间。这就是两者的区别。
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 | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |