足球游戏_中国足彩网¥体育资讯$

border:none与border:0使用区别
来源:易贤网 阅读:2541 次 日期:2014-12-19 11:52:40
温馨提示:易贤网小编为您整理了“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来实现无边框效果

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看网页制作
易贤网手机网站地址:border:none与border:0使用区别
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标