CSS中border:0与border:none的区别

最新推荐文章于 2022-01-27 11:27:27 发布
最新推荐文章于 2022-01-27 11:27:27 发布
阅读量379 收藏
点赞数
分类专栏： CSS面试题 文章标签： css 面试
程麒阁-大连大学-软件工程学院
本文链接：https://blog.csdn.net/chengqige/article/details/118895475
版权

面试题

请你谈一谈，CSS中border:0和border:none的区别

标准回答

首先我们从浏览器渲染和浏览器兼容两方面来谈

浏览器渲染

border:0
设置border宽度是0，但是浏览器还是会渲染border这个属性

border:none
不设置border属性，浏览器渲染时候，直接忽略边框属性

浏览器兼容

其实这个面试问题来源于，IE浏览器的兼容。早期的IE浏览器，是不支持border:none这个属性的，所以当时只能使用border:0来让边框隐藏掉，浏览器兼容时候写border:none的同时也会吧border:0写上。

现在的IE10大部分都支持border:none属性了，所以我们也不必太担心浏览器兼容问题了

大前端工程师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
border:0、border:none、border:0 none三者之间的区别
winkexin的博客
05-18 865
因为浏览器是先解析自身的默认CSS，再解析开发者书写的CSS，所以当有border-width或border-color设置的时候才会令IE6、去解析border-style:none;把border的边框设为0像素，虽然在页面上看不到，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。与border:none;在IE6和IE7中，将border设成0和将border设成none对于input标签和button标签是不一样的。
css小知识点：有关border:none以及border:0的区别
M_Estelle的博客
05-19 1735
1.效果 border-style:none;//无边框 border-width:0;//边框宽度为0px 2.区别 （1）性能差异 border:0;浏览器对border-width、border-color进行渲染，占用内存。 border:none;浏览器不进行渲染，不占用内存。 Chrome： border:none;>>border:initialnone initial; border:0;>>border:0initia...
"border:0"与"border:none"的区别
clear_love8的博客
03-16 5409
"border:0"与"border:none"的差异主要体现在性能差异和兼容差异。 1.性能差异 "border:0"表示把border定义为0px。虽然0px在页面上看不到，但浏览器会对border进行渲染，结果会得到一个0px的border。 "border:none"表示把border定义为“无”，浏览器不会渲染它。 简单来说："border:0"需要占用内存，而"border:none&q
CSS中设置border属性为0与none的区别
我是一只蘑菇17的博客
12-09 2198
在我们设置CSS的时候，对标签元素不设置边框属性或者取消边框属性一般设置为：border:none;或border:0;两种方法均可。 border:none;与border:0;的区别体现有两点：一是理论上的性能差异；二是浏览器兼容性的差异。 1.性能差异 【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/bor...
border:none;以及border:0;的区别！
Potry Code的博客
07-18 629
无边框用border:none还是border:0一直都是一个热议的问题，两者除了在渲染性能上面的差别以外，在标准浏览器中页面表现是没有任何差别的。 border:none表示边框样式无 border:0表示边框宽度为0 当然将对象的的边框设置border:0和border:none的效果都是是一样的，都可以将边框取消掉。 border:0可以将边框的宽度设置为零，尽管视觉上看不到了，但是浏览器还...
border:none与border:0的区别
lryh_的博客
01-27 2271
border:none与border:0的区别
css中border:none;与border:0;的区别说明
09-25
在CSS中，`border:none;` 和 `border:0;` 都用于移除元素的边框，但它们之间存在一些微妙的区别。首先，我们来深入理解这两个声明的理论性能差异。 1. 性能差异： - `border:0;` 当设置边框为0像素时，虽然在视觉...
border:none与border:0使用区别
10-26
在CSS中，`border:none` 和 `border:0` 都常用来实现元素无边框的效果，但它们之间存在细微的差异，尤其是在不同浏览器的解析和渲染性能上。以下是这两个属性的详细解释和使用场景： 1. **border:none** `border:...
IE里button设置border:none属性无效解决方法
10-26
本文说明了IE设置border:none属性无效的解决方法，下面给出了二种方法，可以根据情况参考使用
浅析css中使用border属性与display属性的方法
01-19
与 none 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义...
border:none以及border:0的区别
阳光下的冷静的博客
12-24 2346
border:none表示边框样式无 border:0表示边框宽度为0 当定义了border:none，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度 当定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来  ...
css样式border:0和border:none的异同点
Lw4562的博客
03-07 388
相同点 border:0和border:none都可以将元素的边框设置成不可见。 不同点 1、性能差异 （1）设置为border:0时，浏览器还会渲染页面，虽然看不见元素的边框，只不过是因为边框设置成了0，隐藏了边框，占内存。 （2）设置成border:none时，将边框定义为无，浏览器不会渲染页面，不占内存。 2.兼容差异 IE6和IE7的标签以及标签，border:0在所有浏览器中的效果都一样...
CSS中元素的边框border属性
张波的技术积累
01-08 6397
元素的边框一般用来分隔页面的各个部分，在CSS中，边框属性可以分为以下几个属性，包括边框样式(border-style)，边框宽度(border-width)， 边框颜色(border-color)以及边框综合属性(border)等。    顶部边框样式属性：        border-top-style: none | hidden| dotted | dashed | solid |
【转载】border:none;与border:0;的区别
weixin_34032779的博客
09-14 100
　　1.性能差异 　　【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。 　　【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。 　　2.兼容性差异 　　兼容性差异只针对浏览...
border：0;和border：none;的区别
乔的博客
05-12 2192
一是理论上的性能差异；二是浏览器兼容性的差异。 性能差异： 【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。 【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。 兼容性差异： 兼容...
border:none;与border:0;的区别
teresa502的专栏
12-04 512
这问题在网络相信已经有不少人问到，最近再次被牵起讨论，籍此记录一下个人的理解，border:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。性能差异：【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。【
项目问题1："border:none"与"border:0px"有什么区别呢？
zxy9602的博客
04-10 2683
1、其实，从大体上讲，border:none;与border:0的区别体现有两点： （1）理论上的性能差异 （2）浏览器兼容性的差异 性能差异—— a、“border:0px”中，把border设为“0”，虽然页面上看不见，但是如果按照border默认值来理解，浏览器依然对border-width/border-color进行了渲染，即已占用了内存值。 b、“border:none”中，
border:none跟border:0的区别
最新发布
06-10
`border:none` 和 `border:0` 都可以用来设置元素的边框样式，它们的区别在于值的类型和含义略有不同。 `border:none` 表示不设置任何边框，可以看作是取消元素原有的边框，这个值是一个关键字，表示不设置边框。 `border:0` 表示将元素的边框宽度设置为0，也就是没有边框线，这个值是一个长度值，表示边框宽度为0。 虽然两者都可以消除元素的边框，但是在语义上，`border:none` 更加合适，因为它更明确地表达出不需要边框的意思。另外，如果使用 `border:0`，在多个 CSS 规则中可能会被其他规则覆盖，导致边框还是出现了，而使用 `border:none` 则不会受到其他规则的影响。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值