var() - CSS：層疊樣式表 | MDN (mozilla.org)
在聲明全局?CSS 變量時?:root?會很有用：
:root{
--main-color:hotpink;
--pane-padding:5px 42px;
}
一文搞懂flex
一文搞懂flex:0,1,auto,none - 掘金 (juejin.cn)
var() - CSS：層疊樣式表 | MDN (mozilla.org)
flex-shrink: 0;? 不壓縮
一、CSS
復(fù)合選擇器
1.交集選擇器 ?p.beauty ?且
2.并集選擇器 ?.beauty,dog{}
3.ul li{} ul后代 ?.subject li
4.div>a{} 子代
5.相鄰兄弟div+p div后緊緊相鄰向下 ?通用兄弟 div~p div后所有兄弟向下
6.屬性選擇器[title]屬性為title ?[title="fff"] 屬性為title且值為fff ??[title^="f"]屬性為title且值f開頭 [title$="f"]屬性為title且值f結(jié)尾 ?[title*="f"]屬性為title且值包含f
7.鏈接偽類選擇器a:link沒有訪問過的a；a:visited(很像類 但不是類是元素特殊狀態(tài)的一種描述)洛口；動態(tài)偽類a:hover懸浮 ?a:active 激活狀態(tài) ??順序：lvha ?
鏈接偽類選擇器a:link未選中 ?a:visited 點(diǎn)擊過 a:hover鼠標(biāo)經(jīng)過 a:active鼠標(biāo)正在按下未彈起治专；input:focus獲得光標(biāo)的input表單元素選取出來
8.（1）結(jié)構(gòu)偽類：div>p:first-child 選中的是div的第一個兒子p元素 ?
div p:first-child 選中的是div的后代p元素特咆，且p的父級是誰無所謂虚吟，但p必須是其父親的第一個兒子
css的元素顯示模式
1.塊元素 ?<div>占一行 可設(shè)置寬度 文字類元素不允許再放塊級元素
2.行內(nèi)元素 <span><a>（內(nèi)聯(lián)元素）寬高設(shè)置無效
3.行內(nèi)塊元素<img> <input><td> ?空白間距 ?可設(shè)置寬度 行內(nèi)可顯示多個
4.顯示模式轉(zhuǎn)換
display:block 轉(zhuǎn)換為塊元素 ?行內(nèi)轉(zhuǎn)塊
display:inline 轉(zhuǎn)換為行內(nèi)元素 ?塊轉(zhuǎn)行內(nèi)
display:inline-block 轉(zhuǎn)換為行內(nèi)塊元素
5.snipaste f1截圖 f3釘屏幕上 alt取色 shift轉(zhuǎn)換 ?esc退出
6.text-indent:2em 首行縮進(jìn)2字符
垂直居中行高等于盒子高度（上空隙文字本身高度下空隙）
7.css的背景 background-image:none ?| url(url )
8. background-position: x y
9. background-attachment ： scroll fixed 背景固定屏幕中某個位置
10.背景復(fù)合屬性 ?background 顏色 地址 重復(fù) 滾動 位置
背景半透明background :rgba
11.text-align ?水平居中
12.層疊性邀摆，就近羔挡，相同選擇器相同屬性
13.繼承性洁奈，文本顏色字號 font ：12px/24px 字號/行高 font ：12px/1.5
14.優(yōu)先級
繼承或者*（0间唉，0，0利术，0） 呈野； 元素選擇器（0，0印叁，0被冒，1） ；類選擇器轮蜕，偽類選擇器（0昨悼，0，1跃洛，0）率触；ID選擇器（0，1汇竭，0葱蝗，0）；行內(nèi)樣式style（1细燎，0垒玲，0，0）;!important 重要的（無窮大）
15.復(fù)合選擇器會有權(quán)重疊加問題
16.頁面布局： 盒子模型 浮動 定位
17盒子模型： 內(nèi)外邊距 邊框 內(nèi)容
邊框：粗細(xì)樣式顏色
18.table,td
border-collapse:collapse相鄰邊框合并
19.寬高不包含邊框 內(nèi)邊距（不指定寬高找颓，不會撐開盒子） ?上右下左 順時針
20.塊級元素 水平居中 margin：0 auto ( 指定寬度合愈，左右外邊距auto)
21.行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素添加text-align:center即可
22.嵌套塊元素垂直外邊距的塌陷：對于兩個嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上邊距同時子元素也有外邊距击狮，此時父元素會塌陷較大的外邊距值
解決方案：可以為父元素定義邊框佛析；可以為父元素定義內(nèi)邊距；可以為父元素添加overflow:hidden
23.清除內(nèi)外邊距 *{padding：0彪蓬； margin：0寸莫；}
24.行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距档冬，不要設(shè)置上下內(nèi)外邊距膘茎，但是轉(zhuǎn)換為塊級和行內(nèi)塊元素就可以量
視圖標(biāo)尺像素放大（ctrl+）空格拖動 取消選區(qū)（ctrl+d）
25.p.preview--<p class="preview"></p>
<em>
ul>li*5>a快捷生成
shift
list-style:none
box-shadow
浮動
26.浮動 可以改變元素標(biāo)簽?zāi)J(rèn)的排列方式。浮動可以讓多個塊級元素一行內(nèi)排列顯示
27.多個塊級元素縱向排列找標(biāo)準(zhǔn)流酷誓，多個塊級元素橫向排列找浮動披坏。
18.float屬性用于創(chuàng)建浮動框，將其移動到一邊盐数，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣
29.浮動元素會脫離標(biāo)準(zhǔn)流（脫標(biāo)）棒拂；浮動的元素會一行內(nèi)顯示并且元素頂部對齊；浮動的元素會具有行內(nèi)塊元素的特性
隱藏一個元素可以通過把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"帚屉。但是請注意谜诫，這兩種方法會產(chǎn)生不同的結(jié)果。
visibility:hidden可以隱藏某個元素攻旦，但隱藏的元素仍需占用與未隱藏之前一樣的空間喻旷。也就是說，該元素雖然被隱藏了牢屋，但仍然會影響布局掰邢。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間伟阔。也就是說辣之，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失皱炉。
