整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ello~~各位小伙伴，今天我们广州蓝景实训部，继续和大家分享前端技术干货，CSS隐藏元素
总结出7种隐藏元素的办法
1.CSS display的值是none。(该元素是不会在页面上显示的)
div{
display: none;
}
2. type="hidden"的表单元素。(该元素是不会在页面上显示的)
3. 宽度和高度都显式设置为0。(该元素会在页面上显示)
div{
width: 0;
height: 0;
}4. 一个祖先元素是隐藏的，(该祖先以及祖先以下的元素是不会在页面上显示)
5. CSS visibility的值是hidden(该元素是会在页面上显示，还占原来的位置)
div{
visibility: hidden;
}6. CSS opacity的指数是0(该元素是会在页面上显示，还占原来的位置)
div{
opacity: 0;
}7. 将position设为absolute然后将位置设到不可见区域
div{
position: absolute;
top: -9999px;
left: -9999px;
}想要了解更多web前端开发技术资料，可在评论区留言！也可添加我们微信：philip_tan
平常的样式排版中，我们经常遇到将某个模块隐藏，下面我整理了一下隐藏元素的多种方法以及对比（有的占据空间，有的不占据空间。有的可以点击，有的不能点击。）：
( 一 ) display: none;
特点：元素不可见，不占据空间，无法响应点击事件。
.hide{
display: none;
}
( 二 ) opacity: 0; ( IE8以下版本：filter:Alpha(opacity=50) ）
特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。
.hide{
opacity: 0;
filter:Alpha(opacity=0);
}
( 三 ) visibility: hidden;
特点：元素不可见，占据页面空间，无法响应点击事件。
.hide{
visibility: hidden;
}
( 四 ) transform: scale(0);
( 1 ) 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);
}
( 2 ) 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;
}
以上就是几种隐藏元素的方法，我在以前的面试中，也碰到了面试官提出的一些关于隐藏元素css的对比，查阅了一些资料，做了以下整理：
( 一 ) 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也无效果）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>文字隐藏</title>
<style>
div.elli{
border:1px solid;
overflow:hidden;/*内容会被修剪，并且其余内容是不可见的*/
white-space:nowrap;/*强制在一行显示*/
text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本*/
width:200px;
height:20px;
}
div.clip
{
border:1px solid;
overflow:hidden; /*超出部分隐藏*/
white-space:nowrap;/*强制在一行显示*/
text-overflow:clip;
width:200px;
height:20px;
}
div.hide
{
overflow:hidden;
border:1px solid;
width:200px;
height:50px;
}
div.scroll
{
overflow:scroll;/*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容*/
border:1px solid;
width:200px;
height:50px;
}
</style>
</head>
<body>
<h3 style="color: #98bf21">1.多余文字自动裁剪</h3>
<div class="clip">如果此处的文字较多，将自动裁切裁切裁切裁切</div>
<br>
<h3 style="color: #98bf21">2.多余文字省略号代替</h3>
<div class="elli"><a href="#">如果此处的文字较多，将自动用省略号代替！</a></div>
<br>
<h3 style="color: #98bf21">3.多余文字自动隐藏</h3>
<div class="hide">如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！</div>
<br>
<h3 style="color: #98bf21">4.多余文字出现滚动条</h3>
<div class="scroll">如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！</div>
</body>
</html>
3.1 overflow
3.2 white-space
3.3 text-overflow
*请认真填写需求信息，我们会在24小时内与您取得联系。
