易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS中visibility与display的区别

CSS中visibility与display的区别
CSS中的属性visibility与display都可实现显示、隐藏元素的效果,但他们之间也有很大的区别。
visibility规定元素的内容是否显示;而display规定元素本身的现实方式,可以决定元素本身是否可见。
visibility的visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"时,虽然元素不可见,但它也会占据页面上的空间。
若想让其释放空间可以设置style.height = "0px"; style.width = "0px";也可将display属性设为:none。
以下是www.w3school.com.cn中对visibility与display的属性值的说明:
1.        visibility 属性规定元素是否可见。
可能的值

描述
visible
默认值。元素是可见的。
hidden
元素是不可见的。
collapse
当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit
规定应该从父元素继承 visibility 属性的值。
 
2.        display 属性规定元素应该生成的框的类型。
可能的值

描述
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
此元素会


相关文档:

一个CSS+JavaScript编写的跑马灯程序

转自:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片跑马灯</title>
</head>
<body>
<div style="overflow:hidden; width:350px" id='div'>
<!-- 这里是第一个关键点,o ......

纯CSS无图实现DIV边框平滑阴影

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS边框阴影< ......

图片无缝滚动代码(DIV+CSS+JavaScript)

<div id="imgbox" style="height:110px;width:600px;overflow:hidden;">
<div id="imgbox1" style="float:left;width:1000%">
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">
<img src="http://www ......

CSS 菜单系列:用 UL 制作横向导航菜单-入门版

用 UL 制作菜单现在非常流行,那我们也凑凑热闹,第一讲就说说用 UL 制作导航菜单的方法,这一讲是入门版,只是实现基本功能,欢迎各位发布自己的实现方式。
我们先定一下 HTML 代码:
<ul id="menu">
<li><a href="http://www.codebit.cn">CodeBit.cn</a></li>
<li><a href="h ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号