小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端设计师,从事过网站建设,响应式网站开发,网络维护,SEO,SEM,网络推广等前端相关工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云

最新发布

CSS属性overflow:hidden;visibility:hidden;和display:none区别

分类: html4 + hss2评论(1)81个赞

我们知道,overflow:hidden;visibility:hidden;和display:none;都是让元素消失的意思,那么这3者之间有什么不同的地方?

1、Overflwo:hidden;

对行内元素无效,必须是块级元素,并且设置宽度高度。

Overflow:hidden,隐藏之后元素依然占据着位置。


2、Visibility:hidden

使用后整个元素消失,但是元素占据的位置还在


3、Display:none

使用后整个元素小时,元素占据的位置也没有了


下面上面说的3点,我们来做点小实例区分一下,一目了然

Overflwo:hidden



<h1>默认样式:DIVmoren  设置了宽+高,不设置overflow:hidden的默认效果</h1>
    <div class="moren" style="width:100px;height:100px;border:1px solid red;">
        <span style="color:pink">同时设置了宽和高并且写了overflow:hidden的diva</span>测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字
    </div><br /> <br /><br /><br /> <br /><br />
 <h1>示例1:DIVA 设置了宽+高+hidden的块及元素生效;<span style="color:red;">隐藏之后元素依然占据着位置</span></h1>
    <div class="a" style="width:100px;height:100px;border:1px solid red;overflow:hidden;">
        <span style="color:pink">同时设置了宽和高并且写了overflow:hidden的diva</span>测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字
    </div>
<h1>示例2:DIVB 只设置overflow,不设置宽+高的块及元素不生效</h1>
       <div class="b" style="border:1px solid red;overflow:hidden;">
        <span style="color:blue;">带overflow:hidden;但没有设置宽高的divb</span>;测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字
    </div>
 <br /><br /><br />
    <h1>示例3:span元素c  设置宽+高+overflow的行内元素不生效</h1>
    <span class="c" style="width:100px;height:100px;border:1px solid red;overflow:hidden;">
        <em style="color:green;">同时设置了宽和高,但没有写overflow:hidden;的divc</em>测试文字,测试文字,测试文字,测试文字,测试文字,</span>

Display:none



<div class="ceshia" style="float:left;">
<div class="a" style="width:200px;height:100px;border:1px solid red;" >这是块及元素A</div>
<div class="b" style="width:200px;height:100px;border:1px solid blue;">这是块及元素B</div>
<div class="c" style="width:200px;height:100px;border:1px solid red;" >这是块及元素C</div>
<div class="d" style="width:200px;height:100px;border:1px solid blue;">这是块及元素D</div>
</div>
<div class="ceshib" style="float:left;margin-left:10%;;">
 <div class="a" style="width:200px;height:100px;border:1px solid red;display:none; ">这是块及元素A</div>
<div class="b" style="width:200px;height:100px;border:1px solid blue;display:none;">这是块及元素B</div>
<div class="c" style="width:200px;height:100px;border:1px solid red;" >这是块及元素C</div>
<div class="d" style="width:200px;height:100px;border:1px solid blue;">这是块及元素D</div>
块及元素A和B设置display:none;发现C和D占据了A和B的位置
</div>

<h1>说明:使用display:none;之后元素不存在了,元素占据的位置也不存在</h1>

Visibility:hidden



<div class="ceshia" style="float:left;">
<div class="a" style="width:200px;height:100px;border:1px solid red;" >这是块及元素A</div>
<div class="b" style="width:200px;height:100px;border:1px solid blue;">这是块及元素B</div>
<div class="c" style="width:200px;height:100px;border:1px solid red;" >这是块及元素C</div>
<div class="d" style="width:200px;height:100px;border:1px solid blue;">这是块及元素D</div>
</div>
<div class="ceshib" style="float:left;margin-left:10%;;">
 <div class="a" style="width:200px;height:100px;border:1px solid red;Visibility:hidden ">这是块及元素A</div>
<div class="b" style="width:200px;height:100px;border:1px solid blue;Visibility:hidden">这是块及元素B</div>
<div class="c" style="width:200px;height:100px;border:1px solid red;" >这是块及元素C</div>
<div class="d" style="width:200px;height:100px;border:1px solid blue;">这是块及元素D</div>
块及元素A和B设置Visibility:hidden;发现C和D元素位置没变
</div>

<h1>说明:使用Visibility:hidden;之后元素不存在了,但元素占据的位置还在</h1>


本站内容均为小米原创,转载请注明出处:小米技术社区>> CSS属性overflow:hidden;visibility:hidden;和display:none区别