1. display
- display:none 隱藏元素，不會佔用任何頁面佈局空間。而visibility:hidden還會佔用。
- display:block 塊元素
- display:inline 內聯元素(行級元素)
2.position
position 屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
- static 默認值，沒有定位
- relative 相對於其正常位置進行定位
- absolute 相對於 static 定位以外的第一個父元素進行定位
- fixed 相對於瀏覽器窗口進行定位
3.link和@import的區別
- link屬於XHTML標籤,不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性，而@import完全是css提供的一種方式。
- 加載頁面時，link標籤引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢後被加載。
- link不存在兼容性問題,@import得IE5以上
- 使用dom控制樣式時的差別。當時用JavaScript控制dom去改變樣式的時候，只能使用link標籤，因爲@import不是dom可以控制的（不支持）。
- 同樣的樣式，優先級 ：link > @import
綜上所述:我們要用link
4.html第一行
聲明文檔解析類型，沒有結束標籤,大小寫不敏感html4需要引用DTD：
// 過渡的.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
// 嚴格的.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
// 框架的.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
html5不需要引用DTD：
<!DOCTYPE html>
5.DOM
⑴什麼是dom
DOM是Document Object Model的英文縮寫，翻譯過來是文檔對象模型，提供給Javascript用來動態修改文檔狀態。
⑵dom常用屬性
- innerHTML innerHTML用來修改（獲取）HTML元素（如div）html格式的內容。包括html標籤。
- innerText 不包括html標籤
- value 可以用來修改（獲取）textarea和input的value屬性的值或元素的內容；
⑶dom常用操作方法
- document.getElementById(‘id屬性值’) 返回擁有指定id的第一個對象的引用
- document.createElement(‘元素名’) 創建新的元素節點
⑷dom常用事件
- 點擊事件onclick
- 進入事件onload
- 監聽變化事件onchange
- 鼠標指針移動到onmouseover
- 鼠標指針離開元素onmouseout
- 按住鼠標不鬆開事件onmousedown
- 按住鼠標鬆開事件onmouseup
5.頁面呈現過程
- 瀏覽器把獲取到的html代碼解析成1個Dom樹，裏面包含了所有的html tag，包括display:none隱藏，還有用JS動態添加的元素等。
- 樣式(主要包括css和瀏覽器的樣式設置)解析成樣式結構體，在解析的過程中會去掉瀏覽器不能識別的樣式
- dom tree和樣式結構體結合後構建呈現樹(render tree),render tree有點類似於dom tree，但其實區別有很大，render tree能識別樣式，而且render tree不包含隱藏的節點(比如display:none的節點，還有head節點)，因爲這些節點不會用於呈現，而且不會影響呈現的，注意 visibility:hidden隱藏的元素還是會包含到render tree中的，因爲visibility:hidden 會影響佈局(layout)，會佔有空間
- 一旦render tree構建完畢後，瀏覽器就可以根據render tree來繪製頁面了
6.迴流和重繪
⑴迴流和重繪
- 當render tree中的一部分(或全部)因爲元素的規模尺寸，佈局，隱藏等改變而需要重新構建。這就稱爲迴流(其實我覺得叫重新佈局更簡單明瞭些)。每個頁面至少需要一次迴流，就是在頁面第一次加載的時候。
- 當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，比如background-color。則就叫稱爲重繪。
- 迴流必將引起重繪，而重繪不一定會引起迴流
⑵什麼操作會引起迴流和重繪
- 添加、刪除元素(迴流+重繪)
- 隱藏元素，display:none(迴流+重繪)，visibility:hidden(只重繪，不迴流)
- 移動元素，比如改變top,left(jquery的animate方法就是,改變top,left不一定會影響迴流)，或者移動元素到另外1個父元素中。(重繪+迴流)
- 對style的操作(對不同的屬性操作，影響不一樣)
- 還有一種是用戶的操作，比如改變瀏覽器大小，改變瀏覽器的字體大小等(迴流+重繪)
⑶如何減少迴流和重繪
減少迴流、重繪其實就是需要減少對render tree的操作，並減少對一些style信息的請求，儘量利用好瀏覽器的優化策略
*
*
*
*
*