您现在的位置是：网站首页> 编程资料编程资料

css的四种隐藏方式文本超出部分隐藏的两种方法CSS3 Bootstrap 3隐藏滑动侧边栏菜单特效CSS隐藏页面元素的5种方法CSS控制DIV层显示和隐藏的实现方法CSS实现隐藏和显示功能的代码CSS隐藏页面文字的几种方式总结CSS文本超出指定宽度后隐藏并显示为省略号的实现方法CSS“隐藏”元素的多种方法的对比CSS怎么隐藏滚动条(三种方法)jQuery+CSS3实现的多套风格隐藏点击弹出登录窗口表单特效源码

2021-09-04 1080人已围观

简介本文主要对css的四种隐藏方式进行介绍。具有一定的参考价值，下面跟着小编一起来看下吧

1.opacity:0只是把元素隐藏起来了，但是还是占有布局，所以还是对布局有影响

snda:opacity:0只是把元素隐藏起来了，但是还是占有布局，所以还是对布局有影响

ppskdkad

.div1{ opacity: 0; width:200px; height:200px; border:1px solid red; }

2.visibility:hidden还是只是把元素隐藏了，但是还是占有布局

这是第二个div visibility:hidden还是只是把元素隐藏了，但是还是占有布局

看看效果

.div2{ visibility: hidden; width:200px; height:200px; border:1px solid red; }

3.display:none不会影响到布局

这是第三个DIV display:none不会影响到布局

不信你看

.div3{ display: none; width:200px; height:200px; border:1px solid red; }

4.position:absolute不会影响到布局

这个是第四个div 我觉得也不会影响到布局但是到底会不会一起来看看吧果然这个也不会影响到布局
看看
v

.div4{ position: absolute; top:-9999px; left:-9999px; width:200px; height:200px; border:1px solid red; }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！