課程目標(biāo):

學(xué)會使用CSS選擇器

熟記CSS樣式和外觀屬性

熟練掌握CSS各種選擇器

熟練掌握CSS各種選擇器

熟練掌握CSS三種顯示模式

熟練掌握CSS背景屬性

熟練掌握CSS三大特性

熟練掌握CSS盒子模型

熟練掌握CSS浮動(dòng)
10.熟練掌握CSS定位
11.熟練掌握CSS高級技巧強(qiáng)化CSS
typora-copy-images-to: media

CSS初識

CSS(Cascading Style Sheets)
CSS通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表）袜炕，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體涕蜂、大小、對齊方式等）扰藕、圖片的外形（寬高菠镇、邊框樣式稻励、邊距等）以及版面的布局等外觀顯示樣式。

CSS以HTML為基礎(chǔ)覆致，提供了豐富的功能昔逗，如字體、顏色篷朵、背景的控制及整體排版等勾怒，而且還可以針對不同的瀏覽器設(shè)置不同的樣式婆排。

CSS樣式規(guī)則

使用HTML時(shí)，需要遵從一定的規(guī)范笔链。CSS亦如此段只，要想熟練地使用CSS對網(wǎng)頁進(jìn)行修飾，首先需要了解CSS樣式規(guī)則鉴扫，具體格式如下：

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

1.選擇器用于指定CSS樣式作用的HTML對象赞枕，花括號內(nèi)是對該對象設(shè)置的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現(xiàn)坪创。
3.屬性是對指定的對象設(shè)置的樣式屬性炕婶，例如字體大小、文本顏色等莱预。
4.屬性和屬性值之間用英文“:”連接柠掂。
5.多個(gè)“鍵值對”之間用英文“;”進(jìn)行區(qū)分。
可以用段落 和 表格的對齊的演示依沮。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用于設(shè)置字號涯贞，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位危喉。其中宋渔，相對長度單位比較常用，推薦使用像素單位px辜限，絕對長度單位使用較少皇拣。具體如下：

font-family:字體

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

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

可以同時(shí)指定多個(gè)字體态蒂，中間以逗號隔開，表示如果瀏覽器不支持第一個(gè)字體费什，則會嘗試下一個(gè)钾恢，直到找到合適的字體。

常用技巧：

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

CSS Unicode字體

在 CSS 中設(shè)置字體名稱，直接寫中文是可以的榆综。但是在文件編碼（GB2312妙痹、UTF-8 等）不匹配時(shí)會產(chǎn)生亂碼的錯(cuò)誤。xp 系統(tǒng)不支持類似微軟雅黑的中文鼻疮。

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

方案二：在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯(cuò)誤陋守。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的利赋。
font-family: "\5FAE\8F6F\96C5\9ED1"水评，表示設(shè)置字體為“微軟雅黑”。

可以通過escape() 來測試屬于什么字體媚送。

字體名稱	英文名稱	Unicode 編碼
宋體	SimSun	\5B8B\4F53
新宋體	NSimSun	\65B0\5B8B\4F53
黑體	SimHei	\9ED1\4F53
微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷體_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隸書	LiSu	\96B6\4E66
幼園	YouYuan	\5E7C\5706
華文細(xì)黑	STXihei	\534E\6587\7EC6\9ED1
細(xì)明體	MingLiU	\7EC6\660E\4F53
新細(xì)明體	PMingLiU	\65B0\7EC6\660E\4F53

為了照顧不同電腦的字體安裝問題中燥，我們盡量只使用宋體和微軟雅黑中文字體

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

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

font-weight屬性用于定義字體的粗細(xì)，其可用屬性值：normal吟秩、bold咱扣、bolder、lighter涵防、100~900（100的整數(shù)倍）闹伪。

小技巧：

數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold壮池。  但是我們更喜歡用數(shù)字來表示偏瓤。

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

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

font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體橙依、傾斜或正常字體证舟，其可用屬性值如下：

normal：默認(rèn)值硕旗，瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式。

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

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

小技巧：

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

font:綜合設(shè)置字體樣式 (重點(diǎn))

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

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

使用font屬性時(shí)辛藻，必須按上面語法格式中的順序書寫碘橘，不能更換順序，各個(gè)屬性以空格隔開吱肌。

注意：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值）痘拆，但必須保留font-size和font-family屬性，否則font屬性將不起作用氮墨。

開發(fā)者工具（chrome）

此工具是我們的必備工具纺蛆，以后代碼出了問題，我們首先第一反應(yīng)就是：

“按F12”或者是 “shift+ctrl+i” 打開開發(fā)者工具规揪。

菜單：右擊網(wǎng)頁空白出---查看

小技巧：

ctrl+滾輪可以放大開發(fā)者工具代碼大小桥氏。
左邊是HTML元素結(jié)構(gòu) 右邊是CSS樣式。
右邊CSS樣式可以改動(dòng)數(shù)值和顏色查看更改后效果猛铅。

選擇器（重點(diǎn)）

要想將CSS樣式應(yīng)用于特定的HTML元素字支，首先需要找到該目標(biāo)元素。在CSS中奸忽，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器（選擇符）堕伪。

如上圖所以，要把里面的小黃人分為2組栗菜，最快的方法怎辦欠雌？

很多，比如一只眼睛的一組疙筹，剩下的一組

這就用到基礎(chǔ)選擇器組：

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

標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器桨昙，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式腌歉。其基本語法格式如下：

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

標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式蛙酪，同時(shí)這也是他的缺點(diǎn)，不能設(shè)計(jì)差異化樣式翘盖。

課堂案例：

傳智簡介

類選擇器

類選擇器使用“.”（英文點(diǎn)號）進(jìn)行標(biāo)識桂塞，后面緊跟類名役纹，其基本語法格式如下：

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

 標(biāo)簽調(diào)用的時(shí)候用 class=“類名”  即可同眯。

類選擇器最大的優(yōu)勢是可以為元素對象定義單獨(dú)或相同的樣式。

小技巧：

1.長名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器性雄。

? 輸入的時(shí)候少按一個(gè)shift鍵;
　瀏覽器兼容問題 (比如使用tips的選擇器命名迎膜，在IE6是無效的)
　能良好區(qū)分JavaScript變量命名(JS變量命名是用“”)

3.不要純數(shù)字伴栓、中文等命名诬辈， 盡量使用英文字母來表示。

猜謎底游戲：
你猜趴乡？

命名規(guī)范：見附件（Web前端開發(fā)規(guī)范手冊.doc）

命名是我們通俗約定的对省，但是沒有規(guī)定必須用這些常用的命名。

課堂案例：

<head>
        <meta charset="utf-8">
        <style>
        span {
            font-size: 100px;
        }
        .blue {
            color: blue;
        }
        .red {
            color: red;
        }
        .orange {
            color: orange;
        }
        .green {
            color: green;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

多類名選擇器

我們可以給標(biāo)簽指定多個(gè)類名晾捏，從而達(dá)到更多的選擇目的蒿涎。

注意：

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

多類名選擇器在后期布局比較復(fù)雜的情況下劳秋，還是較多使用的。

<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>

id選擇器

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

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

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

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

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

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

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

id選擇器好比人的身份證號碼溺职，全中國是唯一的岔擂，不得重復(fù)。只能使用一次浪耘。

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

通配符選擇器

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

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

例如下面的代碼，使用通配符選擇器定義CSS樣式澜躺，清除所有HTML標(biāo)記的默認(rèn)邊距蝉稳。

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

注意：

這個(gè)通配符選擇器抒蚜，就像我們的電影明星中的夢中情人，想想它就好了耘戚，但是它不會和你過日子嗡髓。

偽類選擇器

偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果收津，比如可以選擇第1個(gè)饿这，第n個(gè)元素。

為了和我們剛才學(xué)的類選擇器相區(qū)別朋截，  類選擇器是一個(gè)點(diǎn) 比如 .demo {}   而我們的偽類 用 2個(gè)點(diǎn) 就是 冒號  比如  :link{}

鏈接偽類選擇器

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

注意寫的時(shí)候蛹稍，他們的順序盡量不要顛倒按照 lvha 的順序。 love hate 愛上了討厭記憶法或者 lv 包包非常 hao

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í)候部服，由原來的 灰色 變成了紅色 */
}

結(jié)構(gòu)(位置)偽類選擇器（CSS3)

:first-child :選取屬于其父元素的首個(gè)子元素的指定選擇器
:last-child :選取屬于其父元素的最后一個(gè)子元素的指定選擇器
:nth-child(n) ：匹配屬于其父元素的第 N 個(gè)子元素唆姐，不論元素的類型
:nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素，不論元素的類型廓八，從最后一個(gè)子元素開始計(jì)數(shù)奉芦。
n 可以是數(shù)字、關(guān)鍵詞或公式
?

li:first-child { /*  選擇第一個(gè)孩子 */
                color: pink; 
            }
li:last-child {   /* 最后一個(gè)孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 選擇第4個(gè)孩子  n  代表 第幾個(gè)的意思 */ 
                color: skyblue;
            }

目標(biāo)偽類選擇器(CSS3)

:target目標(biāo)偽類選擇器 :選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素

:target {
        color: red;
        font-size: 30px;
}

CSS注釋

CSS規(guī)則是使用     /*  需要注釋的內(nèi)容  */  進(jìn)行注釋的剧蹂，即在需要注釋的內(nèi)容前使用 “/*” 標(biāo)記開始注釋声功，在內(nèi)容的結(jié)尾使用 “*/”結(jié)束。

例如：

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

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í)也不能省略百分號榨馁，必須寫為0%憨栽。

line-height:行間距

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

一般情況下，行距比字號大7.8像素左右就可以了旁涤。
line-height的值設(shè)置為高度的大小翔曲，常用來垂直居中

text-align:水平對齊方式

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

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

right：右對齊

center：居中對齊

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

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

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

letter-spacing:字間距

letter-spacing屬性用于定義字間距猾蒂，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數(shù)值是晨，允許使用負(fù)值肚菠，默認(rèn)為normal。

word-spacing:單詞間距

word-spacing屬性用于定義英文單詞之間的間距罩缴，對中文字符無效蚊逢。和letter-spacing一樣，其屬性值可為不同單位的數(shù)值箫章，允許使用負(fù)值烙荷，默認(rèn)為normal。

word-spacing和letter-spacing均可對英文進(jìn)行設(shè)置炉抒。不同的是letter-spacing定義的為字母之間的間距奢讨，而word-spacing定義的為英文單詞之間的間距稚叹。

顏色半透明(css3)

文字顏色到了CSS3我們可以采取半透明的格式了語法格式如下：

    color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范圍 0~1之間    color: rgba(0,0,0,0.3)

文字陰影(CSS3)

以后我們可以給我們的文字添加陰影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

前兩項(xiàng)是必須寫的焰薄。后兩項(xiàng)可以選寫。

sublime快捷方式

sublime可以快速提高我們代碼的書寫方式

生成標(biāo)簽直接輸入標(biāo)簽名按tab鍵即可比如 div 然后tab 鍵扒袖，就可以生成 <div></div>
如果想要生成多個(gè)相同標(biāo)簽加上 * 就可以了比如 div*3 就可以快速生成3個(gè)div
如果有父子級關(guān)系的標(biāo)簽塞茅，可以用 > 比如 ul > li就可以了
如果有兄弟關(guān)系的標(biāo)簽，用 + 就可以了比如 div+p
如果生成帶有類名或者id名字的季率，直接寫 .demo 或者 #two tab 鍵就可以了

?

引入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文檔的任何地方惰许。

type="text/CSS" 在html5中可以省略席覆，寫上也比較符合規(guī)范，所以這個(gè)地方可以寫也可以省略汹买。

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

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

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

語法中style是標(biāo)簽的屬性见妒，實(shí)際上任何HTML標(biāo)簽都擁有style屬性孤荣，用來設(shè)置行內(nèi)式。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同须揣，行內(nèi)式只對其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用垃环。

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

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

<head>
  <link href="CSS文件的路徑" type="text/CSS" rel="stylesheet" />
</head>

注意： link 是個(gè)單標(biāo)簽哦!!!

該語法中遂庄，link標(biāo)簽需要放在head頭部標(biāo)簽中，并且必須指定link標(biāo)簽的三個(gè)屬性劲赠，具體如下：

href：定義所鏈接外部樣式表文件的URL涛目，可以是相對路徑，也可以是絕對路徑凛澎。
type：定義所鏈接文檔的類型霹肝，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表塑煎。
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系沫换，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件最铁。

三種樣式表總結(jié)

樣式表	優(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)（多）

標(biāo)簽顯示模式（display）

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

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

塊級元素(block-level)

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

常見的塊元素有<h1>~<h6>膊夹、<p>衬浑、<div>、<ul>放刨、<ol>嚎卫、<li>等，其中<div>標(biāo)簽是最典型的塊元素宏榕。

塊級元素的特點(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è)置寬度倍谜、高度、對齊等屬性叉抡，常用于控制頁面中文本的樣式尔崔。

常見的行內(nèi)元素有<a>、<strong>褥民、<b>季春、<em>、<i>消返、<del>载弄、<s>、<ins>撵颊、<u>宇攻、<span>等，其中<span>標(biāo)簽最典型的行內(nèi)元素倡勇。

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

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

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

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

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

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

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

塊級元素的特點(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>，可以對它們設(shè)置寬高和對齊屬性辞槐，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素掷漱。

行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙。
（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;

此階段，我們只需關(guān)心這三個(gè)犬缨，其他的是我們后面的工作喳魏。

CSS復(fù)合選擇器

復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽怀薛。

交集選擇器

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

記憶技巧：

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

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

用的相對來說比較少，不太建議使用十电。

并集選擇器

并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過<strong style="color:#f00">逗號</strong>連接而成的知押，任何形式的選擇器（包括標(biāo)簽選擇器叹螟、class類選擇器id選擇器等），都可以作為并集選擇器的一部分台盯。如果某些選擇器定義的樣式完全相同罢绽，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式静盅。

記憶技巧：

并集選擇器和的意思良价，就是說澳迫，只要逗號隔開的夺英，所有選擇器都會執(zhí)行后面樣式。

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

后代選擇器

后代選擇器又稱為包含選擇器袖外，用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面魂务，內(nèi)層標(biāo)簽寫在后面曼验，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)粘姜，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代鬓照。

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

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標(biāo)簽寫在前面号显，子級標(biāo)簽寫在后面臭猜，中間跟一個(gè) > 進(jìn)行連接，注意押蚤，符號左右兩側(cè)各保留一個(gè)空格蔑歌。

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

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

測試題

<div class="nav">    <!-- 主導(dǎo)航欄 -->
  <ul>
    <li><a href="#">公司首頁</a></li>
    <li><a href="#">公司簡介</a></li>
    <li><a href="#">公司產(chǎn)品</a></li>
    <li>
         <a href="#">聯(lián)系我們</a>
         <ul>
                    <li><a href="#">公司郵箱</a></li>
                    <li><a href="#">公司電話</a></li>
         </ul>
    </li>
  </ul>
</div>
<div class="sitenav">    <!-- 側(cè)導(dǎo)航欄 -->
  <div class="site-l">左側(cè)側(cè)導(dǎo)航欄</div>
  <div class="site-r"><a href="#">登錄</a></div>
</div>

在不修改以上代碼的前提下，完成以下任務(wù)：

鏈接登錄的顏色為紅色,同時(shí)主導(dǎo)航欄里面的所有的鏈接改為藍(lán)色 (簡單)
主導(dǎo)航欄和側(cè)導(dǎo)航欄里面文字都是14像素并且是微軟雅黑雳刺。（中等)
主導(dǎo)航欄里面的一級菜單鏈接文字顏色為綠色劫灶。（難)

?

屬性選擇器

選取標(biāo)簽帶有某些特殊屬性的選擇器我們成為屬性選擇器

/* 獲取到 擁有 該屬性的元素 */
div[class^=font] { /*  class^=font 表示 font 開始位置就行了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 結(jié)束位置就行了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: green;
        }

<div class="font12">屬性選擇器</div>
    <div class="font12">屬性選擇器</div>
    <div class="font24">屬性選擇器</div>
    <div class="font24">屬性選擇器</div>
    <div class="font24">屬性選擇器</div>
    <div class="24font">屬性選擇器123</div>
    <div class="sub-footer">屬性選擇器footer</div>
    <div class="jd-footer">屬性選擇器footer</div>
    <div class="news-tao-nav">屬性選擇器</div>
    <div class="news-tao-header">屬性選擇器</div>
    <div class="tao-header">屬性選擇器</div>

偽元素選擇器（CSS3)

E::first-letter文本的第一個(gè)單詞或字（如中文、日文掖桦、韓文等）
E::first-line 文本第一行本昏；
E::selection 可改變選中文本的樣式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊樣式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

4枪汪、E::before和E::after

在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個(gè)元素涌穆，該元素為行內(nèi)元素怔昨，且必須要結(jié)合content屬性使用。

div::befor {
  content:"開始";
}
div::after {
  content:"結(jié)束";
}

E:after蒲犬、E:before 在舊版本里是偽元素朱监，CSS3的規(guī)范里“:”用來表示偽類岸啡，“::”用來表示偽元素原叮，但是在高版本瀏覽器下E:after、E:before會被自動(dòng)識別為E::after巡蘸、E::before奋隶，這樣做的目的是用來做兼容處理。

E:after悦荒、E:before后面的練習(xí)中會反復(fù)用到唯欣，目前只需要有個(gè)大致了解

":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素

CSS書寫規(guī)范

開始就形成良好的書寫規(guī)范，是你專業(yè)化的開始搬味。

空格規(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;
}

【建議】選擇器的嵌套層級應(yīng)不大于 3 級悦析，位置靠后的限定條件應(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)制】屬性定義后必須以分號結(jié)尾强戴。

示例：

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

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

CSS 背景(background)

CSS 可以添加背景顏色和背景圖片亭螟，以及來進(jìn)行圖片設(shè)置。

background-color	背景顏色
background-image	背景圖片地址
background-repeat	是否平鋪
background-position	背景位置
background-attachment	背景固定還是滾動(dòng)
background-size	改變背景大小的方法
背景的合寫（復(fù)合屬性）
background:背景顏色背景圖片地址背景平鋪背景滾動(dòng) 背景位置

背景圖片(image)

語法：

background-image : none | url (url)

參數(shù)：

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

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

小技巧：我們提倡背景圖片后面的地址，url不要加引號衰琐。

背景平鋪（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è)元素。

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

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

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

背景位置(position)

語法：

background-position : length || length

background-position : position || position

參數(shù)：

說明：

設(shè)置或檢索對象的背景圖像位置狗热。必須先指定background-image屬性钞馁。默認(rèn)值為：(0% 0%)虑省。
如果只指定了一個(gè)值，該值將用于橫坐標(biāo)僧凰√骄保縱坐標(biāo)將默認(rèn)為50%。第二個(gè)值將用于縱坐標(biāo)训措。

注意：

position 后面是x坐標(biāo)和y坐標(biāo)伪节。可以使用方位名詞或者精確單位。
如果和精確單位和方位名字混合使用绩鸣，則必須是x坐標(biāo)在前怀大，y坐標(biāo)后面。比如 background-position: 15px top; 則 15px 一定是 x坐標(biāo) top是 y坐標(biāo)呀闻。

實(shí)際工作用的最多的化借，就是背景圖片居中對齊了。

背景附著

語法：

background-attachment : scroll | fixed

參數(shù)：

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

說明：

設(shè)置或檢索背景圖像是隨對象內(nèi)容滾動(dòng)還是固定的捡多。

背景簡寫

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)容不收影響蒜焊。

背景縮放(CSS3)

通過background-size設(shè)置背景圖片的尺寸，就像我們設(shè)置img的尺寸一樣淫奔，在移動(dòng)Web開發(fā)中做屏幕適配應(yīng)用非常廣泛山涡。

其參數(shù)設(shè)置如下：

a) 可以設(shè)置長度單位(px)或百分比（設(shè)置百分比時(shí)，參照盒子的寬高）

b) 設(shè)置為cover時(shí)唆迁，會自動(dòng)調(diào)整縮放比例鸭丛，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會被隱藏唐责。我們平時(shí)用的cover 最多

c) 設(shè)置為contain會自動(dòng)調(diào)整縮放比例鳞溉，保證圖片始終完整顯示在背景區(qū)域。

background-image: url('images/gyt.jpg');
            background-size: 300px 100px;
            /* background-size: contain; */
            /* background-size: cover; */

多背景(CSS3)

以逗號分隔可以設(shè)置多背景鼠哥，可用于自適應(yīng)布局做法就是用逗號隔開就好了熟菲。

一個(gè)元素可以設(shè)置多重背景圖像。
每組屬性間使用逗號分隔朴恳。
如果設(shè)置的多重背景圖之間存在著交集（即存在著重疊關(guān)系）抄罕，前面的背景圖會覆蓋在后面的背景圖之上。
為了避免背景色將圖像蓋住于颖，背景色通常都定義在最后一組上呆贿，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

凹凸文字

<head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: 700 80px "微軟雅黑";
        }
        div:first-child {
            /* text-shadow: 水平位置  垂直位置  模糊距離 陰影顏色; */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置  垂直位置  模糊距離 陰影顏色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }

        </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>

導(dǎo)航欄案例

文本的裝飾

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

值	描述
none	默認(rèn)。定義標(biāo)準(zhǔn)的文本。
underline	定義文本下的一條線做入。下劃線也是我們鏈接自帶的
overline	定義文本上的一條線冒晰。
line-through	定義穿過文本下的一條線。

使用技巧：在一行內(nèi)的盒子內(nèi)竟块，我們設(shè)定行高等于盒子的高度壶运，就可以使文字垂直居中。

<head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #000;
        }
        a {
            width: 200px;
            height: 50px;
            /* background-color: orange; */
            display: inline-block;  /* 把a(bǔ) 行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素 */
            text-align: center;  /* 文字水平居中 */
            line-height: 50px;  /* 我們設(shè)定行高等于盒子的高度浪秘，就可以使文字垂直居中 */
            color: #fff;
            font-size: 22px;
            text-decoration: none;  /* 取消下劃線 文本裝飾 */
        }
        a:hover {  /* 鼠標(biāo)經(jīng)過 給我們的鏈接添加背景圖片*/
            background: url(images/h.png) no-repeat; 
        }
        </style>
    </head>
    <body>
    <a href="#">專區(qū)說明</a>
    <a href="#">申請資格</a>
    <a href="#">兌換獎(jiǎng)勵(lì)</a>
    <a href="#">下載游戲</a>
    </body>

CSS 三大特性

層疊繼承優(yōu)先級是我們學(xué)習(xí)CSS 必須掌握的三個(gè)特性蒋情。

CSS層疊性

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

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

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

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

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

CSS最后的執(zhí)行口訣：  長江后浪推前浪二庵，前浪死在沙灘上贪染。

CSS繼承性

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

簡單的理解就是：子承父業(yè)痰憎。

CSS最后的執(zhí)行口訣：  龍生龍，鳳生鳳攀涵，老鼠生的孩子會打洞铣耘。

注意：

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

一鳄乏、無繼承性的屬性

1跷车、display：規(guī)定元素應(yīng)該生成的框的類型

2、文本屬性：

vertical-align：垂直文本對齊

text-decoration：規(guī)定添加到文本的裝飾

text-shadow：文本陰影效果

white-space：空白符的處理

unicode-bidi：設(shè)置文本的方向

3橱野、盒子模型的屬性：width朽缴、height、margin 水援、margin-top密强、margin-right、margin-bottom蜗元、margin-left或渤、border、border-style奕扣、border-top-style薪鹦、border-right-style、border-bottom-style惯豆、border-left-style池磁、border-width、border-top-width楷兽、border-right-right地熄、border-bottom-width、border-left-width芯杀、border-color端考、border-top-color、border-right-color揭厚、border-bottom-color却特、border-left-color、border-top棋弥、border-right核偿、border-bottom、border-left顽染、padding漾岳、padding-top、padding-right粉寞、padding-bottom尼荆、padding-left

4、背景屬性：background唧垦、background-color捅儒、background-image、background-repeat、background-position巧还、background-attachment

5鞭莽、定位屬性：float、clear麸祷、position澎怒、top、right阶牍、bottom喷面、left、min-width走孽、min-height惧辈、max-width、max-height磕瓷、overflow盒齿、clip、z-index

6生宛、生成內(nèi)容屬性：content县昂、counter-reset肮柜、counter-increment

7陷舅、輪廓樣式屬性：outline-style、outline-width审洞、outline-color莱睁、outline

8、頁面樣式屬性：size芒澜、page-break-before仰剿、page-break-after

9、聲音樣式屬性：pause-before痴晦、pause-after南吮、pause、cue-before誊酌、cue-after部凑、cue、play-during

二碧浊、有繼承性的屬性

1涂邀、字體系列屬性

font：組合字體

font-family：規(guī)定元素的字體系列

font-weight：設(shè)置字體的粗細(xì)

font-size：設(shè)置字體的尺寸

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

font-variant：設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫箱锐，但是所有使用小型大寫字體的字母與其余文本相比比勉，其字體尺寸更小。

font-stretch：對當(dāng)前的 font-family 進(jìn)行伸縮變形。所有主流瀏覽器都不支持浩聋。

font-size-adjust：為某個(gè)元素規(guī)定一個(gè) aspect 值观蜗，這樣就可以保持首選字體的 x-height。

2衣洁、文本系列屬性

text-indent：文本縮進(jìn)

text-align：文本水平對齊

line-height：行高

word-spacing：增加或減少單詞間的空白（即字間隔）

letter-spacing：增加或減少字符間的空白（字符間距）

text-transform：控制文本大小寫

direction：規(guī)定文本的書寫方向

color：文本顏色

3嫂便、元素可見性：visibility

4、表格布局屬性：caption-side闸与、border-collapse毙替、border-spacing、empty-cells践樱、table-layout

5厂画、列表布局屬性：list-style-type、list-style-image拷邢、list-style-position袱院、list-style

6、生成內(nèi)容屬性：quotes

7瞭稼、光標(biāo)屬性：cursor

8忽洛、頁面樣式屬性：page、page-break-inside环肘、windows欲虚、orphans

9、聲音樣式屬性：speak悔雹、speak-punctuation复哆、speak-numeral、speak-header腌零、speech-rate梯找、volume、voice-family益涧、pitch锈锤、pitch-range、stress闲询、richness久免、、azimuth嘹裂、elevation

三妄壶、所有元素可以繼承的屬性

1续膳、元素可見性：visibility

2谎脯、光標(biāo)屬性：cursor

四、內(nèi)聯(lián)元素可以繼承的屬性

1屈雄、字體系列屬性

2、除text-indent伊磺、text-align之外的文本系列屬性

五盛正、塊級元素可以繼承的屬性

1、text-indent屑埋、text-align

CSS優(yōu)先級

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

在考慮權(quán)重時(shí)续崖，初學(xué)者還需要注意一些特殊的情況，具體如下：

繼承樣式的權(quán)重為0团搞。即在嵌套結(jié)構(gòu)中严望，不管父元素樣式的權(quán)重多大，被子元素繼承時(shí)逻恐，他的權(quán)重都為0像吻，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

行內(nèi)樣式優(yōu)先复隆。應(yīng)用style屬性的元素拨匆，其行內(nèi)樣式的權(quán)重非常高，可以理解為遠(yuǎn)大于100挽拂〔衙浚總之，他擁有比上面提高的選擇器都大的優(yōu)先級轻局。

權(quán)重相同時(shí)洪鸭，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優(yōu)先級仑扑，或者說排在最后的樣式優(yōu)先級最大。

CSS定義了一個(gè)!important命令置鼻，該命令被賦予最大的優(yōu)先級镇饮。也就是說不管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先級箕母。

CSS特殊性（Specificity）

關(guān)于CSS權(quán)重储藐，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity嘶是，我們稱為CSS 特性或稱非凡性钙勃，它是一個(gè)衡量CSS值優(yōu)先級的一個(gè)標(biāo)準(zhǔn) 具體規(guī)范入如下：

specificity用一個(gè)四位的數(shù) 字串(CSS2是三位)來表示，更像四個(gè)級別聂喇，值從左到右辖源，左面的最大蔚携，一級大于一級，數(shù)位之間沒有進(jìn)制克饶，級別之間不可超越酝蜒。

繼承或者* 的貢獻(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

注意：

1.數(shù)位之間沒有進(jìn)制比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0矾湃，所以不會存在10個(gè)div能趕上一個(gè)類選擇器的情況亡脑。

繼承的權(quán)重是 0

總結(jié)優(yōu)先級：

使用了 !important聲明的規(guī)則。
內(nèi)嵌在 HTML 元素的 style屬性里面的聲明邀跃。
使用了 ID 選擇器的規(guī)則霉咨。
使用了類選擇器、屬性選擇器拍屑、偽元素和偽類選擇器的規(guī)則躯护。
使用了元素選擇器的規(guī)則。
只包含一個(gè)通用選擇器的規(guī)則丽涩。
同一類選擇器則遵循就近原則棺滞。

總結(jié)：權(quán)重是優(yōu)先級的算法，層疊是優(yōu)先級的表現(xiàn)

盒子模型（CSS重點(diǎn)）

其實(shí)矢渊，CSS就三個(gè)大模塊：盒子模型继准、浮動(dòng) 、定位矮男，其余的都是細(xì)節(jié)移必。要求這三部分，無論如何也要學(xué)的非常精通毡鉴。

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

看透網(wǎng)頁布局的本質(zhì)

網(wǎng)頁布局中陈瘦，我們是如何把里面的文字幌甘，圖片，按照美工給我們的效果圖排列的整齊有序呢痊项？

牛奶是怎樣運(yùn)輸锅风，讓消費(fèi)者購買的呢？

我們說過鞍泉，行內(nèi)元素比如文字類似牛奶皱埠，也需要一個(gè)盒子把他們裝起來，我們前面學(xué)過的雙標(biāo)簽都是一個(gè)盒子咖驮。有了盒子边器，我們就可以隨意的训枢，自由的，擺放位置了饰抒。

看透網(wǎng)頁布局的本質(zhì)：把網(wǎng)頁元素比如文字圖片等等肮砾，放入盒子里面，然后利用CSS擺放盒子的過程袋坑，就是網(wǎng)頁布局仗处。

CSS 其實(shí)沒有太多邏輯可言，類似我們小時(shí)候玩的積木,我們可以自由的枣宫，隨意的擺放出我們想要的效果婆誓。

盒子模型（Box Model）

這里略過老舊的ie盒子模型（IE6以下），對不起也颤，我都沒見過IE5的瀏覽器洋幻。

。首先翅娶，我們來看一張圖文留，來體會下什么是盒子模型。

所有的文檔元素（標(biāo)簽）都會生成一個(gè)矩形框竭沫，我們成為元素框（element box）燥翅，它描述了一個(gè)文檔元素再網(wǎng)頁布局匯總所占的位置大小。因此蜕提，<strong style="color: #f00;">每個(gè)盒子除了有自己大小和位置外森书，還影響著其他盒子的大小和位置。</strong>

盒子邊框（border）

邊框就是那層皮谎势。橘子皮凛膏。。柚子皮脏榆。猖毫。橙子皮。姐霍。鄙麦。

語法：

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í)線

盒子邊框?qū)懛偨Y(jié)表


設(shè)置內(nèi)容	樣式屬性	常用屬性值
上邊框	border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度樣式顏色;
下邊框	border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度樣式顏色;
左邊框	border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度樣式顏色;
右邊框	border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度樣式顏色;
樣式綜合設(shè)置	border-style:上邊 [右邊下邊左邊];	none無（默認(rèn)）镊折、solid單實(shí)線、dashed虛線介衔、dotted點(diǎn)線恨胚、double雙實(shí)線
寬度綜合設(shè)置	border-width:上邊 [右邊下邊左邊];	像素值
顏色綜合設(shè)置	border-color:上邊 [右邊下邊左邊];	顏色值、#十六進(jìn)制炎咖、rgb(r,g,b)赃泡、rgb(r%,g%,b%)
邊框綜合設(shè)置	border:四邊寬度四邊樣式四邊顏色;

表格的細(xì)線邊框

以前學(xué)過的html表格邊框很粗寒波，這里只需要CSS一句話就可以美觀起來。讓我們真的相信升熊，CSS就是我們的白馬王子（白雪公主）俄烁。

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

border-collapse:collapse; 表示邊框合并在一起。

圓角邊框(CSS3)

從此以后级野，我們的世界不只有矩形页屠。radius 半徑（距離）

語法格式：

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

課堂案例:

<style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        div:first-child {  /* 結(jié)構(gòu)偽類選擇器 選親兄弟 */
            border-radius: 10px;  /*  一個(gè)數(shù)值表示4個(gè)角都是相同的 10px 的弧度 */ 
        }

        div:nth-child(2) {
            /*border-radius: 100px;    取寬度和高度 一半  則會變成一個(gè)圓形 */
            border-radius: 50%;   /*  100px   50% 取寬度和高度 一半  則會變成一個(gè)圓形 */
        }

        div:nth-child(3) {
            border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40 對角線 */
        }
        
        div:nth-child(4) {
            border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
        }
        div:nth-child(5) {
            border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
        }
        div:nth-child(6) {
            border-radius: 100px;  
            height: 100px; 
        }
        div:nth-child(7) {
            border-radius: 100px 0;  
        }   
        </style>

內(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ù)	表達(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í)針

課堂案例：新浪導(dǎo)航

外邊距（margin）

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

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

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

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

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

可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：

必須是塊級元素镐捧。
盒子必須指定了寬度（width）

然后就給左右的外邊距都設(shè)置為auto潜索，就可使塊級元素水平居中。

實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局懂酱，示例代碼如下：

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

文字盒子居中圖片和背景區(qū)別

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

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

插入圖片我們用的最多比如產(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等低版本瀏覽器也會有問題昔园。

我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距就好了蔓榄。

外邊距合并

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

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

當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)甥郑，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top荤西，則他們之間的垂直間距不是margin-bottom與margin-top之和澜搅，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）邪锌。

解決方案：避免就好了勉躺。

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

對于兩個(gè)嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框觅丰，則父元素的上外邊距會與子元素的上外邊距發(fā)生合并饵溅，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0妇萄，也會發(fā)生合并蜕企。

解決方案：

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

待續(xù)轻掩。幸乒。。唇牧。

content寬度和高度

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

width和height的屬性值可以為不同單位的數(shù)值或相對于父元素的百分比%，實(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僅適用于塊級元素径缅，對行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）掺栅。

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

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

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

開始學(xué)習(xí)盒子模型，同學(xué)們最大的困惑就是鼠锈，分不清內(nèi)外邊距的使用闪檬，什么情況下使用內(nèi)邊距，什么情況下使用外邊距购笆？

答案是：其實(shí)他們大部分情況下是可以混用的粗悯。就是說，你用內(nèi)邊距也可以同欠，用外邊距也可以样傍。你覺得哪個(gè)方便，就用哪個(gè)铺遂。

但是衫哥，總有一個(gè)最好用的吧，我們根據(jù)穩(wěn)定性來分襟锐，建議如下：

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

  width >  padding  >   margin

原因：

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

?

CSS3盒模型

CSS3中可以通過box-sizing 來指定盒模型捞蚂，即可指定為content-box妇押、border-box，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變姓迅。

可以分成兩種情況：

1敲霍、box-sizing: content-box 盒子大小為 width + padding + border content-box:此值為其默認(rèn)值，其讓元素維持W3C的標(biāo)準(zhǔn)Box Mode

2丁存、box-sizing: border-box 盒子大小為 width 就是說 padding 和 border 是包含到width里面的

注：上面的標(biāo)注的width指的是CSS屬性里設(shè)置的width: length肩杈，content的值是會自動(dòng)調(diào)整的。

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  margin: 0 auto;
  border: 1px solid gray;

  /* 
  默認(rèn)的設(shè)置 如果我們添加了 border屬性 該容器的大小會發(fā)生改變
  因?yàn)樗獌?yōu)先保證內(nèi)部的內(nèi)容所占區(qū)域 不變
  */

  /*  
  box-sizing  如果不設(shè)置 默認(rèn)的值 就是 
  content-box: 優(yōu)先保證內(nèi)容的大小 對盒子進(jìn)行縮放;
  border-box: 讓 盒子 優(yōu)先保證自己所占區(qū)域的大小,對內(nèi)容進(jìn)行壓縮;
  */
  box-sizing: border-box;
}

盒子陰影

語法格式：

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

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

img {
  border:10px solid orange;
  box-shadow:3px 3px 5px 4px rgba(0,0,0,1);
}

浮動(dòng)(float)

普通流(normal flow)

這個(gè)單詞很多人翻譯為文檔流聋伦，字面翻譯普通流或者標(biāo)準(zhǔn)流都可以夫偶。

前面我們說過，網(wǎng)頁布局的核心觉增，就是用CSS來擺放盒子位置兵拢。如何把盒子擺放到合適的位置？

CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）逾礁、浮動(dòng)和定位说铃。

html語言當(dāng)中另外一個(gè)相當(dāng)重要的概念----------標(biāo)準(zhǔn)流！或者普通流嘹履。普通流實(shí)際上就是一個(gè)網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下腻扇，從左到右排列順序的意思，比如塊級元素會獨(dú)占一行植捎，行內(nèi)元素會按順序依次前后排列衙解；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局。

浮動(dòng)(float)

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

后來，我們發(fā)現(xiàn)浮動(dòng)有個(gè)很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題济锄，用浮動(dòng)的特性來布局了暑椰。（CSS3已經(jīng)我們真正意義上的網(wǎng)頁布局，具體CSS3我們會詳細(xì)解釋）

什么是浮動(dòng)荐绝？

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

在CSS中，通過float屬性來定義浮動(dòng)召夹，其基本語法格式如下：

選擇器{float:屬性值;}

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

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

浮動(dòng)首先創(chuàng)建包含塊的概念（包裹）岩喷。就是說， 浮動(dòng)的元素總是找理它最近的父級元素對齊监憎。但是不會超出內(nèi)邊距的范圍纱意。

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

由2可以推斷出，一個(gè)父盒子里面的子盒子渔扎，如果其中一個(gè)子級有浮動(dòng)的硫狞，則其他子級都需要浮動(dòng)。這樣才能一行對齊顯示赞警。

浮動(dòng)脫離標(biāo)準(zhǔn)流妓忍，不占位置，會影響標(biāo)準(zhǔn)流愧旦。浮動(dòng)只有左右浮動(dòng)世剖。

元素添加浮動(dòng)后，元素會具有行內(nèi)塊元素的特性笤虫。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少

浮動(dòng)根據(jù)元素書寫的位置來顯示相應(yīng)的浮動(dòng)旁瘫。

總結(jié)：浮動(dòng) ---> 浮漏特

浮：加了浮動(dòng)的元素盒子是浮起來的琼蚯，漂浮在其他的標(biāo)準(zhǔn)流盒子上面酬凳。
漏：加了浮動(dòng)的盒子，不占位置的遭庶，它浮起來了宁仔，它原來的位置漏給了標(biāo)準(zhǔn)流的盒子。
特：特別注意峦睡，這是特殊的使用翎苫，有很多的不好處，使用要謹(jǐn)慎榨了。

清除浮動(dòng)

好比我們的浮動(dòng)煎谍，有浮動(dòng)開始，則就應(yīng)該有浮動(dòng)結(jié)束龙屉。

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

我們前面說過呐粘，浮動(dòng)本質(zhì)是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現(xiàn)作岖，但是唆垃，你不能說浮動(dòng)不好 <img src="media/wq.jpg" height="100" />。

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

如果浮動(dòng)一開始就是一個(gè)美麗的錯(cuò)誤织中，那么請用正確的方法挽救它胸嘁。

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

清除浮動(dòng)主要為了解決父級元素因?yàn)樽蛹壐?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)的影響

額外標(biāo)簽法

是W3C推薦的做法是通過在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>嵌屎，或則其他標(biāo)簽br等亦可推正。

優(yōu)點(diǎn)：通俗易懂，書寫方便

缺點(diǎn)：添加許多無意義的標(biāo)簽宝惰，結(jié)構(gòu)化較差植榕。我只能說，w3c你推薦的方法我不接受尼夺，你不值得擁有尊残。。淤堵。

父級添加overflow屬性方法

可以通過觸發(fā)BFC的方式寝衫，可以實(shí)現(xiàn)清除浮動(dòng)效果。（BFC后面講解）

可以給父級添加： overflow為 hidden|auto|scroll  都可以實(shí)現(xiàn)拐邪。

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

缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉慰毅，無法顯示需要溢出的元素。

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

使用方法：

 .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。

代表網(wǎng)站：百度乘陪、淘寶網(wǎng)统台、網(wǎng)易等

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

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

使用方法：

.clearfix:before,.clearfix:after { 
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

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

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

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

版心和布局流程

閱讀報(bào)紙時(shí)容易發(fā)現(xiàn)，雖然報(bào)紙中的內(nèi)容很多戚绕，但是經(jīng)過合理地排版纹坐，版面依然清晰、易讀舞丛。同樣耘子，在制作網(wǎng)頁時(shí)，要想使頁面結(jié)構(gòu)清晰球切、有條理谷誓，也需要對網(wǎng)頁進(jìn)行“排版”。

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

布局流程

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

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

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

3锤窑、制作HTML頁面，CSS文件嚷炉。

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

一列固定寬度且居中

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

兩列左窄右寬型

比如小米 <a target="_blank"> 小米官網(wǎng) </a>

通欄平均分布型

比如錘子 <a target="_blank"> 錘子官網(wǎng) </a>

Photoshop

Photoshop基本使用

PS界面組成：

菜單欄哗讥、選項(xiàng)欄嚷那、工具欄、浮動(dòng)面板（拖拽名稱杆煞，可單獨(dú)操作面板）魏宽、繪圖窗口
? 窗口菜單腐泻，可顯示隱藏所有面板

工作區(qū)：（新建）

1、調(diào)整浮動(dòng)面板

2队询、選項(xiàng)欄后方派桩，新建工作區(qū)，命名蚌斩。

刪除工作區(qū)：先選擇其他工作區(qū)铆惑，再操作刪除工作區(qū)。

基本操作

文件下拉菜單：
? 1送膳、新建新建文檔 CTRL+N

單位：像素厘米毫米

屏幕顯示：單位像素 72像素/英寸 RGB顏色模式

印刷行業(yè)：單位 CM/MM 300像素/英寸 CMYK顏色模式

2员魏、關(guān)閉文檔 CTRL+W

3、存儲 CTRL+S （替存）

4肠缨、存儲為 CTRL+SHIFT+S 另存一份文件

5逆趋、格式：
? .psd PS源文件格式圖層、文字晒奕、樣式等，可再次編輯
? （給自己）
? .jpg 有損壓縮格式（給客戶）品質(zhì) 最高12

6名斟、文件打開：
? 1）文件下拉菜單-打開（CTRL+O歐）（雙擊軟件空白處=打開）
? 2）拖拽文件至選項(xiàng)欄上方脑慧，釋放鼠標(biāo)

移動(dòng)工具 V

1、不同文件之間拖拽圖像砰盐。

圖層操作

圖層面板快捷鍵 F7

圖層選擇：使用移動(dòng)工具V

1闷袒、圖層縮覽圖判斷

2、按住CTRL,在目標(biāo)圖像上單擊

3岩梳、將光標(biāo)放置在目標(biāo)圖像上右鍵囊骤，選擇圖層名稱

圖層面板中加選圖層：

1、按SHIFT冀值，單擊另一目標(biāo)圖層中間所有圖層被選中

2也物、按CTRL，單擊另一目標(biāo)圖層只選中目標(biāo)圖層

復(fù)制圖層：選中目標(biāo)圖層后（移動(dòng)工具狀態(tài)下）

1列疗、按ALT拖拽圖像

2滑蚯、CTRL+J （重合）

3、拖拽目標(biāo)至創(chuàng)建新圖層按鈕

圖層編組

選中目標(biāo)圖層抵栈，CTRL+G

取消編組：CTRL+SHIFT+G

雙擊圖層名稱可重新命名

雙擊組名稱告材，可命名組

移動(dòng)工具V選擇組或圖層時(shí)，需設(shè)置選項(xiàng)欄

圖層上下位置移動(dòng)

1古劲、選中目標(biāo)圖層斥赋，在圖層面拖拽

2、CTRL+] 向上移動(dòng)圖層
? CTRL+[ 向下移動(dòng)圖層

3产艾、CTRL+SHIFT+] 圖層置頂
? CTRL+SHIFT+[ 圖層置底

移動(dòng)選區(qū)或圖像時(shí)：

移動(dòng)過程中疤剑，沒釋放鼠標(biāo)滑绒，按住SHIFT，可同一水平線骚露、同一垂線蹬挤、45度移動(dòng)。

圖層透明度

不透明度：設(shè)置圖層的不透明程度 0%完全透明棘幸，不可見

? 100%完全不透明焰扳，真實(shí)可見

填充：與不透明度效果類似

鍵盤數(shù)字鍵，可快速設(shè)置透明度數(shù)值

套索工具 L

1误续、套索工具 L 在屏幕上拖拽鼠標(biāo)左鍵吨悍，釋放后生成選區(qū)

2、多邊形套索 L 連續(xù)單擊繪制多邊形選區(qū)

? 閉合方法：1蹋嵌、單擊起始點(diǎn) 2育瓜、雙擊任意位置

? DELETE刪除當(dāng)前點(diǎn)

3、磁性套索工具 L 單擊顏色交界后栽烂，沿交界線拖拽鼠標(biāo)躏仇，可生成選區(qū)。

磁性套索 L

L 在顏色交界的位置單擊后拖動(dòng)腺办。單擊起始點(diǎn)后焰手，生成選區(qū)。大小寫鍵：CAPSLOCK 可控制光標(biāo)精確狀態(tài)怀喉。

魔棒工具 W

以單擊位置為選擇色书妻，選擇相似顏色生成選區(qū)。

容差：選擇顏色的范圍容差小躬拢，顏色選擇精確躲履。 0-255

連續(xù)：勾選連續(xù)時(shí)，相連顏色生成選區(qū)聊闯。

? 不勾選工猜，畫面中所有相似顏色被選中生成選區(qū)。

按SHIFT在未生成選區(qū)位置單擊馅袁，可選區(qū)相加域慷。

選區(qū)反選：CTRL+SHIFT+I

選區(qū)布爾運(yùn)算

選區(qū)面積大小的變化。

新選區(qū)：保持選中狀態(tài)

添加到選區(qū)：相加運(yùn)算（按住SHIFT再繪制選區(qū)）

從選區(qū)減去：相減（按住ALT再繪制選區(qū)）

與選區(qū)交叉：重合部分保留汗销。（按住ALT+SHIFT再繪制選區(qū)）

鋼筆工具： P

作用：繪制路徑犹褒，生成選區(qū)，摳圖弛针。

組成;路徑線和錨點(diǎn)

繪制路徑后叠骑，CTRL+回車，生成選區(qū)削茁。

路徑類型：

直線型路徑：連續(xù)單擊

曲線型路徑：第一點(diǎn)單擊宙枷，第二點(diǎn)拖動(dòng)鼠標(biāo)掉房。

Photoshop 切圖

PS切圖可以分為手動(dòng) 利用切片切圖以及利用PS的插件快速切圖

切片工具

利用切片工具手動(dòng)劃出

2.圖層---新建基于圖層的切片
利用標(biāo)尺基礎(chǔ)參考線的切片

切圖插件

Cutterman是一款運(yùn)行在photoshop中的插件，能夠自動(dòng)將你需要的圖層進(jìn)行輸出慰丛，以替代傳統(tǒng)的手工 "導(dǎo)出web所用格式" 以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程卓囚。它支持各種各樣的圖片尺寸、格式诅病、形態(tài)輸出哪亿，方便你在pc、ios贤笆、Android等端上使用蝇棉。它不需要你記住一堆的語法、規(guī)則芥永，純點(diǎn)擊操作篡殷，方便、快捷埋涧，易于上手板辽。

定位(position)

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

PS: 定位是我們CSS算是數(shù)一數(shù)二難點(diǎn)的了，但是麻捻，你務(wù)必要學(xué)好它纲仍，我們CSS離不開定位，特別是后面的js特效贸毕，天天和定位打交道郑叠。不要抵觸它，反而要愛上它明棍，它可以讓我們工作更加輕松哦乡革！

為什么要用定位？

那么定位摊腋，最長運(yùn)用的場景再那里呢沸版？來看幾幅圖片，你一定會有感悟兴蒸！

第一幅圖视粮，小黃色塊可以再圖片上移動(dòng)：

第二幅圖，左右箭頭壓住圖片：

第三幅圖, hot 再盒子外面多出一塊橙凳，更加突出：

以上三個(gè)小地方蕾殴，如果用標(biāo)準(zhǔn)流或者浮動(dòng)笑撞，實(shí)現(xiàn)會比較復(fù)雜或者難以實(shí)現(xiàn)，此時(shí)我們用定位來做钓觉，just soso茴肥！

元素的定位屬性

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

1荡灾、邊偏移

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

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

2郁稍、定位模式

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

選擇器{position:屬性值;}

position屬性的常用值

值	描述
static	自動(dòng)定位（默認(rèn)定位方式）
relative	相對定位耀怜，相對于其原文檔流的位置進(jìn)行定位
absolute	絕對定位，相對于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位
fixed	固定定位桐愉，相對于瀏覽器窗口進(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）來改變元素的位置定页。

PS：靜態(tài)定位其實(shí)沒啥可說的。

相對定位relative(自戀型)

小笑話： 
剛剛看到一個(gè)超級超級帥的帥哥绽诚，看得我都忍不住想和他搞基了典徊。世間怎會有如此之完美的男人。我和他就這樣一動(dòng)不動(dòng)的對視著恩够，就仿佛一見鐘情卒落。時(shí)間也在這一瞬間停止了。直到我的手麻了玫鸟。才戀戀不舍的放下鏡子导绷。。屎飘。妥曲。

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

對元素設(shè)置相對定位后褂萧，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留葵萎。如下圖所示导犹，即是一個(gè)相對定位的效果展示：

注意：相對定位最重要的一點(diǎn)是，它可以通過邊偏移移動(dòng)位置羡忘，但是原來的所占的位置谎痢，繼續(xù)占有。

就是說卷雕，相對定位的盒子仍在標(biāo)準(zhǔn)流中节猿，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。

絕對定位absolute (拼爹型)

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

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

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

父級沒有定位

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

父級有定位

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

絕對定位的盒子沒有邊偏移

如果只是給盒子指定了定位，但是沒有給與邊偏移脚作，則改盒子以標(biāo)準(zhǔn)流來顯示排序葫哗，和上一個(gè)盒子的底邊對齊，但是不占有位置球涛。

子絕父相

這個(gè)“子絕父相”太重要了劣针，是我們學(xué)習(xí)定位的口訣，時(shí)時(shí)刻刻記住的亿扁。

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

首先从祝，我們說下襟己，絕對定位是將元素依據(jù)最近的已經(jīng)定位絕對引谜、固定或相對定位）的父元素（祖先）進(jìn)行定位。

就是說擎浴，子級是絕對定位员咽，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以）贮预，就是說贝室，子絕父絕，子絕父相都是正確的仿吞。

但是滑频，在我們網(wǎng)頁布局的時(shí)候，最常說的子絕父相是怎么來的呢唤冈？請看如下圖：

草圖就是如下：

所以峡迷，我們可以得出如下結(jié)論：

因?yàn)樽蛹壥墙^對定位，不會占有位置务傲，可以放到父盒子里面的任何一個(gè)地方凉当。

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

這就是子絕父相的由來看杭。

固定定位fixed(認(rèn)死理型)

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

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

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

固定定位的元素跟父親沒有任何關(guān)系，只認(rèn)瀏覽器齿坷。
固定定位完全脫標(biāo)桂肌，不占有位置，不隨著滾動(dòng)條滾動(dòng)永淌。

記憶法：就類似于孫猴子崎场，無父無母，好不容易找到一個(gè)可靠的師傅（瀏覽器）遂蛀，就聽的師傅的谭跨，別的都不聽。

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

疊放次序（z-index）

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

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

比如： z-index: 2;

注意：

z-index的默認(rèn)屬性值是0籍凝，取值越大，定位元素在層疊元素中越居上苗缩。
如果取值相同饵蒂，則根據(jù)書寫順序，后來居上酱讶。
后面數(shù)字一定不能加單位退盯。
只有相對定位，絕對定位泻肯，固定定位有此屬性渊迁，其余標(biāo)準(zhǔn)流，浮動(dòng)灶挟，靜態(tài)定位都無此屬性琉朽，亦不可指定此屬性。

四種定位總結(jié)

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

定位模式轉(zhuǎn)換

跟浮動(dòng)一樣耕漱，元素添加了絕對定位和固定定位之后，元素模式也會發(fā)生轉(zhuǎn)換抬伺，都轉(zhuǎn)換為行內(nèi)塊模式螟够，因此比如行內(nèi)元素如果添加了絕對定位或者固定定位后，可以不用轉(zhuǎn)換模式峡钓，直接給高度和寬度就可以了齐鲤。

元素的顯示與隱藏

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

他們的主要目的是讓一個(gè)元素在頁面中消失牡肉，但是不在文檔源碼中刪除捧灰。最常見的是網(wǎng)站廣告，當(dāng)我們點(diǎn)擊類似關(guān)閉不見了，但是我們重新刷新頁面毛俏，它們又會出現(xiàn)和你玩躲貓貓Ｌ棵怼！

display 顯示

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

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

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

visibility 可見性

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

visible : 　對象可視

hidden : 　對象隱藏

特點(diǎn)：隱藏之后银锻，繼續(xù)保留原有位置永品。（停職留薪）

overflow 溢出

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

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

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

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

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

CSS高級技巧

CSS用戶界面樣式

所謂的界面樣式炕桨，就是更改一些用戶操作樣式，比如更改用戶的鼠標(biāo)樣式肯腕，表單輪廓等献宫。但是比如滾動(dòng)條的樣式改動(dòng)受到了很多瀏覽器的抵制，因此我們就放棄了乎芳。防止表單域拖拽

鼠標(biāo)樣式cursor

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

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

鼠標(biāo)放我身上查看效果哦：

<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 因?yàn)?火狐不支持 pointer ie6以上都支持的盡量用

輪廓 outline

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

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

但是我們都不關(guān)心可以設(shè)置多少，我們平時(shí)都是去掉的肴甸。

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

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

防止拖拽文本域resize

resize：none 這個(gè)單詞可以防止火狐谷歌等瀏覽器隨意的拖動(dòng) 文本域寂殉。

右下角可以拖拽：

右下角不可以拖拽：

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

vertical-align 垂直對齊

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

以前我們還講過讓文字居中對齊原在，是 text-align: center;

但是我們從來沒有講過有垂直居中的屬性友扰，我們的媽媽一直很擔(dān)心我們的垂直居中怎么做。

vertical-align 垂直對齊庶柿，這個(gè)看上去很美好的一個(gè)屬性村怪，實(shí)際有著不可捉摸的脾氣，否則我們也不會這么晚來講解浮庐。

vertical-align : baseline |top |middle |bottom

設(shè)置或檢索對象內(nèi)容的垂直對其方式甚负。

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

圖片和文字對齊

所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關(guān)系了病涨。默認(rèn)的圖片會和文字基線對齊富玷。

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

有個(gè)很重要特性你要記住：如果一個(gè)元素沒有基線既穆，比如圖片或者表單等行內(nèi)塊元素赎懦，則他的底線會和父級盒子的基線對齊。</strong> 這樣會造成一個(gè)問題循衰，就是圖片底側(cè)會有一個(gè)空白縫隙铲敛。

解決的方法就是：

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

給img 添加 display：block; 轉(zhuǎn)換為塊級元素就不會存在問題了伐蒋。

溢出的文字隱藏

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

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

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

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

text-overflow 文字溢出

text-overflow : clip | ellipsis

設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對象內(nèi)文本的溢出

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

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

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

精靈技術(shù)產(chǎn)生的背景

圖所示為網(wǎng)頁的請求原理圖奸鬓，當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)焙畔，需要向服務(wù)器發(fā)送請求，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶串远。

然而宏多，一個(gè)網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁中的圖像過多時(shí)澡罚，服務(wù)器就會頻繁地接受和發(fā)送請求伸但，這將大大降低頁面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)留搔，提高頁面的加載速度更胖，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites、CSS雪碧）隔显。

精靈技術(shù)本質(zhì)

簡單地說却妨，CSS精靈是一種處理網(wǎng)頁背景圖像的方式。它將一個(gè)頁面涉及到的所有零星背景圖像都集中到一張大圖中去括眠，然后將大圖應(yīng)用于網(wǎng)頁彪标，這樣，當(dāng)用戶訪問該頁面時(shí)掷豺，只需向服務(wù)發(fā)送一次請求捞烟，網(wǎng)頁中的背景圖像即可全部展示出來账锹。通常情況下，這個(gè)由很多小的背景圖像合成的大圖被稱為精靈圖坷襟，如下圖所示為京東網(wǎng)站中的一個(gè)精靈圖。

精靈技術(shù)的使用

CSS 精靈其實(shí)是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）生年，然而婴程，各個(gè)網(wǎng)頁元素通常只需要精靈圖中不同位置的某個(gè)小圖，要想精確定位到精靈圖中的某個(gè)小圖抱婉，就需要使用CSS的background-image档叔、background-repeat和background-position屬性進(jìn)行背景定位，其中最關(guān)鍵的是使用background-position屬性精確地定位蒸绩。

制作精靈圖

CSS 精靈其實(shí)是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）衙四，那我們要做的，就是把小圖拼合成一張大圖患亿。

大部分情況下传蹈，精靈圖都是網(wǎng)頁美工做。

我們精靈圖上放的都是小的裝飾性質(zhì)的背景圖片步藕。 插入圖片不能往上放惦界。
我們精靈圖的寬度取決于最寬的那個(gè)背景。 
我們可以橫向擺放也可以縱向擺放咙冗，但是每個(gè)圖片之間沾歪，間隔至少隔開偶數(shù)像素合適。
在我們精靈圖的最低端雾消，留一片空隙灾搏，方便我們以后添加其他精靈圖。

結(jié)束語：小公司立润，背景圖片很少的情況狂窑，沒有必要使用精靈技術(shù)，維護(hù)成本太高范删。如果是背景圖片比較多蕾域，可以建議使用精靈技術(shù)。

字體圖標(biāo)

圖片是有諸多優(yōu)點(diǎn)的到旦，但是缺點(diǎn)很明顯旨巷，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"添忘，這都會大大降低網(wǎng)頁的性能的采呐。更重要的是圖片不能很好的進(jìn)行“縮放”，因?yàn)閳D片放大和縮小會失真搁骑。我們后面會學(xué)習(xí)移動(dòng)端響應(yīng)式斧吐，很多情況下希望我們的圖標(biāo)是可以縮放的又固。此時(shí)，一個(gè)非常重要的技術(shù)出現(xiàn)了煤率，額不是出現(xiàn)了仰冠，是以前就有，是被從新"寵幸"啦蝶糯。洋只。這就是字體圖標(biāo)（iconfont).

字體圖標(biāo)優(yōu)點(diǎn)

可以做出跟圖片一樣可以做的事情,改變透明度、旋轉(zhuǎn)度昼捍，等..
但是本質(zhì)其實(shí)是文字识虚，可以很隨意的改變顏色、產(chǎn)生陰影妒茬、透明效果等等...
本身體積更小担锤，但攜帶的信息并沒有削減。
幾乎支持所有的瀏覽器
移動(dòng)端設(shè)備必備良藥...

字體圖標(biāo)使用流程

總體來說乍钻，字體圖標(biāo)按照如下流程：

設(shè)計(jì)字體圖標(biāo)

假如圖標(biāo)是我們公司單獨(dú)設(shè)計(jì)肛循，那就需要第一步了，這個(gè)屬于UI設(shè)計(jì)人員的工作团赁，他們在 illustrator 或 Sketch 這類矢量圖形軟件里創(chuàng)建 icon圖標(biāo)育拨，比如下圖：

之后保存為svg格式，然后給我們前端人員就好了欢摄。

其實(shí)第一步熬丧，我們不需要關(guān)心，只需要給我們這些圖標(biāo)就可以了怀挠，如果圖標(biāo)是大眾的析蝴，網(wǎng)上本來就有的，可以直接跳過第一步绿淋，進(jìn)入第三步闷畸。

上傳生成字體包

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

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

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)庫谭确。可以使用AI制作圖標(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

下載兼容字體包

剛才上傳完畢纱注，網(wǎng)站會給我們把UI做的svg圖片轉(zhuǎn)換為我們的字體格式畏浆，然后下載下來就好了

當(dāng)然，我們不需要自己專門的圖標(biāo)狞贱，是想網(wǎng)上找?guī)讉€(gè)圖標(biāo)使用刻获，以上2步可以直接省略了，直接到剛才的網(wǎng)站上找喜歡的下載使用吧瞎嬉。

字體引入到HTML

最后一步蝎毡，是最重要的一步了，就是字體文件已經(jīng)有了氧枣，我們需要引入到我們頁面中沐兵。

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

第一步：引入項(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)門

先來體會下現(xiàn)實(shí)中的滑動(dòng)門,或者你可以叫做推拉門：

滑動(dòng)門出現(xiàn)的背景

制作網(wǎng)頁時(shí)扎谎，為了美觀，常常需要為網(wǎng)頁元素設(shè)置特殊形狀的背景烧董，比如微信導(dǎo)航欄毁靶，有凸起和凹下去的感覺，最大的問題是里面的字?jǐn)?shù)不一樣多解藻，咋辦老充？

為了使各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少，出現(xiàn)了CSS滑動(dòng)門技術(shù)螟左。它從新的角度構(gòu)建頁面啡浊，使各種特殊形狀的背景能夠自由拉伸滑動(dòng)觅够，以適應(yīng)元素內(nèi)部的文本內(nèi)容，可用性更強(qiáng)巷嚣。最常見于各種導(dǎo)航欄的滑動(dòng)門喘先。

核心技術(shù)

核心技術(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)

CSS3在布局方面做了非常大的改進(jìn)，使得我們對塊級元素的布局排列變得十分靈活嗤放，適應(yīng)性非常強(qiáng)思喊，其強(qiáng)大的伸縮性，在響應(yīng)式開中可以發(fā)揮極大的作用次酌。

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

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

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

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

Flex布局的語法規(guī)范經(jīng)過幾年發(fā)生了很大的變化吊宋，也給Flexbox的使用帶來一定的局限性纲辽，因?yàn)檎Z法規(guī)范版本眾多，瀏覽器支持不一致璃搜，致使Flexbox布局使用不多

**2文兑、各屬性詳解******

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

b腺劣、justify-content調(diào)整主軸對齊

c绿贞、align-items調(diào)整側(cè)軸對齊

d、flex-wrap控制是否換行

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

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

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

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

此知識點(diǎn)重在理解脐帝，要明確找出主軸同云、側(cè)軸糖权、方向，各屬性對應(yīng)的屬性值

過渡(CSS3)

過渡（transition)是CSS3中具有顛覆性的特征之一炸站，我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下星澳，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

幀動(dòng)畫：通過一幀一幀的畫面按照固定順序和速度播放旱易。如電影膠片

在CSS3里使用transition可以實(shí)現(xiàn)補(bǔ)間動(dòng)畫（過渡效果）禁偎，并且當(dāng)前元素只要有“屬性”發(fā)生變化時(shí)即存在兩種狀態(tài)(我們用A和B代指），就可以實(shí)現(xiàn)平滑的過渡阀坏，為了方便演示采用hover切換兩種狀態(tài)如暖，但是并不僅僅局限于hover狀態(tài)來實(shí)現(xiàn)過渡。

語法格式:

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

運(yùn)動(dòng)曲線示意圖：

img {
  width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;
  transition:transform 0.5s ease-in 0s;
}
img:hover {
  transform:rotate(180deg);
}

2D變形(CSS3)

轉(zhuǎn)換是CSS3中具有顛覆性的特征之一封字，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)耍鬓、變形阔籽、縮放，甚至支持矩陣方式牲蜀，配合過渡和即將學(xué)習(xí)的動(dòng)畫知識笆制，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。

變形轉(zhuǎn)換 transform

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

translate(50px,50px);

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

可以改變元素的位置在辆，x、y可為負(fù)值度苔；

 translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）
 translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）
 translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）

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

讓定位的盒子水平居中

縮放 scale(x, y)

transform:scale(0.8,1);

可以對元素進(jìn)行水平和垂直方向的縮放匆篓。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放寇窑。

scale(X,Y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）
scaleX(x)元素僅水平方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放）

scale()的取值默認(rèn)的值為1鸦概，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個(gè)元素縮兴ァ窗市；而任何大于或等于1.01的值先慷，作用是讓元素放大

旋轉(zhuǎn) rotate(deg)

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

transform:rotate(45deg);

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

案例旋轉(zhuǎn)撲克牌

body {
  background-color: skyblue;
}
.container {
  width: 100px;
  height: 150px;
  border: 1px solid gray;
  margin: 300px auto;
  position: relative;
}
.container > img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: top right;
  /* 添加過渡 */
  transition: all 1s;
}
.container:hover img:nth-child(1) {
  transform: rotate(60deg);
}
.container:hover img:nth-child(2) {
  transform: rotate(120deg);
}
.container:hover img:nth-child(3) {
  transform: rotate(180deg);
}
.container:hover img:nth-child(4) {
  transform: rotate(240deg);
}
.container:hover img:nth-child(5) {
  transform: rotate(300deg);
}
.container:hover img:nth-child(6) {
  transform: rotate(360deg);
}

傾斜 skew(deg, deg)

transform:skew(30deg,0deg);

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

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

5.transform-origin可以調(diào)整元素轉(zhuǎn)換的原點(diǎn)

 div{transform-origin: left top;transform: rotate(45deg); }  /* 改變元素原點(diǎn)到左上角刊愚，然后進(jìn)行順時(shí)旋轉(zhuǎn)45度 */

案例：菱形照片三角盒子

3D變形

左手坐標(biāo)系

伸出左手踊跟，讓拇指和食指成“L”形，大拇指向右鸥诽，食指向上商玫，中指指向前方。這樣我們就建立了一個(gè)左手坐標(biāo)系牡借，拇指拳昌、食指和中指分別代表X、Y、Z軸的正方向。如下圖

CSS3中的3D坐標(biāo)系與上述的3D坐標(biāo)系是有一定區(qū)別的样屠，相當(dāng)于其繞著X軸旋轉(zhuǎn)了180度，如下圖

rotateX()

就是沿著 x 立體旋轉(zhuǎn).

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateY()

沿著y軸進(jìn)行旋轉(zhuǎn)

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateZ()?

沿著z軸進(jìn)行旋轉(zhuǎn)

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

透視(perspective)

電腦顯示屏是一個(gè)2D平面沈矿，圖像之所以具有立體感（3D效果），其實(shí)只是一種視覺呈現(xiàn)咬腋，通過透視可以實(shí)現(xiàn)此目的羹膳。

透視可以將一個(gè)2D平面，在轉(zhuǎn)換的過程當(dāng)中根竿，呈現(xiàn)3D效果溜徙。

注：并非任何情況下需要透視效果，根據(jù)開發(fā)需要進(jìn)行設(shè)置犀填。

perspective有兩種寫法

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

理解透視距離原理：

開門案例

body {
}
.door {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid gray;
  perspective: 1000px;
  background: url('images/dog.gif') no-repeat center/cover;
  position: relative;
}
.door > div {
  box-sizing: border-box;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
  height: 100%;
  background-color: brown;
  transform-origin: left center;
  transition: 1s;
  position: relative;
}
.left::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  right: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.right {
  width: 50%;
  height: 100%;
  float: left;
  background-color: brown;
  transform-origin: right center;
  transition: 1s;
  position: relative;
}
.right::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  left: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.door:hover .left {
  transform: rotateY(-130deg);
}
.door:hover .right {
  transform: rotateY(130deg);
}

translateX(x)

僅水平方向移動(dòng)**（X軸移動(dòng)）

主要目的實(shí)現(xiàn)移動(dòng)效果

translateY(y)

僅垂直方向移動(dòng)（Y軸移動(dòng)）

translateZ(z)

transformZ的直觀表現(xiàn)形式就是大小變化图贸，實(shí)質(zhì)是XY平面相對于視點(diǎn)的遠(yuǎn)近變化（說遠(yuǎn)近就一定會說到離什么參照物遠(yuǎn)或近，在這里參照物就是perspective屬性）。比如設(shè)置了perspective為200px;那么transformZ的值越接近200疏日，就是離的越近偿洁，看上去也就越大，超過200就看不到了沟优，因?yàn)橄喈?dāng)于跑到后腦勺去了涕滋，我相信你正常情況下，是看不到自己的后腦勺的挠阁。

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

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

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

preserve-3d：保留3D空間

3D元素構(gòu)建是指某個(gè)圖形是由多個(gè)元素構(gòu)成的侵俗，可以給這些元素的父元素設(shè)置transform-style: preserve-3d來使其變成一個(gè)真正的3D圖形锨用。

一般而言，該聲明應(yīng)用在3D變換的兄弟元素們的父元素上隘谣。

翻轉(zhuǎn)盒子案例(百度錢包)

body {
  margin: 0;
  padding: 0;
  background-color: #B3C04C;

}

.wallet {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.5s;
}

.wallet::before, .wallet::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(./images/bg.png);
  background-repeat: no-repeat;
}

.wallet::before {
  background-position: right top;
  transform: rotateY(180deg);
}

.wallet::after {
  background-position: left top;
  transform: translateZ(2px);
}

.wallet:hover {
  transform: rotateY(180deg);
}

動(dòng)畫(CSS3)

動(dòng)畫是CSS3中具有顛覆性的特征之一增拥，可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確控制一個(gè)或一組動(dòng)畫，常用來實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果寻歧。

語法格式：

animation:動(dòng)畫名稱 動(dòng)畫時(shí)間 運(yùn)動(dòng)曲線  何時(shí)開始  播放次數(shù)  是否反方向;

關(guān)于幾個(gè)值掌栅，除了名字，動(dòng)畫時(shí)間码泛，延時(shí)有嚴(yán)格順序要求其它隨意r

@keyframes 動(dòng)畫名稱 {
  from{ 開始位置 }  0%
  to{  結(jié)束  }  100%
}

animation-iteration-count:infinite;  無限循環(huán)播放
animation-play-state:paused;   暫停動(dòng)畫"

小汽車案例

body {
  background: white;
}
img {
  width: 200px;
}
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}
  49%{
    transform: translateX(1000px);
  }
  55%{
    transform: translateX(1000px) rotateY(180deg);
  }
  95%{
    transform: translateX(0) rotateY(180deg);
  }
  100%{
    transform: translateX(0) rotateY(0deg);
  }
}

inherit從父元素繼承它的值