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

這時我又想到了 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 的區別

border none 與border 0 的區別

border none 與border 0 的區別

border none 與border 0 的區別

border 取none 與 0 的區別

border none 與border 0 的區別

border none 與border 0 的區別

border none 與border 0 的區別

相關推薦