得知互动

标题: border:none与border:0使用区别 [打印本页]

作者: swmozowtfl 时间: 2015-7-15 20:22
标题: border:none与border:0使用区别
一、border:none
border-style的简写
在chrome审查元素看到以下结果
代码如下:
element.style {
border: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: initial;
border-color: initial;
}
在firefox中用firebug查看元素会看到以下结果：
代码如下:
element.style {
border: medium none;
}
注意这个medium值
二、border:0
border-width的简写
在chrome审查元素看到以下结果
代码如下:
element.style {
border: 0;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-style: initial;
border-color: initial;
}
在firefox中用firebug查看元素会看到以下结果：
代码如下:
element.style {
border: 0 none;
}
注意在firebug中border:none和border:0的区别
下面举个例子来具体说明下
代码如下:
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}
div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}
</style>
<div class=zerotest>
<div class=setwidth>
border: 0 and border-width: 3px
</div>
<div class=setstyle>
border: 0 and border-style: dashed
</div>
</div>
<div class=nonetest>
<div class=setwidth>
border: none and border-width: 3px
</div>
<div class=setstyle>
border: none and border-style: dashed
</div>
</div>
有兴趣的朋友可以复制以上代码在这个浏览器试一试：
测试结果：
1、.zerotest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)
2、.zerotest .setstyle
虽然定义了border-style: dashed,但是border-width:0 所以无边框
3、.nonetest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)
4、.nonetest .setstyle
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)
综合1、4可以分析出在ie7下
border:0 被解析为 border-width:0
border:none 被解析为 border-style:none
再来看看标准浏览器
border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
所以建议使用border:none来实现无边框效果

更多网页制作信息请查看：网页制作

作者: wwzcdenleclv 时间: 2016-3-26 10:18
感谢党和人民的关爱~~~

作者: wwdu926a 时间: 2016-3-26 10:18
晕在我帖里面找偶像啊??

作者: tohme 时间: 2016-3-26 10:18
那个家让它沉下去吧！不要啦

作者: bqtklouu 时间: 2016-3-26 10:19
老大,我好崇拜你哟

作者: gevaemaidovef 时间: 2016-3-26 10:19
一个个全都骑到老大头上来了...

作者: tohme 时间: 2016-4-1 16:00
晕倒`````不要造我的谣言哦~~小心我打你pp~~嘿嘿~~~~

作者: Mqokjdvq 时间: 2016-4-1 16:01
看完楼主的帖子，我的心情竟是久久不能平静

作者: Acropozelan 时间: 2016-4-1 16:01
你这样的表现，就只配这几个字：窝囊废

作者: wwdu926a 时间: 2016-4-1 16:01
貌似我没看懂那~~~

作者: bqtklouu 时间: 2016-4-1 16:01
本人过去、现在以及将来都不认识楼主，且自古以来与楼主无利益关系。楼主表述之事与本人无关

作者: mwxny 时间: 2017-4-11 14:54
下次有人骂我了...我给他还回去..

作者: seazvyt 时间: 2017-4-11 14:57
我怎么说那?~!

作者: GoodyFouppy 时间: 2017-4-11 14:58
出来混　迟早都是要灌的——不灌水怎么混啊

作者: tohme 时间: 2017-4-11 15:03
你你你你呵呵~~~~别这样哦.....

作者: seazvyt 时间: 2017-4-11 15:03
这是怎么了啊??

欢迎光临得知互动 (https://bbs.dezhifl.com/)