border: 1px solid red;
在寫css元素內容時必須加上這句，可以用來檢視自己書寫的css是否正確；如果呈現出的內容則說明該元素下的css編寫正確，未呈現出則是錯誤的可以進行修改。
（問題解決後要將其刪除）！！！
2. border-box（一般使用該模型）
什麼情況下會合併：
步驟：在子元素加上float：left/ width；
在父級元素上加.clearfix；
固定寫法
clearfix:after
如果之間有多餘的空隙,要消除這些空隙，可以在上寫
vertical-align: top;
或者vertical-align: middle;
是對齊float: left;
平均布局：只要在布局中間加上x圖層；x圖層的右邊距為負數
讓乙個元素變成flex容器
.container
flex-direction 定義元素擺放的方向
flex-direction: row; 元素擺放的方向和文字方向一致；
flex-direction: row-reverse; 元素擺放的方向與文字方向相反；
flex-direction: column; 元素從上放到下；
flex-direction: column-reverse; 元素從下放到上；
flex-wrap 分散
flex-wrap: nowrap; 所有元素都放在一行；
flex-wrap: wrap; 元素自動換成多行；
flex-wrap: wrap-reverse; 元素自動換成逆序的多行；
4.justify-content 水平對齊元素
justify-content：flex-start ; 元素和容器左端對齊
justify-content： flex-end ; 元素和容器左端對齊
justify-content： center; 元素在容器中居中
justify-content： space-between ; 元素之間保持相等的距離；
justify-content： space-around ; 元素周圍保持相等的距離；
align-content 行與行之間隔多遠
align-content: flex-start; 多行集中在頂部；
align-content: flex-end; 多行集中在底部；
align-content: center; 多行居中；
align-content: space-between;行與行之間保持相等距離；
align-content: space-around; 每行周圍保持相等的位置
align-content: stretch; 每行都被拉伸以填滿容器；（一般不太實用）
二維布局一般使用grid;
grid-column 描述水平位置指定起始位置
grid-column-start:3; 描述網格中從左起第幾列；
grid-column-end將網格拓展到多列，如果數值小於所在網格列數時，則會向前拓展，為負數時來指定為右邊起的第幾列；
grid-row 描述垂直方向指定起始位置
grid -area=grid-column+grid-row 數值用「/」隔開；
fr 分數
每乙個fr單元分配乙個可用的空間，兩個元素分別設定為1fr和3fr，那麼空間就會被平均分層4份，第乙個元素佔1/4的空間，第二個元素佔3/4的空間。
根據html構建html樹
根據css構建css樹
3.將兩棵樹合併成一顆渲染樹
layout布局（文件流、盒模型、計算大小和位置）
paint繪製（把邊框顏色、文字顏色、陰影等畫出來）
composite合成（根據層疊關係展示畫面）
三種更新方式
主要是補充中間幀
一般寫transition: 屬性名 時長 過渡方式 延遲
過渡方式有：linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier、step-start、step-end、steps
一般都需要配合transition過渡，inline元素不支援transform，需要先變成block。
translate 位移
2. scale 縮放
3.rotate旋轉
4.transform: scale(0.5) translate(-100%,-100%)會呈現多重效果，
連續兩次變動的方式
使用兩次transform
2.使用animation
語法： animation: 時長、過渡方式、延遲、次數、方向、 填充模式、是否暫停、動畫名;
from to
百分數寫法（常用）
css多行超出顯示省略號
簡單介紹一下單行超出顯示省略號 text overflow ellipsis white space nowrap overflow hidden overflow hidden 溢位隱藏 white space nowrap 文字不能轉行 text overflow ellipsis 隱藏的部分用...
關於單行 多行文字超出顯示省略號 css
對於單行文字溢位問題 p 對於多行文字 段落 溢位問題 思路 在段落最後用.模擬省略號 html 十萬個為什麼 是少年兒童出版社在20世紀60年代初編輯出版的一套青少年科普讀物。50年來，這套書先後出版了6個版本，累計發行量超過1億冊，是新中國幾代青少年的科學啟蒙讀物，已經成為中國原創科普圖書的第一...
css實現單行 多行超出顯示省略號相容火狐
css 單行，超出部分顯示省略號 p補充 white space，它主要是用來處理元素內文字的空白符 換行符以及是否允許折行。可選值包括normal 預設 pre nowrap pre wrap pre line。word wrap，是用來標明是否允許瀏覽器在單詞內進行斷句，為了防止當乙個字串太長而...