内蒙古住房城乡建设厅网站,网站建设视频教程。,网站发展方向,广东圆心科技网站开发建站教程详解CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display、visibility和opacity这三种了display:none设置元素不可见并且连盒模型也不生成#xff0c;一般用于不占空间的隐藏元素。display属性规定元素应该生成的框的类型#xff0c;当其值为“none”时可以规定元素不生成…CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display、visibility和opacity这三种了display:none设置元素不可见并且连盒模型也不生成一般用于不占空间的隐藏元素。display属性规定元素应该生成的框的类型当其值为“none”时可以规定元素不生成框隐藏该元素可以理解成在页面中把该元素删除掉一样。visibility:hiddenvisibility属性可以设置元素是否可见。 visible为可见hidden为不可见占据空间。 而如果父元素为visibility:hidden但若将其子元素设为visibility:visible则子元素依旧可见。opacity:0opacity可以设置透明度01. 但是设置透明度为0虽然元素也看不见了但是它确实依旧存在页面中且占据位置的有时候会影响用户交互。overflow:hidden这个也可以实现元素隐藏不过有点局限性是 只能超出盒子的部分隐藏移出视口利用定位直接将元素的top和left值设置的足够大的负数就可以把它移出视口也就是屏幕上看不见。如 left:-9999px 或 transform:translateX(-9999px)z-index将元素的z-index设为负值也可以实现隐藏效果。相当于至于了最最底层覆盖比如有一个正方形的盒子但现在不需要了可以在其上面放置一个和背景色相同的元素这样视觉角度是隐藏了。 可以用 ::after伪元素实现display、visibility、opacity的区别相同之处都是能够实现元素的隐藏效果区别性能visibility:hidden 比 display:none 在性能上会好一些因为display:none在切换显示与隐藏时页面会产生回流和重绘。 而 visibility和opacity不会产生回流是否占据空间display 不会在文档流中占位浏览器也不会解析该元素相当于就没有这个元素了。visibility依旧在文档流中占位浏览器也会解析该元素只是视觉上消失了。动画效果transition对 display和visibility是无效的对opacity是有效的事件绑定display:none就认为它已经不存在了所以自然是无法触发上面绑定的事件visibility虽然占据空间但也无法触发opacity是可以触发绑定事件的子元素继承display:none 不会被子元素继承,给子元素设置displayblock;子元素不会显示visibility:hidden 会被子元素继承可以通过设置子元素visibility:visible 可以让子元素显示出来opacity: 0 也会被子元素继承给子元素设置opacity: 1子元素不会显示
