`

css中style与visibility区别与如何使用

阅读更多
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。
当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置
---------------------------------------------------------------

例子:

<script language="JavaScript">

function toggleVisibility(me){

if (me.style.visibility=="hidden"){

  me.style.visibility="visible";

  }

else {

  me.style.visibility="hidden";

  }

}

</script>



<div onclick="toggleVisibility(this)" style="position:relative">第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。</div>

<div>因为visibility会保留元素的位置,所以虽然第一行看不见了但位置还在,第二行内容不会上下移动。</div>

---------------------------------------------------------------

解释:注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为"hidden"的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。

---------------------------------------------------------------

另一方面,display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。



当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。

将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。

--------------------------------------------------------------

例子:-

<script language="JavaScript">

function toggleDisplay(me){

if (me.style.display=="block"){

  me.style.display="inline";

  alert("文本现在是:'inline'.");

  }

else {

  if (me.style.display=="inline"){

  me.style.display="none";

  alert("文本现在是:'none'. 3秒钟后自动重新显示。");

  window.setTimeout("blueText.style.display='block';",3000,"JavaScript");

  }

  else {

  me.style.display="block";

  alert("文本现在是:'block'.");

  }

  }

}

</script>



<div>在<span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>

---------------------------------------------------------------

最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)

---------------------------------------------------------------

display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例:



<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1>

<P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P>

<P>

<input type=button value="Inline" onclick="oSpan.style.display='inline'">

<input type=button value="Block" onclick="oSpan.style.display='block'">

<input type=button value="None" onclick="oSpan.style.display='none'">

<input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'"><input type=button value="Visible" onclick="oSpan.style.visibility='visible'">

</P>



<UL>

<LI>将元素设为 block,会在该元素后换行。</LI>

<LI>将元素设为 inline,会消除元素换行。</LI>

<LI>将元素设为 none,隐藏该元素内容。</LI>

</UL>

---------------------------------------------------------------

《太难了》:

同时,关于display:inline;和float:left;两者的区别可以参看该篇文章:

(display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:left,是针对块级元素的浮动形式,是不同形式的两种状态。)http://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html

---------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>float &inline</title>

<style>

*{text-align:center;padding:4px;}

div,p{text-align:left;}

span{/*float:right;*/ background:#f5f5f5;border-left:1px #eee solid;border-top:1px #eee solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;}

ul#inline li{ display:inline; list-style:none;border-left:1px #ccc solid;width:300px; background:#f5f5f5;/* float:left*/;}

ul#float li{ float:left;display:inline; list-style:none;border-left:1px #666 solid;width:300px; background:#f5f5f5; }

</style>

</head>



<body>

<span style="width:300px;">span为内联/inline元素,给他宽度赋值是没有效果的。</span>

<span style="width:100px; float:right;">span为内联/inline元素,给他宽度赋值100px+float:right;可以看到有了宽度。</span>



<div>

<p>这个li被定义为内联/inline,设置宽度没有效果</p>

<ul id="inline">

    <li>test</li>

    <li>test</li>

</ul>

</div>

<div>

<p>这个li被定义为内联/inline+float:left,设置宽度有效果</p>

<ul id="float">

    <li>test</li>

    <li>test</li>

</ul>

</div>

</body>

</html>

分享到:
评论

相关推荐

    使用CSS3 backface-visibility属性制作3D翻转动画效果.zip

    接下来,我们将在CSS中定义这些元素的样式,包括应用3D转换和设置`backface-visibility`属性。我们使用`transform-style: preserve-3d;`确保子元素在3D空间中保持其3D位置,然后对`.flipper`应用翻转动画: ```css ...

    CSS Display与Visibility的不同

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,...

    CSS属性中Display与Visibility区别分析

    在CSS中,`display`和`visibility`两个属性都是用于控制元素的可见性,但它们之间存在着本质的区别。首先,`visibility`属性主要用于决定元素是否可见,而不改变元素的布局。当`visibility`设置为`hidden`时,元素的...

    用js实现控件的隐藏及style.visibility的使用

    本示例主要讲解如何使用JavaScript来控制控件的隐藏与显示,特别是通过设置`style.visibility`属性来实现这一功能。下面我们将深入探讨这个知识点。 首先,`style.visibility`属性是CSS中用于控制元素可见性的属性...

    CSS2 中文手册CSS2 中文手册

    虽然媒体查询(media queries)在CSS3中得到扩展,但CSS2也提供了一些基本的媒体类型,如`screen`和`print`,允许开发者针对不同类型的输出设备定制样式。 总的来说,CSS2中文手册是一份宝贵的参考资料,它涵盖了...

    css.chm CSS2中文手册

    《CSS2中文手册》是一个关于层叠样式表(Cascading Style Sheets,简称CSS)的参考资料,主要针对CSS2规范进行详细阐述。CSS是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现的语言,它允许我们将...

    精通div+css网页样式与网页布局

    ### 精通div+css网页样式与网页布局 #### 一、基础知识介绍 **div+css**是一种网站页面布局的方式,它通过结合HTML中的`div`元素与CSS(层叠样式表)来构建和设计网页。这种方式不仅提高了网页的可维护性,还增强...

    CSS2.0 中文手册(电子书)

    CSS2.0虽然没有直接支持动画和过渡,但`opacity`属性可调整元素透明度,`visibility`控制元素的可见性,这些为后续的CSS3特效打下了基础。 **九、多列布局** CSS2.0中的`column-count`和`column-gap`属性允许创建多...

    CSS在Ajax开发中的作用

    在Web开发领域,CSS(Cascading Style Sheets)与Ajax(Asynchronous JavaScript and XML)都是不可或缺的技术组件。尽管Ajax主要用于创建动态、交互式的网页,而CSS主要负责网页的布局和样式设计,但它们在实际应用...

    CSS的设计与应用

    - **内联引用**:直接在HTML标签中使用`style`属性来指定样式,例如`&lt;p style="color: red;"&gt;这段文字是红色的。&lt;/p&gt;`。 - **优点**:非常灵活,适用于快速修改特定元素的样式。 - **缺点**:代码混杂,不易维护;...

    css3d演示html

    【CSS3D演示HTML】是关于使用CSS3的3D转换技术来创建具有立体效果的网页元素的示例。在现代网页设计中,CSS3D(CSS...在实际项目中,CSS3D技术应当谨慎使用,确保在不影响性能和兼容性的前提下,提升网页的视觉吸引力。

    基于css 软件仿真模式

    CSS(Cascading Style Sheets)是网页设计中的核心技术,用于定义页面的布局、颜色、字体等视觉样式。在软件开发领域,特别是用户界面(UI)设计中,CSS同样发挥着重要作用。"基于CSS的软件仿真模式"是一种利用CSS来...

    js中style.display=&quot;&quot;无效的解决方法.docx

    - **`style.visibility`与`style.display`的区别:** 虽然`style.display`和`style.visibility`都能控制元素的可见性,但它们有不同的效果。`display:none`会移除元素及其占用的空间,而`visibility:hidden`则会让...

    display和visibility的区别示例介绍

    在网页布局和样式设计中,`display` 和 `visibility` 是两个非常重要的CSS属性,它们都能用来控制元素的可见性,但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别,并通过示例来具体说明。 首先,`...

    web前端CSS题库.docx

    - **`visibility`与`display`的区别:** - `visibility: hidden`:使元素不可见,但保留其在页面布局中的空间。 - `display: none`:元素完全不显示,并且不占用任何空间。 - **清除浮动:** - 使用`clear`属性...

    Css实现的3D效果

    当与`rotateX`, `rotateY`或`rotateZ`一起使用时,可以创建出3D旋转效果,使元素看起来像是在三维空间中转动。 例如,要使一个div元素围绕Z轴旋转30度,可以这样设置: ```css div { transform: rotateZ(30deg); ...

    div+css中常见的浏览器兼容性处理

    【CSS浏览器兼容性处理】 在Web开发中,CSS(层叠样式表)是用于控制网页元素样式的关键技术...在实际开发中,可以结合使用条件注释、CSS hack或使用专门的CSS预处理器(如Sass、Less)来进一步优化和管理兼容性问题。

    div+css样式与布局实例

    这种技术的核心是使用HTML中的`&lt;div&gt;`元素作为内容的容器,并通过CSS(Cascading Style Sheets)来定义这些容器的外观和布局。本实例集包含了上百种不同的`div+css`布局和样式开发案例,旨在帮助开发者深入理解和...

    css开发字典

    - 可以通过`background-image`或`content`属性在CSS中使用。 **Float(浮动)** - 允许元素脱离正常流,向左或向右浮动。 - 常用于创建多列布局或环绕图像。 **Gray(灰色)** - 一种颜色,可以通过十六进制`#...

    css-dictionary(CSS常用英语词汇详解)

    虽然不是CSS专用词汇,但在JavaScript等编程语言中使用广泛。 - **Fixed**: 固定定位。CSS中的`position:fixed`属性用于固定元素在视口中的位置,即使页面滚动也不会移动。 - **Four**: 四个。数量词,可用于描述CSS...

Global site tag (gtag.js) - Google Analytics