（備注：凡是利用圓括號括起來的一般就是注釋或者英文解釋，用webstorm寫程序時一定要注意字符一定要在英文狀態(tài)下輸入?。?/p>
1.CSS的格式：
?<style type=“text/css">
? ? ? ? ? ? ? ?p{
? ? ? ? ? ? ? ? text-align:center；
? ? ? ? ? ? ? ? ?color:red;
? ? ? ? ? ? ? ? ?}
? ?</style>
例如：
? <style type="text/css">
? ? ? ? ? ? ? ? ? ? 標(biāo)簽名稱{
? ? ? ? ? ? ? ? ? ? ? ? ? ?屬性名稱: 屬性對應(yīng)的值;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?...
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ?</style>
2. 文字屬性
格式：font-style:italic(傾斜);
快捷鍵：
fs:font-style:italic;
fsn:font-style:normal;
3.文字粗細(xì)?
格式：font-weight:bold;
快捷鍵：
fw：font-weight:;
fwb：font-weight:bold;
fwbr：font-weight:bolder；
或者取值為100-900整百的值。
4.文字大小
格式：font-size：；
快捷鍵：
fz30：font-size：30px；
5.文字字體
格式：font-family："楷體"；
ff：font-family：；
常用的字體有："微軟雅黑"、"宋體"、"黑體"、"Arial"、"TNR"。
6.文字屬性縮寫
font: style weight size family;
font：bold italic 10px "楷體"；
style和 weight 可以省略還可以交換位置，
size和family不可以省略也不可以交換位置。
7.文本裝飾屬性
格式：text-decoration(裝飾)：underline;
快捷鍵：
td：text-decoration:none;
teu:text-decoration:underline;
tdl:text-decoration:line-through(刪除線);
tdo:text-decooration:overline;
8.水平對齊
格式：text-align:left;
ta:text-align:left;
tar:text-align:right;
tac:text-align:center;
9.文本縮進(jìn)
格式：text-indent:2em;
ti2e:text-indent:2em;
10.顏色屬性
格式：
color：值；
color：rgb（0，0，0）；（黑色）
color：rgba（255,0,0，0.2）；（淺紅色）
color：#ffee00；（黃色）
color：#fe0；（黃色）
11.選擇器
標(biāo)簽選擇器（直接選中）、ID選擇器（#）、類選擇器（.）、后代選擇器（標(biāo)簽1 （空格）標(biāo)簽2）、子元素選擇器（標(biāo)簽1>標(biāo)簽2）、交集選擇器（標(biāo)簽1標(biāo)簽2）、并集選擇器（標(biāo)簽1，標(biāo)簽2）、兄弟相鄰選擇器（標(biāo)簽1+標(biāo)簽2）、兄弟通用選擇器（標(biāo)簽1~標(biāo)簽2）；
序選擇器：1）同級別：標(biāo)簽：first-child、標(biāo)簽：last-child、標(biāo)簽：nth-child(n)、標(biāo)簽：nth-last-child(n)、標(biāo)簽：only-child、標(biāo)簽：nth-of-type(odd)、標(biāo)簽：nth-of-type(even)、nth-child（2n+0）、nth-child（2n+1）、nth-child（3n+1）。
2）同類型：標(biāo)簽：first-of-type、標(biāo)簽：last-of-type、標(biāo)簽：nth-of-type(n)、標(biāo)簽：nth-last-of-type（n)、標(biāo)簽：only-of-type、標(biāo)簽：nth-child(odd)、標(biāo)簽：nth-child(even)。
12.CSS的三大特性
1.繼承性
后代可以繼承的屬性有：color/font-/text-/line
注意點(diǎn)：a標(biāo)簽的文字顏色和下劃線不能繼承
h標(biāo)簽的文字大小不能繼承
2.層疊性
定義：多個選擇器選擇同一標(biāo)簽又設(shè)置相同的屬性，也就是CSS處理沖突的能力。
優(yōu)先級處理：相同時聽后面的，近的優(yōu)先繼承性。
id>類>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)
優(yōu)先級之important：
格式：！important；
只能用于直接選中 ，指定哪個優(yōu)先級更高。
注意點(diǎn)：通配符是直接選中的選擇器。
優(yōu)先級之權(quán)重的問題：直接選中的才有效，都含有相同的選擇器時，哪個大哪個多聽誰的id>=類>=標(biāo)簽>=近的
13.容器級的標(biāo)簽（div.h .ul.ol.dl.li. dt .dd...）和文本級的標(biāo)簽(sapn.p.strong.em....)
css元素的顯示模式：
塊級元素會獨(dú)占一行，行內(nèi)元素不會獨(dú)占一行。p也是塊級元素，還有個行內(nèi)塊級元素（可以設(shè)置寬高）。
CSS的顯示模式轉(zhuǎn)換：
設(shè)置元素的display屬性：
display：block/inline/inline-block;
14.背景圖片
先設(shè)置塊元素的寬高：
快捷鍵:
bgi ? background-image:url();
15.背景平鋪屬性
取值：
repeat（默認(rèn)水平和垂直方向都平鋪）
no-repeat（不平鋪）
repeat-x：在水平方向平鋪
repeat-y：在垂直方向平鋪
作用：可以通過背景圖片的平鋪來降低圖片的大小，提升網(wǎng)頁的速度。
快捷鍵：bgr ? background-repeat：；
16.背景定位屬性
作用：控制圖片的位置
快捷鍵：bp ? background-position：0,0；
取值：水平方向 ? 垂直方向；
方向取值：left，center，right。
具體像素取值：一定要寫單位px，能接受負(fù)的取值。
注意點(diǎn)：同一標(biāo)簽可設(shè)置背景圖片和背景顏色，如果顏色和圖片同時存在，那么圖片會覆蓋顏色。
17.背景屬性的縮寫：
快捷鍵：
bg+ ? ?background：背景顏色 ?背景圖片 ?平鋪方式 ?關(guān)聯(lián)方式 ?定位方式；
背景關(guān)聯(lián)方式：attachment（附件、關(guān)聯(lián)）
bga ? ?background-attachment：；
取值：scroll(默認(rèn)值，隨著滾動條的滾動而滾動)
? ? ? ? ? fixed（固定，不隨滾動條的滾動而滾動）
背景圖片和插入圖片的區(qū)別：
1.背景圖片只是一個裝飾，不會占用位置，插入圖片會占用位置
2.背景圖片有定位屬性，可以方便的控制圖片位置
3.插入圖片的語義要強(qiáng)，在企業(yè)開發(fā)中如果圖片想被搜索引擎收錄，推薦使用img
18.精靈圖
定義：一種圖片合成技術(shù)
作用：可以減少請求的次數(shù)，以及可以降低服務(wù)器的處理壓力使用，配合北京圖片和背景定位來使用。
19.邊框?qū)傩?/h4>
定義：環(huán)繞在標(biāo)簽寬度和高度周圍的線條
連寫：
bd+ ? border：邊框的寬度 ? 邊框的樣式 邊框的顏色
bt+ ? ? ?border-top/bottom/right/left：邊框的寬度? 邊框的樣式 邊框的顏色
border-width/style/color:上 下 左 右；
style取值：solid（固體）、dashed（虛線）、dotted（點(diǎn)綴）、double（加倍）
border-top-width/style/color：;
20.內(nèi)邊距屬性：
定義：
邊框和內(nèi)容之間的距離
非連寫：
padding-top/right/bottom/left：；
連寫
padding:上 下 左 右
取值省略規(guī)律：
上右下=左右一致
上右=上下一致，左右一致，
上=上下左右一致
20.外邊距屬性
定義：標(biāo)簽語標(biāo)簽之間的距離就是外邊距
格式：
margin-top/right/bottom/left:;
連寫：
margin:上 下 左 右
取值省略規(guī)律：
上右下=左右一致
上右=上下一致，左右一致，
上=上下左右一致
回車鍵Enter也會當(dāng)做空格span分段會有距離，但此距離不是外邊距。
注意點(diǎn)：給標(biāo)簽設(shè)置了內(nèi)邊距（padding）和外邊距（margin）以及邊框（border）時候，標(biāo)簽戰(zhàn)友的寬度和高度會發(fā)生變化，設(shè)置了padding后，padding也會有背景顏色，但是margin不會有顏色，可以設(shè)置一個box-sizing：boxder-box（內(nèi)容的寬度）；這樣就能是內(nèi)容添加了內(nèi)邊距（padding）和外邊距（margin）以及邊框（border）時候內(nèi)容的寬高就不會發(fā)生變化了。
21.CSS盒子模型
定義：這只是一個形象的比喻，HTML中所有的標(biāo)簽都是盒子。
在HTML中所有的標(biāo)簽都可以設(shè)置，以下假設(shè)一個幾個手機(jī)盒子都裝著手機(jī)：
寬度/高度==指定可以存放內(nèi)容的區(qū)域
內(nèi)邊距==填充物
邊框==手機(jī)盒子自身
外邊距==盒子和盒子之間的間隙
22.盒子模型的寬度和高度
1.內(nèi)容的寬度和高度：通過width/height屬性設(shè)置的寬/高度
2.元素的寬度和高度：寬度就是左右內(nèi)邊距+左右邊框+width，高度就是上下邊框+上下內(nèi)邊距+height
3.元素的寬度和高度：寬度就是左右內(nèi)邊距+左右邊框+width+左右外邊距，高度就是上下邊框+上下內(nèi)邊距+height+上下外邊距
23.盒子的box-sizing屬性
取值：border-box（內(nèi)容的寬高）
content-box：（元素的寬高）
默認(rèn)取值：border-box：content-box；
需要控制嵌套關(guān)系盒子的距離一般首先考慮padding，其次再去考慮margin，margin本質(zhì)上用來控制兄弟之間的間隙的
嵌套關(guān)系的盒子中可以利用 ?margin：0 auto；讓里面的盒子在外面的盒子中水平居中
margin;0 auto;只對水平方向有效，對垂直方向無效，但是可以設(shè)置他距離上下頂部/底部有一定的距離，如：margin：150px auto;(要設(shè)置邊框border，不然外面盒子會被一起頂下來)
盒子居中和內(nèi)容居中的區(qū)別：
margin;0 auto;讓盒子自身水平居中
text-align：center；設(shè)置盒子匯總存儲的文字/圖片居中
24.清空默認(rèn)的邊距：
使用通配符設(shè)置：
? ? ? ? *{
? ? ? ? ? margin：0；
? ? ? ? ? padding：0；
? ? ? ? ? ?}
企業(yè)開發(fā)中一般使用一下網(wǎng)址中的代碼來清空默認(rèn)的邊距：
yui css reset
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css（復(fù)制鏈接打開即可）
25.行高和字號
行高：指的是每行內(nèi)容的高度
盒子高：指的是元素的高度
1.一行文字在盒子內(nèi)垂直居中，可設(shè)置這行文字的行高等于盒子的高度
2.通過padding來設(shè)置文字居中
26.還原字體和字號
1.盒子中存儲是文字，一般是以盒子左邊的內(nèi)邊距為基準(zhǔn)。右邊的字體不夠排版會擠到下一行，所以右邊的有誤差。
2.頂部的內(nèi)邊距是邊框到行高頂部的距離。
27.文章界面
1.清空所有的邊距
2.從外至內(nèi)、從上至下的編寫網(wǎng)頁。
28.網(wǎng)頁的布局方式
指的就是瀏覽器對網(wǎng)頁中的元素進(jìn)行排版的
1.標(biāo)準(zhǔn)流（文檔流/普通流）的排版方式
瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流
CSS把元素分為三類：塊級元素/行內(nèi)元素/行內(nèi)塊級元素
兩種排版方式：
垂直排版：如果元素為塊級元素，就會垂直排版
水平排版：如果元素是行內(nèi)元素/行內(nèi)塊級元素，那么就會水平排版
2.浮動流排版方式
2.1浮動流是一種“半脫離標(biāo)準(zhǔn)流”的排版方式
2.2浮動流只有一種水平排版方式，只能設(shè)置某個元素左對齊或者右對齊、
注意點(diǎn)：浮動流中沒有居中對齊，也就是沒有center這個取值，而且在浮動流不可以使用margin：0 auto；
特點(diǎn)：塊級/行內(nèi)/行內(nèi)塊級都可以使用水平排版，都可以設(shè)置寬高；
浮動流和行內(nèi)塊級元素很像
3.定位流（后面再講）
29.浮動元素的脫標(biāo)
定義：脫離標(biāo)準(zhǔn)流
當(dāng)某個元素浮動后，看上去像從標(biāo)準(zhǔn)流刪除了一樣，前元素脫標(biāo)后，后元素沒有浮動，那么前面的元素會蓋掉后面一元素。
浮動元素排序規(guī)則：先浮動的元素顯示在前面，后浮動的元素會顯示在后面；不同方向上的浮動元素，左浮動找左浮動，右浮動找右浮動；浮動元素浮動之后的位置，由浮動元素浮動之前在標(biāo)準(zhǔn)流的位置來確定。
30.浮動元素的貼靠現(xiàn)象
1.如果父元素的寬度能顯示所有的浮動元素，那么浮動元素會并排顯示
2.如果父元素的寬度不能顯示所有的浮動元素，那么就會從最后一個開始往前貼靠
3.如果貼靠了前面所有的浮動元素之后都不能顯示，最終會貼靠到父元素的左邊或者右邊
31.浮動元素的字圍現(xiàn)象
浮動元素不會擋住沒有浮動元素中的漢字，沒有浮動的文字會自動給浮動的元素讓位置，這就是浮動元素的字圍現(xiàn)象
32.浮動流和標(biāo)準(zhǔn)流使用的場景
垂直方向使用標(biāo)準(zhǔn)流，水平方向使用浮動流。
復(fù)雜界面如何入手
1.從上至下布局
2.從外之內(nèi)布局
3.水平方向可以先劃分為一左一右再對左邊或者右邊進(jìn)行布局，局部的垂直方向可以劃分為一上一下，再對上面或者下面進(jìn)行布局
33.浮動元素的高度問題
1.在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度
2.在浮動流中浮動的元素是不可以撐起父元素的高度的
比如div的這個塊級元素沒有自身高度，標(biāo)準(zhǔn)流中它的內(nèi)容可以撐起div的高度，但是在浮動流中的內(nèi)容是不能撐起div的高度的
34.清除浮動的方式
1.給前面的父元素設(shè)置一個高度（企業(yè)開發(fā)中能不寫就不寫，所以這個用的很少）
2.給后面的盒子添加一個clear屬性
clear屬性的取值：
none：默認(rèn)值：左浮動找左浮動，右浮動找右浮動
left：不要找前面的左浮動
right：不要找后面的右浮動
both：都不要找
3.隔墻法
3.1外墻法:在兩個盒子中間添加一個額外額塊級元素，并且給這個額外的塊級元素設(shè)置clear：both;屬性，
3.2內(nèi)墻法：在第一個盒子中的所有子元素最后添加一個塊級元素，給這個塊級元素設(shè)置clear：both；屬性
特點(diǎn)：外墻法設(shè)置之后不能撐起第一個盒子的高度，內(nèi)墻法可以撐起第一個盒子的高度，企業(yè)開發(fā)中也很少用到隔墻法
4.使用偽選擇器來清楚浮動
偽元素選擇器：
定義：給指定標(biāo)簽的內(nèi)容前面添加一個子元素或者給指定標(biāo)簽的內(nèi)容后面添加一個子元素
格式：
標(biāo)簽名稱：：before{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 屬性名稱：值
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
標(biāo)簽名稱：：after ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ?屬性名稱：值
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
清除的格式：
.box1：：after{
? ? ? ? ? ? ? ? content：" ?空格"；（設(shè)置添加的子元素的內(nèi)容為空）
? ? ? ? ? ? ? ?display：black；（設(shè)置為塊級元素）
? ? ? ? ? ? ? ?height：0；（設(shè)置高度為零）
? ? ? ? ? ? ? visibility：hidden；(設(shè)置子元素隱藏，防止內(nèi)容溢出)
? ? ? ? ? ? ? ?clear：both；（設(shè)置clear：both屬性）
? ? ? ? ? ? ? ? ? ? ? ? ? }
.box1{
? ? ? ? ? ? ? ?*zoom：1；(兼容IE6)
? ? ? ? ? ? }?
5.裁剪法
.box1{
? ? ? ? ? ? overflow：hidden
? ? ? ? ? ?}
5.1將超出標(biāo)簽范圍的內(nèi)容給裁減掉
5.2清除浮動
5.3可以設(shè)置margin-top之后，外面的盒子不被頂下來
35定位流的分類
1.相對定位
2.絕對定位
3固定定位
4.靜態(tài)定位
1.1相對定位
定義：相對定位就是相對于自己以前在標(biāo)準(zhǔn)流中的位置來移動
注意點(diǎn)：
1.1.1不脫離標(biāo)準(zhǔn)流，會繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間
1.1.2同一個方向上的定位屬性只能使用一個
1.1.3由于不脫離標(biāo)準(zhǔn)流，所以在相對定位中是區(qū)分塊級/行內(nèi)/行內(nèi)塊級元素的
2.相對定位應(yīng)用的場景
用于對元素進(jìn)行微調(diào)；配合絕對定位來使用
position：relative；（相對的/親屬）相對定位
position：absolute；（絕對的/完全的）絕對定位
3.絕對定位
定義:絕對定位就是相對于body來定位
3.1絕對定位注意點(diǎn)：
3.1.1絕對定位的元素是脫離標(biāo)準(zhǔn)流的
3.1.2絕對定位的元素是不區(qū)分塊級/行內(nèi)/行內(nèi)塊級元素
3.2絕對定位參考點(diǎn)的規(guī)律
3.2.1默認(rèn)情況下所有的絕對定位的元素，無論有沒有祖元素，都會以body來定位
3.2..2如果一個絕對定位的元素有祖元素，并且祖元素也是定位流，那么這個絕對定位的元素就會以定位流的那個祖元素作為參考點(diǎn)
3.2.2.1只要是這個絕對定位元素的祖元素都可以
3.2.2.2指的定位流是指絕對定位/相對定位/固定定位，靜態(tài)定位不行
3.3如果一個絕對定位的元素有祖元素，并且這個祖元素也是定位流，而且祖先元素中有多個元素都是定位流，那么這個絕對定位的元素會以離它最近的那個定位流的祖元素作為參考點(diǎn)
36.絕對定位的注意點(diǎn)
1.如果一個絕對定位的元素是以body作為參考點(diǎn)，那么其實(shí)就是以網(wǎng)頁首屏的寬度和高度作為參考點(diǎn)，而不是以整個網(wǎng)頁的寬度和高度
2.一個絕對定位的原色會忽略祖元素的padding
37.相對定位的弊端和絕對定位的弊端
相對定位的弊端：不脫離標(biāo)準(zhǔn)流，會繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間，所以不利于布局界面
絕對定位的弊端：默認(rèn)情況下絕對定位的元素會以body作為參考點(diǎn)，所以會隨著瀏覽器的寬度高度的變化而變化
這時候就一般就會子絕父相，也就是子元素用絕對定位，父元素用相對定位。
38.絕對定位的水平居中
1.設(shè)置絕對元素的left：50%；
2.然后設(shè)置絕對定位元素的margin-left：-元素寬度的一半px；
3.如果是盒子的話再設(shè)置一個top：10px；（此px值可以適當(dāng)使用開發(fā)者工具進(jìn)行調(diào)整）
