[css] 第156天 css中的border:none和border:0px有什么区别?
haizhilin2013 opened this issue · comments
第156天 css中的border:none和border:0px有什么区别?
none是没有边框.
0px是边框的宽度为0px.
最简单的一个例子:
从border: 10px;过渡到border: none;,是不会有动画的;
从border: 10px;过渡到border: 0px;,是可以有动画的。
感觉border:0px浏览器解析并给border-width设置0px这个值;border:none浏览器解析后会给border-style设置为none;浏览器会先分析border的style再分析width,所以我感觉border:none会比border:0px节省性能(最后一点我猜的)
在于浏览器解析与否
- border为0的情况下虽然看不见,但是浏览器会对border进行渲染,还是占据内存的
而border为none时浏览器不会对其渲染,所以不会占据内存 - border为none的兼容差 在老IE浏览器上还是会有边框
而border为0的时候是可以隐藏的
border: none; 浏览器解析为
border-top-color: initial;
border-top-style: none;
border-top-width: initial;
border-right-color: initial;
border-right-style: none;
border-right-width: initial;
border-bottom-color: initial;
border-bottom-style: none;
border-bottom-width: initial;
border-left-color: initial;
border-left-style: none;
border-left-width: initial;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border: 0px; 浏览器解析为
border-top-color: initial;
border-top-style: initial;
border-top-width: 0px;
border-right-color: initial;
border-right-style: initial;
border-right-width: 0px;
border-bottom-color: initial;
border-bottom-style: initial;
border-bottom-width: 0px;
border-left-color: initial;
border-left-style: initial;
border-left-width: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
看法是和display:none;和display:block一样,即使DOM会不会渲染该元素。0px会存在border,none则不会存在border。与渲染dom有关。