CSS 基礎(chǔ)樣式&盒模型&字體圖標(biāo)
1. 背景
| 屬性 | 描述 |
|---|---|
| background | 簡(jiǎn)寫屬性默责，作用是將背景屬性設(shè)置在一個(gè)聲明中 |
| background-attachment | 背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng) |
| background-color | 設(shè)置元素的背景顏色 |
| background-image | 把圖像設(shè)置為背景 |
| background-position | 設(shè)置背景圖像的起始位置 |
| background-repeat | 設(shè)置背景圖像是否及如何重復(fù) |
| background-size | 設(shè)置背景的大小(兼容性) |
-
background-position（默認(rèn)針對(duì)左上角進(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 （高度正好放入容器，長(zhǎng)度多的會(huì)溢出）
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ò)請(qǐng)求奇适，提高網(wǎng)頁(yè)加載性能。
3. 隱藏 or 透明
- opacity: 0 ; 透明度為0芦鳍，整體
- visibility: hidden ; 和opacity:0 類似
（ hidden 這個(gè)元素看不見嚷往，但本身是存在的，有位置的） - display:none; 消失柠衅，不占用位置
- background-color: rgba(0皮仁，0，0菲宴，0.2) 只是背景色透明
（只針對(duì)背景色）
4. inline-block
- 既呈現(xiàn) inline 特性 (不占據(jù)一整行贷祈，寬度由內(nèi)容寬度決定)
- 又呈現(xiàn) block 特性 (可設(shè)置寬高，內(nèi)外邊距)
- 縫隙問(wèn)題
5. line-height
- line-height: 2
（本身文字行高的 2倍 ） - line-height: 100%
（父元素文字行高的 100% ） - height = line-heihgt 來(lái)垂直居中單行文本
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)容寬度
image -
chrome粟耻， ie9+, ie678 (添加 doctype) 使用標(biāo)準(zhǔn)盒模型查近， 寬度 = 內(nèi)容寬度
image
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)
- 在頁(yè)面內(nèi)容中放入該圖標(biāo)的 Unicode 碼（可以自己創(chuàng)建一個(gè)) ；
- 讓該元素使用我們自定義的字體挤忙；
- 字體對(duì)應(yīng)著我們創(chuàng)建的字體庫(kù)文件嗦嗡；
- 字體庫(kù)文件里有關(guān)于 Unicode 碼的外形描述。
具體操作方法：
- 打開 iconfont.cn饭玲，搜索需要的圖標(biāo)添加入庫(kù)
- 添加入庫(kù)后打開購(gòu)物車，把圖標(biāo)添加至項(xiàng)目（若沒有項(xiàng)目則新建一個(gè)）
- 選擇 Unicode 叁执，復(fù)制圖標(biāo)的 Unicode 碼放入頁(yè)面內(nèi)容中
- 生成代碼并復(fù)制完整 css 代碼引入頁(yè)面中（@font-face .... .css）
- 像設(shè)置字體一樣在 CSS 中加入
font-family:'字體名稱';茄厘，然后就可以給該圖標(biāo)添加和文字一樣的樣式了
方法二：利用 iconfont 的 Font class 使用字體圖標(biāo)
打開 iconfont.cn，搜索需要的圖標(biāo)添加入庫(kù)
添加入庫(kù)后打開購(gòu)物車谈宛，把圖標(biāo)添加至項(xiàng)目（若沒有項(xiàng)目則新建一個(gè)）
選擇 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 ，點(diǎn)開 font-awesome 即可看到“.css” 鏈接
復(fù)制
<link>標(biāo)簽引入頁(yè)面打開 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 恢筝。
