1.字體圖標 1.字體圖標都是用svg圖片 1.svg圖片不失真 2.svg圖標由設計師提供 3.為了減少網路請求，會把svg圖標轉換成字體圖標，放到字體文件中，通過字體庫的方式使用 1.svg圖片不失真 2.svg圖標由設計師提供 3.為了減少網路請求，會把svg圖標轉換成字體圖標，放到字體文件中 ...
1.字體圖標都是用svg圖片
-
1.svg圖片不失真
-
2.svg圖標由設計師提供
-
3.為了減少網路請求，會把svg圖標轉換成字體圖標，放到字體文件中，通過字體庫的方式使用
2.製作步驟
-
1.上傳字體圖標到線上製作網站：阿裡圖標庫或iconmoon
-
2.下載代碼
-
3.註意點：在上傳之前要把圖標的名字改好，不然類名會帶有尾碼
3.原理
-
1.css3語法引入字體：@font-face
-
@font-face {
-
font-family: "自定義字體名";
-
src : url() format(),
-
url() format()
-
}
-
1.自定義字體名：後面需要使用該字體名
-
2.引入多個url：相容各種瀏覽器
-
3.format：聲明資源格式，方便瀏覽器識別
-
-
2.將字體用類包裝在類名中 ，方便賦予樣式
-
1..icon { font-family: "自定義字體名" }
-
2.高級方法： [class^="icon-"],[class*=" icon-"]{ font-family: "自定義字體名" }
-
-
3.將圖標編碼包裝在類名中，方便賦予樣式
-
.icon-名字 ｛ content: "unicode轉碼" ｝
-
-
2.html轉碼在下載的文件中就有
2.預處理器
1.作用：讓css變得更加簡潔和強大
2.原理：預先寫好一些高級的css，通過特定編譯方式再轉成css讓瀏覽器識別
3.常見的預處理器
-
1.less：目前最流行
-
1.引入less
-
1.引入less文件：<link type="stylesheet/less" src>
-
2.引入less編譯文件：less.js
-
用於編譯less文件，應該就是獲取上面的less文件，然後通過正則表達式將less文件轉換成css代碼，放在head裡面，作為內嵌式。所以需要放在less文件後面
-
-
-
-
2.sass
-
3.stylus
-
4.相似，只要學會一種，其他的就都會了
3.less
1.特點
-
1.完全相容css，並且擴展了css
-
2.語法簡潔，與css類似，容易上手
-
3.使用less.js編譯
2.語法
-
1.變數
-
2.mixins混入（自定義函數）
-
3.嵌套（跟標簽一樣嵌套，外面容器不需要重覆寫）
-
4.操作（運算符+-*/）
-
5.轉碼（把一些css代碼當成字元串轉碼到裡面）
-
6.函數（系統函數）
3.具體使用
-
1.編譯
-
1.使用node.js編譯（暫時不學）
-
2.引入文件進行編譯
-
1.引入cdn托管的靜態資源
-
2.引入自己的less.js
-
3.需要使用伺服器打開
-
-
3.vscode有編譯插件
-
4.開發中，使用less.js；上線用編譯完之後css文件
-
用less.js會在html頁面上報錯
-
-
-
2.變數
-
1.定義變數
-
1.@變數名：變數值
-
2.命名規範和js差不多，只用一個差別：中間可以有橫杠
-
-
2.使用變數：@變數名
-
-
3.嵌套
-
1.嵌套的選擇器是css中的選擇器，一般情況下，嵌套中的一級括弧相當於css中的空格
-
2.嵌套中的&表示上一層的選擇器，與js中this作用相同。一般用在偽類，偽元素，交集選擇器中
-
-
4.運算符
-
5.引入其他less文件：@import 路徑
-
在哪裡寫這句代碼，目標文件的內容就引入到那裡。
-
一般在最前面引入
-
6.使用細節
-
1.在一個選擇器a中寫另一個選擇器b，可以將選擇器b中的代碼帶入這個位置
-
2.通常把變數和自定義函數分別封裝在特定的文件中
-
1.變數：variables.less
-
2.函數：mixins.less
-
-
3.
-
-
7.less.js工作原理
-
1.通過rel請求less文件
-
需要伺服器
-
-
2.通過js中的正則表達式將less轉換成css文件
-
3.將css代碼動態添加到style標簽中
-
-
8.編譯
-
1.開發環境中使用less.js，因為這樣在less中有錯誤時，html頁面胡報錯
-
2.在生產環境中使用已編譯好的css文件
-
4.選擇器
1.下一個兄弟選擇器：+。選中下一個符合條件的兄弟元素
.box1 + .box2 選中.box1下一個且類名為.box2元素
2.後面兄弟選擇器：~。選中後面所有符合條件的兄弟元素
.box1 ~ .box2：選中.box1後面所有類名為.box2的兄弟元素
3.一般用於排除第一個兄弟元素
1.補充知識
1.以後開發中大部分都是用border-box
2.柵格系統中的所有元素都加了相對定位
3.不推薦給父元素加高度，用子元素撐開
4.bootstrap裡面如果在動畫時樣式消失，則可能是類名被覆蓋，或標簽、樣式名被動畫修改
5.輪播圖的圖片
-
1.大中小屏幕使用大圖片，且寬高不應該隨屏幕寬度的變化而變化，因為這樣會讓圖片難以看清。這時候的圖片應該作為背景，背景居中，然後輪播圖高給定，寬度自適應。
-
2.寬度自適應，超小屏幕使用小圖片，並且寬高自使用就行了，因為小屏幕的寬高變化不大
6.對一整個句子如果會換行，則應該使用padding讓文字居中。如果一整個句子不會換行，就使用行高居中
XMind: ZEN - Trial Version
