请选择 进入手机版 | 继续访问电脑版

米色谈谈代码中的有与无 

2017-09-13 17:43 发布

经验交流 /[前端开发]
219 1 1

83

帖子

22

听众

302

米币

超级版主

Rank: 8Rank: 8

积分
632
米色设计 发表于 2017-9-13 17:43:26 | 显示全部楼层 |阅读模式
友情提示: 如果有任何不懂或者问题要问的, 请在相应的在线求助发表新帖提问, 谢谢合作!!!

在美设网注册账号,查看完整图文信息哦

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在代码中经常会遇到一些隐藏与显示。很多同志不理解,就会出现各种问题。
为什么有些人写的代码性能比较高,而有些人写的代码 惨不忍睹,也是因为对代码理解不够,下面米色就代码中的有与无 来列举几个方面简单聊下。

一:border(边框)值为0和none的区别
  1. <style>
  2. div { width:200px; height:100px;}
  3. .b0 { border:0;}
  4. .bn { border:none;}
  5. </style>
  6. <div class="miseu b0 ms">边框为0</div>
  7. <div class="miseu bn ms">边框为none</div>
复制代码

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

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

不同浏览器,对边框的理解都差不多,大家可以自己在本地测试观察。有同志要问了,知道这些有什么作用呢?
1- 如果页面中,你不需要边框,那么设置成none 可以提高性能
2- 如果你需要制作一个边框特效,鼠标经过边框从没有到显示。
        a:那你设置为none的话,边框从没有到显示,过渡正常;从显示再到没有,过渡不正常,会直接消失
        b:那你设置为0的话,边框不管是从没有到显示,还是从显示到没有,过渡效果均正常


二:display:none;和visibility:hidden;的区别
  1. <style>
  2. .miseu1 { display:none;}
  3. .miseu2 { visibility:hidden;}
  4. .miseu2 p { visibility:visible;}
  5. </style>
  6. <div class="miseu1">
  7.         <p>我的display:none;的子元素</p>
  8. </div>
  9. <div class="miseu2">
  10.         <p>我的visibility:hidden;的子元素</p>
  11. </div>
复制代码

1-子元素影响
03.png
            通过上面的案例演示,我们会发现,当设置为display:none后,整个元素会消失,附带它下面的后代元素。而设置为visibility:hidden;也会消失,但是当给它的子元素设置为visibility:visible; 子元素会显示出来。
        
2-是否占位
04.png 05.png
    通过上面2张图,我们会发现,当设置为display:none后,元素会完全消失,不会在页面占位置
    而设置为visibility:hidden;后,内容消失了,但是还是会占据元素以前的空间。
   
3-性能分析
    设置为display:none; 会触发 reflow 回流。而设置为 visibility:hidden; 只会触发 repaint ,因为元素并没有发现位置上的变化。

三:background背景透明的问题
代码中背景需要聊的内容 实在太多了。这里米色只是简单聊下我对于背景透明的一些想法。
页面中,想要让背景不显示,一般情况下,可以使用 none (无);或者 transparent (透明)

  1. <style>
  2. .miseu3 { background:none;}
  3. .miseu4 { background-color:transparent;}
  4. </style>
  5. <div class="miseu3">background:none;</div>
复制代码

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


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

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

综上所述,会得到什么结论呢?
如果你的效果,有背景图,你想让背景图不显示。我们可以 backgroun-image:none;或者直接background:none; 那么背景图会不显示,
如果你设置background-color:transparent; 那背景图依然会存在,因为盒子模型里,背景图层级比背景色要高。不管怎么修改背景色,背景图都不会有变化。
公众号二维码.jpg

​手指按住二维码,扫描关注米色公众号


回复

使用道具 举报

B Color Smilies

全部评论1

    1

    帖子

    0

    听众

    2

    米币

    新手上路

    Rank: 1

    积分
    13
    cfbxf 发表于 2017-9-18 22:17:04 | 显示全部楼层
    友情提示: 如果有任何不懂或者问题要问的, 请在相应的在线求助发表新帖提问, 谢谢合作!!!
    好帖,鉴定完毕,谢谢您了












    回复

    使用道具 举报

联系
我们
快速回复 返回顶部 返回列表