CSS的出現(xiàn)

在頁面成型的初期，我們當(dāng)靠HTML就能完成一些簡單的頁面設(shè)計(jì)和控制，但是隨著互聯(lián)網(wǎng)的發(fā)展以及用戶的需求越來越高，所以最頁面的要求也越來越高，最初的HTML雖然能滿足一些簡單的樣式需求，但是隨著功能的增加，HTML里面的內(nèi)容也越來越多，顯得雜亂無章，所以這個(gè)時(shí)候CSS就出現(xiàn)了！

CSS的功能

如果說頁面是一個(gè)人的整個(gè)部分，那么HTML是骨架，而CSS就是他的衣服了！

CSS功能：樣式的控制，讓頁面更加豐富多彩。(美化樣式)

設(shè)置HTML的文本內(nèi)容（字體，大小，對(duì)齊方式等等）
圖片的外形（寬高，邊框樣式，邊距等等）
版面的布局等外觀顯示
以HTML為基礎(chǔ)，提供字體，背景，顏色，等控制整體排版，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。如何引入CSS樣式表

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

CSS可以寫到那個(gè)位置？是不是一定寫到html文件里面呢？

內(nèi)部樣式表

內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義，其基本語法格式如下：

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

語法中，style標(biāo)簽一般位于head標(biāo)簽中title標(biāo)簽之后，也可以把他放在HTML文檔的任何地方。

行內(nèi)式（內(nèi)聯(lián)樣式）

內(nèi)聯(lián)樣式，又有人稱行內(nèi)樣式、行間樣式、內(nèi)嵌樣式。是通過標(biāo)簽的style屬性來設(shè)置元素的樣式，其基本語法格式如下：

<標(biāo)簽名 style="屬性1:屬性值1……;">內(nèi)容</標(biāo)簽名>

外部樣式表（外鏈?zhǔn)剑?/h3>

鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：

<head>
    <link href="css文件路徑" rel="stylesheet" />
</head>

注意：

link是自閉合標(biāo)簽！
link標(biāo)簽需要放在head頭部標(biāo)簽中，并且必須指定link標(biāo)簽的三個(gè)屬性

屬性如下：

herf：定義所鏈接外部樣式表文件的URL，可以相對(duì)路徑和絕對(duì)路徑。
type：定義所鏈接文檔的類型，如（text/css），表示鏈接的外部文件為css樣式
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里指定為”stylesheet“，表示被鏈接的文檔是一個(gè)樣式表文件。

三種選擇器整合

樣式表	優(yōu)點(diǎn)	缺點(diǎn)	使用情況	控制范圍
行內(nèi)樣式表	書寫方便，權(quán)重高	沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離	較少	控制一個(gè)標(biāo)簽（少）
內(nèi)部樣式表	部分結(jié)構(gòu)和樣式相分離	沒有徹底分離	較多	控制一個(gè)頁面（中）
外部樣式表	完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離	需要引入	最多，強(qiáng)烈推薦	控制整個(gè)站點(diǎn)（多）

CSS的使用規(guī)則

h1{
    color:red;font-size:25px
}

在上面的樣式規(guī)則中:

1.選擇器用于指定CSS樣式作用的HTML對(duì)象，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。

2.屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)。

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

4.屬性和屬性值之間用英文“:”連接。

5.多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分。

可以用段落 和 表格的對(duì)齊的演示。

CSS基礎(chǔ)選擇器

標(biāo)簽選擇器（元素）

標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
或者 元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}

標(biāo)簽選擇器可以把某一類標(biāo)簽全部選擇出來 div span

類選擇器&&多類名選擇器

類選擇器

* .類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
* 標(biāo)簽調(diào)用的時(shí)候用 class=“類名”  即可。

類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名。

注意事項(xiàng)：

1.長名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器。
3.不要純數(shù)字、中文等命名， 盡量使用英文字母來表示。

多類名選擇器

注意：

1. 樣式顯示效果跟HTML元素中的類名先后順序沒有關(guān)系,受CSS樣式書寫的上下順序有關(guān)。
2. 各個(gè)類名中間用空格隔開。

使用：

<div class="pink fontWeight font20">劉德華</div>
<div class="font20">鄧超</div>
<div class="font14 pink">彭于晏</div>
<div class="font14">天</div>

類名選擇器：< div class=“nav”> 這個(gè) div 的名字就是 nav nav 就是 div 這個(gè) div 也是 nav

< 人 class = 劉德華 > 我們想要吧div 找到 div {} .nav {}

id選擇器

id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語法格式如下：

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

該語法中，id名即為HTML元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。

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

id選擇器和類選擇器的區(qū)別

W3C標(biāo)準(zhǔn)規(guī)定，在同一個(gè)頁面內(nèi)，不允許有相同名字的id對(duì)象出現(xiàn)，但是允許相同名字的class。

類選擇器（class）好比人的名字，是可以多次重復(fù)使用的，比如張偉王偉李偉李娜

id選擇器好比人的身份證號(hào)碼，全中國是唯一的，不得重復(fù)。只能使用一次。

id選擇器和類選擇器最大的不同在于使用次數(shù)上。

通配符選擇器

通配符選擇器用“*”號(hào)表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

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

常用來設(shè)置一些默認(rèn)值如：

 * {
    margin:0;  /*定義外邊距 */
    padding:0; /*定義內(nèi)邊距*/
}

CSS字體樣式屬性

字號(hào)大小：font-size

font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長度單位，也可以使用絕對(duì)長度單位。其中，相對(duì)長度單位比較常用，推薦使用像素單位px，絕對(duì)長度單位使用較少。

字體樣式：font-family

font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑，可以使用如下CSS樣式代碼：

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

注意事項(xiàng)：

1. 現(xiàn)在網(wǎng)頁中普遍使用14px+。
2. 盡量使用偶數(shù)的數(shù)字字號(hào)。ie6等老式瀏覽器支持奇數(shù)會(huì)有bug。
3. 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開。
4. 中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。
5. 如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，例如font-family: "Times New Roman";。
6. 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。

字體粗細(xì)：font-weight

字體加粗除了用 b 和 strong 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。

font-weight屬性用于定義字體的粗細(xì)
其可用屬性值：normal(正常) 
bold 
bolder 
lighter 
數(shù)字使用方式（100~900）

注意：

數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。

字體風(fēng)格：font-style

字體傾斜除了用 i 和 em 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。

font-style屬性用于定義字體風(fēng)格
其可用屬性值：normal 默認(rèn)樣式
italic：瀏覽器會(huì)顯示斜體的字體樣式。
oblique：瀏覽器會(huì)顯示傾斜的字體樣式。

注意：

平時(shí)我們很少給文字加斜體，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式。

綜合設(shè)置：font

font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：

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

注意事項(xiàng)：

1.使用font屬性時(shí)，必須按上面語法格式中的順序書寫，不能更換順序，各個(gè)屬性以空格隔開。
2.其中不需要設(shè)置的屬性可以省略（取默認(rèn)值）
3.但必須保留font-size和font-family屬性，否則font屬性將不起作用。

CSS外觀

文本顏色：color

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

1.預(yù)定義的顏色值，如red，green，blue等。

2.十六進(jìn)制，如#FF0000，#FF6600，#29D794等。實(shí)際工作中，十六進(jìn)制是最常用的定義顏色的方式。

3.RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時(shí)也不能省略百分號(hào)，必須寫為0%。

行間距：line-height

ine-height屬性用于設(shè)置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px

一般情況下，行距比字號(hào)大7.8像素左右就可以了。

水平對(duì)齊方式：text-align

text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：

left：左對(duì)齊（默認(rèn)值）

right：右對(duì)齊

center：居中對(duì)齊

注意：

? 是讓盒子里面的內(nèi)容水平居中，而不是讓盒子居中對(duì)齊。

首行縮進(jìn)：text-indent

text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值, 建議使用em作為設(shè)置單位。

1em 就是一個(gè)字的寬度如果是漢字的段落， 1em 就是一個(gè)漢字的寬度

文本的裝飾：text-decoration

text-decoration 通常我們用于給鏈接修改裝飾效果

值	描述
none	默認(rèn)。定義標(biāo)準(zhǔn)的文本。（取消下劃線）
underline	定義文本下的一條線。下劃線也是我們鏈接自帶的
overline	定義文本上的一條線。（相當(dāng)于頭頂線）
line-through	定義穿過文本下的一條線。（相當(dāng)于刪除線）

CSS符合選擇器

交集選擇器

交集選擇器由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格，如h3.special。

[圖片上傳失敗...(image-b21f14-1561095936860)]

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

比如：   p.one   選擇的是： 類名為 .one  的 段落標(biāo)簽。

并集選擇器

并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過逗號(hào)連接而成的，任何形式的選擇器（包括標(biāo)簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。[圖片上傳失敗...(image-469039-1561095936860)]

并集選擇器和的意思，就是說，只要逗號(hào)隔開的，所有選擇器都會(huì)執(zhí)行后面樣式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 這三個(gè)選擇器都會(huì)執(zhí)行顏色為紅色。  通常用于集體聲明。

后代選擇器

后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。[圖片上傳失敗...(image-9826a0-1561095936860)]

子孫后代都可以這么選擇。或者說，它能選擇任何包含在內(nèi) 的標(biāo)簽。

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級(jí)標(biāo)簽寫在前面，子級(jí)標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接，注意，符號(hào)左右兩側(cè)各保留一個(gè)空格。[圖片上傳失敗...(image-424298-1561095936860)]

白話：這里的子指的是親兒子不包含孫子重孫子之類。

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含著h3。

鏈接偽類選擇器

:link /* 未訪問的鏈接 */
:visited /* 已訪問的鏈接 */
:hover /* 鼠標(biāo)移動(dòng)到鏈接上 */
:active /* 選定的鏈接 */

a {   /* a是標(biāo)簽選擇器  所有的鏈接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
a:hover {   /* :hover 是鏈接偽類選擇器 鼠標(biāo)經(jīng)過 */
            color: red; /*  鼠標(biāo)經(jīng)過的時(shí)候，由原來的 灰色 變成了紅色 */
}

標(biāo)簽顯示模式

標(biāo)簽的類型(顯示模式)

HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型，它們也稱塊元素和行內(nèi)元素。具體如下：

塊級(jí)元素：block-level

每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。

塊級(jí)元素的特點(diǎn)：

（1）總是從新行開始

（2）高度，行高、外邊距以及內(nèi)邊距都可以控制。

（3）寬度默認(rèn)是容器的100%

（4）可以容納內(nèi)聯(lián)元素和其他塊元素。

行內(nèi)元素：inline-level

行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對(duì)齊等屬性，常用于控制頁面中文本的樣式。

行內(nèi)元素的特點(diǎn)：

（1）和相鄰行內(nèi)元素在一行上。

（2）高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效。

（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。

（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊）

注意：

1. 只有 文字才 能組成段落  因此 p  里面不能放塊級(jí)元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級(jí)標(biāo)簽，里面不能放其他塊級(jí)元素。
2. 鏈接里面不能再放鏈接。

塊級(jí)元素和行內(nèi)元素的區(qū)別

塊級(jí)元素的特點(diǎn)：
（1）總是從新行開始
（2）高度，行高、外邊距以及內(nèi)邊距都可以控制。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素。

行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。

行內(nèi)元素塊inline-block

在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />、<input />、<td>，可以對(duì)它們?cè)O(shè)置寬高和對(duì)齊屬性。

行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙。
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（3）高度，行高、外邊距以及內(nèi)邊距都可以控制。

標(biāo)簽顯示模式轉(zhuǎn)換：display：...

塊轉(zhuǎn)行內(nèi)：display:inline;

行內(nèi)轉(zhuǎn)塊：display:block;

塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

CSS書寫規(guī)范

空格規(guī)范

【強(qiáng)制】 選擇器 與 { 之間必須包含空格。

示例： .selector { }

【強(qiáng)制】 屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。

示例：

font-size: 12px;

選擇器規(guī)范

【強(qiáng)制】當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)，每個(gè)選擇器聲明必須獨(dú)占一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建議】選擇器的嵌套層級(jí)應(yīng)不大于 3 級(jí)，位置靠后的限定條件應(yīng)盡可能精確。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

屬性規(guī)范

【強(qiáng)制】屬性定義必須另起一行。

示例：

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【強(qiáng)制】屬性定義后必須以分號(hào)結(jié)尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

CSS三大特性

三大特性如下：

1.層疊性
2.繼承性
3.優(yōu)先級(jí)

CSS層疊性

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

是瀏覽器處理沖突的一個(gè)能力,如果一個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉。

比如先給某個(gè)標(biāo)簽指定了內(nèi)部文字顏色為紅色，接著又指定了顏色為藍(lán)色，此時(shí)出現(xiàn)一個(gè)標(biāo)簽指定了相同樣式不同值的情況，這就是樣式?jīng)_突。

一般情況下，如果出現(xiàn)樣式?jīng)_突，則會(huì)按照CSS書寫的順序，以最后的樣式為準(zhǔn)。

樣式?jīng)_突，遵循的原則是就近原則。那個(gè)樣式離著結(jié)構(gòu)近，就執(zhí)行那個(gè)樣式。
樣式不沖突，不會(huì)層疊

CSS繼承性

所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。

注意：

恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）

CSS優(yōu)先性

定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。

權(quán)重注意：

1.繼承樣式的權(quán)重為0。
    即在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大，被子元素繼承時(shí)，他的權(quán)重都    為0，也就是說子元素定義的樣式會(huì)覆蓋繼承來的樣式。
2.行內(nèi)樣式優(yōu)先。
    應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高，可以理解為遠(yuǎn)大于100。    總之，他擁有比上面提高的選擇器都大的優(yōu)先級(jí)。
3.權(quán)重相同時(shí)，CSS遵循就近原則。
    也就是說靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說排在最后的樣式優(yōu)先級(jí)最    大。
4.!important命令。
    CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)。也就是說不    管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先級(jí)。

CSS權(quán)重貢獻(xiàn)值

值從左到右，左面的最大，一級(jí)大于一級(jí)，<strong>數(shù)位之間沒有進(jìn)制</strong>，級(jí)別之間不可超越。

繼承或者* 的貢獻(xiàn)值	0,0,0,0
每個(gè)元素（標(biāo)簽）貢獻(xiàn)值為	0,0,0,1
每個(gè)類，偽類貢獻(xiàn)值為	0,0,1,0
每個(gè)ID貢獻(xiàn)值為	0,1,0,0
每個(gè)行內(nèi)樣式貢獻(xiàn)值	1,0,0,0
每個(gè)!important貢獻(xiàn)值	∞ 無窮大

權(quán)重是可以疊加的：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

CSS背景

背景圖片（image）

語法：

background-image：none|url（uri）

參數(shù)：

? none : 　無背景圖（默認(rèn)的）
url : 　使用絕對(duì)或相對(duì)地址指定背景圖像

注意：

background-image 屬性允許指定一個(gè)圖片展示在背景中（只有CSS3才可以多                背景）可以和 background-color 連用。 如果圖片不重復(fù)地話，圖片覆蓋不到地地  方都會(huì)被背景色填充。 如果有背景圖片平鋪，則會(huì)覆蓋背景顏色。

背景平鋪（repeat）

語法：

background-repeat：repeat|no-repeat|repeat-x|repeat-y

參數(shù)：

? repeat : 　背景圖像在縱向和橫向上平鋪（默認(rèn)的）

? no-repeat : 　背景圖像不平鋪

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

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

? 設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。

背景位置（position）

語法：

background-position：length
background-position：position

參數(shù)：

注意：

? 1.設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定background-image屬性。默認(rèn) 值為：(0% 0%)。
2.如果只指定了一個(gè)值，該值將用于橫坐標(biāo)?？v坐標(biāo)將默認(rèn)為50%。第二個(gè)值將用于縱坐標(biāo)。

注意：

背景附著

語法：

background-attachment : scroll | fixed

參數(shù)：

scroll : 　背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
fixed : 　背景圖像固定

背景簡寫

background屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的。

建議如下：

background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置
例如：
    background: transparent url(image.jpg) repeat-y  scroll     50% 0 ;

背景透明（CSS3）

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

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

最后一個(gè)參數(shù)是alpha 透明度取值范圍 0~1之間

注意：

? 背景半透明是指盒子背景半透明，盒子里面的內(nèi)容不收影響。

盒子模型

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

盒子邊框

語法：

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

? 邊框?qū)傩浴O(shè)置邊框樣式（border-style）

? 邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）

solid：邊框?yàn)閱螌?shí)線(最為常用的)

dashed：邊框?yàn)樘摼€  

dotted：邊框?yàn)辄c(diǎn)線

double：邊框?yàn)殡p實(shí)線

圓角邊框

? 語法格式：

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

內(nèi)邊距（padding）

padding屬性用于設(shè)置內(nèi)邊距。是指邊框與內(nèi)容之間的距離。

padding-top:上內(nèi)邊距

padding-right:右內(nèi)邊距

padding-bottom:下內(nèi)邊距

padding-left:左內(nèi)邊距

注意：跟多個(gè)數(shù)值時(shí)的意思。

值的個(gè)數(shù)	表達(dá)意思
1個(gè)值	padding：上下左右邊距比如padding: 3px; 表示上下左右都是3像素
2個(gè)值	padding: 上下邊距左右邊距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3個(gè)值	padding：上邊距左右邊距下邊距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4個(gè)值	padding:上內(nèi)邊距右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 順時(shí)針

外邊距（margin）

margin屬性用于設(shè)置外邊距。設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”，這段空白通常不能放置其他內(nèi)容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

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

取值順序跟內(nèi)邊距相同。

外邊距實(shí)現(xiàn)盒子居中

需要滿足一下兩個(gè)條件：

必須是塊級(jí)元素。
盒子必須指定了寬度（width）
然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。

代碼如下：

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

文字居中與盒子居中區(qū)別

文字水平居中是 text-align: center
盒子水平居中左右margin 改為 auto
代碼如下：

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

插入圖片和背景圖片的區(qū)別

插入圖片：用的最多比如產(chǎn)品展示類
背景圖片：一般用于小圖標(biāo)背景或者超大背景圖片
代碼如下：

section img {  
        width: 200px;/* 插入圖片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
    }

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 */
    }

清楚元素的默認(rèn)內(nèi)外邊距

為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：

* {
   padding:0;         /* 清除內(nèi)邊距 */
   margin:0;          /* 清除外邊距 */
}

注意：行內(nèi)元素是只有左右外邊距的，是沒有上下外邊距的。內(nèi)邊距，在ie6等低版本瀏覽器也會(huì)有問題。

外邊距合并

使用margin定義塊元素的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并。

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

當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。[圖片上傳失敗...(image-a6d891-1561095936860)]

解決方案：避免就好了。

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

對(duì)于兩個(gè)嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會(huì)發(fā)生合并。[圖片上傳失敗...(image-18f9f2-1561095936860)]

解決方案：

可以為父元素定義1像素的上邊框或上內(nèi)邊距。
可以為父元素添加overflow:hidden。

content寬度和高度

使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。

width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比%，實(shí)際工作中最常用的是像素值。

大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：

  /*外盒尺寸計(jì)算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內(nèi)盒尺寸計(jì)算（元素實(shí)際大小）*/
  Element Height = content height + padding + border （Height為內(nèi)容高度）
  Element Width = content width + padding + border （Width為內(nèi)容寬度）

注意：

1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）。

2、計(jì)算盒子模型的總高度時(shí)，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況。

3、如果一個(gè)盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會(huì)影響本盒子大小。

盒子模型布局穩(wěn)定性

什么情況下使用內(nèi)邊距，什么情況下使用外邊距？

建議：

按照優(yōu)先使用寬度（width）其次使用內(nèi)邊距（padding）再次外邊距（margin）。

  width >  padding  >   margin

原因：

margin 會(huì)有外邊距合并還有 ie6下面margin 加倍的bug（討厭）所以最后使用。
padding 會(huì)影響盒子大小，需要進(jìn)行加減計(jì)算（麻煩）其次使用。
width 我們經(jīng)常使用寬度剩余法高度剩余法來做。

?

盒子陰影

語法格式：

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

[圖片上傳失敗...(image-c9fa43-1561095936860)]

前兩個(gè)屬性是必須寫的。其余的可以省略。
外陰影 (outset) 但是不能寫默認(rèn) 想要內(nèi)陰影 inset

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

浮動(dòng)(float)

普通流(normal flow)

普通流實(shí)際上就是一個(gè)網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級(jí)元素會(huì)獨(dú)占一行，行內(nèi)元素會(huì)按順序依次前后排列；按照這種大前提的布局排列之下絕對(duì)不會(huì)出現(xiàn)例外的情況叫做普通流布局。

浮動(dòng)(float)

浮動(dòng)最早是用來控制圖片，以便達(dá)到其他元素（特別是文字）實(shí)現(xiàn)“環(huán)繞”圖片的效果。

后來，我們發(fā)現(xiàn)浮動(dòng)有個(gè)很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動(dòng)的特性來布局了。[圖片上傳失敗...(image-6082a2-1561095936860)]

什么是浮動(dòng)？

元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)普通流的控制，移動(dòng)到其父元素中指定位置的過程。

語法格式如下：

選擇器{float:屬性值;}

屬性值	描述
left	元素向左浮動(dòng)
right	元素向右浮動(dòng)
none	元素不浮動(dòng)（默認(rèn)值）

浮動(dòng)詳細(xì)內(nèi)幕特性

浮動(dòng)脫離標(biāo)準(zhǔn)流，不占位置，會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)。

浮動(dòng)的元素排列位置，跟上一個(gè)元素（塊級(jí)）有關(guān)系。如果上一個(gè)元素有浮動(dòng)，則A元素頂部會(huì)和上一個(gè)元素的頂部對(duì)齊；如果上一個(gè)元素是標(biāo)準(zhǔn)流，則A元素的頂部會(huì)和上一個(gè)元素的底部對(duì)齊。

[圖片上傳失敗...(image-db4ca6-1561095936860)]

浮動(dòng)的目的就是為了讓多個(gè)塊級(jí)元素同一行上顯示。

版心和布局流程

“版心”(可視區(qū)) 是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。

布局流程

為了提高網(wǎng)頁制作的效率，布局時(shí)通常需要遵守一定的布局流程，具體如下：

1、確定頁面的版心（可視區(qū)）。

2、分析頁面中的行模塊，以及每個(gè)行模塊中的列模塊。

3、制作HTML結(jié)構(gòu) 。

4、CSS初始化，然后開始運(yùn)用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個(gè)模塊。

一列固定寬度且居中

最普通的，最為常用的結(jié)構(gòu)

[圖片上傳失敗...(image-e54978-1561095936860)]

兩列左窄右寬型

[圖片上傳失敗...(image-ef6c85-1561095936860)]

通欄平均分布型

[圖片上傳失敗...(image-361950-1561095936860)]

清除浮動(dòng)

為什么要清除浮動(dòng)

浮動(dòng)本質(zhì)是用來做一些文字混排效果的，但是被我們拿來做布局用，則會(huì)有很多的問題出現(xiàn)，但是，你不能說浮動(dòng)不好

由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響，為了解決這些問題，此時(shí)就需要在該元素中清除浮動(dòng)。

準(zhǔn)確地說，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響

清除浮動(dòng)本質(zhì)

清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問題。

清除浮動(dòng)的方法

其實(shí)本質(zhì)叫做閉合浮動(dòng)更好一些, 記住，清除浮動(dòng)就是把浮動(dòng)的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中，clear屬性用于清除浮動(dòng)，其基本語法格式如下：

選擇器{clear:屬性值;}

屬性值	描述
left	不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響）
right	不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響）
both	同時(shí)清除左右兩側(cè)浮動(dòng)的影響

使用after偽元素清除浮動(dòng)

:after 方式為空元素的升級(jí)版，好處是不用單獨(dú)加標(biāo)簽了

使用方法：

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

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

優(yōu)點(diǎn)：符合閉合浮動(dòng)思想結(jié)構(gòu)語義化正確

缺點(diǎn)：由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

注意： content:"." 里面盡量跟一個(gè)小點(diǎn)，或者其他，盡量不要為空，否則再firefox 7.0前的版本會(huì)有生成空格。

使用before和after雙偽元素清除浮動(dòng)

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 這句話可以出發(fā)BFC*/
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

優(yōu)點(diǎn)：代碼更簡潔

缺點(diǎn)：由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

代表網(wǎng)站：小米、騰訊等

定位（position）

如果，說浮動(dòng)，關(guān)鍵在一個(gè) “浮” 字上面，那么我們的定位，關(guān)鍵在于一個(gè) “位” 上。

元素的定位屬性

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

1、邊偏移

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

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

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

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

選擇器{position:屬性值;}

position屬性的常用值

值	描述
static	自動(dòng)定位（默認(rèn)定位方式）
relative	相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位
absolute	絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位
fixed	固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位

靜態(tài)定位(static)

靜態(tài)定位是所有元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。

就是網(wǎng)頁中所有元素都默認(rèn)的是靜態(tài)定位，其實(shí)就是標(biāo)準(zhǔn)流的特性。

在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變?cè)氐奈恢谩?/p>

相對(duì)定位relative

相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對(duì)位置。

對(duì)元素設(shè)置相對(duì)定位后，可以通過邊偏移屬性改變?cè)氐奈恢?，但是它在文檔流中的位置仍然保留。如下圖所示，即是一個(gè)相對(duì)定位的效果展示：

注意：

相對(duì)定位最重要的一點(diǎn)是，它可以通過邊偏移移動(dòng)位置，但是原來的所占的位置，繼續(xù)占有。
其次，每次移動(dòng)的位置，是以自己的左上角為基點(diǎn)移動(dòng)（相對(duì)于自己來移動(dòng)位置）

就是說，相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它。（相對(duì)定位不脫標(biāo)）

如果說浮動(dòng)的主要目的是讓多個(gè)塊級(jí)元素一行顯示，那么定位的主要價(jià)值就是移動(dòng)位置，讓盒子到我們想要的位置上去。

絕對(duì)定位absolute

如果文檔可滾動(dòng)，絕對(duì)定位元素會(huì)隨著它滾動(dòng)，因?yàn)樵刈罱K會(huì)相對(duì)于正常流的某一部分定位。

當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。

注意：絕對(duì)定位最重要的一點(diǎn)是，它可以通過邊偏移移動(dòng)位置，但是它完全脫標(biāo)，完全不占位置。

父級(jí)沒有定位

若所有父元素都沒有定位，以瀏覽器為準(zhǔn)對(duì)齊(document文檔)。

父級(jí)有定位

絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位。

子絕父相

子級(jí)是絕對(duì)定位的話，父級(jí)要用相對(duì)定位。

因?yàn)樽蛹?jí)是絕對(duì)定位，不會(huì)占有位置， 可以放到父盒子里面的任何一個(gè)地方。

父盒子布局時(shí)，需要占有位置，因此父親只能是 相對(duì)定位.

絕對(duì)定位的盒子水平/垂直居中

普通的盒子是左右margin 改為 auto就可，但是對(duì)于絕對(duì)定位就無效了

定位的盒子也可以水平或者垂直居中，有一個(gè)算法。

首先left 50% 父盒子的一半大小
然后走自己外邊距負(fù)的一半值就可以了 margin-left。

固定定位fixed

固定定位是絕對(duì)定位的一種特殊形式，類似于正方形是一個(gè)特殊的矩形。它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。

當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點(diǎn)：

固定定位的元素跟父親沒有任何關(guān)系，只認(rèn)瀏覽器。
固定定位完全脫標(biāo)，不占有位置，不隨著滾動(dòng)條滾動(dòng)。
ie6等低版本瀏覽器不支持固定定位。

疊放次序（z-index）

當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊。

在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對(duì)定位元素應(yīng)用z-index層疊等級(jí)屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。

比如： z-index: 2;

注意:

1. z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。
2. 如果取值相同，則根據(jù)書寫順序，后來居上。
3. 后面數(shù)字一定不能加單位。
4. 只有相對(duì)定位，絕對(duì)定位，固定定位有此屬性，其余標(biāo)準(zhǔn)流，浮動(dòng)，靜態(tài)定位都無此屬性，亦不可指定此屬性。

四種定位總結(jié)

定位模式	是否脫標(biāo)占有位置	是否可以使用邊偏移	移動(dòng)位置基準(zhǔn)
靜態(tài)static	不脫標(biāo)，正常模式	不可以	正常模式
相對(duì)定位relative	不脫標(biāo)，占有位置	可以	相對(duì)自身位置移動(dòng)
絕對(duì)定位absolute	完全脫標(biāo)，不占有位置	可以	相對(duì)于定位父級(jí)移動(dòng)位置
固定定位fixed	完全脫標(biāo)，不占有位置	可以	相對(duì)于瀏覽器移動(dòng)位置

定位模式轉(zhuǎn)換

跟浮動(dòng)一樣，元素添加了絕對(duì)定位和固定定位之后，元素模式也會(huì)發(fā)生轉(zhuǎn)換，都轉(zhuǎn)換為行內(nèi)塊模式，

注意:

比如 行內(nèi)元素 如果添加了 絕對(duì)定位或者 固定定位后 浮動(dòng)后，可以不用轉(zhuǎn)換模式，直接給高度和寬度就可以了

元素的顯示與隱藏

在CSS中有三個(gè)顯示和隱藏的單詞比較常見，我們要區(qū)分開，他們分別是 display visibility 和 overflow。

他們的主要目的是讓一個(gè)元素在頁面中消失，但是不在文檔源碼中刪除。最常見的是網(wǎng)站廣告，當(dāng)我們點(diǎn)擊類似關(guān)閉不見了，但是我們重新刷新頁面，它就會(huì)出現(xiàn)。

display 顯示

display 設(shè)置或檢索對(duì)象是否及如何顯示。

display : none 隱藏對(duì)象與它相反的是 display:block 除了轉(zhuǎn)換為塊級(jí)元素之外，同時(shí)還有顯示元素的意思。

特點(diǎn)：隱藏之后，不再保留位置。

visibility 可見性

設(shè)置或檢索是否顯示對(duì)象。

visible : 　對(duì)象可視

hidden : 　對(duì)象隱藏

特點(diǎn)：隱藏之后，繼續(xù)保留原有位置。

overflow 溢出

檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何管理內(nèi)容。

visible : 　不剪切內(nèi)容也不添加滾動(dòng)條。

auto : 　超出自動(dòng)顯示滾動(dòng)條，不超出不顯示滾動(dòng)條

hidden : 　不顯示超過對(duì)象尺寸的內(nèi)容，超出的部分隱藏掉

scroll : 　不管超出內(nèi)容否，總是顯示滾動(dòng)條

CSS高級(jí)

CSS用戶界面樣式

所謂的界面樣式，就是更改一些用戶操作樣式，比如更改用戶的鼠標(biāo)樣式，表單輪廓等。防止表單域拖拽

鼠標(biāo)樣式：cursor

設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

屬性：

cursor :  default  小白 | pointer  小手  | move  移動(dòng)  |  text  文本

實(shí)例：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移動(dòng)</li>
  <li style="cursor:text">我是文本</li>
</ul>

注意：

hand 火狐不支持 pointer ie6以上都支持

輪廓：outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

屬性：

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

一般用于去掉輪廓：so直接設(shè)置如下即可 outline: 0;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域：resize

直接設(shè)置 resize：none 可以防止文本域被拖拽影響布局

<textarea  style="resize: none;"></textarea>

vertical-align 垂直對(duì)齊

塊級(jí)元素居中對(duì)齊：margin：0 auto;

文字居中對(duì)齊：text-align： center；

垂直居中對(duì)齊屬性如下：

vertical-align : baseline  基線對(duì)齊 （默認(rèn)）
                top 頂部對(duì)齊
                middle 垂直對(duì)齊
                bottom  底部對(duì)齊

vertical-align 不影響塊級(jí)元素中的內(nèi)容對(duì)齊，它只針對(duì)于行內(nèi)元素或者行內(nèi)塊元素，特別是行內(nèi)塊元素，通常用來控制圖片和表單等。

圖片和文字對(duì)齊

用 vertical-align ： middle 來控制圖片和文字的垂直對(duì)齊

去除圖片底側(cè)空白縫隙

何為空隙？

如果一個(gè)元素沒有基線，比如圖片或者表單等行內(nèi)塊元素，則他的底線會(huì)和父級(jí)盒子的基線對(duì)齊。這樣會(huì)造成一個(gè)問題，就是圖片底側(cè)會(huì)有一個(gè)空白縫隙。

如何去除？

1.給圖片（img）vertical-align:middle | top等等。讓圖片不要和基線對(duì)齊。

2.給圖片（img）添加 display：block; 轉(zhuǎn)換為塊級(jí)元素就不會(huì)存在問題了。

溢出的文字隱藏

自動(dòng)換行：word-break

屬性：

normal   使用瀏覽器默認(rèn)的換行規(guī)則。

break-all   允許在單詞內(nèi)換行。

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

文字溢出：text-overflow

屬性：

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

ellipsis : 　當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）

CSS精靈技術(shù)（sprite）

何為精靈技術(shù)？

CSS精靈是一種處理網(wǎng)頁背景圖像的方式。

它將一個(gè)頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁，這樣，當(dāng)用戶訪問該頁面時(shí)，只需向服務(wù)發(fā)送一次請(qǐng)求，網(wǎng)頁中的背景圖像即可全部展示出來。通常情況下，這個(gè)由很多小的背景圖像合成的大圖被稱為精靈圖。

使用方式

使用CSS的background-image、background-repeat和background-position屬性進(jìn)行背景定位，其中最關(guān)鍵的是使用background-position屬性精確地定位。

★注意：

? 背景圖多的時(shí)候才使用！

字體圖標(biāo)

圖片是有諸多優(yōu)點(diǎn)的，但是缺點(diǎn)很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請(qǐng)求"，這都會(huì)大大降低網(wǎng)頁的性能的。更重要的是圖片不能很好的進(jìn)行“縮放”，因?yàn)閳D片放大和縮小會(huì)失真。ps：移動(dòng)響應(yīng)端完美實(shí)現(xiàn)字體圖標(biāo)的縮放比例。

字體圖標(biāo)使用方式

1.UI設(shè)計(jì)字體圖標(biāo)效果圖（svg格式）

2.網(wǎng)絡(luò)下載svg格式

3.引入html頁面中

上傳包

推薦網(wǎng)站： http://icomoon.io

當(dāng)UI設(shè)計(jì)人員給我們svg文件的時(shí)候，我們需要轉(zhuǎn)換成我們頁面能使用的字體文件，而且需要生成的是兼容性的適合各個(gè)瀏覽器的。

icomoon字庫

IcoMoon成立于2011年，推出的第一個(gè)自定義圖標(biāo)字體生成器，它允許用戶選擇他們所需要的圖標(biāo)，使它們成一字型。內(nèi)容種類繁多，非常全面，唯一的遺憾是國外服務(wù)器，打開網(wǎng)速較慢。

推薦網(wǎng)站： http://www.iconfont.cn/

阿里icon font字庫

http://www.iconfont.cn/

這個(gè)是阿里媽媽M2UX的一個(gè)icon font字體圖標(biāo)字庫，包含了淘寶圖標(biāo)庫和阿里媽媽圖標(biāo)庫?？梢允褂肁I制作圖標(biāo)上傳生成。一個(gè)字，免費(fèi)，免費(fèi)??！

fontello

http://fontello.com/

在線定制你自己的icon font字體圖標(biāo)字庫，也可以直接從GitHub下載整個(gè)圖標(biāo)集，該項(xiàng)目也是開源的。

Font-Awesome

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

這是我最喜歡的字庫之一了，更新比較快。目前已經(jīng)有369個(gè)圖標(biāo)了。

Glyphicon Halflings

http://glyphicons.com/

這個(gè)字體圖標(biāo)可以在Bootstrap下免費(fèi)使用。自帶了200多個(gè)圖標(biāo)。

Icons8

https://icons8.com/

提供PNG免費(fèi)下載，像素大能到500PX

下載包

引入包

首先把以下4個(gè)文件放入到 fonts文件夾里面。通俗的做法

[圖片上傳失敗...(image-9719d8-1561095936860)]

第一步：引入項(xiàng)目下面生成的fontclass代碼：
```
<link rel="stylesheet" type="text/CSS" href="./iconfont.CSS">
```
第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：
```
<i class="iconfont icon-xxx"></i>
```

滑動(dòng)門技術(shù)

利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應(yīng)不同字?jǐn)?shù)的導(dǎo)航欄。

一般的經(jīng)典布局都是這樣的：

<li>
  <a href="#">
    <span>導(dǎo)航欄內(nèi)容</span>
  </a>
</li>

總結(jié)：

a 設(shè)置背景左側(cè)，padding撐開合適寬度。
span 設(shè)置背景右側(cè)， padding撐開合適寬度剩下由文字繼續(xù)撐開寬度。
之所以a包含span就是因?yàn)?整個(gè)導(dǎo)航都是可以點(diǎn)擊的。

CSS3的伸縮布局

主軸：Flex容器的主軸主要用來配置Flex項(xiàng)目，默認(rèn)是水平方向

側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認(rèn)是垂直方向的

方向：默認(rèn)主軸從左向右，側(cè)軸默認(rèn)從上到下

主軸和側(cè)軸并不是固定不變的，通過flex-direction可以互換。

屬性：

flex-direction調(diào)整主軸方向（默認(rèn)為水平方向）

justify-content調(diào)整主軸對(duì)齊

align-items調(diào)整側(cè)軸對(duì)齊

flex-wrap控制是否換行

align-content堆棧（由flex-wrap產(chǎn)生的獨(dú)立行）對(duì)齊

flex-flow是flex-direction、flex-wrap的簡寫形式

flex子項(xiàng)目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配

order控制子項(xiàng)目的排列順序，正序方式排序，從小到大

before/after偽元素

偽元素其實(shí)和元素的效果是一樣的功能也是一樣的只是他不會(huì)占用布局用于在div前面或者后面追加內(nèi)容

采用雙冒號(hào) 為了區(qū)分偽類

用法：

?```

div::before{
content : "" //可以不寫內(nèi)容但是必須存在
}

after同理
```

CSS3過度動(dòng)畫

語法格式:

transition: 要過渡的屬性  花費(fèi)時(shí)間  運(yùn)動(dòng)曲線  何時(shí)開始;

屬性	描述	CSS
transition	簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。	3
transition-property	規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。	3
transition-timing-function	規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。	3
transition-delay	規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。	3

例子：

img{
    width:80px;
    height:80px;
    border: 1px solid #ccc;
    border-raduis: 50%;
    transition: transform 0.5s ease-in 0s;
}

img:hover{
    transform:rotate(180deg);
}

CSS3 2D變形

變形轉(zhuǎn)換 transform

移動(dòng) translate(x, y)

[圖片上傳失敗...(image-282393-1561095936860)]

translate(50px,50px);

使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動(dòng)50像素。

利用變形讓定位的盒子居中對(duì)齊

.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

縮放 scale(x, y)

[圖片上傳失敗...(image-3d98e-1561095936860)]

transform:scale(0.8,1); //水平縮小20% 垂直不變  默認(rèn)為1

可以對(duì)元素進(jìn)行水平和垂直方向的縮放。

旋轉(zhuǎn) rotate(deg)

可以對(duì)元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針；

[圖片上傳失敗...(image-f6c76b-1561095936860)]

transform:rotate(45deg);

當(dāng)元素旋轉(zhuǎn)以后，坐標(biāo)軸也跟著發(fā)生的轉(zhuǎn)變
調(diào)整順序可以解決，把旋轉(zhuǎn)放到最后
注意單位是 deg 度數(shù)

傾斜 skew(deg, deg)

[圖片上傳失敗...(image-8e17e0-1561095936860)]

transform:skew(30deg,0deg);

該實(shí)例通過skew方法把元素水平方向上傾斜30度，處置方向保持不變。

可以使元素按一定的角度進(jìn)行傾斜，可為負(fù)值，第二個(gè)參數(shù)不寫默認(rèn)為0。

轉(zhuǎn)換原點(diǎn) transform-origin

[圖片上傳失敗...(image-10cf7e-1561095936860)]

 div{transform-origin: left top;transform: rotate(45deg); }  /* 改變?cè)卦c(diǎn)到左上角，然后進(jìn)行順時(shí)旋轉(zhuǎn)45度 */

CSS3 3D變形

變形轉(zhuǎn)換 transform

坐標(biāo)軸如下：

[圖片上傳失敗...(image-81eb12-1561095936860)]

旋轉(zhuǎn) (rotate)

rotateX():沿著X軸旋轉(zhuǎn)

rotateY():沿著Y軸旋轉(zhuǎn)

rotateZ():沿著Z軸旋轉(zhuǎn)

用法：

transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg)

透視(perspective)

其實(shí)就是3D立體感實(shí)現(xiàn)原理：近大遠(yuǎn)小

perspective有兩種寫法

作為一個(gè)屬性，設(shè)置給父元素，作用于所有3D轉(zhuǎn)換的子元素
作為transform屬性的一個(gè)值，做用于元素自身

移動(dòng)(translate)

translateX():沿著X軸移動(dòng)

translateY():沿著Y軸移動(dòng)

translateZ():沿著Z軸移動(dòng)

3D呈現(xiàn)(transform-style)

設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)，這些子元素必須為轉(zhuǎn)換元素。

flat：所有子元素在 2D 平面呈現(xiàn)

preserve-3d：保留3D空間

用法：給這些元素的父元素設(shè)置transform-style: preserve-3d 使其成為一個(gè)真正的3D圖形

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS

CSS的出現(xiàn)

CSS的功能

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

內(nèi)部樣式表

行內(nèi)式（內(nèi)聯(lián)樣式）

三種選擇器整合

CSS的使用規(guī)則

CSS基礎(chǔ)選擇器

標(biāo)簽選擇器（元素）

類選擇器&&多類名選擇器

類選擇器

多類名選擇器

id選擇器

id選擇器和類選擇器的區(qū)別

通配符選擇器

CSS字體樣式屬性

字號(hào)大小：font-size

字體樣式：font-family

字體粗細(xì)：font-weight

字體風(fēng)格：font-style

綜合設(shè)置：font

CSS外觀

文本顏色：color

行間距：line-height

水平對(duì)齊方式：text-align

首行縮進(jìn)：text-indent

文本的裝飾：text-decoration

CSS符合選擇器

交集選擇器

并集選擇器

后代選擇器

子元素選擇器

鏈接偽類選擇器

標(biāo)簽顯示模式

塊級(jí)元素：block-level

行內(nèi)元素：inline-level

塊級(jí)元素和行內(nèi)元素的區(qū)別

行內(nèi)元素塊inline-block

標(biāo)簽顯示模式轉(zhuǎn)換：display：...

CSS書寫規(guī)范

空格規(guī)范

選擇器規(guī)范

屬性規(guī)范

CSS三大特性

CSS層疊性

CSS繼承性

CSS優(yōu)先性

CSS權(quán)重貢獻(xiàn)值

CSS背景

背景圖片（image）

背景平鋪（repeat）

背景位置（position）

背景附著

背景簡寫

背景透明（CSS3）

盒子模型

盒子邊框

圓角邊框

內(nèi)邊距（padding）

外邊距（margin）

外邊距實(shí)現(xiàn)盒子居中

文字居中與盒子居中區(qū)別

插入圖片和背景圖片的區(qū)別

清楚元素的默認(rèn)內(nèi)外邊距

外邊距合并

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

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

content寬度和高度

盒子模型布局穩(wěn)定性

盒子陰影

浮動(dòng)(float)

普通流(normal flow)

浮動(dòng)(float)

什么是浮動(dòng)？

浮動(dòng)詳細(xì)內(nèi)幕特性

版心和布局流程

布局流程

一列固定寬度且居中

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

什么是浮動(dòng)？

何為精靈技術(shù)？

第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：