|  在技术加营销的道路上越走越远
温馨提示
我是弹窗内容
当前位置:首页 > 大前端开发 > CSS中border:none;和border:0;有什么区别?
CSS中border:none;和border:0;有什么区别?

CSS中border:none;和border:0;有什么区别?

日期:2021-07-12 浏览量:195 原创作者:湖八爷
这是一个常见的CSS面试题,很多前端面试官都喜欢问这个问题。

因为border:none;和border:0;看起来效果是一样的,而且大家平时写代码的时候也没太纠结二者的区别,经常是想用哪个就用哪个,所以很多前端面试官想通过这个问题试试面试者基础是否扎实,以及平时研究问题的深度。


对于这个问题,网上大多数回答都是强调二者在渲染性能上和浏览器兼容上的差异。



一,渲染性能上的差异。


1:border:0,指的是将边框设置为0,虽然边框不见了,但是浏览器依然会对border-width和border-color进行渲染,会占用浏览器的资源。


2:border:none,指的是将border设置为none,浏览器就不会对border-width和border-color进行渲染。



二,浏览器兼容上的差异。


1:border:none。在IE6和IE7中无效,边框依然存在,所以会有兼容性问题。


2:border:0。在所有浏览器上效果都一样,没有兼容性问题。



其实我想说,对于这个问题,我们简单了解一下就行了,因为现在做web开发,大多数项目已经不需要考虑IE6和IE7的兼容性了,而且这二者在渲染性能上的差异,其实完全是可以忽略不计的。