0°

米色谈谈代码中的有与无

在代码中经常会遇到一些隐藏与显示。很多同志不理解,就会出现各种问题。

为什么有些人写的代码性能比较高,而有些人写的代码 惨不忍睹,也是因为对代码理解不够,下面米色就代码中的有与无 来列举几个方面简单聊下。

一:border(边框)值为0和none的区别

<style>
div { width:200px; height:100px;}
.b0 { border:0;}
.bn { border:none;}
</style>
<div class="miseu b0 ms">边框为0</div>
<div class="miseu bn ms">边框为none</div>

1-border:none;

当边框值,设置为none的时候,浏览器不会对none做出渲染的动作,换句话说就是不会消耗内存值

 

2-border:0;

当边框值,设置为0的时候,虽说我们也是看不到边框,但是我们会发现,浏览器会认为边框宽度值为0px。所以会对样式进行渲染,换句话说就是会消耗内存

 

不同浏览器,对边框的理解都差不多,大家可以自己在本地测试观察。有同志要问了,知道这些有什么作用呢?

1- 如果页面中,你不需要边框,那么设置成none 可以提高性能

2- 如果你需要制作一个边框特效,鼠标经过边框从没有到显示。

      a:那你设置为none的话,边框从没有到显示,过渡正常;从显示再到没有,过渡不正常,会直接消失

      b:那你设置为0的话,边框不管是从没有到显示,还是从显示到没有,过渡效果均正常

二:display:none;和visibility:hidden;的区别

<style>
.miseu1 { display:none;}
.miseu2 { visibility:hidden;}
.miseu2 p { visibility:visible;}
</style>
<div class="miseu1">
    <p>我的display:none;的子元素</p>
</div>
<div class="miseu2">
    <p>我的visibility:hidden;的子元素</p>
</div>

1-子元素影响

 

        通过上面的案例演示,我们会发现,当设置为display:none后,整个元素会消失,附带它下面的后代元素。而设置为visibility:hidden;也会消失,但是当给它的子元素设置为visibility:visible; 子元素会显示出来。

      

2-是否占位

 

  通过上面2张图,我们会发现,当设置为display:none后,元素会完全消失,不会在页面占位置

  而设置为visibility:hidden;后,内容消失了,但是还是会占据元素以前的空间。

   

3-性能分析

  设置为display:none; 会触发 reflow 回流。而设置为 visibility:hidden; 只会触发 repaint ,因为元素并没有发现位置上的变化。

三:background背景透明的问题

代码中背景需要聊的内容 实在太多了。这里米色只是简单聊下我对于背景透明的一些想法。

页面中,想要让背景不显示,一般情况下,可以使用 none (无);或者 transparent (透明)

<style>
.miseu3 { background:none;}
.miseu4 { background-color:transparent;}
</style>
<div class="miseu3">background:none;</div>

 

通过上图,会发现,当设置为none的话,其实只是背景图没有,而背景色还是继承它以前的样式,所以我们会看到元素背景没有显示

<div class="miseu4">background-color:transparent;</div>

设置为 background-color:transparent; 仅仅只是将背景色透明了。

综上所述,会得到什么结论呢?

如果你的效果,有背景图,你想让背景图不显示。我们可以 backgroun-image:none;或者直接background:none; 那么背景图会不显示,

如果你设置background-color:transparent; 那背景图依然会存在,因为盒子模型里,背景图层级比背景色要高。不管怎么修改背景色,背景图都不会有变化。

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论