CSS隐藏元素的方法

CSS隐藏元素的方法

CSS隐藏元素的方法

使用​​CSS​​​隐藏元素的主要方式有​​diaplay: none;​​​、​​opacity: 0;​​​、​​visibility: hidden;​​​、​​position: absolute; overflow: hidden;​​​、​​clip-path: polygon(0 0, 0 0, 0 0, 0 0);​​​、​​height: 0; overflow: hidden;​​。

diaplay

opacity

visibility

当​​visibility​​​属性值为​​hidden​​​的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与​​opacity​​​不同的是它不会响应任何用户交互，元素在读屏软件中也会被隐藏，如果对于子元素的​​visibility​​​被设置为​​visible​​​而父元素的​​visibility​​​设置为​​hidden​​，子元素依旧可以显示而父元素会被隐藏。

position

使用​​position​​​与​​overflow​​​属性的意义就是把元素脱离文档流移出视觉区域，超出屏幕显示的部分隐藏掉，使用这两个属性隐藏主要就是通过控制方向​​top​​​、​​left​​​、​​right​​​、​​bottom​​​达到一定的值，离开当前显示区域并将超出部分裁剪，此外在未隐藏时设定好相关样式，在动态添加​​class​​时即可实现过渡动画。

clip-path

​​clip-path​​​属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏，直接将元素裁剪之后即可实现隐藏效果，该属性兼容性一般，具体可以查阅​​0;​​​将元素高度设置为​​0​​​，使用​​overflow: hidden​​​将超出部分裁剪隐藏，即可实现隐藏效果，如果需要使用这两个属性制呈现过渡动画的话，需要将​​height​​​给予一个确定的值，不能是​​auto​​。

代码示例

每日一题

https://github.com/WindrunnerMax/EveryDay

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。