女友要我教她CSS，我就寫了這一篇長文，感動哭了？

時間 2020-05-31

標籤我教 css 寫了一篇長文感動哭了欄目悠閒生活简体版

原文原文鏈接

寫做背景

女友要我教她CSS，因而我就折騰了一週，終於完成了這篇長文... css

而後，而後？而後當我發佈這篇文章的時候，她會感動到哭嗎？html

熟悉HTML知識

HTML常見元素

`head` 部分

`body`部分

doctype的意義是什麼

讓瀏覽器以標準模式渲染
讓瀏覽器知道元素的合法性

HTML、XHTML、HTML5的關係

HTML屬於SGML（標記語言）
XHTML屬於XML，是HTML進行XML嚴格化的結果
HTML5不屬於SGML或XML，比XHTML寬鬆

HTML5有什麼變化

新的語義化元素
表單加強
新的API（離線、音視頻、圖形、實時通訊、本地存儲、設備能力）
分類和嵌套變動

em和 i 有什麼區別

em是語義化的標籤，表強調
i 是純樣式的標籤，表斜體
HTML5中 i 不推薦使用，通常用做圖標

語義化的意義

開發者容易理解
機器容易理解（搜索、讀屏、軟件）
有利用SEO
semantic microdata（語義微數據）例電影有評分

哪些元素能夠自閉合

表單元素 input
圖片 img
br hr
meta link

HTML和DOM關係

HTML是「死」的（字符串）
DOM是由HTML解析而來的，是活的
JS能夠維護DOM

property 和 attritube 區別

attritube 是「死」的
property 是活的
相互之間不會影響

form的好處

直接提交表單
使用 submit / reset 按鈕
便於瀏覽器保存表單
第三方庫能夠總體取值
第三方庫能夠進行表單驗證

CSS精華（Cascading Style Sheet）層疊樣式表

選擇器

用於適配HTML元素
分類和權重
解析方式和性能
值得關注的選擇器

選擇器分類

元素選擇器 a{}
僞元素選擇器 ::before{}
類元素選擇器 .link{}
屬性選擇器 [type=radio]{}
僞類選擇器 :hover{}
ID選擇器 #id{}
組合選擇器 [type=checkbox] + label{}
否認選擇器 :not(.link){}
通用選擇器 *{}

選擇器權重（1）

ID選擇器 #id{}+100
類屬性僞類 +10
元素僞元素 +1
其它選擇器 +0

例子：計算一個不進位的數字前端

#id.link a[href]
————————————————
計算過程：
#id +100
.link +10
a +1
[href] +0
結果:111
複製代碼

#id .link.active
————————————————
計算過程：
#id +100
.link +10
.active +10
結果:120
複製代碼

那麼，咱們怎麼理解 不進位的數字 這關鍵字眼呢？用一個簡單例子吧：node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS選擇器</title>
    <style>
        #test1{
            color: red;
        }
        #test1.test1{
            color: blue;
        }
        .test2{
            color: red;
        }
        div.test2{
            color: blue;
        }
        #test3{
            color: red;
        }
        .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{
            color: blue;
        }
    </style>
</head>
<body class="body" id="body">
    <div id="test1" class="test1">藍色</div>
    <div class="test2">藍色</div>
    <div id="test3" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">紅色</div>
</body>
</html>
複製代碼

結果以下圖所示： jquery

不妨發現，最後一個 div，儘管咱們類選擇器有11個，加起來有110，可是依舊沒有 id 選擇器優先級高，正是由於這個不進位的數字，簡單說： 你大爺仍是你大爺！

選擇器權重（2）

!important 優先級最高
元素屬性優先級高
相同權重後寫的生效

舉個栗子：webpack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS選擇器</title>
    <style>
        .test1{
            color: red;
        }
        .test1{
            color: blue;
        }
        .test2{
            color: red!important;
        }
        .test2{
            color: blue;
        }
        #test3{
            color: red;
        }
    </style>
</head>
<body class="body" id="body">
    <div class="test1">藍色</div>
    <div class="test2">紅色</div>
    <div id="test3" style="color: blue;">藍色</div>
</body>
</html>
複製代碼

運行結果以下圖所示： css3

非佈局樣式

字體

字體族例如: serif、monospace（不能添加引號）襯線字體
多字體fallback 例如： "monaco"、"Microsoft Yahei"、"PingFang SC"
網絡字體、自定義字體
iconfont

行高（經典問題）

行高的構成（由line-box組成，line-box由inline-box組成）
行高相關的現象和方案（能夠經過設置 line-height來實現垂直居中效果）
行高的調整

經典問題：圖片下面有空隙，原理是什麼？怎樣去除？ git

原理是由於圖片按照 inline 進行排版，排版的時候會涉及到字體對齊，默認按照 baseline 對齊， baseline和底線之間是有誤差的，誤差大小是根據字體大小而定，若是是12px字體大小，則圖片空隙就是3px左右。這就是經典圖片3px空隙問題。

解決方式：github

因爲默認按照baseline對齊，不妨將 vertical-align 設爲 bottom，按照底線對齊。
設置 display:block 能夠解決該問題，可是會獨佔一行，以下圖所示：

背景

背景顏色
漸變色背景
多背景疊加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漸變色背景（線性梯度）</title>
    <style>
        .div1{
            height: 90px;
        }
        .div2{
            height: 90px;
            /*background: linear-gradient(to right,red,green);*/
            /*background: linear-gradient(180deg,red,green);*/
            /*background: linear-gradient(135deg,red 0,green 15%,yellow 50%,blue 90%);*/
            
            /*網格線*/
            background: linear-gradient(135deg,transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),
                        linear-gradient(45deg,transparent 0,transparent 49.5%,red 49.5%,red 50.5%,transparent 50.5%,transparent 100%);
            background-size: 30px 30px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>
複製代碼

最後一個例子展現效果： web

背景圖片和屬性（雪碧圖）

background-repeat: no-repeat;
background-size: 30px 30px; //相對於容器偏移
background-position: 30px 30px;
複製代碼

雪碧圖 就是將不少個圖片進行拼接成一個圖片，而後經過 background-position等屬性進行偏移，在網頁中獲得對應圖片，來達到減小http請求。

base64和性能優化

將圖片進行base64編碼後，就是一個字符文本，缺點之一就是圖片的體積會增大 1/3 左右，而且放入css文件中，也會致使css文件變大。另外，雖然能減小http請求，但增大瞭解碼的開銷。適用於小圖標icon，例如loading文件等。最後，在開發環境通常不採用直接將圖片進行 base64 編碼，由於對於協同開發來講，沒法知曉圖片原樣，只有一個文本。

通常狀況下，是在生產環境下，經過打包的方式，將小圖片進行 base64編碼。
多分辨率適配

邊框（經典問題）

邊框的屬性：線型大小顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邊框</title>
    <style>
        .c1{
            width: 400px;
            height: 200px;
            border: 1px solid red;
            /*border: 5px solid red;*/
            /*border: 5px dotted red;*/
            /*border: 5px dashed red;*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>
複製代碼

邊框背景圖

經典問題：九宮格問題，例以下面圖片，咱們若是想要實現9個不一樣形式，而後中間放內容，若是用本來9個div方法，那麼會很是麻煩，而css3提供了 border方式能夠解決上述問題。

在沒有在 border-image處設置 round以前，是如上效果，後面 30 是用來切出四個角。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邊框</title>
    <style>
        .c1{
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round將圖片進行整數個拼接*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>
複製代碼

在 border-image處設置 round以後，是以下效果，基本達到咱們想要的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邊框</title>
    <style>
        .c2{
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round將圖片進行整數個拼接*/
        }
    </style>
</head>
<body>
    <div class="c2"></div>
</body>
</html>
複製代碼

邊框銜接（三角形）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邊框</title>
    <style>
        .c3{
            width: 0px;
            height: 200px;
            border-bottom: 30px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div class="c3"></div>
</body>
</html>
複製代碼

實現三角形，效果以下：

滾動

產生滾動的緣由：當內容比容器多的時候，即容器裝不下內容的時候，就須要滾動。滾動主要包括以下幾個方面：

滾動行爲和滾動條

overflow 設置auto 和 scroll 區別，auto 是內容多於容器時顯示滾動條，反正，不顯示。而 scroll 是一直顯示滾動條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滾動</title>
    <style>
        .div1{
            background: red;
            height: 200px;
            overflow: scroll;  /*可選值: hidden visible auto scroll*/
        }
    </style>
</head>
<body>
    <div class="div1">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</body>
</html>
複製代碼

文字折行（經典問題）

overflow-wrap（word-wrap）通用換行控制（是否保留單詞）
word-break 針對多字節文字（中文句字也是單詞）
white-space 空白處是否斷行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字折行</title>
    <style>
        .div1{
            border: 1px solid;
            width: 8em;
            overflow-wrap: normal;
            word-break: normal;
            white-space: normal;
        }
    </style>
</head>
<body>
    <div class="div1">
        學如逆水行舟，不進則退！Learning is like sailing against the current, retreating if not advancing
    </div>
</body>
</html>
複製代碼

展現效果:

經典問題：怎麼讓一個很長的文本不換行？

將上述屬性設置爲 nowrap便可

white-space: nowrap;
複製代碼

裝飾性屬性

字重（粗體）font-weight
斜體 font-style:itatic
下劃線 text-decoration
指針 cursor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font-weight</title>
    <style>
        .div1{
            font-weight: normal; /*400*/
            font-weight: bold;   /*700*/
            font-weight: bolder;
            font-weight: lighter;
            font-weight: 100;
        }
    </style>
</head>
<body>
    <div class="div1">學如逆水行舟，不進則退！</div>
</body>
</html>
複製代碼

CSS Hack（瞭解）

hack

用來 處理瀏覽器兼容性作法，好處就是 簡單粗暴。

Hack即不合法但生效的寫法
主要用於區分不一樣瀏覽器
缺點：難理解難維護難失效
替代方案：特性檢測（檢測瀏覽器是否有相關特性，沒有的話就針對性處理）
替代方案：針對性加class（例如檢測到 IE6，那麼就加IE6的class）

CSS 面試真題

css樣式（選擇器）的優先級

計算權重肯定
!important
內聯樣式
後寫的優先級高

雪碧圖的做用

雪碧圖 就是將不少個圖片進行拼接成一個圖片，而後經過 background-position等屬性進行偏移，在網頁中獲得對應圖片，來達到減小http請求，提升頁面加載性能。
有一些狀況下能夠減小圖片大小（例如png格式圖片，每張圖片顏色基本上同樣的，有可能總的圖片大小是小於每一個圖片加起來的大小的）

自定義字體的使用場景

宣傳 / 品牌 / banner 等固定文案
字體圖標（將文字變爲圖標）

base64的做用

將圖片進行base64編碼後，就是一個字符文本，缺點之一就是圖片的體積會增大 1/3 左右，而且放入css文件中，也會致使css文件變大。另外，雖然能減小http請求，但增大瞭解碼的開銷。適用於小圖標icon，例如loading文件等。最後，在開發環境通常不採用直接將圖片進行 base64 編碼，由於對於協同開發來講，沒法知曉圖片原樣，只有一個文本。

用於減小http請求
適用於小圖片
base64的體積約爲原圖的 4/3

僞類和僞元素的區別？

僞類表狀態（某元素是個連接 link狀態）
僞元素是真的有元素（::before{}，在頁面中會顯示內容）
前者使用單冒號，後者使用雙冒號

如何美化checkbox

label [for] 和 id
隱藏原生 input（全部的樣式由 label 來搞定）
:checked + label

CSS 佈局

CSS體系知識的重中之重

早期以 table 爲主（簡單）
後來以技巧性佈局爲主（難）
如今有 flexbox / grid（偏簡單）

經常使用佈局方式

table表格佈局
float 浮動+ margin
inline-block 佈局
flexbox 佈局

佈局方式（表格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table佈局</title>
    <style>
        .table{
            margin-top: 20px;
            width: 500px;
            height: 100px;
            display: table;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: center;
            display: table-cell;
        }
        .left{
            background: red;
            vertical-align: middle;
        }
        .right{
            background: blue;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="table-row">
            <div class="left table-cell">left</div>
            <div class="right table-cell">right</div>
        </div>
    </div>
</body>
</html>
複製代碼

展現效果以下圖所示：

display / position（經典問題）

display 經常使用屬性值： block（塊級） / inline（內聯） / inline-block（對內表現爲block，能夠有寬高，對外表現爲inline，能夠與其它元素排在同一行）
position 經常使用屬性值：static（靜態） / relative（相對） / absolute（絕對） / fixed（固定）

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style>
        .block{
            height: 200px;
            background: red;
        }
        .inline{
            display: inline;
            background: green;
        }
        .inline-block{
            display: inline-block;
            width: 200px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="block">
        block
    </div>
    <div class="inline">inline</div>
    <div class="inline-block">inline-block</div>
</body>
</html>
複製代碼

position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position</title>
    <style>
        .p1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .p2{
            position: relative;
            width: 100px;
            height: 100px;
            left: 20px;
            top: -10px;
            background: blue;
        }
        .p3{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 80px;
            top: 30px;
            background: yellow;
        }
        .p4{
            position: fixed;
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 10px;
            background: green;
        }
        .p5{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="p1">position:static</div>
    <div class="p2">position:relative</div>
    <div class="p3">position:absloute</div>
    <div class="p4">position:fixed</div>
    <div class="p5">no position</div>
</body>
</html>
複製代碼

展現效果以下：

由上圖可知，當設置 position 爲 relative 後，no position（粉色塊）並無在藍色塊下面，也就是說設置 position 爲 relative 後，佔據空間仍是按照原來的方式計算的，不會由於偏移而改變佈局的計算。

經典問題：

絕對定位 absolute，會優先查找父級定位爲 absolute 或 relative的進行定位，若是父級沒有，找上級，那麼最終就會根據 body進行定位，它和 fixed同樣，也是脫離了文檔流。
fixed相對於屏幕進行定位

層疊問題 ，由於默認會根據前後順序顯示，所以會有覆蓋狀況，此時，能夠經過設計 z-index 解決，權重越大，優先顯示。

flexbox（聖盃佈局）

彈性盒子
盒子原本就是並列的
指定寬度便可
移動端經常使用

（目前用的不是很熱的緣由是雖然簡單方便，可是兼容性有點問題）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flexbox</title>
    <style>
        .container{
            width: 800px;
            height: 200px;
            display: flex;
            border: 1px solid black;
        }
        .flex{
            background: blue;
            flex: 1;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="flex">flex</div>
        <div class="flex">flex</div>
        <div class="flex">flex</div>
        <div class="flex">flex</div>
        <div class="flex">flex</div>
    </div>
</body>
</html>
複製代碼

展現效果以下：

由這個很方便的佈局，咱們能夠寫一個 聖盃佈局的例子（即左右固定，中間自適應）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聖盃佈局-flexbox</title>
    <style>
        *{
            margin: 0;
        }
        .container{
            min-height: 200px;
            display: flex;
        }
        .left{
            width: 200px;
            display: flex;
            background: red;
        }
        .center{
            background: yellow;
            flex: 1;
        }
        .right{
            width: 200px;
            display: flex;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
</html>
複製代碼

float

元素"浮動"
脫離文檔流（不會對其它元素的佈局形成影響）
但不脫離文本流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float佈局</title>
    <style>
        .container{
            width: 400px;
            background: red;
        }
        .p1{
            width: 200px;
            height: 80px;
            float: left;
            background: pink;
        }

    </style>
</head>
<body>
    <div class="container">
        <span class="p1">float元素</span>
        <div class="p2">不少文字不少文字不少文字不少文字不少文字不少文字不少文字不少文字不少文字不少文字不少文字不少文字不少文字不少文字不少文字</div>
    </div>
</body>
</html>
複製代碼

展現效果以下：

float 特性的影響（經典問題）

float 特性對本身的影響：

造成塊（BFC，可使得inline元素可以設置寬高，例如上文代碼，本來span元素不能設置寬高的，但經過設置float佈局，使得能夠設置寬高）
位置儘可能靠上
位置儘可能靠左（右）（對於上述解釋，是若是 container寬度夠的話，就儘可能靠上和靠左，若是不行的話，就往下排了）

簡單例子：

float 特性對兄弟的影響：

上面貼非 float 元素
旁邊貼 float 元素
不影響其它塊級元素位置（不脫離文檔流）
影響其它塊級元素內部文本（脫離了文本流）

float 特性對父級的影響：

從佈局上 "消失"（父級不會管它的寬高）
經典問題：高度塌陷（假設float元素，本來是 100px 高度，這個時候很指望父級能撐開100個像素，但由於設置了 float，等於消失了，並不會在乎這 100個像素，所以，若是沒有其它元素支撐高度的話，父級的高度就會設置爲0，這就是高度塌陷）

清楚浮動的方式

經典問題：

清除浮動的方式

① 當咱們設置爲 float 後，會將元素設爲 BFC，接管本身的寬高，所以咱們也可讓父級元素設置爲 BFC，來接管本身的寬高。

初始狀態：

在父級元素設置 overflow: auto/hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清楚浮動</title>
    <style>
        .container{
            background: red;
            width: 400px;
            overflow: auto;
            margin: 10px;
        }
        .p1{
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>xxxxxx</span>
        <span class="p1">float</span>
        <span class="p1">float</span>
    </div>
    <div class="container" style="height: 200px; background: blue;">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
    </div>
</body>
</html>
複製代碼

最終狀態效果圖以下：

② 因爲 float 不脫離文檔流（不會影響其它元素佈局），那麼就可使得元素恰好到達下面位置。就能夠經過其它元素將父級撐起來，當父級恰好撐到下方位置時，就能夠將浮動清除掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清楚浮動</title>
    <style>
        .container{
            background: red;
            width: 400px;
        }
        .p1{
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        }
        .removeFloat::after{
            content: 'aaa';
            clear: both; /*保證當前元素左右沒有浮動元素*/
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="container removeFloat">
        <span>xxxxxx</span>
        <span class="p1">float</span>
        <span class="p1">float</span>
    </div>
    <div class="container" style="height: 200px; background: blue;">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
    </div>
</body>
</html>
複製代碼

經典清除浮動方式，效果圖以下：

float（聖盃佈局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聖盃佈局-float</title>
    <style>
        .container{
            min-height: 200px;
        }
        .left{
            float: left;
            background: red;
            width: 200px;
        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
            background: yellow;
        }
        .right{
            float: right;
            background: blue;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
        
    </div>
</body>
</html>
複製代碼

展現效果以下：

inline-block 佈局

像文本同樣排block元素
沒有清楚浮動等問題
須要處理間隙

例以下圖，紅藍之間有一個間隙，是由於 inline-block就像文本同樣，咱們沒辦法讓兩個字牢牢地挨着，因而咱們就有了下文所述解決方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline-block佈局</title>
    <style>
        .container{
            width: 800px;
            height: 200px;
            font-size: 0;
        }
        .left{
            font-size: 15px;
            background: red;
            display: inline-block;
            width: 200px;
            height: 200px;
        }
        .right{
            font-size: 15px;
            background: blue;
            display: inline-block;
            width: 500px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>
複製代碼

展現效果以下：

查看上述代碼，將父級元素字體大小設置爲0便可解決間隙問題，但子元素須要設置本身的字體大小，否則就不會顯示。

所以，作自適應方面會有點麻煩，不像上文 float+margin 那樣簡單

響應式設計和佈局

在不一樣的設備上正常使用
通常處理屏幕大小問題
主要方法：隱藏 + 折行 + 自適應空間（rem：經過html的字體大小（即 font-size）來肯定元素大小，但不太精確 / viewport：經過 js或手工肯定整個界面放到多大 / media query：媒體查詢，根據不一樣的設備來匹配不一樣的樣式）

下圖含義就是隻有在寬度小於 640px 時纔會生效，即讓移動端進行適配。

CSS 面試真題

實現兩欄（三欄）佈局的方法

表格佈局
float + margin 佈局（兼容性好）
inline-block 佈局（須要處理間隙問題）
flexbox佈局（簡單，但兼容性不是很好）

position:absolute / fixed 有什麼區別？

經典問題：

絕對定位 absolute，會優先查找父級定位爲 absolute 或 relative的進行定位，若是父級沒有，找上級，那麼最終就會根據 body進行定位，它和 fixed同樣，也是脫離了文檔流。
fixed相對於屏幕（viewport）進行定位

層疊問題 ，由於默認會根據前後順序顯示，所以會有覆蓋狀況，此時，能夠經過設計 z-index 解決，權重越大，優先顯示。

display:inline-block 的間隙

緣由：字符間距
解決：消滅字符（把標籤寫在一塊兒或者添加註釋）或者消滅間距（將font-size設爲0）

如何清除浮動？爲何要清除浮動？

緣由：浮動的元素不會佔據父元素的佈局空間，也就是父級元素不會管浮動元素，有可能浮動元素會超出父元素，從而對其它元素產生影響。

經典問題：

清除浮動的方式

① 當咱們設置爲 float 後，會將元素設爲 BFC，接管本身的寬高，所以咱們也可讓父級元素設置爲 BFC，來接管本身的寬高。

初始狀態：

在父級元素設置 overflow: auto/hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清楚浮動</title>
    <style>
        .container{
            background: red;
            width: 400px;
            overflow: auto;
            margin: 10px;
        }
        .p1{
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>xxxxxx</span>
        <span class="p1">float</span>
        <span class="p1">float</span>
    </div>
    <div class="container" style="height: 200px; background: blue;">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
    </div>
</body>
</html>
複製代碼

最終狀態效果圖以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清楚浮動</title>
    <style>
        .container{
            background: red;
            width: 400px;
        }
        .p1{
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        }
        .removeFloat::after{
            content: 'aaa';
            clear: both; /*保證當前元素左右沒有浮動元素*/
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="container removeFloat">
        <span>xxxxxx</span>
        <span class="p1">float</span>
        <span class="p1">float</span>
    </div>
    <div class="container" style="height: 200px; background: blue;">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
    </div>
</body>
</html>
複製代碼

經典清除浮動方式，效果圖以下：

如何適配移動端頁面？

主要方法：隱藏 + 折行 + 自適應空間（rem：經過html的字體大小（即 font-size）來肯定元素大小，但不太精確 / viewport：經過 js或手工肯定整個界面放到多大 / media query：媒體查詢，根據不一樣的設備來匹配不一樣的樣式）

效果屬性（CSS最出彩的一部分）

box-shadow

屬性值介紹：前兩個是偏移量，第三個是模糊區域度，第四個是拓展區域度，第五個是顏色（最後一個是透明度）

box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);
複製代碼

text-shadow

立體感
印刷品質感

border-radius

圓角矩形
圓形
半圓 / 扇形
一些奇怪的角角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-radius</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
複製代碼

展現效果以下：

background

紋理、圖案
漸變
雪碧圖動畫
背景圖尺寸適應

clip-path

對容器進行裁剪
常見幾何圖形
自定義路徑

3D-transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D-transform</title>
    <style>
        .container{
            margin: 50px;
            padding: 10px;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: relative;
            perspective: 500px;
        }
        #cube{
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transform: translateZ(-100px);
            transition: transform 1s;
        }
        #cube:hover{
            transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
        }
        #cube div{
            width: 200px;
            height: 200px;
            position: absolute;
            line-height: 200px;
            font-size: 50px;
            text-align: center;
        }
        .front{
            background: rgba(255, 0, 0, .3);
            transform: translateZ(100px);
        }
        .back{
            background: rgba(0, 255, 0, .3);
            transform: translateZ(-100px) rotateY(180deg);
        }
        .left{
            background: rgba(0, 0, 255, .3);
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right{
            background: rgba(255, 255, 0, .3);
            transform: translateX(100px) rotateY(90deg);
        }
        .top{
            background: rgba(255, 0, 255, .3);
            transform: translateY(-100px) rotateX(-90deg);
        }
        .bottom{
            background: rgba(0, 255, 255, .3);
            transform: translateY(100px) rotateX(90deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="cube">
            <div class="front">1</div>
            <div class="back">2</div>
            <div class="right">3</div>
            <div class="left">4</div>
            <div class="top">5</div>
            <div class="bottom">6</div>
        </div>
    </div>
</body>
</html>
複製代碼

展現效果圖以下：

CSS 面試真題

如何用div畫一個 xxx

box-shadow 無限投影
::before
::after

如何產生不佔空間的邊框

box-shadow
outline

如何實現圓形元素（頭像）

border-radius:50%

如何實現iOS圖標的圓角

clip-path：(svg)

如何實現半圓、扇形等圖形

border-radius 組合：有無邊框、邊框粗細、圓角半徑

如何實現背景圖居中顯示 / 不重複 / 改變大小

background-position
background-repeat
background-size（cover / contain）

如何平移 / 放大一個元素

transform:translateX(100px)
transform:scale(2)
transform自己與動畫沒有關係

如何實現3D效果

perspective:500px（指定透視角度）
transform-style:preserve-3d;（3d效果）
transform:translate rotate ...

CSS 動畫

動畫的原理

視覺暫留做用：就是說看到的畫面，會在腦海中保留一段片斷
畫面逐漸變化

動畫的做用

愉悅感
引發注意
反饋（輸入密碼錯誤時，登陸框晃動）
掩飾

CSS中動畫的類型

transition 補間動畫（從一個狀態到另外一個狀態，狀態切換之間是有動畫的）
keyframe 關鍵幀動畫（指定的每個狀態就是一個關鍵幀）
逐幀動畫（跳動）

transition 補間動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition補間動畫</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            transition: width 1s, background 2s;
        }
        .container:hover{
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
複製代碼

展現效果以下：

動畫進度與時間的關係

例子：

推薦：動畫進度與時間關係模擬網站

關鍵幀動畫

至關於多個補間動畫
與元素狀態的變化無關
定義更加靈活

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keyframe關鍵幀動畫</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s;
            animation-direction: reverse;
            animation-iteration-count: infinite;
            /*animation-fill-mode: forwards;*/
            /*animation-play-state: paused;*/
        }
        @keyframes run {
            0%{
                width: 100px;
            }
            100%{
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
複製代碼

展現效果：

逐幀動畫

屬於關鍵幀動畫特殊的一種
適用於沒法補間計算的動畫
資源較大
使用 steps() （設置關鍵幀之間有幾個畫面，通常設置爲1,也能夠說是將關鍵幀去掉補間）

例如：一個動物跑動的過程，經過將每一個動做的圖片逐幀顯示，造成動畫的感受。

CSS 面試真題

CSS 動畫的實現方式有幾種

transition
keyframes（animation）

過渡動畫和關鍵幀動畫的區別

過渡動畫須要有狀態變化
關鍵幀動畫不須要狀態變化
關鍵幀動畫能控制更精細

如何實現逐幀動畫

使用關鍵幀動畫
去掉補間（steps）

CSS動畫的性能

性能不壞
部分狀況下優於JS
但JS能夠作的更好
部分高危屬性（例如 box-shadow等）

CSS 預處理器

基於CSS的另外一種語言
經過工具編譯爲CSS
添加了不少CSS不具有的特性
能提高CSS文件的組織

常見的有 less（基於node寫的，編譯比較快，入門簡單）和 sass（基於Ruby寫的）

嵌套反映層級和約束
變量和計算減小重重複代碼
Extend 和 Mxxin 代碼片斷
循環適用於複雜有規律的樣式
import CSS 文件模塊化

less嵌套

全局安裝 less

npm install less -g
複製代碼

建立一個 test.less 文件

body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: white;
    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background: red;
        }
    }
}
複製代碼

在該文件處調用終端，執行如下命令：

lessc test.less
複製代碼

輸出結果：

執行以下命令，輸出到 test.css 文件中

lessc test.less > test.css
複製代碼

查看 test.css 文件，獲得以下結果：

body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: white;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}
複製代碼

sass嵌套

全局安裝 sass

cnpm install node-sass -g
複製代碼

建立一個 test.scss 文件

body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: white;
    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background: red;
        }
    }
}
複製代碼

執行以下命令，查看輸出結果：

node-sass test.scss
複製代碼

執行以下命令，輸出到 test-scss.css 文件中

node-sass test.scss > test-scss.css
複製代碼

查看 test-scss.css 文件，獲得以下結果：

body {
  padding: 0;
  margin: 0; }

.wrapper {
  background: white; }
  .wrapper .nav {
    font-size: 12px; }
  .wrapper .content {
    font-size: 14px; }
    .wrapper .content:hover {
      background: red; }
複製代碼

從以上代碼來看，sass嵌套會保留原來嵌套樣式，對於css觀賞性來講，並非咱們特別想要的，因而咱們能夠執行以下命令，更改輸出樣式：

node-sass --output-style expanded test.scss > test-scss.css
複製代碼

輸出結果就和less嵌套同樣了，讀者能夠本身跑一遍！

less變量

建立 variable-less.less 文件

@fontSize: 12px;
@bgColor: red;

body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten(@bgColor,40%);
    .nav{
        font-size: @fontSize;
    }
    .content{
        font-size: @fontSize+2px;
        &:hover{
            background: @bgColor;
        }
    }
}
複製代碼

建立 variable-less.css 文件，執行以下命令：

lessc variable-less.less > variable-less.css
複製代碼

能夠獲得以下代碼：

body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}
複製代碼

sass變量

相似less變量，只須要將 @ 改成 $ 便可，由於 less 變量命名這樣作，是更貼近CSS。而 sass是爲了區別CSS。

less mixin

建立 mixin.less 文件，複製以下代碼：

@fontSize: 12px;
@bgColor: red;

.block(@fontSize){
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten(@bgColor,40%);
    .nav{
        .block(@fontSize);
    }
    .content{
        .block(@fontSize+2px);
        &:hover{
            background: @bgColor;
        }
    }
}
複製代碼

建立 mixin-less.css 文件，執行以下代碼：

lessc mixin.less > mixin-less.css
複製代碼

查看mixin-less.css 文件，發現 .block 沒有了，在CSS內部就完成了樣式複用。

body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content {
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content:hover {
  background: red;
}
複製代碼

sass mixin

建立 mixin.scss 文件，複製以下代碼：

$fontSize: 12px;
$bgColor: red;

@mixin block($fontSize){
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten($bgColor,40%);
    .nav{
        @include block($fontSize);
    }
    .content{
        @include block($fontSize+2px);
        &:hover{
            background: $bgColor;
        }
    }
}
複製代碼

建立 mixin-sass.css 文件，執行以下代碼：

node-sass --output-style expanded mixin.scss > mixin-sass.css
複製代碼

查看mixin-sass.css 文件，發現 .block 沒有了，在CSS內部就完成了樣式複用。

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  background: #ffcccc;
}

.wrapper .nav {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.wrapper .content {
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.wrapper .content:hover {
  background: red;
}
複製代碼

總結：從上文對比來看，sass mixin 除了調用變量符號要換爲 $ 外，抽離公共樣式須要使用 @mixin ，此外，調用時還須要使用 @include 。

那麼，mixin還能作什麼呢？

例如，對於佈局方面，咱們在上文提到了清楚浮動的方式，那麼，咱們就能夠將這段樣式進行復用，只須要在須要的元素處引用便可。

less extend

上文提到過的，使用過 less mixin 抽離以後，咱們能夠獲得以下代碼，可是呢，又會有一個小問題，就是咱們會有重複樣式代碼。在生產環境下，就會有大量這樣的形式出現，這就會影響到咱們的CSS體積了。

一種比較好的方式，以下，咱們再講公共樣式代碼進行抽離，這顯然會下降咱們的CSS體積。

所以，extend就發揮了它的做用

建立 extend-less.less 文件，複製以下代碼：

@fontSize: 12px;
@bgColor: red;

.block{
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten(@bgColor,40%);
    .nav{
        &:extend(.block);
    }
    .content:extend(.block){
        &:hover{
            background: @bgColor;
        }
    }
}
複製代碼

建立 extend-less.css 文件，執行以下代碼：

lessc extend-less.less > extend-less.css
複製代碼

查看 extend-less.css 文件，發現代碼體積相對減小了。

.block,
.wrapper .nav,
.wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .content:hover {
  background: red;
}
複製代碼

總結：mixin 和 extend 區別， mixin 能處理一些複雜邏輯，好比添加變量，但會致使體積增大問題。而 extend的話，是將選擇器提取出來，更加簡單，不適合處理複雜邏輯，能將體積進行必定減小。

sass extend

建立 extend-sass.scss 文件，複製以下代碼：

$fontSize: 12px;
$bgColor: red;

.block{
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten($bgColor,40%);
    .nav{
        @extend .block;
    }
    .content{
        @extend .block;
        &:hover{
            background: $bgColor;
        }
    }
}
複製代碼

建立 extend-sass.css 文件，執行以下代碼：

node-sass --output-style expanded extend-sass.scss > extend-sass.css
複製代碼

查看 extend-sass.css 文件，發現代碼體積相對減小了。

.block, .wrapper .nav, .wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  background: #ffcccc;
}

.wrapper .content:hover {
  background: red;
}
複製代碼

less loop

建立 loop-less.less 文件，複製以下代碼

.gen-col(@n) when (@n > 0){
    .gen-col(@n - 1);
    .col-@{n}{
        width: 1000px/12*@n;
    }
}

.gen-col(12);
複製代碼

建立 loop-less.css 文件，執行以下代碼：

lessc loop-less.less > loop-less.css
複製代碼

查看 loop-less.css 文件，發現有12個樣式

.col-1 {
  width: 83.33333333px;
}
.col-2 {
  width: 166.66666667px;
}
.col-3 {
  width: 250px;
}
.col-4 {
  width: 333.33333333px;
}
.col-5 {
  width: 416.66666667px;
}
.col-6 {
  width: 500px;
}
.col-7 {
  width: 583.33333333px;
}
.col-8 {
  width: 666.66666667px;
}
.col-9 {
  width: 750px;
}
.col-10 {
  width: 833.33333333px;
}
.col-11 {
  width: 916.66666667px;
}
.col-12 {
  width: 1000px;
}
複製代碼

sass loop

建立 loop-sass.scss 文件，複製以下代碼：

@mixin gen-col($n){
    @if $n > 0 {
        @include gen-col($n - 1);
        .col-#{$n}{
            width: 1000px/12*$n;
        }
    }
}

@include gen-col(12);
複製代碼

建立 loop-sass.css，執行以下代碼：

node-sass --output-style expanded loop-sass.scss > loop-sass.css
複製代碼

查看 loop-sass.css 文件，發現有12個樣式

.col-1 {
  width: 83.33333px;
}

.col-2 {
  width: 166.66667px;
}

.col-3 {
  width: 250px;
}

.col-4 {
  width: 333.33333px;
}

.col-5 {
  width: 416.66667px;
}

.col-6 {
  width: 500px;
}

.col-7 {
  width: 583.33333px;
}

.col-8 {
  width: 666.66667px;
}

.col-9 {
  width: 750px;
}

.col-10 {
  width: 833.33333px;
}

.col-11 {
  width: 916.66667px;
}

.col-12 {
  width: 1000px;
}
複製代碼

上述版本代碼或許是挺複雜的，好在 sass提供了for循環，見以下代碼：

@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000px/12*$i;
    }
}
複製代碼

less import

建立 import-less.less 文件，複製以下代碼：

@import "./mixin";
@import "./variable-less";
複製代碼

建立 import-less.css 文件，執行以下代碼：

lessc import-less.less > import-less.css
複製代碼

查看 import-less.less 文件

body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content {
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content:hover {
  background: red;
}
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}
複製代碼

sass import

語法上沒有什麼變化，注意符號是 $

CSS預處理器框架

Less - Lesshat / EST（官網）
SASS - Compass （官網，將有兼容性問題的屬性會進行封裝成mixin，直接調用就好）
提供現成的 mixin
相似 JS 類庫封裝經常使用功能

CSS 面試真題

常見的CSS預處理器

Less（Node.js）
Sass（Ruby 有Node版本）

預處理器的做用

幫助更好地組織CSS代碼
提升代碼複用率
提高可維護性

預處理器的能力

嵌套反映層級和約束
變量和計算減小重重複代碼
Extend 和 Mxxin 代碼片斷
循環適用於複雜有規律的樣式（網格系統）
import CSS 文件模塊化（按需拆解CSS文件）

預處理器的優缺點

優勢：提升代碼複用率和可維護性
缺點：須要引入編譯過程有學習成本

Bootstrap

一個CSS框架
twitter 出品
提供通用基礎樣式

Bootstrap 4

兼容IE10+
使用flexbox佈局
拋棄Nomalize.css
提供佈局和 reboot版本
（官網，用sass寫）
可用於後臺管理系統

Bootstrap JS組件

用於組件交互

dropdown（下拉）
modal（彈窗）
...

基於jquery寫的，同時，依賴第三方庫 Popper.js和 bootstrap.js

如上圖，第二個js文件包含了 Popper.js

使用方式：

基於 data-*屬性
基於 JS API

Bootstrap 響應式佈局

很是精華的部分

Bootstrap 定製方法

使用CSS同名類覆蓋（操做簡單但）
修改sass源碼從新構建
引用scss源文件修改變量（推薦使用，乾淨）

CSS 面試真題

Bootstrap的優缺點

優勢：CSS代碼結構合理，現成的樣式能夠直接使用
缺點：定製較爲繁瑣體積大

Bootstrap如何實現響應式佈局

原理：經過 media query 設置不一樣分辨率的class
使用：爲不一樣分辨率選擇不一樣的網格class

如何基於Bootstrap 定製本身的樣式

使用CSS同名類覆蓋（操做簡單但）
修改sass源碼從新構建（須要瞭解Bootstrap 結構）
引用scss源文件修改變量（按需使用，控制體積，推薦使用，乾淨，但須要了解結構）

CSS 工程化

關注幾個事情：組織、優化、構建、維護

PostCSS

將 CSS 解析成 CSS，和預處理器沒太多區別。
自己只有解析能力
各類神奇的特性全靠插件
目前至少有200多個插件

常見：

import 模塊合併
autoprefixer 自動加前綴
cssnano 壓縮代碼
cssnext 使用CSS新特性
precss 變量、mixin、循環等

PostCSS插件的使用

全局安裝 postcss-cli

npm install postcss-cli -g
複製代碼

在 postcss.config.js 文件進行配置

cssnext

precss

變量（使用和 sass 幾乎同樣）
條件（if）
循環
Mixin Extend
import
屬性值引用

gulp-postcss

PostCSS 支持的構建工具

CLI命令行工具
webpack postcss-loader
Gulp gulp-postcss
Grunt grunt-postcss
Rollup rollup-postcss
...

webpack

JS是整個應用的核心入口
一切資源均由JS管理依賴
一切資源均由webpack打包

webpack 和 CSS

css-loader 將 CSS變爲 JS
style-loader 將JS插入到head
ExtractTextPlugin 將 CSS 從 JS 中提取出來
CSS modules 解決 CSS命名衝突的問題
less-loader sass-loader 各種預處理器
postcss-loader PostCSS處理

CSS 面試真題

如何解決CSS模塊化問題

less sass 等CSS預處理器
PostCSS插件（postcss-import / precss等）
webpackl處理CSS（css-loader + style-loader）

PostCSS能夠作什麼？

取決於插件作什麼
autoprefixer cssnext precss等兼容性處理
import 模塊合併
css語法檢查兼容性檢查
cssnano 壓縮文件

CSS modules是作什麼的，如何使用

解決類名衝突的問題
使用PostCSS或者webpack等構建工具進行編譯
在HTML模板中使用編譯過程產生的類名

爲何使用JS來引用、加載CSS

JS做爲入口，管理資源有自然優點
將組件的結構、樣式、行爲封裝到一塊兒，加強內聚
能夠作更多處理（webpack）

結尾

話說，我有女友嗎？我有嗎？原來我沒有...

扯開女友話題，終於完成了這篇史詩級大做，時隔幾天時間。更多筆記內容還請關注小獅子前端筆記倉庫（不要白嫖，給個 star ✿✿ヽ(°▽°)ノ✿ 就是對我最大的支持啦~）

學如逆水行舟，不進則退
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

女友要我教她CSS，我就寫了這一篇長文，感動哭了？

寫做背景

熟悉HTML知識

HTML常見元素

head 部分

body部分

doctype的意義是什麼

HTML、XHTML、HTML5的關係

HTML5有什麼變化

em和 i 有什麼區別

語義化的意義

哪些元素能夠自閉合

HTML和DOM關係

property 和 attritube 區別

form的好處

CSS精華（Cascading Style Sheet）層疊樣式表

選擇器

選擇器分類

選擇器權重（1）

選擇器權重（2）

非佈局樣式

字體

行高（經典問題）

背景

邊框（經典問題）

滾動

文字折行（經典問題）

裝飾性屬性

CSS Hack（瞭解）

hack

CSS 面試真題

css樣式（選擇器）的優先級

雪碧圖的做用

自定義字體的使用場景

base64的做用

僞類和僞元素的區別？

如何美化checkbox

CSS 佈局

經常使用佈局方式

佈局方式（表格）

display / position（經典問題）

flexbox（聖盃佈局）

float

float 特性的影響（經典問題）

清楚浮動的方式

float（聖盃佈局）

inline-block 佈局

響應式設計和佈局

CSS 面試真題

實現兩欄（三欄）佈局的方法

position:absolute / fixed 有什麼區別？

display:inline-block 的間隙

如何清除浮動？爲何要清除浮動？

如何適配移動端頁面？

效果屬性（CSS最出彩的一部分）

box-shadow

text-shadow

border-radius

background

clip-path

3D-transform

CSS 面試真題

如何用div畫一個 xxx

如何產生不佔空間的邊框

如何實現圓形元素（頭像）

如何實現iOS圖標的圓角

如何實現半圓、扇形等圖形

如何實現背景圖居中顯示 / 不重複 / 改變大小

如何平移 / 放大一個元素

如何實現3D效果

CSS 動畫

動畫的原理

動畫的做用

CSS中動畫的類型

transition 補間動畫

動畫進度與時間的關係

關鍵幀動畫

逐幀動畫

CSS 面試真題

CSS 動畫的實現方式有幾種

`head` 部分

`body`部分