常用

• 注意區(qū)分大小寫
• 帶空格的字體記得加引號
• 使用背景圖的時候最好指定背景色，這樣至少能保證背景圖加載出現問題時文本是可見的

軟件

vscode：可以登陸GitHub賬戶院塞，進行設置的同步，常用插件：

• live server：開啟本地服務器
• prettier：美化代碼; prettier需要在設置-editor：default format處勾選-prettier鬼贱，
• path intellisense：在書寫路徑時獲得智能提示惨寿，
• Auto rename tag：方便重命名標簽名
• vscode-icons：為資源管理器中的文件顯示圖標
• imge snippets：自動識別圖像寬高
• image preview：代碼側預覽外鏈圖片。

pxcook：像素量取

操作

• 使用瀏覽器進行樣式效果調試迹炼，直接在emmet.style書寫砸彬，會添加內聯樣式；:hov點擊可展開進行各種狀態(tài)下格式的查看
• 重置樣式表：覆蓋瀏覽器默認樣式斯入，常見normalize.css（http://necolas.github.io/normalize.css/）砂碉、reset.css、meyer.css（meyerweb.com）
• 不要修改別人寫的樣式刻两，用優(yōu)先級去覆蓋
• 愛恨法則：link增蹭、visited、focus磅摹、hover滋迈、active
• 距離相關一般可用1em（字符）、1px（像素）户誓、1%（百分比）饼灿、1（數值）；彈性值：fr 厅克，標識份數赔退，會使用剩余可用空間除以份數來進行彈性比例分配；角度單位deg（360）证舟、grad（400），rad（2π）窗骑，turn圈數
• 背景默認覆蓋至邊框盒女责，通過background-clip修改，- background-clip對根元素（HTML或body）沒有效果
• 為導航菜單添加50ms的延遲過渡效果创译，能防止導航菜單意外展開
• 尺寸以border-box為基準

box-sizing: border-box;

• 單行列表顯示不完整內容為…

white-space:nowrap #空白折疊會發(fā)生但不會換行
overflow:hidden #溢出隱藏
text-overflow:ellipsis #超出文本如何處理

• 浮動情況下為避免高度坍塌抵知，會在最后加一個塊盒，并通過clear屬性令其可以排列在浮動盒子之下

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

語法糖

1. 多個選擇器用逗號分隔软族，表示兩個選擇器使用同一個聲明塊
2. 簡寫屬性：多個屬性合在一起書寫刷喜，例如padding（[[t b] [l r]]）=padding-left + padding-right + padding-top + padding-buttom，中括號內值相同時可只寫一次立砸，瀏覽器檢查窗口中可看到折疊三角形掖疮，若只寫三個值則第四個值取用第一個值
   注意：簡寫屬性的其他未設置屬性會設置為默認，所以通常簡寫屬性需要寫在具體屬性之前

基礎知識

CSS規(guī)則=選擇器+聲明塊

1. 選擇器（用于選中元素）

通配符選擇器

• *：選中所有元素颗祝，通常情況下會忽略

ID選擇器：選中對應ID元素浊闪，ID名恼布，#id名
元素選擇器：選擇一類元素，元素名
類選擇器【常用】：html中定義class搁宾，.class名稱

#css
 .linka{
  color: #ccc;
}
#html
<a class="linka" href="http://www.reibang.com/u/2c9847303b69">baidu</a>

屬性選擇器：可以根據需要進行篩選折汞，[屬性名=“屬性值”]

[href]{
  color:red;
}
- [foo |= "bar"] 選擇元素有foo屬性，且其值以bar和一個英文破折號開頭盖腿，或者其值就是bar本身爽待；
- [foo ~= "bar"] 選擇元素有foo屬性，且其值是包含bar的一組詞翩腐，以空格分隔堕伪；
- [foo ~= "bar"] 選擇元素有foo屬性，且其值是包含子串bar栗菜；
- [foo ^= "bar"] 選擇元素有foo屬性欠雌，且其值以bar開頭；
- [foo $= "bar"] 選擇元素有foo屬性疙筹，且其值以bar結尾富俄；

偽類選擇器：選中某些元素的某種狀態(tài)，偽類的效果是把某種幽靈類應用到偽類依附的元素上而咆，:選擇器

1. UI狀態(tài)偽類：enabled霍比，disabled，checked暴备，indeterminate悠瞬，default，valid涯捻，invalid浅妆，in-range out-of-range， required障癌，optional凌外，read-write，read-only
2. target偽類涛浙，lang偽類康辑，否定偽類

• link：超鏈接未訪問過
• visited：訪問過
• hover：鼠標移動到的狀態(tài)
• active：鼠標按下
• 都有的時候要遵循愛恨法則 lv ha
• first-child ：選擇第一個子元素丑婿，first-of-type：選中子元素中第一個指定類型的元素柿估、last-child铺峭、last-of-type
• nth-child：選中執(zhí)定的第幾個子元素此再，關鍵詞even（2N）细卧、odd（2N+1）呀洲、nth-of-type挖帘。
• focus：元素聚焦時的樣式
• checked：單選框或多選框被選中的樣式

偽元素選擇器：::選擇器

• before：在前面生成元素
• after：在最后生成元素
• first-letter：選中元素的第一個字母
• first-line：選中元素中第一行文字
• selection：選中被用戶框選的文字

選擇器的組合

• 并且：直接寫悦穿，例如 a[href] 標識有 href 屬性的 a 元素
• 后代元素——space元素名仓手，例如 ol li 標識 ol 元素的所有后代 li 元素
• 子元素—— >元素名胖齐，例如 ol > li 標識 ol 元素的子元素中的 li 元素
• 相鄰（后面）兄弟元素—— +元素名玻淑，可以理解為+1，要求元素緊鄰呀伙，否則無法選中
• 兄弟元素（后面所有补履，不要求相鄰）—— ~元素名，可以理解為等

選擇器的優(yōu)先級（層疊）

重要性

1. 作者樣式表中<!important>樣式
2. 作者樣式表
3. 瀏覽器默認

特殊性

• 范圍越窄越特殊
• 具體：計算4位數比較（256進制）

1. 千位：內聯=1剿另，其他=0
2. 百位：等于選擇器中所有ID選擇器數量
3. 十位：等于選擇器中所有類選擇器箫锤、屬性選擇器、偽類元素選擇器數量
4. 個位：等于選擇器中所有元素選擇器雨女、偽元素選擇器數量

比較源次序：代碼書寫靠后的勝出

2. 聲明塊

下面是常用的聲明塊：

color background-color

• 預設值名稱
• rgb(0,0,0)谚攒，rgba最后一項調整透明度，新的規(guī)定中rgb與rgba等同氛堕，即可設置rgb(0,0,0,0)
  rgb取值可以為百分數馏臭，但是百分數和數值不能混用
• hex：#000000，#000（白）讼稚，#f00（紅）括儒，#0f0（綠），#00f（藍）锐想，#ff0（黃）帮寻，#f0f（紫），#0ff（青）赠摇，#ccc（灰）固逗，#fff（黑）
• hsl(0-360,0%,0%,.5)，hsla與其等同

font-size

• px：像素藕帜，絕對單位
• em：相對單位烫罩，相對于父元素；每個元素必須又字體大小耘戚，如果沒有聲明嗡髓，則直接使用父元素的字體大小，如果沒有父元素收津，就使用基準字號（瀏覽器UA設置值）
• rem：相對body元素

font-weight：加粗

• normal、bold
• 數值（不常用）

font-family

• 需要用戶計算機存在
• 使用逗號可添加多個備選
• 最后加<sans-serif>讓計算機在前面都沒有的時候自己選系統(tǒng)非襯線字體

font-style：斜體

• normal
• italic

text-decoration：文本修飾浊伙，可以在中間或者上下加上橫線撞秋，a、s嚣鄙、del元素會默認帶有該屬性吻贿，為簡寫屬性，可以設置樣式哑子、顏色
text-indent：縮進舅列，1em肌割，0，30%

text-align：元素內部文字水平排列方式

• 常用：left right center

line-height：1帐要、1px

• 每行文本的高度把敞、該值越大、每行文本的距離越大
• 設置行高為容器的高度（height）榨惠、可以讓單行文本垂直居中
• 行高推薦直接設置為純數字奋早，表示相對于當前元素的字體大小

height、width：1em赠橙，1px耽装；容器的高寬

letter-space：em、px期揪；符間距

opacity：設置元素的透明度掉奄，取值是0~1

cursor：鼠標樣式

display：設置元素盒類型，重要凤薛！

• inline：行盒
• block：塊盒
• inline-block：行塊盒
• none：不生成盒子
• flex：彈性容器
• grid：柵格容器

visiblility：hidden姓建，生成盒子，只是從視覺上移除盒子枉侧，盒子仍然占據空間

background：僅用于美化引瀑，不包含內容時使用背景，包含內容應該用html的img元素

1. 可通過逗號分割放置多個背景圖（只有最后一個可以設置背景色）
2. size 值必須緊隨position后面榨馁，兩者之間要以斜線/隔開憨栽，行向在前，縱向在后翼虫，origin在前屑柔，clip在后

• backgroud-image：url()
  取值可以為漸變：linear-gradient（angle，color珍剑，color掸宛，color）、radial-gradient
• backgroud-repeat：默認背景圖自動重復
  有round招拙、space取值唧瘾，指定空余空間怎么分配
• backgroud-size：預設值，contain别凤，cover饰序，類似于object-fit數值或百分比
• backgroud-position：設置背景圖位置，預設值left规哪、bottom求豫，right、top、center蝠嘉。
  使用位置和盒子大小可以從精靈圖（雪碧圖spirit）中取特定的區(qū)塊最疆，并通過JS實現某些效果
  如果只提供一個百分比數值，那么縱向默認50%
• background-attachment：控制背景圖是否固定
• background-clip：控制背景到哪里為止蚤告，默認到邊框盒

陰影：

• text-shadow努酸， box-shadow；一個元素可以應用任意多個盒子投影罩缴，各投影之間以逗號分隔蚊逢，insert關鍵字會變成內投影，不能放在長度和顏色之間箫章，其他位置均可

樣式選擇流程

每個元素的所有屬性都必須有值烙荷，才能在頁面上顯示

1. 確定聲明值
2. 層疊沖突（按照選擇器來進行選擇）
3. 使用繼承（繼承父元素取值）
4. 使用默認值（此處默認值為標準規(guī)定，不是瀏覽器定義值檬寂，瀏覽器定義值在第2步進行比較）

應用

1. 強制繼承：在聲明值處填寫inherit屬性终抽，使繼承也參與1或2的選擇
2. 強制默認：在聲明值處填寫auto屬性，使默認值也參與1或2的選擇

書寫位置

• 內部樣式表：head中添加style元素
  style元素中可以使用@import規(guī)則引入css文件桶至，必須放在其他樣式之前才會生效
• 內聯樣式表：元素中添加style屬性
• 外部樣式表【推薦】：CSS單獨文件昼伴，解決重復，瀏覽器緩存響應加速镣屹，容易閱讀維護

<link rel="stylesheet" href="./文件相對路徑">
- rel屬性：為relation的縮寫圃郊，
* 還可取 “alternate stylesheet”，為候選樣式表女蜈，僅當用戶自己選擇持舆，才會使用候選樣式表渲染
- media屬性：指定什么情況下樣式表生效，默認適用于全部媒體伪窖，可選print逸寓，screen等

盒模型

網頁中所有內容都是以盒子的形式展示的

盒子類型

1. 行盒：display屬性為inline的元素，在頁面中不換行（例如默認情況下兩個a元素會并排）覆山，常見有span竹伸、a、img簇宽、video勋篓、audio
2. 塊盒：display屬性為block的元素，塊盒獨占一行（例如默認情況下兩個p元素不會在同一行）
3. 行塊盒：display屬性為inline-block的元素魏割，同時具備行盒和塊盒的特點生巡，因為空白折疊應用較少
4. 彈性容器：display屬性為flex的元素，用來實現單行布局
5. 柵格容器：display屬性為grid的元素见妒，用來實現二維柵格布局

盒子的參數：由內到外類似地球結構

1. 內容盒（content-box）：內容部分，參數width、height
2. 填充盒（padding-box）：填充區(qū)+內容區(qū)须揣，padding-left盐股、padding-right、padding-top耻卡、padding-bottom疯汁，簡寫屬性padding
3. 邊框盒（boder-box）：邊框區(qū)+填充區(qū)+內容區(qū)，簡寫屬性boder（boder-style卵酪、boder-width幌蚊、boder-color），當然里面三個也是簡寫屬性
4. 外邊距（magin）：magin

行盒特性：

1. 盒子沿著內容延伸
2. 行盒不能設置寬高溃卡，應該使用字體大小溢豆、行高、字體類型瘸羡，間接調整
3. 內邊距（填充區(qū)）：水平方向有效漩仙，垂直方向不會實際占用空間
4. 邊框：水平方向有效，垂直方向不會實際占用空間

塊盒

1. 盒子占滿寬度
2. 可以設置寬高犹赖，所有屬性水平與垂直方向均生效

行塊盒（display:inline-block）特性：

1. 不獨占一行
2. 盒模型中所有尺寸都有效
3. 空白折疊队他，發(fā)生在行盒（行塊盒）內部 或 行盒（行塊盒）之間

彈性容器、柵格容器：新版排布方式

視覺格式化模型

1. 常規(guī)流（默認）：別名文檔流峻村、普通文檔流麸折、常規(guī)文檔流

• 總體規(guī)則：塊盒獨占一行，行盒水平依次排列
• 包含塊：每個盒子都有它的包含塊粘昨，決定了盒子的活動范圍
• 絕大多數情況：盒子的包含塊垢啼，為其父元素的內容盒

塊盒

1. 每個塊盒總寬度，必須等于包含塊的寬度
   寬度默認auto（將剩余空間吸收掉）
   margin取值可以為auto雾棺，默認為0
   width吸收能力強于margin
   若寬度膊夹、邊框、內邊距捌浩、外邊距計算后放刨，仍然有剩余空間，該剩余空間被margin-right全部吸收
   常規(guī)流塊盒包含塊居中方式：定寬尸饺，然后左右margin設置為auto进统。
2. 每個塊盒垂直方向上的auto值
   height：auto，適應內容高度
   magin：auto浪听，表示0
3. 百分比取值
   padding螟碎、寬、margin可以取值為百分比
   以上所有百分比相對于包含塊的 寬度
   高度百分比：若包含塊高度取決于元素高度迹栓，百分比無效掉分；包含塊高度不取決于子元素高度，百分比相對于父元素高度
4. 上下外邊距合并（行盒不會）
   兩個常規(guī)流塊盒，上下外邊距相鄰酥郭，會進行合并（父子之間也會合并）华坦，取最大值

2. 彈性布局：適用于一維內容分布（沿一個方向布置內容）

display: flex block(inline)

• 能讓元素對不同屏幕尺寸和不同的顯示設備做好適應準備
• 一個元素設置為彈性容器后，子元素使用彈性盒布局不从，其他后代元素不受影響
  彈性容器中的子元素（不論是DOM節(jié)點惜姐、文本節(jié)點還是是生成的內容），都稱為彈性元素椿息，只有空白的文本節(jié)點將被忽略歹袁；
  匿名彈性元素：對彈性容器的文本子節(jié)點來說，如果文本節(jié)點不是空的寝优，將放在一個匿名彈性元素中条舔，其行為與其他同輩彈性元素一樣，繼承在彈性容器上設置的相關彈性屬性倡勇，但是不能直接使用CSS裝飾逞刷，因此不能直接在匿名彈性元素上設置針對彈性元素的屬性。
  彈性容器中絕對定位的子元素也是彈性元素妻熊，不過確定其尺寸和位置時夸浅，將其視作彈性容器中唯一的彈性元素。
• 各元素在主軸上排列扔役，主軸采用書寫模式設置的方向
  可靠左帆喇、靠右、居中
  可增加部分亿胸、全部彈性元素的尺寸坯钦，把多出的空間分給一個，多個元素侈玄；
  可換行（一般多行用柵格比較好）
  子元素可以相對容器或其他子元素對齊婉刀、容器底部、頂部序仙、居中突颊、拉伸
• 可以保持同輩元素尺寸相同
• 彈性格式化上下文中，元素之間的空白將被完全忽略潘悼，元素外邊距不折疊律秃，float及clear屬性將被忽略，float對框體生成仍有影響
• 彈性元素所在的框體尺寸由flex決定治唤，而不是確定主軸尺寸大小的屬性（height或width）棒动，要素包括彈性增長因子、彈性縮減因子和彈性基準宾添；flex優(yōu)先級要低于min-width等內容值

屬性

• flex-direction：控制彈性元素的主軸船惨，與書寫模式相關柜裸，書寫模式有writing-mode direction text-orientation屬性設定，也可以使用HTML的dir屬性設置（建議用dir）
• flex-warp：默認不換行掷漱，可以決定下一行在本行前還是后
• flex-flow：上面兩個屬性的簡寫屬性
• justify-content：應用于彈性容器粘室！控制一行里的彈性元素在主軸上如何分布，默認flex-start左對齊
• align-items：應用于彈性容器卜范！定義各彈性元素行在彈性容器的垂直軸上如何分布，默認拉伸鹿榜，如果元素顯示設置了垂直軸方向上的尺寸海雪，那么彈性元素就是不可拉伸的，stretch對其尺寸沒有影響
• align-self：在單個彈性元素上覆蓋align-items屬性的值舱殿，默認auto
• align-content：應用于彈性容器奥裸！多行情況！定義彈性容器有額外的空間時沪袭，在垂直方向上如何對齊各彈性元素行湾宙，以及空間不足以放下所有彈性元素行時從哪個方向溢出；默認stretch冈绊，
• min-width：0侠鳄，默認auto，不換行的話彈性元素寬度將收縮適應彈性容器寬度
• flex：使用該屬性死宣，而不要使用單獨屬性伟恶！應用于彈性元素，為flex-grow毅该、flex-shrink博秫、flex-basis的簡寫屬性，初始值 0 1 auto眶掌，彈性元素所在的框體尺寸由flex決定挡育，而不是確定主軸尺寸大小的屬性（height或width）
  flex-grow屬性，決定彈性元素是否可伸長朴爬，對于可伸長的元素按照比例進行伸長即寒。
  flex-shrink屬性，決定彈性元素是否可壓縮寝殴，對于可壓縮元素按照 比例*元素寬度 進行壓縮蒿叠；對于元素不可壓縮內容即使設置該屬性也不會進行壓縮
  flex-basis屬性，決定可用空間蚣常，為auto時以width屬性（或height屬性）值為準市咽，若屬性未設置，則以內容為準content抵蚊，設置值時覆蓋width施绎，不覆蓋min-width溯革，max-width等屬性；
  initial：相當于0 1 auto谷醉，允許壓縮
  auto：相當于1 1 auto致稀，允許拉伸和壓縮
  none：0 0 auto，不允許拉伸和壓縮
  <number>：按需設置俱尼，如果只填寫一個數字無單位默認為flex-grow數值
• order屬性：應用于彈性元素抖单，通過order屬性可調整元素顯示的位置，默認為0遇八，負值靠前矛绘，正值靠后

3. 柵格布局：與彈性布局類似，二維布局方式 grid

概念

• 柵格容器：有塊級柵格和行內柵格刃永，相比塊級容器货矮，浮動元素不會打亂柵格容器，柵格不會移動到浮動元素下方斯够，柵格容器的外邊距不與其后代外邊距折疊
• 柵格元素
• 有些屬性和功能不能應用在柵格容器和柵格元素上：
  容器上的column屬性
  容器沒有::first-line和::first-letter偽元素
  柵格元素上的float和clear屬性將被忽略囚玫，但是floate屬性對柵格元素的display屬性計算值有影響，display值在變成柵格元素之前計算
  vertical-align屬性對柵格元素不起作用
• 柵格線读规、柵格軌道抓督、柵格單元、柵格區(qū)域
• 柵格線名稱會堆疊掖桦，可以重復本昏，取用時后面加序號
• 隱式柵格：如果柵格元素超過目前柵格線，瀏覽器會自動創(chuàng)建柵格線
  跨度從顯示柵格開始計數枪汪，向隱式柵格延伸涌穆，不能從隱式柵格開始計數
  不一定在顯式柵格中結束
  引用柵格線的負數是相對顯式柵格而言向結束端的反向計數的，而不是反向引用位于顯式柵格開始端前面的隱式柵格線
  一般而言最好使用顯式柵格
• 錯誤處理：
  開始線放在結束線之后：自動對調
  開始線和結束線都聲明為跨度：結束線的值將被丟棄雀久，替換為auto宿稀，柵格元素結束邊界根據當前柵格流自動放置帐我，開始邊界則放在前一條柵格線上
• 柵格流：如果不明確指定柵格元素位置忠烛，柵格元素將放在第一個適合它的區(qū)域中，通過grid-auto-flow屬性設置
• 欄距

屬性

• grid-template-rows麻养、grid-template-columns：應用于柵格容器越庇，生成柵格線罩锐，可使用固定值、百分比卤唉、fr涩惑，通過在數值后使用中括號的方式添加名稱

grid-template-rows: [start] 1em [1] 50% [2] 1fr [end]
minmax(min,max),設定最大最小值，具體取值視情況而定
minmax(min, fr)
fr彈性柵格桑驱，份數單位竭恬，可以用1fr來占滿剩余空間
min-context:盡量少占據空間跛蛋，能夠顯示內容即可，當行列都設為該值時痊硕，因為先解析列尺寸赊级，所以相當于只有列應用該參數
max-context:寬度盡量大，以防換行
fit-content(argment)--> min(max-content, max(min-content, argment))
repeat(10,5em 1fr 1fr)：表明以后面規(guī)則重復放置軌道岔绸，總共放置10個
repeat(auto-fill,20em):填充盡可能多次理逊，占滿可用空間，auto-fit參數沒有柵格元素的軌道將被剔除

• grid-template-areas：應用于柵格容器亭螟，定義簡單的柵格區(qū)域挡鞍，不支持非矩形形狀，之后再設定大小
  會自動為四周柵格線命名预烙，例如：header-start，header-end

gred-template-areas:
"head head head head"
"left . . right"
"footer footer footer footer";

• grid-row（grid-row-start道媚，grid-row-end）扁掸，grid-column（grid-column-start，grid-column-end）：應用于柵格元素最域，指定位置

grid-row: R / span R 2
grid-column: col-A 3 / col-A 4
參數可以為數字（負值表示從后往前數）谴分，柵格名（重復的需要加上標簽）、span
span：表示跨多少镀脂，開始結束之前都能使用牺蹄，后可接數字或者柵格名
auto：對開始線來說，通常指嚇一條可用的列線或航向薄翅，對結束線來說沙兰，通常指跨一個柵格單元后的柵格線

• grid-area：應用于柵格元素：直接將柵格元素放在某個區(qū)域內

還可以用 row-start/column-start/row-end/column-end，來指定位置

• grid-auto-flow：應用于柵格容器翘魄，指定柵格流方式

row
column
dense：從起點掃描整個柵格鼎天，找到能放下柵格元素的位置就把元素放在那里

• grid-auto-row，grid-auto-column：柵格容器暑竟，設定隱式柵格尺寸
• grid：柵格容器斋射，簡寫屬性，用以定義柵格模板但荤；或者設定柵格流罗岖，并為自動增加的軌道設定尺寸，二者不能同時設置
  要放在其他聲明前腹躁，因為會把未聲明值設置為默認值

grid:
"head head head head" 3em
"left . . right" 1fr
"footer footer footer footer" 5em /
2em 3fr minmax(10em 1fr) 2em;

grid: dense row 2em / 2em

grid:subgrid , 容器中的柵格元素根據父容器定義的柵格對齊

• gap[早期使用grid-gap](grid-row-gap, grid-column-gap)：柵格容器桑包，提供一個絕對長度值確定欄距

grid-gap: 12px 2em

• justify-self
• justify-items
• justify- content
• align-self
• align-items
• align-content
• z-index, order：分層排序

4. 定位：手動控制元素在包含塊中的精確位置，position

position

• 默認static潜慎，不定位
• relative：相對定位
• absolute：絕對定位
• fixed：固定定位

一個元素捡多，只要position不是static蓖康，認為該元素是定位元素
定位元素會脫離文檔流（常規(guī)流），相對定位除外
文檔流中的元素擺放時垒手，會忽略脫離了文檔流的元素
文檔流中元素自動計算高度時蒜焊，會忽略脫離了文檔流的元素

相對定位

• 不會導致元素脫離文檔流，最多能讓元素在原位置偏移
• 可選屬性：left科贬、right泳梆、top、bottom
• 盒子偏移不會對其他盒子造成任何影響

絕對定位

• 寬高為auto榜掌，適應內容
• 包含塊變化：找祖先中第一個定位元素优妙，該元素的填充盒為其包含塊，若找不到憎账，則包含塊為整個網頁（初始包含塊）

固定定位

• 其他情況和絕對定位完全一樣
• 包含塊不同：固定為視口（瀏覽器的可視窗口）

居中方式和塊盒相似套硼，不過可以通過設置margin垂直居中

多個定位元素重疊

• 堆疊上下文
• 設置z-index，通常情況下胞皱，該值越大邪意，越靠近用戶
• 只有定位元素設置z-index有效
• z-index可以是負數，如果是負數反砌，遇到常規(guī)流雾鬼、浮動元素時，會被覆蓋

常見場景

• 二級菜單
• 彈出層
• 輪播圖

5. 浮動（文字環(huán)繞宴树，橫向排列）

修改float屬性

1. left：左浮動
2. right：右浮動

當元素浮動之后display屬性默認變成block策菜，包含塊也為父元素內容盒

盒子尺寸

1. 寬度為 auto 時，適應內容寬度
2. 高度為 auto 時酒贬，與常規(guī)流一致
3. magin為 auto 時又憨，為0
4. 邊框、內邊距同衣、百分比設置與常規(guī)流相同
5. 浮動元素的四周外邊距不折疊

盒子排列

1. 左（右）浮動的盒子靠左（右）排列
2. 浮動盒子在包含塊中排列時竟块，會避開常規(guī)流塊盒
3. 常規(guī)流塊盒在排列時，無視浮動盒子
4. 行盒在排列時耐齐，會避開浮動盒子（如果文字沒有在行盒中浪秘，瀏覽器會自動生成一個行盒包裹文字，該行和叫做匿名行盒）

高度坍塌：常規(guī)流盒子的自動高度埠况，在計算時耸携，不會考慮浮動盒子，所以要用到clear參數

• 默認值：none
• left：清除左浮動辕翰，該元素必須出現在前面所有左浮動盒子的下方
• right：清除右浮動夺衍，該元素必須出現在前面所有右浮動盒子的下方
• both：清除左右浮動

視覺效果

1. 變形

• 范圍框：受CSS控制的元素，其范圍是邊框框喜命，即元素的外邊界沟沙。
• 變形元素有自己的堆疊上下文河劝，經過縮放的元素可能比變形前小或大，不過元素在頁面上所占的空間于變形前保持不變
• 有順序性矛紫，變形函數從最左邊第一個開始赎瞎，到最后一個結束依次處理變形，順序不一樣結果就可能不一樣
• 有多個變形函數時颊咬，即使有一個函數時無效的务甥，整個值都將失效
• 變形不疊加，后者會覆蓋前者喳篇，
• 使用過渡或動畫添加變形效果的情況可以疊加

屬性

• transform敞临，適用于除span、鏈接等“基元行內”框之外的所有元素

平移：可取百分比或具體值
- translate（translateX translateY）：若只提供一個參數麸澜，Y默認為0
- translate3d（X Y Z）：三個參數必須都提供
縮放：可取正值數字
- scale（X Y）：若只提供一個參數挺尿，X和Y均使用該參數
- scale3d（X Y Z）：僅當元素有深度時，才可以縮放炊邦，XY軸旋轉可以產生深度
旋轉：可取數字票髓，角度單位（deg、grad铣耘、rad、turn）以故，超出常規(guī)值范圍之后將轉化為范圍內值（對于動畫來說時有區(qū)別的）
- rotate（Z）：水平面進行旋轉
- rotate3d（num蜗细，num，num怒详，angle）：前三者確定一個向量炉媒、然后繞該向量旋轉angle度
傾斜：skew、skewX昆烁、skewY吊骤，取值為角度
- skew與X，Y不同静尼，
- skew若只提供一個值白粉，Y值默認為0

• transform-origin：變形起始位置設定，可取百分比（相對于對應軸和元素的尺寸計算）鼠渺；可取長度絕對值鸭巴，從左上角為起始點，默認為50% 50%
• transform-style：在3D空間內呈現元素拦盹，默認flat鹃祖，可取preserve-3d
• perspective：可取絕對長度，或者none

Apple指出普舆，
小于300px的視域值得到的效果特別失真恬口，
大于2000px像素的值失真“十分溫和”校读，
而500px到10000px之間的值產生“適中的視域”

• perspective-origin：與transform-origin類似
• backface-visibility：處理背面，取值可以為visible或hidden祖能，使用該屬性可以做出反面顯示文字的效果

2. 過渡

在一段時間內從一個值變到另一個值歉秫，屬性需要支持動畫，有中間值芯杀；過渡的目的是增強效果端考，不能犧牲用戶體驗

• 通常寫在穩(wěn)態(tài)中，假如寫在hover等瞬態(tài)之中時揭厚，因為鼠標離開時hover失效却特，會導致鼠標移開無過渡
• 祖輩和后代元素上都有過渡效果時要小心，過渡的屬性變化后立即過渡祖輩或后代節(jié)點可能導致意料之外的后果筛圆。
• 只有當下不受CSS動畫影響的屬性才能過渡
• 過渡結束會觸發(fā)transitionend事件裂明，中斷不觸發(fā)。（如果屬性返回初始值太援，又觸發(fā)一次transitionend事件闽晦。這次事件在過渡開始時就觸發(fā)即使原方向的過渡還未結束？）
  事件有三個屬性
  propertyName：結束過渡的CSS屬性的名稱
  pseudoElement：應用過渡效果的偽元素
  elapsedTime：過渡持續(xù)的時間

屬性

• transition

nav ul li {
    transition: transform 200ms ease-in 50ms; opacity 200ms ease in 50ms
}
- transition-property：限制受影響的屬性提岔，默認all仙蛉，多個屬性需用逗號分隔，一一列出碱蒙。all必須放在首位
* 禁用過度效果可將其設置為none或者延遲時間設置為0
- transition-duration：持續(xù)時間荠瘪，默認0秒，多時間可逗號分隔
- transition-timing-function：調整過渡時序赛惩，默認ease哀墓，
* 可選linear、ease-in喷兼、ease-out篮绰、ease-in-out，或使用cubic-bezier（）自定義貝塞爾曲線
* 可選步進時序函數：steps（n季惯，start/end）吠各，分N步階梯變化
- transition-delay：延遲過渡，默認0秒星瘾，立即開始過渡走孽，可取正或者負的時間單位
* 為負值時過渡將從中間開始，負值絕對值超過duration時屬性值瞬間變化琳状，不觸發(fā)transitionend事件

3. 動畫

• 設置關鍵幀動畫：動畫名不要使用關鍵字磕瓷，一般使用百分值定義關鍵幀，也可以使用from代表0%，to代表100%
• 如未指定0%關鍵幀困食，用戶代理將使用要應用動畫效果的屬性的原始值構建一個0%的關鍵幀边翁；如未定義100%關鍵幀，而且沒有應用其他動畫硕盹，瀏覽器將使用沒有動畫效果時的屬性值構建一個虛設的100%關鍵幀
• 不支持動畫的屬性直接被忽略符匾，其他相同屬性的關鍵幀若發(fā)生沖突，將層疊
• 某些屬性值初始為auto瘩例、none啊胶，需要設定初始值，否則可能導致動畫失效
• 可以通過appendRule(‘50% {top: 50%}’)垛贤、deleteRule('50%‘)焰坪、添加刪除關鍵幀，通過findRule(’25%‘, '75%')可獲取關鍵幀的內容
• 動畫包含animationstart聘惦、animationend某饰、animationiteration三個事件，animationiteration事件僅在動畫多次迭代時觸發(fā)善绎，且其不能與animationend事件同時觸發(fā)黔漂，即使一次迭代也沒有，animationstart事件依然觸發(fā)
• 在播放動畫的過程中改變動畫屬性的值對動畫沒有影響禀酱，但是刪除或增加animation-name會刪除或重新加載動畫
• 結合setInterval或setTimeout使用較多
• 如果屬性值是以關鍵幀動畫形式改變的剂跟，應用到元素上時，屬性及其值好像是通過行內樣式表添加的一樣（動畫覆蓋常規(guī)的規(guī)則衣洁，但是能被帶有!important的規(guī)則覆蓋，動畫聲明塊中不能使用!important环凿。
• CSS動畫在用戶界面（UI）線程中優(yōu)先級最低

建議動畫可選擇去除：

@media（prefers-reduced-motion）{
    * {animation：none !important; transition none !important;}
}
@media not (prefers-reduced-motion){
    所有動畫和過渡
}

屬性

@keyframes change_bgcolor{
    20%,
    45%{ background-color: green;}
    75%{ background-color: blue;}
}

• animation：duration寫在delay前，名稱建議寫在最后

animated：{
    animation： 200ms考赛，ease-in颜骤，50ms捣卤，1 董朝， normal益涧，running闲询，forwards阎姥，slidedown
}
- animation-name：可逗號分隔，如果其中一個失效會繼續(xù)應用其他動畫
* 為相同屬性設置的多個動畫在同一時刻播放時，起作用的是后列出的動畫府瞄；
* 當最后的動畫沒有0%/100%關鍵幀時，會從前面的動畫進行查找應用
- animation-duration：動畫持續(xù)一次的時間货邓，單位s或ms四濒，默認0s职辨，以逗號分隔
* 如果其中又一個無效值复隆，整組聲明均失效；
* 會自動重復使用
- animation-iteration-count：動畫迭代次數挽拂，默認為1惭每，可取infinite無限重復
* 如果不是整數亏栈，將在最后一次循環(huán)中途結束
- animation-direction：動畫方向绒北，可取normal峻汉、reverse脐往、alternate瘤礁、alternate-reverse
* alternate指第一次從0%到100%，第二次從100%到0%
- animation-delay：延遲梅尤，可取正值或負值柜思，與過渡類似
- animation-timing-function：改變動畫內部時序，默認值ease巷燥，同過渡
* 可以添加在關鍵幀中赡盘，使不同區(qū)間使用不同時序函數
- animation-play-state：暫停和繼續(xù)播放動畫，取值默認running缰揪，可取paused
- animation-fill-mode：動畫的填充模式亡脑，動畫播放結束后是否繼續(xù)使用原來屬性值，默認none邀跃，可取both或以下值：
* forwards：動畫結束后結束幀一直應用，
* backwards：添加動畫后0%立即應用

其他待整理

• sans-serif：非襯線字體蛙紫，適合網頁顯示拍屑，襯線如宋體適合打印的
• 繼承：當層疊后屬性值仍未確定時，繼承父元素屬性（并非所有屬性都可繼承坑傅，一般boder和多數盒模型的屬性不會繼承）
• white-space：nowrap
• object-fit：調整適應方式
• 默認圖片是自適應的僵驰，若只設置一個參數，會保持縱橫比
• css元素主要分為可替換元素（置換元素，ex：img蒜茴、input）星爪，與非可替換元素（），對于可替換元素粉私，CSS無法完全控制其樣式
• 屬性大都用空格分隔顽腾，也有用逗號分隔的

• 對于屬性選擇符來說，元素自身必須有l(wèi)ang屬性才能匹配诺核，而:lang偽類能比配設定了語言的元素的后代
• 通常背景樣式不會傳遞抄肖，但應用到body元素上的背景樣式可以傳給html元素，html是文檔的根元素窖杀，僅發(fā)生在body元素定義了背景而HTML沒有定義背景的情況下
• unset: 將屬性重置為自然值漓摩，也就是如果屬性是自然繼承那么就是 inherit，否則和 initial一樣
• 在這里最好也解釋下內部 和 外部 顯示類型入客。如上所述管毙， css的box模型有一個外部顯示類型，來決定盒子是塊級還是內聯桌硫。同樣盒模型還有內部顯示類型夭咬，它決定了盒子內部元素是如何布局的。
• 在開發(fā)網站的時候鞍泉，你應該一直把溢出的問題掛在心頭皱埠，你應該用或多或少的內容測試設計，增加文本的字號咖驮，確保你的CSS可以正常地協(xié)調边器。
• 下劃線是使用 border-bottom 創(chuàng)造的, 而不是 text-decoration，有一些人喜歡這樣托修，因為前者比后者有更好的樣式選項忘巧， 并且繪制的位置會稍微低一點，所以不會穿過字母 (比如 字母 g 和 y 底部)
• fr單位分配的是可用空間而非所有空間睦刃，所以如果某一格包含的內容變多了砚嘴，那么整個可用空間就會減少，可用空間是不包括那些已經確定被占用的空間的涩拙。
• 自定義變量 --變量名际长，使用var（）調用，作用域在一定范圍內兴泥，最好使用support屬性判斷支持后使用
• 漸變生成器：https://cssgradient.io/

• 在瀏覽器中使用新元素：解決方法是在DOM中創(chuàng)建元素工育，讓瀏覽器知道元素的存在，例如 使用下述JavaScript讓ie8知道 main的存在：
  document.createElement('main')

可替換元素（img） 和 非可替換元素

• 大部分元素頁面上顯示的結果取決于元素內容搓彻，稱為非可替換元素
• 少部分元素頁面上顯示的結果取決于元素屬性如绸，稱為可替換元素
• 絕大部分可替換元素為行盒* 廠商前綴（了解而已）：瀏覽器廠商通過它標記實驗性或專屬（或二者兼具）的屬性嘱朽、值或者其他內容
  -epub-：國際數字出版論壇指定的ePub格式
  -moz-：基于Mozilla的瀏覽器
  -ms-：微軟Inernet explorer
  -o-：基于Opera的瀏覽器
  -webkit-：基于WebKit的瀏覽器（safari、chrom）
• 可替換元素可以理解為行塊盒

瀏覽器解析：解析組成文件的順序：當瀏覽器向服務器發(fā)送請求獲取 HTML 文件時怔接，HTML 文件通常包含 "link" 和 "script" 元素搪泳，這些元素分別指向了外部的 CSS 樣式表文件和 JavaScript 腳本文件。了解這些文件被瀏覽器解析的順序是很重要的：

• 瀏覽器首先解析 HTML 文件扼脐，并從中識別出所有的 "link" 和 "script" 元素岸军，獲取它們指向的外部文件的鏈接。
• 繼續(xù)解析 HTML 文件的同時谎势，瀏覽器根據外部文件的鏈接向服務器發(fā)送請求凛膏，獲取并解析 CSS 文件和 JavaScript 腳本文件。
• 接著瀏覽器會給解析后的 HTML 文件生成一個 DOM 樹（在內存中）脏榆，會給解析后的 CSS 文件生成一個 CSSOM 樹（在內存中）猖毫，并且會編譯和執(zhí)行解析后的 JavaScript 腳本文件。
• 伴隨著構建 DOM 樹须喂、應用 CSSOM 樹的樣式吁断、以及執(zhí)行 JavaScript 腳本文件，瀏覽器會在屏幕上繪制出網頁的界面坞生；用戶看到網頁界面也就可以跟網頁進行交互了仔役。

規(guī)則

• 不允許注釋嵌套
• CSS中可以包含HTML注釋
• mdn代碼規(guī)范示例：https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS
• CSS結構格式：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing

背景圖：背景圖是屬于CSS的概念，img元素屬于HTML的概念
一般當圖片屬于網頁內容時是己，必須使用img元素
一般當圖片僅用于美化頁面時又兵，必須使用背景圖

方法

• @import ：引入其他樣式表，必須放在CSS文件卒废，或者style最前面沛厨？
• @media：設置CSS生效的媒體條件

@media projection{
    body { background : yellow; }
}

• @supports 支持則應用，不支持則跳過

@supports (color : black) {
    body { color: yellow; }
}

• @keyframes：動畫

響應布局：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design

• repeat(auto-fill, minmax(200px, 1fr))

表單

在一些瀏覽器中摔认，表單元素默認不會繼承字體樣式逆皮，因此如果你想要確保你的表單填入區(qū)域使用body中或者一個父元素中定義的字體，你需要向你的CSS中加入這條規(guī)則参袱。為了保證統(tǒng)一电谣，將所有元素的內外邊距均設為0，然后在單獨進行樣式化控制的時候將這些加回來抹蚀。除了上面提到的規(guī)則以外剿牺，你也應該在<textarea>上設置overflow: auto 以避免IE在不需要滾動條的時候顯示滾動條：

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}
textarea {
  overflow: auto;
} 

將以下 CSS 應用于它們會刪除系統(tǒng)級樣式硫椰。

input {
  -webkit-appearance: none;
  appearance: none;
}

• 表單樣式可調整性比較差持隧，有的時候甚至會自己制作元素外觀

表單元素樣式

1. 重置表單元素樣式
2. 設置textarea是否允許調整尺寸（both默認都可以調整、none不能拍嵌、horizontal水平可以镐捧、vertical垂直方向可以
3. 文本框邊緣到內容的距離
4. 控制單選和多選的樣式