CSS基礎—非佈局樣式

一.字體

1.字體族

襯線字體[字體周圍有裝飾內容]：serif
非襯線字體[起筆落筆都規矩]:sans-serif
等寬字體[每一個字母佔的空間相等]:monospace
手寫體:cursive
花體[華麗歪歪拐拐的字體]:fantasy

2.多字體fallback

當一個字體指定之後，但又找不到，即往後找【定義多個字體如：微軟雅黑，宋體，楷體，當找不到微軟雅黑時即會使用宋體，以此類推】

3.網絡字體、自定義字體

當希望顯示自定義字體的內容

4.iconfont

5.實例演示

Fallback Demo
```
<style>
    .test {
        // 使用font-family定義字體
        font-family: "monaco";
    }
</style>
<html>
    <p class="test">
        Hello Jack 你好，傑克
    </p>
</html>
```
- 在頁面顯示時，我們可以查看控制檯中Computed -> Rendered Fonts會顯示用什麼字體真正渲染的頁面，可以看到有Monaco和PingFang，因爲Monaco只定義了英文字體，當給“你好，傑克”設置樣式時，默認使用PingFang字體進行渲染
字體族使用 Demo
```
<style>
    .test {
        // 使用font-family定義字體
        font-family: "Microsoft Yahei", serif;
    }
</style>
<html>
    <p class="test">
        Hello Jack 你好，傑克
    </p>
</html>
```
- 注意當使用字體時需要使用引號包裹，當使用字體族時不要加引號包裹，渲染時會自動給定字體族內的字體進行渲染
- 還需要注意當定義字體時需要將針對性強的放到前面，普遍都有的字體放到後面，即font-family: "PingFang SC", "Microsoft Yahei", monospace，其中Microsoft Yahei字體在大部分電腦上都會安裝，如果定義到PingFang SC前則可能PingFang SC字體永遠不會適用

自定義字體 Demo

<style>
    // 定義font-family自定義類型
    @font-face {
        font-family: "Jack-font";//自定義字體名
        src: url("./IndieFlower.ttf");//定義字體源,可以使本地的ttf也可以遠程的ttf
        // 如果使用的是遠程的ttf還需要考慮到跨域的問題
    }
    .custom-font {
        font-family: Jack-font;
    }
</style>
<html>
    <p class="custom-font">
        Hello Jack 你好，傑克
    </p>
</html>

使用iconfont
- 登錄阿里巴巴矢量圖選擇需要的字體並添加到項目中
- 統一將需要的所有icon字體全部導出
- 導出的內容會包括html的demo文件，可以查看具體的使用方式，如<i class="會在demo文件中給出"></i>，其中需要先引入導出的css文件，由於在i後添加了::before，會在添加的css中進行處理進而顯示對應的iconfont圖標內容

二.行高

1.行高的構成

行高設置的元素line-height

實例代碼

<span style="line-height:20px">inline box 01</span>
<span style="line-height:20px">inline box 02</span>
<span style="line-height:20px">inline box 03</span>
<span style="line-height:30px">inline box 04</span>

頁面顯示代碼可以看到四個inline box元素顯示在同一行，渲染高度一樣
原因：line-height只會撐開當前inline元素的整體行高，即實際當前此行的行高爲30px

整個inline-box的底部是bottom底線，字母的最下部分是基線，inline-box的頂部是top頂線

2.行高相關的現象和處理方案

實例代碼01
```
<div style="border:solid 1px red;">
    <span style="background: blue; color: #fff; font-size: 20px; line-height: 60px">元素內容</span>
</div>
```
- span的背景區域是根據字體大小(底線與頂線)決定的
- 上述代碼可以看到div的高度是60px，span的高度是20px(因爲是由字體的頂線與底線決定的)，超出的40px將分佈到span上下兩側
實例代碼02
```
<div>
    <span style="font-size:10px;">第一段</span>
    <span style="font-size:20px;">第二段</span>
    <span style="font-size:30px;">第三段</span>
</div>
```
- 上述代碼可以看到一行中的三段文字是基於基線對齊的
- 如果想基於底線對齊則:vertical-align:bottom;，基於頂線對齊:vertical-align: top，居中對齊:vertical-align:middle
- vertical-align默認是base-line像素，如果想上移指定像素則直接賦值像素值即可
實例代碼03**【圖片3px縫隙問題—面試題】**
```
<div>
    <span>文本</span>
    <img src="test.jpg"/>
</div>
```
- 上述代碼在頁面中顯示時會發現圖片下有一行空白縫隙
- 原因：img是inline元素，遵守行高構成，默認基於基線對齊(base-line)，基線對齊即元素下方還會與容器有一部分空隙的
- 可以通過設置img的style樣式vertical-align: bottom基於底線對齊，則會實現消除縫隙

三.背景

1.背景顏色

設置背景採用background屬性
background屬性值
- 顏色英文名: eg.white/black
- 顏色色號RGB: eg.#FF0000 -> 等同於 #F00
- hsl(色相,飽和度,亮度): eg.hsl(0, 100%, 50%)
- hsla(色相,飽和度,亮度,透明度): eg.hsla(0, 100%, 50%, .3)設置爲0.3的透明度
- rgb: eg.rgb(255, 0, 0)相當於FF0000
- rgba: eg.rgba(255,0,0,.3)

2.漸變色背景

實例代碼

.c {
    background: -webkit-linear-gradient(left, red, green); //線性漸變,從左開始從紅到綠
    background: linear-gradient(to right, red, green); //新寫法的線性漸變,從左開始從紅到綠
    background: linear-gradient(0deg, red, green); //角度的線性漸變,0deg表示從下到上,90deg表示從左往右
    background: linear-gradient(135deg, red 0, green 50%, blue 100%); //多顏色漸變
}

3.多背景疊加

實例代碼

.c {
    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%, blue 49.5% blue 50.5%, transparent 50.5%, transparent 100%);
    background-size: 30px 30px;
    // 通過設置兩個背景疊加實現網格效果，都是在百分比爲49.5到50.5期間繪製帶顏色線,且通過background-size設置一個背景的區間，如果一行有120px，則會出現4對交叉線
}

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

實例代碼

.c {
    height: 900px;//設置尺寸高度
    background: red url(./test.png);//如果單設這一個屬性則當背景圖小於900px時會出現多個平鋪的背景圖佔滿height
    background-repeat: no-repeat;//設置背景不可平鋪,則會只顯示一個背景圖,其餘顏色爲紅色遮蓋
    background-position: center; //設置背景圖的位置,可以設置爲center/top...或是指定距左距上像素位置
    background-size: 100px 20px;//如果背景圖足夠大,但不希望顯示那麼大的背景圖時可以通過此屬性設置背景圖大小
}

CSS雪碧圖是用來做性能優化的，如我們在一個頁面上顯示三個圖片內容，我們可以將三個圖片內容拼接到一個圖片中，並在頁面中通過背景圖片切割的方式設置要顯示的部分，這樣就是請求一個圖片即可完成所有的操作

5.base64進行性能優化

base64實質是一個文本
可以通過將圖片變成base64編碼來引用，可以通過轉碼的方式獲得對應的圖片文本，並將對應的文本填寫到background屬性中即可顯示。如:background: url(data:image/png;base64,xxxxxxx)
優點: 減少http請求連接數
缺點: 會增大圖片的體積(增大約1/3)；通過我們會將image文件單存，但如果這樣使用會增大css文件體積，故通常我們會用此方式顯示圖標；增大瞭解碼消耗

6.多分辨率適配

在多分辨率適配方面，手機上通常1px會有多個像素點去佔用，會使得圖片模糊，我們可以通過設置background-size屬性值縮小背景的大小，這樣在手機端就可以顯示的更加清楚了

四.邊框

1.邊框的屬性

線型：直線solid，虛線dashed
大小：粗細 m px
顏色：色號指定即可

2.邊框背景圖

通過border-image: url('xxx')的形式可以設置邊框背景

3.邊框銜接（三角形）

繪製三角形
- 如果設置
```
.c {
    width: 200px;
    height: 40px;
    border-bottom: 20px solid red;
    border-right: 20px solid blue;
}
```
  - 可以看到下方是紅色，右下角斜切均分，右側是藍色（斜切的分）
- 如果將右側設爲transparent透明，則可以看到右下角是尖的角
- 同樣如果左側也設爲transparent透明，則左右都是尖角，即等腰梯形
- width控制包裹的div寬度，如果width設爲0px，則會出現三角形
繪製扇形
- 可以通過添加border-radius設置圓角度數，從而實現成爲扇形

五.滾動

1.滾動行爲和滾動條

滾動條隱藏：visible（容器如果顯示不下內容時，內容會溢出到容器外顯示）
滾動條隱藏：hidden（容器如果顯示不下內容時，溢出內容隱藏）
滾動條顯示：scroll
滾動條自動顯示：auto

2.auto和scroll明顯區別

在Mac系統下無明顯區別
在Windows系統下如果內容不超過外邊框則auto屬性不會有滾動條，而scroll屬性滾動條會一直存在

六.文本折行

1.文字折行

overflow-wrap(word-wrap)通用換行控制 -> 是否保留單詞
- break-word值表示是否打斷單詞，如果選擇了此屬性值則意味着單詞會被折行顯示，但仍然保持單詞的完整性
work-break針對多字節文字 -> 是否把單詞/字母看成一個單位，中文句子也是單詞
- break-all值表示打斷所有的單詞以適應頁面顯示
- keep-all值表示所有單詞保證完整，且一箇中文句子也會保持完整
white-space 空白處是否斷行
- no-wrap值表示所有內容都不換行，都一行顯示

七.裝飾性屬性

1.裝飾性屬性

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

八.CSS Hack

1.什麼是CSS Hack

在一部分瀏覽器上生效的CSS寫法稱爲CSS Hack
Hack即不合法但生效的寫法
主要用於解決瀏覽器兼容性問題
缺點：難理解、難維護、易失效
替代方案：特性檢測
替代方案：針對性加class
實例代碼
```
body {
    width: 200px;
    width: 180px\9;
}
```
- 當我們希望在ie下width爲180px時可以如上定義，注意統一生效樣式寫到上面，因爲width:200px在ie下同樣會生效，下面的180px也會生效，如果反着寫最後效果還是200px，即沒有替換成功

九.CSS面試題

1.CSS樣式（選擇器）的優先級

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

2.雪碧圖的作用

合併圖片，減少Http請求數，提高加載性能
有一些情況下可以減少圖片大小

3.自定義字體的使用場景

宣傳、品牌、banner等固定文案
當字體圖標使用

4.base64的使用

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

5.僞類和僞元素的區別

僞類表狀態
僞元素是真的有元素
前者單冒號，後者雙冒號

6.如何美化checkbox

使用label的for屬性指向定義的checkbox的id屬性值
隱藏原生的input
樣式的寫法:checked + label通過樣式的狀態來切換