CSS超全筆記（適合新手入門）

時間 2019-11-11

標籤 css 筆記適合新手入門欄目 CSS 简体版

原文原文鏈接

CSScss

CSS初識

CSS(Cascading Style Sheets) 美化樣式html

CSS一般稱爲CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。前端

CSS以HTML爲基礎，提供了豐富的功能，如字體、顏色、背景的控制及總體排版等，並且還能夠針對不一樣的瀏覽器設置不一樣的樣式。html5

引入CSS樣式表（書寫位置）

CSS能夠寫到那個位置？是否是必定寫到html文件裏面呢？git

內部樣式表

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標籤中，而且用style標籤訂義，其基本語法格式以下：github

<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>算法

語法中，style標籤通常位於head標籤中title標籤以後，也能夠把他放在HTML文檔的任何地方。chrome

type="text/CSS" 在html5中能夠省略，寫上也比較符合規範，因此這個地方能夠寫也能夠省略。json

行內式（內聯樣式）

內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式。是經過標籤的style屬性來設置元素的樣式，其基本語法格式以下：瀏覽器

<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>

語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設置行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及嵌套在其中的子標籤起做用。

外部樣式表（外鏈式）

鏈入式是將全部的樣式放在一個或多個以.CSS爲擴展名的外部樣式表文件中，經過link標籤將外部樣式表文件連接到HTML文檔中，其基本語法格式以下：

注意： link 是個單標籤哦!!!

該語法中，link標籤須要放在的三個屬性head頭部標籤中，而且必須指定link標籤，具體以下：

href：定義所連接外部樣式表文件的URL，能夠是相對路徑，也能夠是絕對路徑。
type：定義所連接文檔的類型，在這裏須要指定爲「text/CSS」，表示連接的外部文件爲CSS樣式表。
rel：定義當前文檔與被連接文檔之間的關係，在這裏須要指定爲「stylesheet」，表示被連接的文檔是一個樣式表文件。

三種樣式表總結（位置）

CSS樣式規則

使用HTML時，須要聽從必定的規範。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先須要瞭解CSS樣式規則，具體格式以下：

在上面的樣式規則中:

1.選擇器用於指定CSS樣式做用的HTML對象，花括號內是對該對象設置的具體樣式。

2.屬性和屬性值以「鍵值對」的形式出現。

3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。

4.屬性和屬性值之間用英文「:」鏈接。

5.多個「鍵值對」之間用英文「;」進行區分。

能夠用段落和表格的對齊的演示。

CSS基礎選擇器

標籤選擇器（元素選擇器）

標籤選擇器是指用HTML標籤名稱做爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。其基本語法格式以下：

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤選擇器最大的優勢是能快速爲頁面中同類型的標籤統同樣式，同時這也是他的缺點，不能設計差別化樣式。

標籤選擇器能夠把某一類標籤所有選擇出來 div span

類選擇器

類選擇器使用「.」（英文點號）進行標識，後面緊跟類名，其基本語

法格式以下：

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤調用的時候用 class=「類名」便可。

類選擇器最大的優點是能夠爲元素對象定義單獨或相同的樣式。能夠選擇一個或者多個標籤

小技巧：

1.長名稱或詞組可使用中橫線來爲選擇器命名。
2.不建議使用「_」下劃線來命名CSS選擇器。

輸入的時候少按一個shift鍵;　瀏覽器兼容問題 (好比使用_tips的選擇器命名，在IE6是無效的)　能良好區分JavaScript變量命名(JS變量命名是用「_」)

3.不要純數字、中文等命名，儘可能使用英文字母來表示。

命名規範：見附件（Web前端開發規範手冊.doc）

命名是咱們通俗約定的，可是沒有規定必須用這些經常使用的命名。

多類名選擇器

咱們能夠給標籤指定多個類名，從而達到更多的選擇目的。

注意：

1. 樣式顯示效果跟HTML元素中的類名前後順序沒有關係,受CSS樣式書寫的上下順序有關。
2. 各個類名中間用空格隔開。

多類名選擇器在後期佈局比較複雜的狀況下，仍是較多使用的。

id選擇器

id選擇器使用「#」進行標識，後面緊跟id名，其基本語法格式以下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即爲HTML元素的id屬性值，大多數HTML元素均可以定義id屬性，元素的id值是惟一的，只能對應於文檔中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不容許有相同名字的id對象出現，可是容許相同名字的class。

類選擇器（class）比如人的名字，是能夠屢次重複使用的，好比張偉王偉李偉李娜

id選擇器比如人的身份證號碼，全中國是惟一的，不得重複。只能使用一次。

id選擇器和類選擇器最大的不一樣在於使用次數上。

通配符選擇器

通配符選擇器用「*」號表示，他是全部選擇器中做用範圍最廣的，能匹配頁面中全部的元素。其基本語法格式以下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例以下面的代碼，使用通配符選擇器定義CSS樣式，清除全部HTML標記的默認邊距。

* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內邊距*/
}

注意：

這個通配符選擇器，就像咱們的電影明星中的夢中情人，想一想它就行了，可是它不會和你過日子。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用於設置字號，該屬性的值可使用相對長度單位，也可使用絕對長度單位。其中，相對長度單位比較經常使用，推薦使用像素單位px，絕對長度單位使用較少。具體以下：

font-family:字體

font-family屬性用於設置字體。網頁中經常使用的字體有宋體、微軟雅黑、黑體等，

例如將網頁中全部段落文本的字體設置爲微軟雅黑，可使用以下CSS樣式代碼：

p{ font-family:"微軟雅黑";}

能夠同時指定多個字體，中間以逗號隔開，表示若是瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。

經常使用技巧：

1. 如今網頁中廣泛使用14px+。
2. 儘可能使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。
3. 各類字體之間必須使用英文狀態下的逗號隔開。
4. 中文字體須要加英文狀態下的引號，英文字體通常不須要加引號。當須要設置英文字體時，英文字體名必須位於中文字體名以前。
5. 若是字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
6. 儘可能使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體

在 CSS 中設置字體名稱，直接寫中文是能夠的。可是在文件編碼（GB23十二、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持相似微軟雅黑的中文。

方案一： 你可使用英文來替代。好比 font-family:"Microsoft Yahei"。

方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱能夠避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是能夠正確的解析的。font-family: "\5FAE\8F6F\96C5\9ED1"，表示設置字體爲「微軟雅黑」。能夠經過escape() 來測試屬於什麼字體

爲了照顧不一樣電腦的字體安裝問題，咱們儘可能只使用宋體和微軟雅黑中文字體

font-weight:字體粗細

字體加粗除了用 b 和 strong 標籤以外，可使用CSS 來實現，可是CSS 是沒有語義的。

font-weight屬性用於定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。

小技巧：

數字 400 等價於 normal，而 700 等價於 bold。可是咱們更喜歡用數字來表示。

font-style:字體風格

字體傾斜除了用 i 和 em 標籤以外，可使用CSS 來實現，可是CSS 是沒有語義的。

font-style屬性用於定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值以下：

normal：默認值，瀏覽器會顯示標準的字體樣式。

italic：瀏覽器會顯示斜體的字體樣式。

oblique：瀏覽器會顯示傾斜的字體樣式。

小技巧：

平時咱們不多給文字加斜體，反而喜歡給斜體標籤（em，i）改成普通模式。

font:綜合設置字體樣式 (重點)

font屬性用於對字體樣式進行綜合設置，其基本語法格式以下：

選擇器{font: font-style font-weight font-size/line-height font-family;}

使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。

注意：其中不須要設置的屬性能夠省略（取默認值），但必須保留font-size和

font-family屬性，不然font屬性將不起做用。

CSS外觀屬性

color:文本顏色

color屬性用於定義文本的顏色，其取值方式有以下3種：

1.預約義的顏色值，如red，green，blue等。

2.十六進制，如#FF0000，#FF6600，#29D794等。實際工做中，十六進制是最經常使用的定義顏色的方式。

3.RGB代碼，如紅色能夠表示爲rgb(255,0,0)或rgb(100%,0%,0%)。

須要注意的是，若是使用RGB代碼的百分比顏色值，取值爲0時也不能省略百分號，必須寫爲0%。

line-height:行間距

ine-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，通常稱爲行高。line-height經常使用的屬性值單位有三種，分別爲像素px，相對值em和百分比%，實際工做中使用最多的是像素px

通常狀況下，行距比字號大7.8像素左右就能夠了。

text-align:水平對齊方式

text-align屬性用於設置文本內容的水平對齊，至關於html中的align對齊屬性。其可用屬性值以下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

text-indent:首行縮進

text-indent屬性用於設置首行文本的縮進，其屬性值可爲不一樣單位的數值、em字符寬度的倍數、或相對於瀏覽器窗口寬度的百分比%，容許使用負值, 建議使用em做爲設置單位。

1em 就是一個字的寬度若是是漢字的段落， 1em 就是一個漢字的寬度

text-decoration 文本的裝飾

text-decoration 通常咱們用於給連接修改裝飾效果

開發者工具（chrome）

此工具是咱們的必備工具，之後代碼出了問題，咱們首先第一反應就是：

「按F12」或者是「shift+ctrl+i」打開開發者工具。

菜單：右擊網頁空白出---查看

小技巧：

1、ctrl+滾輪能夠放大開發者工具代碼大小。

二、左邊是HTML元素結構右邊是CSS樣式。

三、右邊CSS樣式能夠改動數值和顏色查看更改後效果。

記憶技巧：

交集選擇器是而且的意思。即...又...的意思

好比： p.one 選擇的是：類名爲 .one 的段落標籤。

用的相對來講比較少，不太建議使用。

並集選擇器

並集選擇器（CSS選擇器分組）是各個選擇器經過<strong style="color:#f00">逗號</strong>鏈接而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），均可以做爲並集選擇器的一部分。若是某些選擇器定義的樣式徹底相同，或部分相同，就能夠利用並集選擇器爲它們定義相同的CSS樣式。

CSS複合選擇器

複合選擇器是由兩個或多個基礎選擇器，經過不一樣的方式組合而成的,目的是爲了能夠選擇更準確更精細的目標元素標籤。

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格，如h3.special。

記憶技巧：

並集選擇器和的意思，就是說，只要逗號隔開的，全部選擇器都會執行後面樣式。

好比 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執行顏色爲紅色。一般用於集體聲明。

後代選擇器

後代選擇器又稱爲包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生嵌套時，內層標籤就成爲外層標籤的後代。

子元素選擇器

子元素選擇器只能選擇做爲某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個進行鏈接，注意，符號左右兩側各保留一個空格。

僞類選擇器

僞類選擇器用於向某些選擇器添加特殊的效果。好比給連接添加特殊效果，好比能夠選擇第1個，第n個元素。

爲了和咱們剛纔學的類選擇器相區別，類選擇器是一個點好比 .demo {} 而咱們的僞類用 2個點就是冒號好比 :link{}

連接僞類選擇器

:link /* 未訪問的連接 */

:visited /* 已訪問的連接 */

:hover /* 鼠標移動到連接上 */

:active /* 選定的連接 */

注意寫的時候，他們的順序儘可能不要顛倒按照 lvha 的順序。 love hate 愛上了討厭記憶法或者 lv 包包很是 hao

a { /* a是標籤選擇器全部的連接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
a:hover { /* :hover 是連接僞類選擇器鼠標通過 */
            color: red; /* 鼠標通過的時候，由原來的灰色變成了紅色 */
}

CSS註釋

CSS規則是使用 /* 須要註釋的內容 */ 進行註釋的，即在須要註釋的內容前使用「/*」標記開始註釋，在內容的結尾使用「*/」結束。

例如：

p {
font-size: 14px; /* 全部的字體是14像素大小*/}

sublime快捷方式

sublime能夠快速提升咱們代碼的書寫方式

生成標籤直接輸入標籤名按tab鍵便可好比 div 而後tab 鍵，就能夠生成 <div></div>

若是想要生成多個相同標籤加上 * 就能夠了好比 div*3 就能夠快速生成3個div

若是有父子級關係的標籤，能夠用 > 好比 ul > li就能夠了

如果有兄弟關係的標籤，用 + 就能夠了好比 div+p

若是生成帶有類名或者id名字的，直接寫 .demo 或者 #two tab 鍵就能夠了

標籤顯示模式（display）

塊級元素(block-level)

每一個塊元素一般都會獨自佔據一整行或多整行，能夠對其設置寬度、高度、對齊等屬性，經常使用於網頁佈局和網頁結構的搭建。

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。

塊級元素的特色：

（1）老是重新行開始

（2）高度，行高、外邊距以及內邊距均可以控制。

（3）寬度默認是容器的100%

（4）能夠容納內聯元素和其餘塊元素。

行內元素(inline-level)

行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，通常不能夠設置寬度、高度、對齊等屬性，經常使用於控制頁面中文本的樣式。

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。

行內元素的特色：

（1）和相鄰行內元素在一行上。

（2）高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效。

（3）默認寬度就是它自己內容的寬度。

（4）行內元素只能容納文本或則其餘行內元素。（a特殊）

注意：

1、只有文字才能組成段落所以 p 裏面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裏面不能放其餘塊級元素。

2、連接裏面不能再放連接

塊級元素和行內元素區別

塊級元素的特色：

（1）老是重新行開始

（2）高度，行高、外邊距以及內邊距均可以控制。

（3）寬度默認是容器的100%

（4）能夠容納內聯元素和其餘塊元素。

行內元素的特色：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效。
（3）默認寬度就是它自己內容的寬度。
（4）行內元素只能容納文本或則其餘行內元素。

標籤顯示模式轉換 display

塊轉行內：display:inline;

行內轉塊：display:block;

塊、行內元素轉換爲行內塊： display: inline-block;

此階段，咱們只需關心這三個，其餘的是咱們後面的工做。

CSS書寫規範

開始就造成良好的書寫規範，是你專業化的開始。

空格規範

【強制】選擇器與 { 之間必須包含空格。

示例： .selector { }

【強制】屬性名與以後的 : 之間不容許包含空格， : 與屬性值之間必須包含空格。

示例：

font-size: 12px;

選擇器規範

【強制】當一個 rule 包含多個 selector 時，每一個選擇器聲明必須獨佔一行。

示例：

/* good */

.post,

.page,

.comment {

line-height: 1.5;

}

/* bad */

.post, .page, .comment {

line-height: 1.5;

}

【建議】選擇器的嵌套層級應不大於 3 級，位置靠後的限定條件應儘量精確。

示例：

/* good */

#username input {}

.comment .avatar {}

/* bad */

.page .header .login #username input {}

.comment div * {}

屬性規範

【強制】屬性定義必須另起一行。

示例：

/* good */

.selector {

margin: 0;

padding: 0;

}

/* bad */

.selector { margin: 0; padding: 0; }

【強制】屬性定義後必須以分號結尾。

示例：

/* good */

.selector {

margin: 0;

}

/* bad */

.selector {

margin: 0

}

CSS 三大特性

層疊繼承優先級是咱們學習CSS 必須掌握的三個特性。

CSS層疊性

所謂層疊性是指多種CSS樣式的疊加。

是瀏覽器處理衝突的一個能力,若是一個屬性經過兩個相同選擇器設置到同一個元素上，那麼這個時候一個屬性就會將另外一個屬性層疊掉

好比先給某個標籤指定了內部文字顏色爲紅色，接着又指定了顏色爲藍色，此時出現一個標籤指定了相一樣式不一樣值的狀況，這就是樣式衝突。

通常狀況下，若是出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式爲準。

1、樣式衝突，遵循的原則是就近原則。那個樣式離着結構近，就執行那個樣式。

2、樣式不衝突，不會層疊

CSS最後的執行口訣：長江後浪推前浪，前浪死在沙灘上。

行內塊元素（inline-block）

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，能夠對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。

行內塊元素的特色：

（1）和相鄰行內元素（行內塊）在一行上,可是之間會有空白縫隙。

（2）默認寬度就是它自己內容的寬度。

（3）高度，行高、外邊距以及內邊距均可以控制。

CSS繼承性

所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用於父元素便可。

簡單的理解就是：子承父業。

CSS最後的執行口訣：龍生龍，鳳生鳳，老鼠生的孩子會打洞。

注意：

恰當地使用繼承能夠簡化代碼，下降CSS樣式的複雜性。子元素能夠繼承父元素的樣式（text-，font-，line-這些元素開頭的均可以繼承，以及color屬性）

CSS優先級

定義CSS樣式時，常常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。

在考慮權重時，初學者還須要注意一些特殊的狀況，具體以下：

繼承樣式的權重爲0。即在嵌套結構中，無論父元素樣式的權重多大，被子元素繼承時，他的權重都爲0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

行內樣式優先。應用style屬性的元素，其行內樣式的權重很是高，能夠理解爲遠大於100。總之，他擁有比上面提升的選擇器都大的優先級。

權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具備最大的優先級，或者說排在最後的樣式優先級最大。

CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說無論權重如何以及樣式位置的遠近，!important都具備最大優先級。

CSS特殊性（Specificity）

關於CSS權重，咱們須要一套計算公式來去計算，這個就是 CSS Specificity，咱們稱爲CSS 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準具體規範入以下：

specificity用一個四位的數字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進制，級別之間不可超越。

權重是能夠疊加的

好比的例子：

注意：

1.數位之間沒有進制好比說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，因此不會存在10個div能遇上一個類選擇器的狀況。

繼承的權重是 0

總結優先級：

1、使用了 !important聲明的規則。

2、內嵌在 HTML 元素的 style屬性裏面的聲明。

3、使用了 ID 選擇器的規則。

4、使用了類選擇器、屬性選擇器、僞元素和僞類選擇器的規則。

5、使用了元素選擇器的規則。

6、只包含一個通用選擇器的規則。

7、同一類選擇器則遵循就近原則。

總結：權重是優先級的算法，層疊是優先級的表現

CSS 背景(background)

CSS 能夠添加背景顏色和背景圖片，以及來進行圖片設置。

背景圖片(image)

語法：

background-image : none | url (url)

參數：

none : 　無背景圖（默認的）url : 　使用絕對或相對地址指定背景圖像

background-image 屬性容許指定一個圖片展現在背景中（只有CSS3才能夠多背景）能夠和 background-color 連用。若是圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。若是有背景圖片平鋪，則會覆蓋背景顏色。

小技巧： 咱們提倡背景圖片後面的地址，url不要加引號。

背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

參數：

repeat : 　背景圖像在縱向和橫向上平鋪（默認的）

no-repeat : 　背景圖像不平鋪

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

背景位置(position)

語法：

background-position : length || length

background-position : position || position

參數：

說明：

設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值爲：(0% 0%)。若是隻指定了一個值，該值將用於橫座標。縱座標將默認爲50%。第二個值將用於縱座標。

注意：

1、position 後面是x座標和y座標。可使用方位名詞或者精確單位。

2、若是和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。好比 background-position: 15px top; 則 15px 必定是 x座標 top是 y座標。

3、實際工做用的最多的，就是背景圖片居中對齊了。

背景附着

語法：

background-attachment : scroll | fixed

參數：

scroll : 　背景圖像是隨對象內容滾動fixed : 　背景圖像固定

說明：

設置或檢索背景圖像是隨對象內容滾動仍是固定的。

背景簡寫

background屬性的值的書寫順序官方並無強制標準的。爲了可讀性，建議你們以下寫：

background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最後一個參數是alpha 透明度取值範圍 0~1之間

注意：背景半透明是指盒子背景半透明，盒子裏面的內容不收影響。

導航欄案例

使用技巧：在一行內的盒子內，咱們設定行高等於盒子的高度，就可使文字垂直居中。

<head>
   <meta charset="utf-8">
   <style>
        body {

        }
        a {
            width: 200px;
            height: 50px;
            /* background-color: orange; */
            display: inline-block; /* 把a 行內元素轉換爲行內塊元素 */
            text-align: center; /* 文字水平居中 */
            line-height: 50px; /* 咱們設定行高等於盒子的高度，就可使文字垂直居中 */
            color: #fff;
            font-size: 22px;
            text-decoration: none; /* 取消下劃線文本裝飾 */
        }
        a:hover { /* 鼠標通過給咱們的連接添加背景圖片*/
            background: url(images/h.png) no-repeat;
        }
   </style>
   </head>
   <body>
   <a href="#">專區說明</a>
   <a href="#">申請資格</a>
   <a href="#">兌換獎勵</a>
   <a href="#">下載遊戲</a>
   </body>

盒子模型（CSS重點）

其實，CSS就三個大模塊：盒子模型、浮動、定位，其他的都是細節。要求這三部分，不管如何也要學的很是精通。

所謂盒子模型就是把HTML頁面中的元素看做是一個矩形的盒子，也就是一個盛裝內容的容器。每一個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

看透網頁佈局的本質

網頁佈局中，咱們是如何把裏面的文字，圖片，按照美工給咱們的效果圖排列的整齊有序呢？

盒子邊框（border）

邊框就是那層皮。橘子皮。。柚子皮。。橙子皮。。。

語法：

border : border-width || border-style || border-color

邊框屬性—設置邊框樣式（border-style）

邊框樣式用於定義頁面中邊框的風格，經常使用屬性值以下：

none：沒有邊框即忽略全部邊框的寬度（默認值）

solid：邊框爲單實線(最爲經常使用的)

dashed：邊框爲虛線

dotted：邊框爲點線

double：邊框爲雙實線

盒子邊框寫法總結表

表格的細線邊框

之前學過的html表格邊框很粗，這裏只須要CSS一句話就能夠美觀起來。讓咱們真的相信，CSS就是咱們的白馬王子（白雪公主）。

table{ border-collapse:collapse; } collapse 單詞是合併的意思

border-collapse:collapse; 表示邊框合併在一塊兒。

圓角邊框(CSS3)

今後之後，咱們的世界不僅有矩形。radius 半徑（距離）

語法格式：

border-radius: 左上角右上角右下角左下角;

內邊距（padding）

padding屬性用於設置內邊距。是指邊框與內容之間的距離。

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

注意： 後面跟幾個數值表示的意思是不同的。

外邊距（margin）

margin屬性用於設置外邊距。設置外邊距會在元素之間建立「空白」，這段空白一般不能放置其餘內容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距右外邊距下外邊距左外邊

取值順序跟內邊距相同。

外邊距實現盒子居中

可讓一個盒子實現水平居中，須要知足一下兩個條件：

必須是塊級元素。

盒子必須指定了寬度（width）

而後就給左右的外邊距都設置爲auto，就可以使塊級元素水平居中。

實際工做中經常使用這種方式進行網頁佈局，示例代碼以下：

.header{ width:960px; margin:0 auto;}

文字盒子居中圖片和背景區別

一、文字水平居中是 text-align: center

二、盒子水平居中左右margin 改成 auto

text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中左右margin 改成 auto 就闊以了 */

插入圖片咱們用的最多好比產品展現類

背景圖片咱們通常用於小圖標背景或者超大背景圖片

section img {
        width: 200px;/* 插入圖片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px; /* 插入圖片更改位置能夠用margin 或padding 盒模型 */
        margin-left: 50px; /* 插入當圖片也是一個盒子 */
    }

aside {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;

        background-size: 200px 210px; /* 背景圖片更改大小隻能用 background-size */
        background-position: 30px 50px; /* 背景圖片更該位置我用 background-position */
    }

清除元素的默認內外邊距

爲了更方便地控制網頁中的元素，製做網頁時，可以使用以下代碼清除元素的默認內外邊距：

* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}

注意： 行內元素是隻有左右外邊距的，是沒有上下外邊距的。內邊距，在ie6等低版本瀏覽器也會有問題。

咱們儘可能不要給行內元素指定上下的內外邊距就行了。

外邊距合併

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。

相鄰塊元素垂直外邊距的合併

當上下相鄰的兩個塊元素相遇時，若是上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是二者中的較大者。這種現象被稱爲相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。

嵌套塊元素垂直外邊距的合併

對於兩個嵌套關係的塊元素，若是父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距爲二者中的較大者，即便父元素的上外邊距爲0，也會發生合併。

解決方案：

一、能夠爲父元素定義1像素的上邊框或上內邊距。

二、能夠爲父元素添加overflow:hidden。

content寬度和高度

使用寬度屬性width和高度屬性height能夠對盒子的大小進行控制。

width和height的屬性值能夠爲不一樣單位的數值或相對於父元素的百分比%，實際工做中最經常使用的是像素值。

大多數瀏覽器，如Firefox、IE6及以上版本都採用了W3C規範，符合CSS規範的盒子模型的總寬度和總高度的計算原則是：

/*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素實際大小）*/
  Element Height = content height + padding + border （Height爲內容高度）
  Element Width = content width + padding + border （Width爲內容寬度）

注意：

一、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。

二、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的狀況。

三、若是一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。

盒子模型佈局穩定性

開始學習盒子模型，同窗們最大的困惑就是，分不清內外邊距的使用，什麼狀況下使用內邊距，什麼狀況下使用外邊距？

答案是：其實他們大部分狀況下是能夠混用的。就是說，你用內邊距也能夠，用外邊距也能夠。你以爲哪一個方便，就用哪一個。

可是，總有一個最好用的吧，咱們根據穩定性來分，建議以下：

按照優先使用寬度（width）其次使用內邊距（padding）再次外邊距（margin）。

width > padding > margin

緣由：

margin 會有外邊距合併還有 ie6下面margin 加倍的bug（討厭）因此最後使用。

padding 會影響盒子大小，須要進行加減計算（麻煩）其次使用。

width 沒有問題（嗨皮）咱們常用寬度剩餘法高度剩餘法來作。

盒子陰影

語法格式：

box-shadow:水平陰影垂直陰影模糊距離陰影尺寸陰影顏色內/外陰影；

1、前兩個屬性是必須寫的。其他的能夠省略。

2、外陰影 (outset) 可是不能寫默認想要內陰影 inset

div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
            /* box-shadow:水平位置垂直位置模糊距離陰影尺寸（影子大小）陰影顏色內/外陰影； */
            box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

}

浮動(float)

普通流(normal flow)

這個單詞不少人翻譯爲文檔流，字面翻譯普通流或者標準流均可以。

前面咱們說過，網頁佈局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？

CSS的定位機制有3種：普通流（標準流）、浮動和定位。

html語言當中另一個至關重要的概念----------標準流！或者普通流。普通流實際上就是一個網頁內標籤元素正常從上到下，從左到右排列順序的意思，好比塊級元素會獨佔一行，行內元素會按順序依次先後排列；按照這種大前提的佈局排列之下絕對不會出現例外的狀況叫作普通流佈局。

浮動(float)

浮動最先是用來控制圖片，以便達到其餘元素（特別是文字）實現「環繞」圖片的效果。

後來，咱們發現浮動有個頗有意思的事情：就是讓任何盒子能夠一行排列,所以咱們就慢慢的偏離主題，用浮動的特性來佈局了。（CSS3已經咱們真正意義上的網頁佈局，具體CSS3咱們會詳細解釋）

什麼是浮動？

元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。

在CSS中，經過float屬性來定義浮動，其基本語法格式以下：

元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。

在CSS中，經過float屬性來定義浮動，其基本語法格式以下：

浮動詳細內幕特性

浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。

浮動首先建立包含塊的概念（包裹）。就是說，浮動的元素老是找理它最近的父級元素對齊。可是不會超出內邊距的範圍。

浮動的元素排列位置，跟上一個元素（塊級）有關係。若是上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；若是上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。

由2能夠推斷出，一個父盒子裏面的子盒子，若是其中一個子級有浮動的，則其餘子級都須要浮動。這樣才能一行對齊顯示。

元素添加浮動後，元素會具備行內塊元素的特性。元素的大小徹底取決於定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。

總結：浮動 --->

浮動的目的就是爲了讓多個塊級元素同一行上顯示。

float 浮漏特

浮：加了浮動的元素盒子是浮起來的，漂浮在其餘的標準流盒子上面。漏：加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。特：特別注意，首先浮動的盒子須要和標準流的父級搭配使用，其次特別的注意浮動可使元素顯示模式體現爲行內塊特性。

版心和佈局流程

閱讀報紙時容易發現，雖然報紙中的內容不少，可是通過合理地排版，版面依然清晰、易讀。一樣，在製做網頁時，要想使頁面結構清晰、有條理，也須要對網頁進行「排版」。

「版心」(可視區) 是指網頁中主體內容所在的區域。通常在瀏覽器窗口中水平居中顯示，常見的寬度值爲960px、980px、1000px、1200px等。

佈局流程

爲了提升網頁製做的效率，佈局時一般須要遵照必定的佈局流程，具體以下：

一、肯定頁面的版心（可視區）。

二、分析頁面中的行模塊，以及每一個行模塊中的列模塊。

三、製做HTML結構。

四、CSS初始化，而後開始運用盒子模型的原理，經過DIV+CSS佈局來控制網頁的各個模塊。

清除浮動

準確地說，並非清除浮動，而是清除浮動後形成的影響

清除浮動本質

清除浮動主要爲了解決父級元素由於子級浮動引發內部高度爲0 的問題。

清除浮動的方法

其實本質叫作閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓他們出來影響其餘元素。

在CSS中，clear屬性用於清除浮動，其基本語法格式以下：

選擇器{clear:屬性值;}

額外標籤法

是W3C推薦的作法是經過在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」></div>，或則其餘標籤br等亦可。

優勢： 通俗易懂，書寫方便

缺點： 添加許多無心義的標籤，結構化較差。我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。

父級添加overflow屬性方法

能夠經過觸發BFC的方式，能夠實現清除浮動效果。（BFC後面講解）

能夠給父級添加： overflow爲 hidden|auto|scroll 均可以實現。

優勢： 代碼簡潔

缺點： 內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。

使用after僞元素清除浮動

:after 方式爲空元素的升級版，好處是不用單獨加標籤了

使用方法：

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix {*zoom: 1;} /* IE六、7 專有 */

優勢： 符合閉合浮動思想結構語義化正確

缺點： 因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

注意： content:"." 裏面儘可能跟一個小點，或者其餘，儘可能不要爲空，不然再firefox 7.0前的版本會有生成空格。

使用before和after雙僞元素清除浮動

使用方法：

.clearfix:before,.clearfix:after {
  content:"";
  display:table; /* 這句話能夠出發BFC BFC能夠清除浮動,BFC咱們後面講 */
}
.clearfix:after {
clear:both;
}
.clearfix {
  *zoom:1;
}

優勢： 代碼更簡潔

缺點： 因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

定位(position)

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

一、邊偏移

邊偏移屬性	描述
top	頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom	底部偏移量，定義元素相對於其父元素下邊線的距離
left	左側偏移量，定義元素相對於其父元素左邊線的距離
right	右側偏移量，定義元素相對於其父元素右邊線的距離

也就說，之後定位要和這邊偏移搭配使用了，好比 top: 100px; left: 30px; 等等

二、定位模式(定位的分類)

在CSS中，position屬性用於定義元素的定位模式，其基本語法格式以下：

選擇器{position:屬性值;}

position屬性的經常使用值

值	描述
static	自動定位（默認定位方式）
relative	相對定位，相對於其原文檔流的位置進行定位
absolute	絕對定位，相對於其上一個已經定位的父元素進行定位
fixed	固定定位，相對於瀏覽器窗口進行定位

靜態定位(static)

靜態定位是全部元素的默認定位方式，當position屬性的取值爲static時，能夠將元素定位於靜態位置。所謂靜態位置就是各個元素在HTML文檔流中默認的位置。

上面的話翻譯成白話：就是網頁中全部元素都默認的是靜態定位哦！其實就是標準流的特性。

在靜態定位狀態下，沒法經過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

PS：靜態定位其實沒啥可說的。

相對定位relative(自戀型)

相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值爲relative時，能夠將元素定位於相對位置。對元素設置相對定位後，能夠經過邊偏移屬性改變元素的位置，可是它在文檔流中的位置仍然保留。以下圖所示，便是一個相對定位的效果展現：

注意：

一、相對定位最重要的一點是，它能夠經過邊偏移移動位置，可是原來的所佔的位置，繼續佔有。

二、其次，每次移動的位置，是以本身的左上角爲基點移動（相對於本身來移動位置）

就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。（相對定位不脫標）

若是說浮動的主要目的是讓多個塊級元素一行顯示，那麼定位的主要價值就是移動位置，讓盒子到咱們想要的位置上去。

絕對定位absolute (拼爹型)

注意：

相對定位最重要的一點是，它能夠經過邊偏移移動位置，可是原來的所佔的位置，繼續佔有。

其次，每次移動的位置，是以本身的左上角爲基點移動（相對於本身來移動位置）就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。（相對定位不脫標）

若是說浮動的主要目的是讓多個塊級元素一行顯示，那麼定位的主要價值就是移動位置，讓盒子到咱們想要的位置上去。

絕對定位absolute (拼爹型)

[注意] 若是文檔可滾動，絕對定位元素會隨着它滾動，由於元素最終會相對於正常流的某一部分定位。

當position屬性的取值爲absolute時，能夠將元素的定位模式設置爲絕對定位。

注意：絕對定位最重要的一點是，它能夠經過邊偏移移動位置，可是它徹底脫標，徹底不佔位置。

父級沒有定位

若全部父元素都沒有定位，以瀏覽器爲準對齊(document文檔)。

父級有定位

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

子絕父相

這個「子絕父相」過重要了，是咱們學習定位的口訣，時時刻刻記住的。

這句話的意思是子級是絕對定位的話，父級要用相對定位。

首先，咱們說下，絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位。就是說，子級是絕對定位，父親只要是定位便可（無論父親是絕對定位仍是相對定位，甚至是固定定位均可以），就是說，子絕父絕，子絕父相都是正確的。

因此，咱們能夠得出以下結論：

由於子級是絕對定位，不會佔有位置，能夠放到父盒子裏面的任何一個地方。

父盒子佈局時，須要佔有位置，所以父親只能是相對定位.

這就是子絕父相的由來。

絕對定位的盒子水平/垂直居中

普通的盒子是左右margin 改成 auto就可，可是對於絕對定位就無效了

定位的盒子也能夠水平或者垂直居中，有一個算法。

首先left 50% 父盒子的一半大小

而後走本身外邊距負的一半值就能夠了 margin-left。

固定定位fixed(認死理型)

固定定位是絕對定位的一種特殊形式，相似於正方形是一個特殊的矩形。它以瀏覽器窗口做爲參照物來定義網頁元素。當position屬性的取值爲fixed時，便可將元素的定位模式設置爲固定定位。

當對元素設置固定定位後，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義本身的顯示位置。無論瀏覽器滾動條如何滾動也無論瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

固定定位的元素跟父親沒有任何關係，只認瀏覽器。

固定定位徹底脫標，不佔有位置，不隨着滾動條滾動。

ie6等低版本瀏覽器不支持固定定位。

疊放次序（z-index）

當對多個元素同時設置定位時，定位元素之間有可能會發生重疊。

在CSS中，要想調整重疊定位元素的堆疊順序，能夠對定位元素應用z-index層疊等級屬性，其取值可爲正整數、負整數和0。

好比： z-index: 2;

注意：

一、z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。

二、若是取值相同，則根據書寫順序，後來居上。

三、後面數字必定不能加單位。

四、只有相對定位，絕對定位，固定定位有此屬性，其他標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。

四種定位總結

定位模式	是否脫標占有位置	是否可使用邊偏移	移動位置基準
靜態static	不脫標，正常模式	不能夠	正常模式
相對定位relative	不脫標，佔有位置	能夠	相對自身位置移動（自戀型）
絕對定位absolute	徹底脫標，不佔有位置	能夠	相對於定位父級移動位置（拼爹型）
固定定位fixed	徹底脫標，不佔有位置	能夠	相對於瀏覽器移動位置（認死理型）

定位模式轉換

跟浮動同樣，元素添加了絕對定位和固定定位以後，元素模式也會發生轉換，都轉換爲行內塊模式，

** 所以好比行內元素若是添加了絕對定位或者固定定位後浮動後，能夠不用轉換模式，直接給高度和寬度就能夠了。**

元素的顯示與隱藏

在CSS中有三個顯示和隱藏的單詞比較常見，咱們要區分開，他們分別是 display visibility 和 overflow。

他們的主要目的是讓一個元素在頁面中消失，可是不在文檔源碼中刪除。最多見的是網站廣告，當咱們點擊相似關閉不見了，可是咱們從新刷新頁面，它們又會出現和你玩躲貓貓！！

display 顯示

display 設置或檢索對象是否及如何顯示。

display : none 隱藏對象與它相反的是 display:block 除了轉換爲塊級元素以外，同時還有顯示元素的意思。

特色：隱藏以後，再也不保留位置。

visibility 可見性

設置或檢索是否顯示對象。

visible : 　對象可視

hidden : 　對象隱藏

特色：隱藏以後，繼續保留原有位置。（停職留薪）

overflow 溢出

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

visible : 　不剪切內容也不添加滾動條。

auto : 　超出自動顯示滾動條，不超出不顯示滾動條

hidden : 　不顯示超過對象尺寸的內容，超出的部分隱藏掉

scroll : 　無論超出內容否，老是顯示滾動條

CSS高級技巧

CSS用戶界面樣式

所謂的界面樣式，就是更改一些用戶操做樣式，好比更改用戶的鼠標樣式，表單輪廓等。可是好比滾動條的樣式改動受到了不少瀏覽器的抵制，所以咱們就放棄了。防止表單域拖拽

鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針採用何種系統預約義的光標形狀。

cursor : default 小白 | pointer 小手 | move 移動 | text 文本

鼠標放我身上查看效果哦：

儘可能不要用hand 由於火狐不支持 pointer ie6以上都支持的儘可能用

輪廓 outline

是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。

outline : outline-color ||outline-style || outline-width

可是咱們都不關心能夠設置多少，咱們平時都是去掉的。

最直接的寫法是： outline: 0; 或者 outline: none;

防止拖拽文本域resize

resize：none 這個單詞能夠防止火狐谷歌等瀏覽器隨意的拖動文本域。

右下角能夠拖拽：

右下角不能夠拖拽：

vertical-align 垂直對齊

之前咱們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

之前咱們還講過讓文字居中對齊，是 text-align: center;

可是咱們歷來沒有講過有垂直居中的屬性，咱們的媽媽一直很擔憂咱們的垂直居中怎麼作。

vertical-align 垂直對齊，這個看上去很美好的一個屬性，實際有着不可捉摸的脾氣，不然咱們也不會這麼晚來說解。

vertical-align : baseline |top |middle |bottom

設置或檢索對象內容的垂直對其方式。

vertical-align 不影響塊級元素中的內容對齊，它只針對於行內元素或者行內塊元素，特別是行內塊元素， 一般用來控制圖片/表單與文字的對齊。

圖片、表單和文字對齊

因此咱們知道，咱們能夠經過vertical-align 控制圖片和文字的垂直關係了。默認的圖片會和文字基線對齊。

去除圖片底側空白縫隙

有個很重要特性你要記住：圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。這樣會形成一個問題，就是圖片底側會有一個空白縫隙。

解決的方法就是：

一、給img vertical-align:middle|top等等。讓圖片不要和基線對齊。

二、給img 添加 display：block; 轉換爲塊級元素就不會存在問題了。

溢出的文字隱藏

word-break:自動換行

normal 使用瀏覽器默認的換行規則。

break-all 容許在單詞內換行。

keep-all 只能在半角空格或連字符處換行。

主要處理英文單詞

white-space

white-space設置或檢索對象內文本顯示方式。一般咱們使用於強制一行顯示內容

normal : 　默認處理方式nowrap : 　強制在同一行內顯示全部文本，直到文本結束或者遭遇br標籤對象才換行。

能夠處理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出

clip : 　不顯示省略標記（...），而是簡單的裁切

ellipsis : 　當對象內文本溢出時顯示省略標記（...）

注意必定要首先強制一行內顯示，再次和overflow屬性搭配使用

字體圖標

圖片是有諸多優勢的，可是缺點很明顯，好比圖片不但增長了總文件的大小，還增長了不少額外的"http請求"，這都會大大下降網頁的性能的。更重要的是圖片不能很好的進行「縮放」，由於圖片放大和縮小會失真。咱們後面會學習移動端響應式，不少狀況下但願咱們的圖標是能夠縮放的。此時，一個很是重要的技術出現了，額不是出現了，是之前就有，是被重新"寵幸"啦。。這就是字體圖標（iconfont).

字體圖標優勢

能夠作出跟圖片同樣能夠作的事情,改變透明度、旋轉度，等..

可是本質實際上是文字，能夠很隨意的改變顏色、產生陰影、透明效果等等...

自己體積更小，但攜帶的信息並無削減。

幾乎支持全部的瀏覽器

移動端設備必備良藥...

字體圖標使用流程

設計字體圖標

假如圖標是咱們公司單獨設計，那就須要第一步了，這個屬於UI設計人員的工做，他們在 illustrator 或 Sketch 這類矢量圖形軟件裏建立 icon圖標，好比下圖：

以後保存爲svg格式，而後給咱們前端人員就行了。

其實第一步，咱們不須要關心，只須要給咱們這些圖標就能夠了，若是圖標是大衆的，網上原本就有的，能夠直接跳過第一步，進入第三步。

上傳生成字體包

當UI設計人員給咱們svg文件的時候，咱們須要轉換成咱們頁面能使用的字體文件，並且須要生成的是兼容性的適合各個瀏覽器的。

 推薦網站： http://icomoon.io

icomoon字庫

IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它容許用戶選擇他們所須要的圖標，使它們成一字型。內容種類繁多，很是全面，惟一的遺憾是國外服務器，打開網速較慢。

推薦網站： http://www.iconfont.cn/

阿里icon font字庫

http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可使用AI製做圖標上傳生成。一個字，免費，免費！！

fontello

http://fontello.com/

在線定製你本身的icon font字體圖標字庫，也能夠直接從GitHub下載整個圖標集，該項目也是開源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標能夠在Bootstrap下無償使用。自帶了200多個圖標。

Icons8

https://icons8.com/

提供PNG免費下載，像素大能到500PX

下載兼容字體包

剛纔上傳完畢，網站會給咱們把UI作的svg圖片轉換爲咱們的字體格式，而後下載下來就行了

固然，咱們不須要本身專門的圖標，是想網上找幾個圖標使用，以上2步能夠直接省略了，直接到剛纔的網站上找喜歡的下載使用吧。

字體引入到HTML

獲得壓縮包以後，最後一步，是最重要的一步了，就是字體文件已經有了，咱們須要引入到咱們頁面中。

首先把如下4個文件放入到 fonts文件夾裏面。通俗的作法

第一步：在樣式裏面聲明字體：告訴別人咱們本身定義的字體

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?7kkyc2');
  src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
   url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
   url('fonts/icomoon.woff?7kkyc2') format('woff'),
   url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}