1. 背景
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性步清，作用是將背景屬性設(shè)置在一個聲明中 |
| background-attachment | 背景圖像是否固定或者隨著頁面的其余部分滾動 |
| background-color | 設(shè)置元素的背景顏色 |
| background-image | 把圖像設(shè)置為背景 |
| background-position | 設(shè)置背景圖像的起始位置 |
| background-repeat | 設(shè)置背景圖像是否及如何重復(fù) |
| background-size | 設(shè)置背景的大小(兼容性) |
-
background-position（默認(rèn)針對左上角進(jìn)行偏移）
- x y （ x 為10px 及皂，相當(dāng)于往右偏移10px失晴；y 為10px，相當(dāng)于向下偏移10px）
- x% y% (是設(shè)置偏移的百分比）
- [top | center | bottom] [left | center | right]
-
background-repeat
- no-repeat：背景圖片在規(guī)定位置
- repeat-x：圖片橫向重復(fù)
- repeat-y：圖片縱向重復(fù)
- repeat：全部重復(fù)
-
background-size
- 100px 100px
- contain （正好放入容器，等比縮放）
- cover （高度正好放入容器鲤遥，長度多的會溢出）
background 寫法：
background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
可以縮寫為：
background: #f00 url(background.gif) no-repeat fixed 0 0;
2. CSS Sprite（精靈圖/雪碧圖）
- 指將不同的圖片/圖標(biāo)合并在一張圖上。
- 使用CSS Sprite 可以減少網(wǎng)絡(luò)請求林艘，提高網(wǎng)頁加載性能盖奈。
3. 隱藏 or 透明
- opacity: 0 ; 透明度為0，整體
- visibility: hidden ; 和opacity:0 類似
（ hidden 這個元素看不見狐援，但本身是存在的钢坦，有位置的） - display:none; 消失，不占用位置
- background-color: rgba(0啥酱，0爹凹，0，0.2) 只是背景色透明
（只針對背景色）
4. inline-block
- 既呈現(xiàn) inline 特性 (不占據(jù)一整行镶殷，寬度由內(nèi)容寬度決定)
- 又呈現(xiàn) block 特性 (可設(shè)置寬高禾酱，內(nèi)外邊距)
- 縫隙問題
5. line-height
- line-height: 2
（本身文字行高的 2倍 ） - line-height: 100%
（父元素文字行高的 100% ） - height = line-heihgt 來垂直居中單行文本
6. 盒模型
- 標(biāo)準(zhǔn)盒模型
- IE 盒模型
兩者區(qū)別：
W3C標(biāo)準(zhǔn)中padding、border所占的空間不在width、height范圍內(nèi)宇植，大家俗稱的IE的盒模型width包括content尺寸＋padding＋border
-
ie678 怪異模式（不添加 doctype）使用 ie 盒模型得封，寬度=邊框+padding+內(nèi)容寬度
-
chrome， ie9+, ie678 (添加 doctype) 使用標(biāo)準(zhǔn)盒模型指郁， 寬度 = 內(nèi)容寬度
7. 使用 CSS3 新樣式 box-sizing
box-sizing: content-box：w3c標(biāo)準(zhǔn)盒模型的效果
-
box-sizing: border-box：“IE盒模型”的效果
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
</div>
8. 如何使用字體圖標(biāo)
方法一：利用 iconfont 使用字體圖標(biāo)
- 在頁面內(nèi)容中放入該圖標(biāo)的 Unicode 碼（可以自己創(chuàng)建一個) 忙上；
- 讓該元素使用我們自定義的字體；
- 字體對應(yīng)著我們創(chuàng)建的字體庫文件闲坎；
- 字體庫文件里有關(guān)于 Unicode 碼的外形描述疫粥。
具體操作方法：
- 打開 iconfont.cn，搜索需要的圖標(biāo)添加入庫
- 添加入庫后打開購物車腰懂，把圖標(biāo)添加至項目（若沒有項目則新建一個）
- 選擇 Unicode 梗逮，復(fù)制圖標(biāo)的 Unicode 碼放入頁面內(nèi)容中
- 生成代碼并復(fù)制完整 css 代碼引入頁面中（@font-face .... .css）
- 像設(shè)置字體一樣在 CSS 中加入
font-family:'字體名稱';，然后就可以給該圖標(biāo)添加和文字一樣的樣式了
方法二：利用 iconfont 的 Font class 使用字體圖標(biāo)
打開 iconfont.cn绣溜，搜索需要的圖標(biāo)添加入庫
添加入庫后打開購物車慷彤，把圖標(biāo)添加至項目（若沒有項目則新建一個）
選擇 Unicode 旁的 Font class
編輯修改圖標(biāo)名稱（英文小寫）
更新代碼并復(fù)制，使用
<link>引入-
body 內(nèi)容中設(shè)置 class 為
<span class="iconfont icon-moon"></span>
iconfont為網(wǎng)站默認(rèn)設(shè)置的 font-family 名稱
icon-moon中的 moon 為我們修改的圖標(biāo)名稱
方法三：利用 Font Awesome 使用字體圖標(biāo)
打開 bootcdn.cn
搜索 font 怖喻，點開 font-awesome 即可看到“.css” 鏈接
復(fù)制
<link>標(biāo)簽引入頁面打開 fontawesome.io底哗，打開菜單欄的 icons 找到所需的 icon
-
class 寫 icon 的名稱
<span class="fa fa-user-circle"></span>
fa為網(wǎng)站默認(rèn)設(shè)置的 font-family 名稱
fa-user-circle中的 user-circle 為我們修改的圖標(biāo)名稱
在 HTML 中，Unicode 碼為 “&#x”e693 锚沸，在 CSS 中為 “\”e693 跋选。
