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边框依然存在。

解决方法：

1. input,button{border:0 none;}

2. 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队列，为了优化浏览器操作特性，我们要减少回流、重绘

1. 减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。

2. 脱离文档流，缩小影响范围，如果你想让复杂的表现发生改变，例如动画效果，那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它，不影响父级；现代浏览器也可以使用CSS3 transition实现动画效果，比改变像素值来的高性能。

3. 避免不必要的复杂的css选择符，尤其是使用子选择器，或消耗更多的CPU去做选择器匹配。