首页 建站教程 WEB前端 正文

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据空间,是否可以点击等)(一) display: none;特点:元素不可见,不占据空间,无法响应点击事件。.hide{ display: none;...

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据空间,是否可以点击等)

(一) display:  none;
特点:元素不可见,不占据空间,无法响应点击事件。

.hide{
    display: none; 
}

(二) visibility: hidden;
特点:元素不可见,占据页面空间,无法响应点击事件。

.hide{
    visibility: hidden;
}

(三) opacity: 0; ( IE8以下版本:filter:Alpha(opacity=50) )
特点:改变元素透明度,元素不可见,占据页面空间,可以响应点击事件。

.hide{
    opacity: 0;
    filter:Alpha(opacity=0);   
}

(四) transform: scale(0);
①zoom: 0.1; transform: scale(0);
特点:元素不可见,IE 6 7 9 不占据页面空间,IE8 谷歌 火狐 欧朋 等浏览器占据空间,无法响应点击事件。

.hide{
    zoom: 0.1;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0); 
}

②position: absolute; zoom: 0.1; transform: scale(0);
特点:元素不可见,不占据页面空间,无法响应点击事件。

.hide{
    position: absolute;
    zoom: 0.1;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0); 
}

(五)width: 0; height: 0; 配合overflow: hidden;
特点:元素不可见,不占据页面空间,无法响应点击事件。但 padding值 和 margin值 依然存在,需要将内外边距都调整为0。

.hide{
   display: inline-block;
   width: 0;
   height: 0;
   padding: 0;
   margin: 0;
   overflow: hidden; 
}

(六)position: absolute; left: -200%; 或者 top: -200%;等,父级需要相对定位,这种left top值可以根据具体的实际情况去定义
特点:元素不可见,不占据页面空间,无法响应点击事件。

.father{
    position: relative;
    overflow: hidden;
}
.hide{
    position: absolute;
    left: -200%;//或top: -200%; 
}

(七)clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)
特点:元素不可见,占据页面空间,无法响应点击事件。

.hide{
    float: left;
    width: 150px;
    margin: 20px;
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); 
}

(八) margin: top | right | bottom | left ;父级添加overflow: hidden; (margin的值 一定要小于(子级的宽度加上边距的总和的负数))
特点:元素不可见,不占据页面空间,无法响应点击事件。

.father{
    width: 400px;
    height: 400px;
    overflow: hidden;
}
.hide{
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-left: -200px;
}

以上就是几种隐藏元素的方法,下面来说说他们的区别

( 一 ) display: none 和 visibility: hidden 的区别
1. 占据页面空间( display: none 将元素隐藏后,在页面是是不占有空间位置的,而visibility: hidden 将元素隐藏后,还保留着元素大小的空间位置 ) ;
2. display: none 影响了 reflow和repaint(回流与重绘),而visibility: hidden并没有影响
3. 某个模块添加了display: none; 它下面的任何子级都会被隐藏,而添加了visibility: hidden,子级一旦有添加visibility: visible的css,该子级将不会被隐藏。

( 二 ) display: none 和 opacity: 0的区别
1. 占据页面空间( display: none 将元素隐藏后,在页面是是不占有空间位置的,而opacity: 0 只是改变了元素的透明度将其隐藏,还保留着元素大小的空间位置 ) ;
2. display: none 不会被子类继承,但是子类一样不会显示。 opacity: 0 会被子类继承,但不能像visibility的属性一样,给子类添加opacity:1,并不能将子类显示。
3. css3 transition 属性对display:none 并无效果,但对opacity 则有效果。(附加一句,对visibility: hidden也无效果)

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢

本文链接:http://umtheme.com/web/165.html

相关推荐

纯css简单实现角标样式

纯css简单实现角标样式

纯css实现角标效果,通常在置顶,推荐,热门等需要特殊标注的场景中可以应用到,这里主要用到transform:rotate(-30deg...

WEB前端 2020.10.16 0 81

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据...

WEB前端 2020.09.18 0 115

web前端写html页面div+css命名规范

web前端写html页面div+css命名规范

使用良好的CSS书写规范来写CSS代码,既能最大化优化前端代码,提升代码阅读体验,更重要的是为以后维护带来方便。常用的CSS命名一般由小...

WEB前端 2020.09.08 0 164

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持