CSS中19种隐藏元素的方法

1.width:0;/height:0;

这种方式的缺点是隐藏不了文字,如果需要隐藏文字，那么：

2.针对文字font-size:0;

3.针对文字color:transparent;

4.opacity:0;
原理是把元素设置为透明。opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。

5.通过定位，把元素移出屏幕外即可。假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity和visibility影响布局mdisplay不影响布局但又无法直接交互）。在这种情况下，只能考虑将元素移出可视区域。这个办法既不会影响布局，有可能让元素保持可以操作。

div{
    
    
    position:absolute;
    left:-999999px;
}

6.通过text-indent实现文字隐藏效果，通过负值缩进，超出可视区

div {
    
    
    text-indent:-999999px;
}

适用于：给页面添加logo，logo下面覆盖想要被搜索引擎搜索到的文字，即可用这个方法。

7.通过z-index隐藏。

div{
    
    
    z-index:-9999;
}

8.通过overflow来隐藏部分。

<style>
p{
     
     
    width:16ch;
    overflow:hidden;
    white-space:pre;
    text-overflow:ellipsis;
}
</style>
<p>这是一段文字这是一段文字这是一段文字这是一段文字</p>

在这里插入图片描述

这里写图片描述

超出7个汉字后的部分会被隐藏！

9.通过visibality将元素设置为不可见，如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏
注意，如果一个元素的visibility被设置为hidden，同时想要显示它的某个子孙元素，只要将那个元素的visibility显式设置为visible即可。
visibality隐藏盒子，而且占位置。

div{
    
    
    visibality:hidden;
}

10.通过display将元素彻底隐藏,，且不占位置。display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。

不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

div{
    
    
    display:none;
}

11.max-width或者max-height设置为0即可

12.通过transform的translate将元素移出屏幕,原理同position的left;

div{
    
    
    transform:translate(-99999px);
}

13.将元素的缩放scale设置为0即可；

div{
    
    
    transform:scale(0);
}

14.通过skew让元素重叠(空间想象，旋转),原理类似width:0;

div{
    
    
    transform:skew(90deg);
}

15.设置margin为负值

div{
    
    
    margin:-99999px;
}

16.将元素裁剪：

div{
    
    
    -webkit-clip-path:polygon(0px,0px,0px,0px,0px,0px,0px,0px);
}

type=”hidden”的表单元素
宽度和高度都显式设置为0
一个祖先元素是隐藏的，该元素是不会在页面上显示

此文章是转载于其他博主，如有侵权，请联系删除
转载来源：https://www.jianshu.com/p/af5e4e9a4f50

CSS中19种隐藏元素的方法

猜你喜欢