一、瀏覽器渲染原理
1、html：dom樹/描述內容；
css：cssom樹/描述需要對文件應用的樣式規則；
dom樹和cssom樹合併後形成渲染樹（render tree）；
構建渲染樹：
（1）從dom樹根節點開始遍歷每個可見節點。【某些節點不可見（例：指令碼標記、元標記），某些節點通過css隱藏，因此在渲染樹中也被忽略（display:none）屬性；
（2）對於每個可見節點，為其找到適配的cssom規則並應用它們；
（3）發射可見節點，連同其內容和計算樣式；
2、layout布局：文件流、盒模型、計算大小、位置
3、paint繪製：邊框、文字顏色，陰影等畫出來；
4、compose合成：根據層疊關係展示畫面；
更新屬性觸發具體流程具體去看；
二、css 動畫的兩種做法
transition：
#heart
100%
三、其他內容：
1、基礎：css2.1（使用最廣泛版本）；
文件流方向：inline（左到右，元素和，width不能指定，line-height確定），block（上到下，width可指定，元素決定，可設height），inline-block（左到右，兩者結合，width可指定，可設height，block類似）；
overflow：auto、scroll、hidden、visible、可分為-x、-y
脫離文件流：float，position：absolute/fixed
兩種盒模型：content-box（內容），border-box（內容+padding+border）
background包含border外邊沿
margin合併：父子合併（padding/border，overflow：hidden，display：flex消除）；兄弟合併（inline-block消除）
基本單位：px，em，%，整數等；顏色：#ff6600/#f60,rgba（0，0，0，1），hsl（360，100%，100%）
2、css布局：
布局分類：固定寬度布局960、1000、1024px/不固定寬度靠文件流/混合布局pc固，手機不固
布局思路：從大到小，從小到大；
float布局：子元素+float：left/父元素+.clearfix/css+四句話（ie有一些問題）
flex布局：container樣式：流動方向，折行，對齊方式，多行內容分布；item樣式：order、grow、shrink、basis、align-self（定製）
grid布局：container：行列設定寬度，取名設定範圍，fr，分割槽：grid-template-areas，gap
3、css定位：
屬性position：static（預設值），relative（相對定位，爸爸，z-index：auto預設值、0、1、-1），absolute（絕對定位，兒子，相近的定位元素、滑鼠提示），fixed：固定（廣告、回到頂部）
層疊上下文：
在同乙個作用域裡面才能比較，一些不正交屬性可以建立它；(-)無法逃出建立的作用域；
4、css動畫：
transform：translate、scale、rotate、skew（多重效果）
css 膠囊 兩種顏色 CSS 基礎知識
語法一 樣式語法 選擇器注意事項 語法二 語法 chartset utf 8 import url 2.css media min width 100px and max width 200px 注意事項 方法 如何使用開發者工具 流動方向 寬度 高度 overflow 溢位 當內容大於容器時 cs...
css 膠囊 兩種顏色 你所不知道的CSS小知識
css是 cascading style sheet 的縮寫，翻譯過來就是 層疊樣式表 css用來定義html的顯示樣式，用於設計網頁的外觀效果，通過使用css來實現頁面的內容與表現形式分離，可以很大程度的提高工作效率。html網頁就像是沒有經過裝修的毛坯房，而html css的網頁就像是精裝修後的...
dbgrid用兩種顏色間隔分行顯示
delphi 如下 procedure tform1.dbgrid1drawcolumncell sender tobject const rect trect datacol integer column tcolumn state tgriddrawstate begin with sender...