大学培训中心网站建设,自己怎样开网站,广告图文制作用哪个软件,开淘宝网店的全流程文章目录 CSS中 #xff0c;有哪些方式可以隐藏页面元素实现方式display#xff1a;nonevisibility:hiddenopacity:0设置height 、width属性为0position:absoluteclip-path小结 CSS中 #xff0c;有哪些方式可以隐藏页面元素
实现方式
通过 css 实现隐藏元素方法有如下 : … 文章目录 CSS中 有哪些方式可以隐藏页面元素实现方式displaynonevisibility:hiddenopacity:0设置height 、width属性为0position:absoluteclip-path小结 CSS中 有哪些方式可以隐藏页面元素
实现方式
通过 css 实现隐藏元素方法有如下 :
displaynonevisibilityhiddenopacity:0设置height 、width属性为0。positionabsoluteclip-path
displaynone 元素本身占有的空间就会被其他元素占有 也就是说它会导致浏览器的重排和重绘 消失后 自身绑定的事件不会触发 也不会有过渡效果 特点 元素不可见 不占据空间 无法响应点击事件 visibility:hidden 从页面上仅仅是隐藏该元素 DOM结果均会存在 只是当时在一个不可见的状态 不会触发重排 会触发重绘 给人的效果是隐藏了 所以他自身的事件不会触发 特点 元素不可见 占据页面空间 无法响应点击事件 opacity:0 属性表示元素的透明度 将元素的透明度设置为。后 在我们用户眼中 元素也是隐藏的 如果利用 animation 动画 对 。pacity 做变化 (animation会默认触发GPU加速) 则只会触发 GPU 层面的 composite 不会触发重绘 特点 改变元素透明度 元素不可见 占据页面空间 可以响应点击事件 设置height 、width属性为0
将元素的 margin border padding height 和 width 等影响元素盒模型的属性设置成 0 ,
1 .hiddenBox {
2 margin:0;
3 border:0;
4 padding:0;
5 height:0;
6 width:0;
7 overflow:hidden;
8 }特点 元素不可见 不占据页面空间 无法响应点击事件
position:absolute
1 .hide {
2 position: absolute;
3 top: -9999px;
4 left: -9999px;
5 }特点 元素不可见 不影响页面布局
clip-path
.hide {clip-path: (0px,0px 0px,0px 0px,0px 0px);
}特点 元素不可见 占据页面空间 无法响应点击事件
小结
display:none visibility:hidden 用途并不是用于隐藏元素 所以并不推荐使用它们
