- 浏览: 1183253 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (350)
- Ajax研究 (2)
- javascript (22)
- struts (15)
- hibernate (12)
- spring (8)
- 我的生活 (28)
- jsp (2)
- 我的随笔 (84)
- 脑筋急转弯 (1)
- struts2 (2)
- ibatis (1)
- groovy (1)
- json (4)
- flex (20)
- Html Css (5)
- lucene (11)
- solr研究 (2)
- nutch (25)
- ExtJs (3)
- linux (6)
- 正则表达式 (2)
- xml (1)
- jetty (0)
- 多线程 (1)
- hadoop (40)
- mapreduce (5)
- webservice (2)
- 云计算 (8)
- 创业计划 (1)
- android (8)
- jvm内存研究 (1)
- 新闻 (2)
- JPA (1)
- 搜索技术研究 (2)
- perl (1)
- awk (1)
- hive (7)
- jvm (1)
最新评论
-
pandaball:
支持一下,心如大海
做有气质的男人 -
recall992:
山东分公司的风格[color=brown]岁的法国电视[/co ...
solr是如何存储索引的 -
zhangsasa:
-services "services-config ...
flex中endpoint的作用是什么? -
来利强:
非常感谢
java使用json所需要的几个包 -
zhanglian520:
有参考价值。
hadoop部署错误之一:java.lang.IllegalArgumentException: Wrong FS
大多数人很容易将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>
当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>
发表评论
-
有关 JavaScript 的 10 件让人费解的事情
2010-02-15 17:40 969JavaScript 可算是世界上 ... -
将滚动条(scrollbar)保持在最底部的方法
2010-02-03 21:44 3515有些时候(如开发聊天程序),我们需要将将滚动条(scrollb ... -
第一次配置dwr总结
2009-06-19 00:24 1296[1]:在MyEclipse下创建一个web工程。 [2]: ... -
利用javascript和css做的网页两侧滚动的图片
2009-06-16 11:08 1295直接下载就可以使用了! <!DOCTYPE ht ... -
用js来实现下拉框联动
2009-04-15 17:38 2103<html><head><met ... -
some character can not mapped using "iso-8859-1"
2009-01-14 09:27 13211. Eclipse-->Preferences..(M ... -
javascript在传递url(含有中文)时出现乱码!
2008-12-11 17:03 2026打搅可能都遇到过在写javascirpt代码时传递中文,在后台 ... -
javascript解析cookie
2008-12-09 17:35 1767/* * WebFXCookie class ... -
dtree使用手册以及简单的例子
2008-12-01 17:55 4339解压缩dtree.zip 包。 dtree目录下包括这些文 ... -
研究javascript的数组
2008-07-16 15:19 1222数组有四种定义的方式 ... -
[JavaScript]Cookie详解(转)
2008-06-02 09:31 1855cookie概述 假如利 ... -
对比 javascript url编码
2008-05-30 09:34 1140escape() 方法: 采用ISO Latin字符集对指定的 ... -
javascript数据类型转换
2008-05-30 09:33 1110parseFloat 转换成浮点数 parseInt 转换成整 ... -
如何在初始化时把对应的checkbox使选中与不选中的讨论
2008-05-30 09:21 2884首先我们大家在写页面的时候可能回经常遇到checkbox、ra ... -
各种javascript网站
2008-05-26 11:56 2454关键字: javascript javasc ... -
javascript 基础 107个javascript语句
2008-05-26 11:50 10611.document.write(""); ... -
javascript 常用脚本
2008-05-26 11:48 14041. oncontextmenu="window.e ... -
javascript 常用代码
2008-05-26 11:44 2127JavaScript常用代码 + 常用代码 ______ ... -
使右下角出现DIV
2008-05-26 10:52 2600<HTML> <HEAD> <M ... -
让 FireFox 也支持 outerHTML
2008-05-26 10:47 1189if(typeof(HTMLElement)!="u ...
相关推荐
接下来,我们将在CSS中定义这些元素的样式,包括应用3D转换和设置`backface-visibility`属性。我们使用`transform-style: preserve-3d;`确保子元素在3D空间中保持其3D位置,然后对`.flipper`应用翻转动画: ```css ...
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,...
在CSS中,`display`和`visibility`两个属性都是用于控制元素的可见性,但它们之间存在着本质的区别。首先,`visibility`属性主要用于决定元素是否可见,而不改变元素的布局。当`visibility`设置为`hidden`时,元素的...
本示例主要讲解如何使用JavaScript来控制控件的隐藏与显示,特别是通过设置`style.visibility`属性来实现这一功能。下面我们将深入探讨这个知识点。 首先,`style.visibility`属性是CSS中用于控制元素可见性的属性...
虽然媒体查询(media queries)在CSS3中得到扩展,但CSS2也提供了一些基本的媒体类型,如`screen`和`print`,允许开发者针对不同类型的输出设备定制样式。 总的来说,CSS2中文手册是一份宝贵的参考资料,它涵盖了...
《CSS2中文手册》是一个关于层叠样式表(Cascading Style Sheets,简称CSS)的参考资料,主要针对CSS2规范进行详细阐述。CSS是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现的语言,它允许我们将...
### 精通div+css网页样式与网页布局 #### 一、基础知识介绍 **div+css**是一种网站页面布局的方式,它通过结合HTML中的`div`元素与CSS(层叠样式表)来构建和设计网页。这种方式不仅提高了网页的可维护性,还增强...
CSS2.0虽然没有直接支持动画和过渡,但`opacity`属性可调整元素透明度,`visibility`控制元素的可见性,这些为后续的CSS3特效打下了基础。 **九、多列布局** CSS2.0中的`column-count`和`column-gap`属性允许创建多...
在Web开发领域,CSS(Cascading Style Sheets)与Ajax(Asynchronous JavaScript and XML)都是不可或缺的技术组件。尽管Ajax主要用于创建动态、交互式的网页,而CSS主要负责网页的布局和样式设计,但它们在实际应用...
- **内联引用**:直接在HTML标签中使用`style`属性来指定样式,例如`<p style="color: red;">这段文字是红色的。</p>`。 - **优点**:非常灵活,适用于快速修改特定元素的样式。 - **缺点**:代码混杂,不易维护;...
【CSS3D演示HTML】是关于使用CSS3的3D转换技术来创建具有立体效果的网页元素的示例。在现代网页设计中,CSS3D(CSS...在实际项目中,CSS3D技术应当谨慎使用,确保在不影响性能和兼容性的前提下,提升网页的视觉吸引力。
CSS(Cascading Style Sheets)是网页设计中的核心技术,用于定义页面的布局、颜色、字体等视觉样式。在软件开发领域,特别是用户界面(UI)设计中,CSS同样发挥着重要作用。"基于CSS的软件仿真模式"是一种利用CSS来...
- **`style.visibility`与`style.display`的区别:** 虽然`style.display`和`style.visibility`都能控制元素的可见性,但它们有不同的效果。`display:none`会移除元素及其占用的空间,而`visibility:hidden`则会让...
在网页布局和样式设计中,`display` 和 `visibility` 是两个非常重要的CSS属性,它们都能用来控制元素的可见性,但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别,并通过示例来具体说明。 首先,`...
- **`visibility`与`display`的区别:** - `visibility: hidden`:使元素不可见,但保留其在页面布局中的空间。 - `display: none`:元素完全不显示,并且不占用任何空间。 - **清除浮动:** - 使用`clear`属性...
当与`rotateX`, `rotateY`或`rotateZ`一起使用时,可以创建出3D旋转效果,使元素看起来像是在三维空间中转动。 例如,要使一个div元素围绕Z轴旋转30度,可以这样设置: ```css div { transform: rotateZ(30deg); ...
【CSS浏览器兼容性处理】 在Web开发中,CSS(层叠样式表)是用于控制网页元素样式的关键技术...在实际开发中,可以结合使用条件注释、CSS hack或使用专门的CSS预处理器(如Sass、Less)来进一步优化和管理兼容性问题。
这种技术的核心是使用HTML中的`<div>`元素作为内容的容器,并通过CSS(Cascading Style Sheets)来定义这些容器的外观和布局。本实例集包含了上百种不同的`div+css`布局和样式开发案例,旨在帮助开发者深入理解和...
- 可以通过`background-image`或`content`属性在CSS中使用。 **Float(浮动)** - 允许元素脱离正常流,向左或向右浮动。 - 常用于创建多列布局或环绕图像。 **Gray(灰色)** - 一种颜色,可以通过十六进制`#...
虽然不是CSS专用词汇,但在JavaScript等编程语言中使用广泛。 - **Fixed**: 固定定位。CSS中的`position:fixed`属性用于固定元素在视口中的位置,即使页面滚动也不会移动。 - **Four**: 四个。数量词,可用于描述CSS...