html display none取消,display none是什么意思？

首先我们来看一下display none的意思是什么？

display:none的意思：

隐藏元素并脱离文档，流就是隐藏该区域，不占实际空间，但对后台来说真实存在，可以获取被隐藏的元素简单的来说就是将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在。

看完了display none的意思后，我们就接着来看一下display none的用法。

display none的用法：

我们直接来看一个display:none的示例：

div{

background: lightblue;

width: 200px;

height: 200px;

}

span{

background: pink;

display: none;

}

需要隐藏的区域

上述代码中span若是没有设置display:none属性值；效果如下：

设置了display:none属性值，则就变成了如下图所示的效果：需要隐藏的区域就被隐藏了。

使用display:none需要注意的是：

1、如果是通过样式文件或方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题。

2、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。

html display none取消,display none是什么意思？相关推荐

php display block,CSS display (block inline none )常见属性和用法教程
display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...
利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
html display 显示,CSS display显示
显示或隐藏我们可以通过使用visibility属性或display属性来显示或隐藏元素. 要隐藏元素,请将display属性设置为"none"或将visibility属性设置为& ...
table row设置cell的html,display:table、display:table-row和display:table-cell的用法_html/css_WEB-ITnose...
. 从以上属性值的基本概念定义可以看出,它们可以打造一个非table相关标签建立的表格效果,代码实例如下: 蚂蚁部落从以上代码的表现来看,为div添加了相关属性值之后,差不多完全具有了表格的相关特性 ...
CSS属性display的用法 display=
display是设置元素的浮动特征,要区别visibility属性(visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏))是 ...
CSS中display:block和display:flax使用记录
CSS中display:block和display:flax使用记录代码: (css) .navigation ul li a{position:relative;width: 100%;text- ...
display:table和display:table-cell的妙用
display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...
oracle配DISPLAY,ORACLE安装DISPLAY变量设置
安装oracle时,如果不是以oracle用户登录图形界面,而是在root用户下su 到oracle,安装时会报错无法使用命令 /usr/X11R6/bin/xdpyinfo 自动检查显示器颜色.请 ...
flexbox的学习，display：flex display：box 淘宝触屏版、饿了么网布局分析分析
Flex 布局教程:语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 父: display:flex: 父属性设置 flex-d ...

html display none取消,display none是什么意思？

html display none取消,display none是什么意思？相关推荐

最新文章

热门文章