基本流程: 解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪製render樹,如下圖:
名稱解釋:
注意：
display:none 的節點不會被加入render tree，而visibility: hidden 則會，所以，如果某個節點最開始是不顯示的，設為display:none是更優的
display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint，因為沒有發現位置變化。
有些情況下，比如修改了元素的樣式，瀏覽器並不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然後做一次 reflow，這又叫非同步 reflow 或增量非同步 reflow。但是在有些情況下，比如resize 視窗，改變了頁面預設的字型等。對於這些操作，瀏覽器會馬上進行 reflow。
transition 製作紅心檢視效果
css知識總結
background color 背景顏色。background image 元素的背景影象.background repeat 水平方向平鋪 repeat x background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動 background position 屬性改變影...
CSS知識總結
使用flex 使用 css3 transform 使用 display table cell 方法 position 的常見四個屬性值 relative，absolute，fixed，static。一般都要配合 left top right 以及 bottom 屬性使用。float屬性的取值 浮動的...
CSS知識總結（2）
1.css選擇器 每一條css樣式定義由兩部分組成，形式如下 選擇器在 之前的部分就是 選擇器 選擇器 指明了 中的 樣式 的作用物件，也就是 樣式 作用於網頁中的哪些元素 p上面的css樣式 的作用 為p標籤設定12px字型大小，行間距設定20px的樣式。2 2，類選擇器 類選擇器在css樣式編碼...