display:none与visible:hidden的区别 slideDown与

display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

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

slideDown() 方法以滑动方式显示被选元素。

注意:slideDown() 适用于通过 jQuery 方法隐藏的元素,或在 CSS 中声明 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。

slideUp() 方法以滑动方式隐藏被选元素。

注意:隐藏的元素不会被完全显示(不再影响页面的布局)。

时间: 2024-10-29 02:58:40

display:none与visible:hidden的区别 slideDown与的相关文章

display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到. visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到. 例子: <html> <head> <title>display:none和visible:hidden的区别</title

play:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到. visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到. 例子: <html> <head> <title>display:none和visible:hidden的区别</title

display:none;与visibility:hidden;的区别

如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙.但特殊情况下我们只需要隐藏这个元素, 但它的位置不能被占了,那该怎么实现呢?接下来我们来看css的另外一个属性Visibility属性. visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 来看看下面的这个例子: XML/HTML代码 <divstyle="width:100px;hei

display:none与visibility:hidden的区别

visibility(透明度):隐藏对应的元素单不挤占该元素元来的空间. display(展示):隐藏对应的元素并且挤占该元素元来的空间. 通俗点来说 display:none的话会让某一段代码不在前台显示,但是下边的弄容就自动上移或者右移来填补这个空隙,对象不占任何空间. visibility:hidden只是让元素透明度调低被覆盖了而已,所以我们看不到,就被隐藏了起来.但是元素本身是存在的所以会占据元来空间.感觉这个和index属性有点像. 以下内容  写于2017年5月23日   来源于C

【javascript】jq之display:none与visible:hidden

今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性,那么如果在类似于下面的布局中运用,会发生什么情况? 先把布局的代码贴上来 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charse

jq之display:none与visible:hidden

http://www.cnblogs.com/linxiong945/p/4075146.html 今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性,那么如果在类似于下面的布局中运用,会发生什么情况? 先把布局的代码贴上来 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="

前端面试题-display:none和visibility:hidden的区别

一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 visibility:hidden 隐藏的元素空间依旧存在. 三.回流和渲染 display:none 隐藏产生回流和重绘(reflow 和 repaint),而 visibility:hidden 只产生重绘. 三.株连性 display:none 就是"株连性"明显的声明:一旦父节点元素

个人收集(转载)CSS中 display:none和visibility:hidden的区别

visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏览时保留位置:而display:none视为不存在,且不加载! 1.visibility:hidden--为隐藏的对象保留其物理空间 HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在. 2.display: none--不为被隐藏的对象保留其物理空间 HTML元素(

display:none和visibility:hidden的区别[]

display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空间没有改变(看不见但摸得到),等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失(看不见也摸不到).”这样的解释.但是我觉得并不够,所以就想了一下关于他的一个加载问题.有属性display:none;的结构在加载页面时,是否会同时加载呢?或则是当他变成display:blo