haizlin / fe-interview

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……

Home Page:http://www.h-camel.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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节省性能(最后一点我猜的)

在于浏览器解析与否

  1. border为0的情况下虽然看不见,但是浏览器会对border进行渲染,还是占据内存的
    而border为none时浏览器不会对其渲染,所以不会占据内存
  2. 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有关。