本文主要是介绍border 取none 与 0 的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
border:none 与 border:0
1）性能上的差异：
【border:0】
效果相当于border-width：0，浏览器依然对border-width、border-color进行了渲染，即已经占用了内存值。
【border:none】
效果等同于border-style:none，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
2）兼容性差异：
IE6、IE7中，border为“none”时，标签button、input边框依然存在。
解决方法：
input,button{border:0 none;}
input,button{border:0;}
这时我又想到了 display:none;与 visibility:hidden
【display:none;】
元素彻底消失，即该元素的宽度、高度等各种属性值都将“丢失”，不在文档流中占位，浏览器也不会解析该元素；
【 visibility:hidden】
视觉上消失了，可以理解为透明度为 opacity:0 ，但它仍具有高度、宽度等属性值，因此在文档流中占位，浏览器会解析该元素。
关于 hidden 我又想到 overflow
overflow 溢出
值: visible | hidden | scroll | auto | inherit
初始值: visible
应用于: 块级元素、替换元素、表单元格
【visible】 内容不会被剪切，内容会溢出显示在元素框之外
【hidden】内容会被剪切，溢出于元素框的内容不可见
【scroll】内容会溢出被你剪切，但会自动生成滚动条
内容不足以溢出的时候：
[注意]firefox和IE8+浏览器在overflow:scroll或auto时，存在padding-bottom缺失现象
【inherit】继承父级的overflow值
【auto】内容如果溢出， 会自动生成滚动条
内容不足以溢出的时候 与 overflow: scroll 相比较：
失效：
例如有一个 三层嵌套的 DIV，如果最里面的子孙元素为 poisition：absolute ，会使得该元素变成了相对于最近的 poisition 不为 static 的父元素进行定位，如果此时最顶层的父元素设置了只设置了 overflow：hidden ，而 poisition ：static ，这个效果就会失效，解决的办法是在最顶层的父元素 设置 poisition：relative ；
回流与重绘
【 回流】
当render tree中元素的规模尺寸，布局，隐藏等改变，会引起页面重新渲染
【重绘】
当render tree中的一些元素需要更新属性，但这些属性只会影响元素的外观，风格，而不会影响到元素的布局，会引起页面重绘
回流的代价比重绘高的多，因此很多的浏览器都会对它们进行优化：把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘，但有时候我们写的一些代码可能会强制浏览器提前flush队列，为了优化浏览器操作特性，我们要减少回流、重绘
减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。
脱离文档流，缩小影响范围，如果你想让复杂的表现发生改变，例如动画效果，那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它，不影响父级；现代浏览器也可以使用CSS3 transition实现动画效果，比改变像素值来的高性能。
避免不必要的复杂的css选择符，尤其是使用子选择器，或消耗更多的CPU去做选择器匹配。
这篇关于border 取none 与 0 的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
