前端 css隐藏页面元素的方式的有哪些一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

引言

在日常开发中我们通常会用到隐藏元素，控制隐藏元素的方式有很多种，你是否仔细观察记录每种方式的是实现过程与区别呢？下面我们一起看下可以隐藏html元素的几种方式吧。

通过控制css属性display的值，将display设置为none，可以控制元素的隐藏。也是我们开发过程中使用到的最多的一种，这种隐藏方式会将元素彻底从页面中删除，不能触发任何事件。元素也不占用任何空间，通过该属性控制显示隐藏，会导致页面的回流和重绘。实现方式

.hide{
    display: none;
}

通过控制元素的css属性opacity透明度属性，将opacity:0可以将元素设置为透明，控制元素的隐藏。元素实际还是在页面存在的，只是肉眼看不到，事件还是可以触发相应的，也占据页面空间。实现方式：

.hide{
    opacity:0;
}

通过控制素的css的visibility属性，将visibility属性值设置为hidden，可以实现元素的隐藏。该元素在页面上仅仅是隐藏，占据页面空间，也具有dom结点，只是不能触发响应事件。这种方式也会触发页面的重绘，但是不会触发页面回流。

.hide{
    visibility:hidden;
}

这种方式就是通过将元素的宽高设置为0，使其不占据页面空间。使用属性overflow:hidden控制其子元素的隐藏，并清除会影响页面的布局的属性，比如margin，padding等。实现如下：

.hide{
    margin:0;     
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

通过定位的方式，将元素移到可视窗口外。

.hide{
    position: absolute;
    top: -999999px;
    left: -999999px;
}

元素通过裁剪的方式实现隐藏

.hide{
    clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

实现元素显示隐藏的方式有多种，在开发中具体采用哪种实现方式，要考虑到显示隐藏操作引发的回流与重绘问题。