CSS隐藏元素

旧城等待， 2023-06-27 06:22 17阅读 0赞

①opacity
opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。

②visibility
该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，只要给想要显示的子元素添加visibility：visible;就可以了

③dispaly
该属性才是真正意义上的隐藏元素,当元素的display属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。给他和它的子元素添加的任何动画效果交互效果都会不起作用。jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。

④Position
该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前可使页面。

原文链接：https://blog.csdn.net/weixin\_41910848/article/details/81875725

发表评论

表情：
评论列表 （有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS隐藏元素

    ①opacity opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。 ②vi

    旧城等待，旧城等待，/ 0 赞/ 18 阅读

    相关 CSS隐藏元素

     在制作网页时，隐藏内容也是一种比较常用的手法，它的作用一般有：隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏弹出层、隐藏滚动条、清除错位和浮动等等。使用CSS即可使

    小咪咪小咪咪/ 0 赞/ 290 阅读