前言
- 最近面試，發現CSS層疊樣式表很多細節已經忘得差不多了。
- 寫樣式，畫界面是一個前端工程師最基礎的素養。
一、基礎選擇器
標簽： 標簽名 { css屬性名：屬性值； }
類： .類名 { css屬性名：屬性值； }
id： #id屬性值 { css屬性名：屬性值； }
通配符： *{ css屬性名：屬性值； }
二、選擇器進階
復合選擇器（后代、子代）、并集選擇器、交集選擇器、hover偽類選擇器
結構偽類選擇器：
三、字體和樣式a
字體樣式：大?。?code>font-size 粗細：
font-weight樣式：font-style:italic類型：font-family類型：font屬性連寫文本樣式：
- 縮進：
text-indent：2px- 水平對齊方式（文本、span、a、input、img的父元素）：
text-align- 修飾：
text-decoration：underline下劃線/none清除裝飾行高：
line-height：父元素高度line-height : 1可以取消上下間距
四、背景bgc
背景色
background-color、背景圖background-image、背景平鋪background-repeat：no-repeat、背景位置background-position背景圖大小background-size：cover/contain連寫：
background：color image repeat position
展示圖片的兩種方法：
- 直接寫上img標簽即可：img標簽是一個標簽，不設置寬高默認會以原尺寸顯示
- div標簽 + 背景圖片：需要設置div的寬高，因為背景圖片只是裝飾的CSS樣式，不能撐開div標簽
五、元素顯示模式display
塊級元素：
- 獨占一行、內容決定高度、繼承父寬、可設置寬高
- div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
行內元素：
- 一行顯示多個、內容決定寬高、不可以設置寬高
- a、span 、b、u、i、s、strong、ins、em、del……
行內塊元素：
- 一行可以顯示多個、可設置寬高
- input、textarea、img、button、select……
元素顯示模式轉換
拓展1：HTML嵌套規范注意點
拓展2：居中方法總結
六、CSS 特性
繼承性
繼承性的特性是什么？
- 子元素有默認繼承父元素樣式的特點
有哪些常見屬性可以繼承？
colorfont-style、font-weight、font-size、font-familytext-indent、text-alignline-height常見應用場景：
- 可以直接給ul設置 list-style:none 屬性，從而去除列表默認的小圓點樣式
- 直接給body標簽設置統一的font-size，從而統一不同瀏覽器默認文字大小
層疊性
- 給同一個標簽設置不同的樣式 → 此時樣式會層疊疊加 → 會共同作用在標簽上
- 給同一個標簽設置相同的樣式 → 此時樣式會層疊覆蓋 → 最終寫在最后的樣式會生效
優先級
特性：不同選擇器具有不同的優先級，優先級高的選擇器樣式會覆蓋優先級低選擇器樣式
- 繼承 < 通配符選擇器 < 標簽選擇器 < 類選擇器 < id選擇器 < 行內樣式 < !important
注意：!important不能提升繼承的優先級
權重疊加計算：
七、盒子模型
-
CSS 中規定每個盒子分別由：內容區域（content）、內邊距區域（padding）、邊框區域（border）、外邊距區域（margin）構成，這就是 盒子模型
- 標準(W3C)盒子模型：內容content+填充padding+邊框border+邊界margin
- 低版本IE盒子模型：內容（content+padding+border）+ 邊界margin
-
box-sizing中比較常用的兩個屬性值為
content-box和border-box，它可以改變盒子模型的解析計算模式。當設置
box-sizing:content-box時，采用標準模式進行計算，默認就是這種模式width=content；當設置
box-sizing:border-box時，采用怪異模式進行計算width=content+padding+border；
給margin和padding加屬性順序是上右下左
八、偽元素
元素：HTML 設置的標簽
偽元素：由 CSS 模擬出的標簽效果
注意點：
- 必須設置content屬性才能生效
- 偽元素默認顯示模式是行內元素
九、浮動
標準流：又稱文檔流，是瀏覽器在渲染顯示網頁內容時默認采用的一套排版規則，規定了應該以何種方式排列元素常見標準流排版規則：
塊級元素：從上往下，垂直布局，獨占一行
行內元素 或 行內塊元素：從左往右，水平布局，空間不夠自動折行
浮動的作用是什么？
- 早期作用：圖文環繞
- 現在作用：用于布局，讓垂直布局的盒子變成水平布局，如：一個在左，一個在右
左浮動的屬性是？右浮動的屬性是？
- 左浮動：
float : left- 右浮動：
float : right浮動的特點
- 浮動元素會脫離標準流（簡稱：脫標），在標準流中不占位置
- 相當于從地面飄到了空中
- 浮動元素比標準流高半個級別，可以覆蓋標準流中的元素
- 浮動找浮動，下一個浮動元素會在上一個浮動元素后面左右浮動
- 浮動元素有特殊的顯示效果
- 一行可以顯示多個
- 可以設置寬高
注意點：
浮動的元素不能通過text-align:center或者margin:0 auto浮動元素的特點有哪些？
- 浮動元素會脫標，在標準流中不占位置
- 浮動元素比標準流高出半個級別，可以覆蓋標準流中的元素，可以清除浮動
- 浮動找浮動，下一個浮動元素會在上一個浮動元素后面左右浮動
- 浮動元素有特殊的顯示效果：① 一行可以顯示多個 ② 可以設置寬高
十、定位
網頁常見布局方式
標準流：塊級元素獨占一行 → 垂直布局、行內元素/行內塊元素一行顯示多個 → 水平布局
浮動：可以讓原本垂直布局的 塊級元素變成水平布局
定位：可以讓元素自由的擺放在網頁的任意位置、 一般用于 盒子之間的層疊情況
- 靜態定位
static、相對定位（不脫標）relative、絕對定位（脫標）absolute、固定定位（脫標）fixed
子絕父相
子絕父相的含義是什么？
- 子元素：絕對定位
- 父元素：相對定位
子絕父相的應用場景是什么？
- 讓子元素相對于父元素進行自由移動
子絕父相的好處是什么？
- 父元素是相對定位，則對網頁布局影響最小
在使用子絕父相的時候，發現父元素已經有絕對定位了，此時直接子絕即可！
十一、樣式補充
精靈圖
精靈圖的優點：減少服務器發送次數，減輕服務器的壓力，提高頁面加載速度
使用精靈圖的步驟是什么？
- 創建一個盒子
- 設置盒子大小為小圖片大小
- 設置精靈圖為盒子的背景圖片
- 將小圖片左上角坐標 取負值，設置給盒子的background-position：x y
文字陰影
屬性
text-shadow：
參數 作用 h-shadow 必須，水平偏移量。允許負值 v-shadow 必須，垂直偏移量。允許負值 blur 可選，模糊度 color 可選，陰影顏色
盒子陰影
屬性
box-shadow：
參數 作用 h-shadow 必須，水平偏移量。允許負值 v-shadow 必須，垂直偏移量。允許負值 blur 可選，模糊度 color 可選，陰影顏色 spread 可選，陰影擴大 inset 可選，將陰影改為內部陰影
過渡
面試題
1. 讓一個盒子居中常用方法：
- margin固定寬高居中
- 子絕父相，上下左右0，
margin：auto - 子絕父相，
left：50%，top50%，margin-left:-50%盒子寬度，margin-top：-50%盒子高度 - 子絕父相，transform居中，
left: 50%，top: 50%，transform: translate(-50%,-50%); - 子絕父相對，
left: 25%，right: 25%，top: 25%，bottom: 25%，margin:auto; - flex布局，
justify-content: center，align-items: center;
2.清除浮動的方法（最常用的4種）
- 給父盒子添加高度（不推薦）
- 父級添加overflow屬性（父元素添加overflow:hidden）（不推薦）
- 額外標簽法（在最后一個浮動標簽后，新加一個標簽，給其設置clear：both；）（不推薦）
- 使用after偽元素清除浮動（推薦使用）
- 使用before和after雙偽元素清除浮動
