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来实现无边框效果

赞 (0)

相关推荐

  • 写CSS_关于Border你可能需要注意的地方第1/2页

    写CSS_关于Border你可能需要注意的地方第1/2页

    今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处, 但这个你不一定注意过;  先说一个场景,例如:  一个宽400px的黄盒子,左边放一个300px的小蓝盒子,右边放一个宽100px的红盒子.这样应该正好放下对吧? 因为300+100正好是400呀! 好了,先试一试!  我开始写了(头部省略):  复制代码 代码如下: <style>  #yellow{ width:400px; border:1px solid #FF990

  • css下margin、padding、border、background和font缩写示例

    下面用一些比较常用的属性来做示例. margin margin-top:1px;  margin-right:1px;  margin-bottom:1px;  margin-left:1px;  代码简化为:margin:1px margin-top:1px;  margin-right:2px;  margin-bottom:1px;  margin-left:2px;  代码简化为:margin:1px 2px margin-top:1px;  margin-right:2px;  mar

  • border:none与border:0使用区别

    一.border:noneborder-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查看元素

  • vue学习笔记之vue1.0和vue2.0的区别介绍

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> VUE2.0:必须有根元素,包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <

  • javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别

    Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void 操作符用法格式如下: 1. javascript:void (expression) 2. javascript:void expression expression 是一个要计算的 Javascript 标准的表达式.表达式外侧的圆括号是选的,但是写上去是一个好习惯. 你以使用 void 操作符指定超级链接.表达式会被计算但是不会当前文档处装入任何内容. 示例-点击超链接不跳转 1:<a href

  • python_array[0][0]与array[0,0]的区别详解

    在学习python的时候, 看到有些 代码中使用array[0][0] 来提取位置元素 不太明白. 动手实验了一下 import numpy as np a = np.array([np.arange(12),np.arange(12,24)]) >>>print a [[ 0 1 2 3 4 5 6 7 8 9 10 11] [12 13 14 15 16 17 18 19 20 21 22 23]] >>>print a[0][6] 6 [0][6] means:

  • 浅谈href=#与href=javascript:void(0)的区别

    #"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而javascript:void(0) 则不是如此 所以调用脚本的时候最好用void(0) 或者<input onclick> <div onclick>等 打开新窗口链接的几种办法 1.window.open('url') 2.用自定义函数 <script>       

  • 聊聊springboot2.2.3升级到2.4.0单元测试的区别

    聊聊springboot2.2.3升级到2.4.0单元测试的区别

    目录 springboot2.2.3升级到2.4.0单元测试区别 springboot2.4降级到boot2.2.x springboot2.2.3升级到2.4.0单元测试区别 原先单元测试 import org.junit.Test; 然后运行正常,现在运行报错, import org.junit.Test; 换成 import org.junit.jupiter.api.Test; 后运行正常. 单个单元测试的这样没有问题了,但是我批量执行的还是会报上面的错误 @Suite.SuiteCla

  • jQuery 1.0.4 - New Wave Javascript(js源文件)

    复制代码 代码如下: /* prevent execution of jQuery if included more then once */if(typeof window.jQuery == "undefined") {/*  * jQuery 1.0.4 - New Wave Javascript  *  * Copyright (c) 2006 John Resig (jquery.com)  * Dual licensed under the MIT (MIT-LICENSE

  • jQuery 1.0.2

    复制代码 代码如下: /* prevent execution of jQuery if included more then once */ if(typeof window.jQuery == "undefined") { /*  * jQuery 1.0.2 - New Wave Javascript  *  * Copyright (c) 2006 John Resig (jquery.com)  * Dual licensed under the MIT (MIT-LICEN

  • 浅析offsetLeft,Left,clientLeft之间的区别

    浅析offsetLeft,Left,clientLeft之间的区别

    假设 obj 为某个 HTML 控件 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素. obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素. obj.offsetHeight 指 obj

  • IE与FF下javascript获取网页及窗口大小的区别详解

    IE与FF下javascript获取网页及窗口大小的区别详解

    在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: <script language="javascript">function getInfo(){    var s = "";    s += " 网页可见区域宽:"+ document.body.clientWidth;    s += &qu

随机推荐