#02你認真學了css？（基本樣式2）

05-10

一、背景

屬性描述

background 簡寫屬性，將背景屬性設置在一個生命中

background-attachment 背景圖像是否固定或者隨著頁面的其餘部分滾動

background-color 可設置元素的背景顏色

background-image 可把圖像設置為背景

background-position 設置背景圖像的起始位置（常用於圖標在頁面上的設置）

background-repeat 設置背景圖像是否重複，以及如何重複

background-size 設置背景的大小（兼容性）（css3）

1、background-position：默認圖片主要從左上角方向偏移

x y
x% y%
[top | center | bottom] [left | center | right]

2、background-repeat：背景圖像是否重複或如何重複

no-repeat：背景圖片在規定位置
repeat-x：圖片橫向重複
repeat-y：圖片縱向重複
repeat：全部重複

3、background-size：背景圖片大小的設置，用來拉伸、縮放

100px 100px
contain
cover

4、關於background相關元素的屬性，

代碼：

/*背景色和背景圖片使用場景場景1：兩元素適用於頁面大、背景圖片小場景2：背景圖為.png格式的圖片*/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;

background-size：contain；

background-size：cover；

display：inline-block

display：block

註：使用background-color和background-image，需要注意：

（1）將該頁面撐開

（2）注意background-size使用

二、CSS Sprite

1、俗稱「雪碧圖」或「精靈圖」指將不同的圖片、圖標合併在一張圖上。

2、作用：使用CSS Sprite 可以減少網路請求（如每一張小icon圖片都會產生載入時間），提高網頁載入性能。

3、使用：利用background-position，對圖標進行位置偏移

三、隱藏or透明

opacity: 0; 透明度為0，整體（透明度0-1，0.5為半透明）
visibility: hidden; 即元素看不見，但存在。和opacity：0；類似
display：none； 消失，不佔位置（頁面上渲染的其他元素都察覺不到）
background-color：rgba（0，0，0，0.2） 只是背景色透明

四、inline-block

1、定義：既呈現inline特性（不佔據一整行，寬度由內容寬度決定），又呈現block特性（可設置寬高，內外邊距）

註：display:block;的布局下，塊級元素的寬度是一個可忽視的問題

2、縫隙問題：如圖，

3、行內元素對齊問題：如圖，

在inline-block的布局下，可以看成文字對齊。默認情況下，行內元素對齊是以裡面內容的底部為基線對齊（至少兩個元素進行對比），其他則設置vertical-align：top（bottom、middle等）進行基線對齊（在表格中使用尤為明顯）

五、line-height

1、定義：用於設置單行文本的行高。

2、幾個問題：

（1）了解line-height和margin、padding在使用上的一個區別

line-height: 2，所佔據的行高是本身文字高度的2倍。margin是外邊距，padding則是內邊距

（2）line-height的用法，數字和百分比的區別

line-height：2 VS line-height： 100%

line-height具有繼承性。

line-height: 2，所佔據的行高是本身文字高度的2倍。想要頁面每個元素都擁有幾倍的行高，則設置為數字。
line-height: 200% ，是其父元素文字高度的2倍。（註：百分比有一定的相對性，如本身無設置和設置百分比，便可看出差別）

3、height=line-heihgt

設置垂直居中單行文本，如圖：

六、盒模型

1、IE 盒模型

IE 盒模型的width包括：content尺寸+padding+border

（如IE678怪異模式，不添加doctype，使用ie盒模型，寬度=邊框+padding+內容寬度），如圖：

2、W3C標準下的盒模型

W3C標準下的盒模型padding、border所佔的空間不在width、height範圍內，content寬度即是width

（如chrome，ie9+,ie678，添加doctype，使用標準盒模型，寬度=內容寬度），如圖：

3、box-sizing（css3新樣式）

為了使用方便，可以用IE盒模型計算寬度的方法，將width_=border+padding+內容寬度

A、W3C標準的盒模型：box-sizing： content-box

B、IE盒模型：box-sizing：border-box

<div stylex="height:200px; width:200px; border:solid 10px #333; padding:100px></div>

七、字體圖標的實現

1、字體圖標的原理：

當你寫完帶有字體的html文件時，在瀏覽器打開頁面時，瀏覽器會讀取 HTML 文件進行解析渲染。當讀到「飢餓」兩個字時會轉換成對應的 unicode碼（一種識別字體的特定編號）。再根據HTML 里設置的 font-family （如果沒設置則使用瀏覽器默認設置）去查找電腦里（如果有自定義字體@font-face ，則載入對應字體文件）對應字體的字體文件。找到文件後根據 unicode 碼去查找繪製外形，找到後繪製到頁面上。所以對於第二個範例，「&#9965」是「飢」的 unicede 碼，所以用戶最終也能看到serf字體樣式的「飢」字。

2、實現步驟：

第一步：

進入Iconfont-阿里巴巴矢量圖標庫——選一個喜歡的圖標——添加至購物車——添加至項目——複製Unicode碼

第二步：

進入代碼——並未展示圖標（說明系統中沒有能體現字體圖標的該Unicode碼，瀏覽器也未能識別Unicode碼）——複製該圖標自動生成的css代碼（用@font-face來定義一個字體，該字體名可以隨便取，這裡為：XXX）——定義該字體圖標，並設置它css樣式如font-family：XXX；等樣式

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> @font-face { font-family: iconfont; /* project id 645342 */ src: url(//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.eot); src: url(//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.eot?#iefix) format(embedded-opentype), url(//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.woff) format(woff), url(//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.ttf) format(truetype), url(//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.svg#iconfont) format(svg); } p{ font-family: iconfont; font-size: 40px; } </style></head><body> <p></p></body></html>

讓一個元素"看不見"有幾種方式？有什麼區別?

1、display: none;

給元素設置display: none;後，元素會從頁面中徹底消失，它原本佔據的空間會被其他元素佔有，會造成瀏覽器的迴流與重繪。

2、visibility: hidden;

給元素設置visibility: hidden;後，元素會從頁面中消失，它原本佔據的空間會被保留，會造成瀏覽器的重繪，適用於希望元素隱藏又不影響頁面布局的場景。

3、opacity: 0;

給元素設置opacity: 0;後，元素變成透明的我們肉眼就看不到了，所以原本佔據的空間還在。

4、設置盒模型屬性為0

將height、width、padding、border、margin等盒模型屬性的值全設為0，如果元素內還有子元素或內容，還應overflow: hidden;來隱藏子元素。

.box1 { width: 0; height: 0; padding: 0; border: 0; margin: 0; overflow: hidden;}

5、設置元素絕對定位與top、right、bottom、left等將元素移出屏幕

如：

.box1 { position: absolute; left: 100%;}或:.box1 { position: absolute; top: 100px;}

6、設置元素的絕對定位與z-index，將z-index設置成盡量小的負數。

但z-index是相對而言的，用z-index就要設置其他元素的z-index值，且如果元素本身佔據空間很大就不一定會被z-index值比它大的元素完全覆蓋，所以不推薦這種方法。

如：

.box1 { position: absolute; z-index: -100;}.box2 { position: absolute; z-index: 1;}