码迷,mamicode.com
首页 > Web开发 > 详细

CSS隐藏元素的五种方法

时间:2020-02-22 11:59:42      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:问题   单选按钮   显示   用户   class   自己的   需求   盒模型   splay   

1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute

display

    display属性依照词义真正隐藏元素。将display属性设为none确保素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

    任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的,他的任何不同状态值之间的切换总是会立即生效。

    不过请注意,通过DOM依然可以访问到这个元。因此你可以通过DOM来操作它。就跟其他未被隐藏的元素一样,例如$(“”)等

position

       有些时候,我们可能会遇到这样一种情况,我们希望某个元素能够不影响我们的页面布局,但是我们又想与之交互这种情况下opacity 和 visibility会 影响布局, display 不影响布局但又无法直接交互,所以以上这三种都不能满足这种需求,这时候我们就可以使用Position这个属性将元素移出可视区域,这样既不会影响布局,又能让元素可以操作。(就像又建了一层图层)不过我们要避免使用这个方法去隐藏任何可以获得焦点的元素,因为如果那么做,当用户让那个元素获得焦点时,会导致一个不可预料的焦点切换问题。这个方法在创建自定义复选框和单选按钮时经常被使用。

opacity:0

     opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互

visibility

     第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性,被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏。

    注意,如果一个元素的visibility被设置为hidden,同时想要显示它的某个子孙元素,只要将那个元素的visibility显式设置为visible即可。visibility与display:none不同的地方还在于被设置visibility:hidden的元素的子孙元素若是被设置成visibility: visible;的话,那么该元素就是可见的,但是display:none则不同,即使它的子孙元素被设置成display:block,该子孙元素也是不可见的。

总结:

1、diaplay:none  真正意义上的隐藏,页面源码都不显示隐藏的页面源码,隐藏的元素不占用任何空间,元素的盒空间都不生成,好像元素就不存在,但是可以通过DOM操作访问到,如$(" ")

2、position:absolute 为了不影响页面布局又想与之交互,opacity 和 visibility会 影响布局, display 不影响布局但又无法直接交互 position属性将元素移出原来的页面显示(像是页面上的又一层)并可以与之交互,如填表单之类的可以使用

3、opacity:0 opacity属性时设置元素的透明度,会影响页面布局 但只是不可见 元素位置显示一块空白,会影响页面交互操作

4、visibility:hidden  也只是显示不可见,元素位置处显示一块空白,会影响布局,不过不会影响交互操作。


 

 



 

CSS隐藏元素的五种方法

标签:问题   单选按钮   显示   用户   class   自己的   需求   盒模型   splay   

原文地址:https://www.cnblogs.com/forforever/p/12344547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!