# css:
> 1. 學會使用CSS選擇器
> 2. 熟記CSS樣式和外觀屬性
> 3. 熟練掌握CSS各種選擇器
> 4. 熟練掌握CSS各種選擇器
> 5. 熟練掌握CSS三種顯示模式
> 6. 熟練掌握CSS背景屬性
> 7. 熟練掌握CSS三大特性
> 8. 熟練掌握CSS盒子模型
> 9. 熟練掌握CSS浮動
> 10.熟練掌握CSS定位
> 11.熟練掌握CSS高級技巧強化CSS
typora-copy-images-to: media
CSS的發(fā)展歷程
從HTML被發(fā)明開始赶舆，樣式就以各種形式存在叛拷。不同的瀏覽器結(jié)合它們各自的樣式語言為用戶提供頁面效果的控制宋梧。最初的HTML只包含很少的顯示屬性。隨著HTML的成長泉唁，為了滿足頁面設計者的要求，HTML添加了很多顯示功能揩慕。但是隨著這些功能的增加亭畜，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫迎卤。于是CSS便誕生了拴鸵。
CSS 網(wǎng)頁的美容師
CSS的出現(xiàn)，拯救了混亂的HTML蜗搔，當讓更加拯救了我們web開發(fā)者劲藐。 讓我們的網(wǎng)頁更加豐富多彩。?
CSS的最大貢獻就是：? 讓 HTML 從樣式中解脫苦海樟凄，? 實現(xiàn)了 HTML 專注去做 結(jié)構(gòu)呈現(xiàn)聘芜。 而樣式交給 CSS 后，你完全可以放心的早點洗洗睡了缝龄！
而且汰现。挂谍。。服鹅。凳兵。 CSS 做的很出色，如果JavaScript是網(wǎng)頁的魔法師企软，那么CSS它是我們網(wǎng)頁的美容師庐扫，不信，你看:
ps:? 你跟Angelababy只差了一個妝容的距離
有人說仗哨， 沒有不漂亮的女人形庭，只有不會打扮的女人。
我想說厌漂， 沒有不好看的網(wǎng)頁萨醒，只有不會CSS的前端。
CSS初識
CSS(Cascading Style Sheets)? ? 美化樣式
CSS通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表）苇倡，主要用于設置HTML頁面中的文本內(nèi)容（字體富纸、大小、對齊方式等）旨椒、圖片的外形（寬高晓褪、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式综慎。
CSS以HTML為基礎(chǔ)涣仿，提供了豐富的功能，如字體示惊、顏色好港、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式米罚。
引入CSS樣式表（書寫位置）
CSS可以寫到那個位置钧汹？ 是不是一定寫到html文件里面呢？
內(nèi)部樣式表
內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中录择，并且用style標簽定義崭孤，其基本語法格式如下：
<head>
<styletype="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
語法中，style標簽一般位于head標簽中title標簽之后糊肠，也可以把他放在HTML文檔的任何地方辨宠。
type="text/CSS"? 在html5中可以省略， 寫上也比較符合規(guī)范货裹， 所以這個地方可以寫也可以省略嗤形。
行內(nèi)式（內(nèi)聯(lián)樣式）
內(nèi)聯(lián)樣式，又有人稱行內(nèi)樣式弧圆、行間樣式赋兵、內(nèi)嵌樣式笔咽。是通過標簽的style屬性來設置元素的樣式，其基本語法格式如下：
<標簽名style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;">內(nèi)容</標簽名>
語法中style是標簽的屬性霹期，實際上任何HTML標簽都擁有style屬性叶组，用來設置行內(nèi)式。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同历造，行內(nèi)式只對其所在的標簽及嵌套在其中的子標簽起作用甩十。
外部樣式表（外鏈式）
鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中吭产，其基本語法格式如下：
<head>
<linkhref="CSS文件的路徑"rel="stylesheet"/>
</head>
注意：? link 是個單標簽哦!!!
該語法中侣监，link標簽需要放在head頭部標簽中，并且必須指定link標簽的三個屬性臣淤，具體如下：
href：定義所鏈接外部樣式表文件的URL橄霉，可以是相對路徑，也可以是絕對路徑邑蒋。
rel：定義當前文檔與被鏈接文檔之間的關(guān)系姓蜂，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件医吊。
三種樣式表總結(jié)（位置）
樣式表優(yōu)點缺點使用情況控制范圍
行內(nèi)樣式表書寫方便钱慢，權(quán)重高沒有實現(xiàn)樣式和結(jié)構(gòu)相分離較少控制一個標簽（少）
內(nèi)部樣式表部分結(jié)構(gòu)和樣式相分離沒有徹底分離較多控制一個頁面（中）
外部樣式表完全實現(xiàn)結(jié)構(gòu)和樣式相分離需要引入最多，強烈推薦控制整個站點（多）
CSS樣式規(guī)則
使用HTML時遮咖，需要遵從一定的規(guī)范。CSS亦如此造虏，要想熟練地使用CSS對網(wǎng)頁進行修飾御吞，首先需要了解CSS樣式規(guī)則，具體格式如下：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
在上面的樣式規(guī)則中:
1.選擇器用于指定CSS樣式作用的HTML對象漓藕，花括號內(nèi)是對該對象設置的具體樣式陶珠。
2.屬性和屬性值以“鍵值對”的形式出現(xiàn)。
3.屬性是對指定的對象設置的樣式屬性享钞，例如字體大小揍诽、文本顏色等。
4.屬性和屬性值之間用英文“:”連接栗竖。
5.多個“鍵值對”之間用英文“;”進行區(qū)分暑脆。
可以用段落 和 表格的對齊的演示。
選擇器（重點）
要想將CSS樣式應用于特定的HTML元素狐肢，首先需要找到該目標元素添吗。在CSS中，執(zhí)行這一任務的樣式規(guī)則部分被稱為選擇器（選擇符）份名。
如上圖所以碟联，要把里面的小黃人分為2組妓美，最快的方法怎辦？?
很多鲤孵， 比如 一只眼睛的一組壶栋，剩下的一組?
選擇器干啥的？? 選擇標簽用的
這就用到基礎(chǔ)選擇器組：
CSS基礎(chǔ)選擇器
標簽選擇器（元素選擇器）
標簽選擇器是指用HTML標簽名稱作為選擇器普监，按標簽名稱分類贵试，為頁面中某一類標簽指定統(tǒng)一的CSS樣式。其基本語法格式如下：
標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }? 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標簽選擇器最大的優(yōu)點是能快速為頁面中同類型的標簽統(tǒng)一樣式鹰椒，同時這也是他的缺點锡移，不能設計差異化樣式。
標簽選擇器 可以把某一類標簽全部選擇出來? div? span?
類選擇器
類選擇器使用“.”（英文點號）進行標識漆际，后面緊跟類名淆珊，其基本語法格式如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標簽調(diào)用的時候用 class=“類名”? 即可。
類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式奸汇。 可以選擇一個或者多個標簽
小技巧：
1.長名稱或詞組可以使用中橫線來為選擇器命名施符。
2.不建議使用“_”下劃線來命名CSS選擇器。
? ? 輸入的時候少按一個shift鍵; 瀏覽器兼容問題 (比如使用tips的選擇器命名擂找，在IE6是無效的) 能良好區(qū)分JavaScript變量命名(JS變量命名是用“_”)
3.不要純數(shù)字戳吝、中文等命名， 盡量使用英文字母來表示贯涎。
命名是我們通俗約定的听哭，但是沒有規(guī)定必須用這些常用的命名。
課堂案例：
<head>
<metacharset="utf-8">
<style>
span{
? ? font-size:100px;
? ? ?? }
.blue{
? ? color:blue;
? ? ?? }
.red{
? ? color:red;
? ? ?? }
.orange{
? ? ? ? ? ? color:orange;
? ? ?? }
? ? ? ? .green{
? ? ? ? ? ? color:green;
? ? ? ? }
</style>
</head>
<body>
? ? <spanclass="blue">G</span>
? ? <spanclass="red">o</span>
? ? <spanclass="orange">o</span>
? ? <spanclass="blue">g</span>
? ? <spanclass="green">l</span>
? ? <spanclass="red">e</span>
</body>
多類名選擇器
我們可以給標簽指定多個類名塘雳，從而達到更多的選擇目的陆盘。
注意：
1. 樣式顯示效果跟HTML元素中的類名先后順序沒有關(guān)系,受CSS樣式書寫的上下順序有關(guān)。
2. 各個類名中間用空格隔開败明。
多類名選擇器在后期布局比較復雜的情況下隘马，還是較多使用的。
<divclass="pink fontWeight font20">亞瑟</div>
<divclass="font20">劉備</div>
<divclass="font14 pink">安其拉</div>
<divclass="font14">貂蟬</div>
id選擇器
id選擇器使用“#”進行標識妻顶，后面緊跟id名酸员，其基本語法格式如下：
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語法中，id名即為HTML元素的id屬性值讳嘱，大多數(shù)HTML元素都可以定義id屬性幔嗦，元素的id值是唯一的，只能對應于文檔中某一個具體的元素沥潭。
用法基本和類選擇器相同崭添。
id選擇器和類選擇器區(qū)別
W3C標準規(guī)定，在同一個頁面內(nèi)叛氨，不允許有相同名字的id對象出現(xiàn)呼渣，但是允許相同名字的class棘伴。
類選擇器（class） 好比人的名字，? 是可以多次重復使用的屁置， 比如? 張偉? 王偉? 李偉? 李娜
id選擇器? ? 好比人的身份證號碼焊夸，? 全中國是唯一的， 不得重復蓝角。 只能使用一次阱穗。
id選擇器和類選擇器最大的不同在于 使用次數(shù)上袭艺。
通配符選擇器
通配符選擇器用“*”號表示笼呆，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素睬罗。其基本語法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面的代碼患朱，使用通配符選擇器定義CSS樣式鲁僚，清除所有HTML標記的默認邊距。
* {
margin:0;/* 定義外邊距*/
padding:0;/* 定義內(nèi)邊距*/
}
注意：
? 這個通配符選擇器裁厅，就像我們的電影明星中的夢中情人冰沙， 想想它就好了，但是它不會和你過日子执虹。
CSS字體樣式屬性
font-size:字號大小
font-size屬性用于設置字號拓挥，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位袋励。其中侥啤，相對長度單位比較常用，推薦使用像素單位px茬故，絕對長度單位使用較少盖灸。具體如下：
font-family:字體
font-family屬性用于設置字體。網(wǎng)頁中常用的字體有宋體均牢、微軟雅黑糠雨、黑體等才睹，例如將網(wǎng)頁中所有段落文本的字體設置為微軟雅黑徘跪，可以使用如下CSS樣式代碼：
p{ font-family:"微軟雅黑";}microsoft yahei? ? ? Arial
可以同時指定多個字體，中間以逗號隔開琅攘，表示如果瀏覽器不支持第一個字體垮庐，則會嘗試下一個，直到找到合適的字體坞琴。
常用技巧：
1. 現(xiàn)在網(wǎng)頁中普遍使用14px+哨查。
2. 盡量使用偶數(shù)的數(shù)字字號。ie6等老式瀏覽器支持奇數(shù)會有bug剧辐。
3. 各種字體之間必須使用英文狀態(tài)下的逗號隔開寒亥。
4. 中文字體需要加英文狀態(tài)下的引號邮府，英文字體一般不需要加引號。當需要設置英文字體時溉奕，英文字體名必須位于中文字體名之前褂傀。
5. 如果字體名中包含空格、#加勤、$等符號仙辟，則該字體必須加英文狀態(tài)下的單引號或雙引號，例如font-family: "Times New Roman";鳄梅。
6. 盡量使用系統(tǒng)默認字體叠国，保證在任何用戶的瀏覽器中都能正確顯示。
font-weight:字體粗細
字體加粗除了用 b? 和 strong 標簽之外戴尸，可以使用CSS 來實現(xiàn)粟焊，但是CSS 是沒有語義的。
font-weight屬性用于定義字體的粗細校赤，其可用屬性值：normal吆玖、bold、bolder马篮、lighter沾乘、100~900（100的整數(shù)倍）。
小技巧：
數(shù)字400等價于normal浑测，而700等價于bold翅阵。? 但是我們更喜歡用數(shù)字來表示。
font-style:字體風格
字體傾斜除了用 i? 和 em 標簽之外迁央，可以使用CSS 來實現(xiàn)掷匠，但是CSS 是沒有語義的。
font-style屬性用于定義字體風格岖圈，如設置斜體讹语、傾斜或正常字體，其可用屬性值如下：
normal：默認值蜂科，瀏覽器會顯示標準的字體樣式顽决。
italic：瀏覽器會顯示斜體的字體樣式。
oblique：瀏覽器會顯示傾斜的字體樣式导匣。
小技巧：
平時我們很少給文字加斜體才菠，反而喜歡給斜體標簽（em，i）改為普通模式贡定。
font:綜合設置字體樣式 (重點)
font屬性用于對字體樣式進行綜合設置赋访，其基本語法格式如下：
選擇器{font:font-stylefont-weightfont-size/line-heightfont-family;}
使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序蚓耽，各個屬性以空格隔開渠牲。
注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性步悠，否則font屬性將不起作用嘱兼。
CSS外觀屬性
color:文本顏色
color屬性用于定義文本的顏色，其取值方式有如下3種：
1.預定義的顏色值贤徒，如red芹壕，green，blue等接奈。
2.十六進制踢涌，如#FF0000，#FF6600序宦，#29D794等睁壁。實際工作中，十六進制是最常用的定義顏色的方式互捌。
3.RGB代碼潘明，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是秕噪，如果使用RGB代碼的百分比顏色值钳降，取值為0時也不能省略百分號，必須寫為0%腌巾。
line-height:行間距
line-height屬性用于設置行間距遂填，就是行與行之間的距離，即字符的垂直間距澈蝙，一般稱為行高吓坚。line-height常用的屬性值單位有三種，分別為像素px灯荧，相對值em和百分比%礁击，實際工作中使用最多的是像素px
一般情況下，行距比字號大7.8像素左右就可以了逗载。
text-align:水平對齊方式
text-align屬性用于設置文本內(nèi)容的水平對齊哆窿，相當于html中的align對齊屬性。其可用屬性值如下：
left：左對齊（默認值）
right：右對齊
center：居中對齊
text-indent:首行縮進
text-indent屬性用于設置首行文本的縮進撕贞，其屬性值可為不同單位的數(shù)值更耻、em字符寬度的倍數(shù)测垛、或相對于瀏覽器窗口寬度的百分比%捏膨，允許使用負值, 建議使用em作為設置單位。
1em 就是一個字的寬度? 如果是漢字的段落， 1em 就是一個漢字的寬度
text-decoration 文本的裝飾
text-decoration? 通常我們用于給鏈接修改裝飾效果
值描述
none默認号涯。定義標準的文本目胡。
underline定義文本下的一條線。下劃線 也是我們鏈接自帶的
overline定義文本上的一條線链快。
line-through定義穿過文本下的一條線誉己。
小技巧：
ctrl+滾輪 可以 放大開發(fā)者工具代碼大小。
左邊是HTML元素結(jié)構(gòu)? 右邊是CSS樣式域蜗。
右邊CSS樣式可以改動數(shù)值和顏色查看更改后效果巨双。
CSS復合選擇器
復合選擇器是由兩個或多個基礎(chǔ)選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽霉祸。
交集選擇器
交集選擇器由兩個選擇器構(gòu)成筑累，其中第一個為標簽選擇器，第二個為class選擇器丝蹭，兩個選擇器之間不能有空格慢宗，如h3.special。
記憶技巧：
交集選擇器 是 并且的意思奔穿。? 即...又...的意思
比如： ? p.one ? 選擇的是： 類名為 .one? 的 段落標簽镜沽。 ?
并集選擇器
并集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標簽選擇器贱田、class類選擇器id選擇器等）缅茉，都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同男摧，或部分相同宾舅，就可以利用并集選擇器為它們定義相同的CSS樣式。
記憶技巧：
并集選擇器? 和 的意思彩倚，? 就是說筹我，只要逗號隔開的，所有選擇器都會執(zhí)行后面樣式帆离。
比如? .one, p , #test {color: #F00;}? 表示 ? .one 和 p? 和 #test 這三個選擇器都會執(zhí)行顏色為紅色蔬蕊。? 通常用于集體聲明
后代選擇器
后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代哥谷，其寫法就是把外層標簽寫在前面岸夯，內(nèi)層標簽寫在后面，中間用空格分隔们妥。當標簽發(fā)生嵌套時猜扮，內(nèi)層標簽就成為外層標簽的后代。
子孫后代都可以這么選擇监婶。 或者說旅赢，它能選擇任何包含在內(nèi) 的標簽齿桃。
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面煮盼，子級標簽寫在后面短纵，中間跟一個 > 進行連接，注意僵控，符號左右兩側(cè)各保留一個空格香到。
白話：? 這里的子 指的是 親兒子? 不包含孫子 重孫子之類。
比如：? .demo > h3 {color: red;} ? 說明? h3 一定是demo 親兒子报破。? demo 元素包含著h3悠就。
測試題
<divclass="nav"><!-- 主導航欄 -->
<ul>
<li><ahref="#">公司首頁</a></li>
? ? <li><ahref="#">公司簡介</a></li>
? ? <li><ahref="#">公司產(chǎn)品</a></li>
? ? <li>
<ahref="#">聯(lián)系我們</a>
? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><ahref="#">公司郵箱</a></li>
? ? ? ? ? ? ? ? <li><ahref="#">公司電話</a></li>
? ? ? ? </ul>
? ? </li>
</ul>
</div>
<divclass="sitenav"><!-- 側(cè)導航欄 -->
<divclass="site-l">左側(cè)側(cè)導航欄</div>
<divclass="site-r"><ahref="#">登錄</a></div>
</div>
在不修改以上代碼的前提下，完成以下任務：
鏈接 登錄 的顏色為紅色,同時主導航欄里面的所有的鏈接改為pink? ? (簡單)
主導航欄和側(cè)導航欄里面文字都是14像素并且是微軟雅黑充易。（中等)
主導航欄里面的一級菜單鏈接文字顏色為綠色理卑。（難)
偽類選擇器
? 偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果蔽氨， 比如可以選擇 第1個藐唠，第n個元素。
為了和我們剛才學的類選擇器相區(qū)別鹉究，? 類選擇器是一個點 比如.demo{} ? 而我們的偽類 用2個點 就是 冒號? 比如? :link{}
鏈接偽類選擇器
:link? ? ? /* 未訪問的鏈接 */
:visited? /* 已訪問的鏈接 */
:hover? ? /* 鼠標移動到鏈接上 */
:active? ? /* 選定的鏈接 */
? 注意寫的時候宇立，他們的順序盡量不要顛倒? 按照? lvha 的順序。? love? hate? 愛上了討厭 記憶法? ? 或者? lv 包包 非常 hao
a{/* a是標簽選擇器? 所有的鏈接 */
? ? ? ? ? ? font-weight:700;
? ? ? ? ? ? font-size:16px;
? ? ? ? ? ? color:gray;
? ? ? ? }
a:hover{/* :hover 是鏈接偽類選擇器 鼠標經(jīng)過 */
? ? ? ? ? ? color:red;/*? 鼠標經(jīng)過的時候自赔，由原來的 灰色 變成了紅色 */
}
CSS注釋
CSS規(guī)則是使用 ? ? /*? 需要注釋的內(nèi)容? */? 進行注釋的妈嘹，即在需要注釋的內(nèi)容前使用 “/*” 標記開始注釋，在內(nèi)容的結(jié)尾使用 “*/”結(jié)束绍妨。
? 例如：
p{
font-size:14px;/* 所有的字體是14像素大小*/
}
標簽顯示模式（display）
標簽的類型(顯示模式)
HTML標簽一般分為塊標簽和行內(nèi)標簽兩種類型润脸，它們也稱塊元素和行內(nèi)元素。具體如下：
塊級元素(block-level)
每個塊元素通常都會獨自占據(jù)一整行或多整行他去，可以對其設置寬度毙驯、高度、對齊等屬性灾测，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建爆价。
常見的塊元素有<h1>~<h6>、<p>媳搪、<div>铭段、<ul>、<ol>秦爆、<li>等序愚，其中<div>標簽是最典型的塊元素。
塊級元素的特點：
（1）總是從新行開始
（2）高度等限，寬度爸吮，行高芬膝、外邊距以及內(nèi)邊距都可以控制。
（3）寬度默認是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素拗胜。
行內(nèi)元素(inline-level)
行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)怒允，一般不可以設置寬度埂软、高度、對齊等屬性纫事，常用于控制頁面中文本的樣式勘畔。
常見的行內(nèi)元素有<a>、<strong>丽惶、<b>炫七、<em>、<i>钾唬、<del>万哪、<s>、<ins>抡秆、<u>奕巍、<span>等，其中<span>標簽最典型的行內(nèi)元素儒士。
? ? 我一樣重要
行內(nèi)元素的特點：
（1）和相鄰行內(nèi)元素在一行上的止。
（2）高、寬無效着撩，但水平方向的padding和margin可以設置诅福。
（3）默認寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素拖叙。（a特殊）
? ? ? 注意：
只有 文字才 能組成段落? 因此 p? 里面不能放塊級元素氓润，同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽薯鳍，里面不能放其他塊級元素旺芽。
鏈接里面不能再放鏈接。
塊級元素和行內(nèi)元素區(qū)別
塊級元素的特點：
（1）總是從新行開始
（2）高度辐啄，行高采章、外邊距以及內(nèi)邊距都可以控制。
（3）寬度默認是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素壶辜。
行內(nèi)元素的特點：
（1）和相鄰行內(nèi)元素在一行上悯舟。
（2）高、寬無效砸民，但水平方向的padding和margin可以設置抵怎，垂直方向的無效奋救。
（3）默認寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素反惕。
行內(nèi)塊元素（inline-block）
在行內(nèi)元素中有幾個特殊的標簽——<img />尝艘、<input />、<td>姿染，可以對它們設置寬高和對齊屬性背亥，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素。
行內(nèi)塊元素的特點：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙悬赏。
（2）默認寬度就是它本身內(nèi)容的寬度狡汉。
（3）高度，行高闽颇、外邊距以及內(nèi)邊距都可以控制盾戴。
標簽顯示模式轉(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)心這三個尖啡，其他的是我們后面的工作。
CSS書寫規(guī)范
開始就形成良好的書寫規(guī)范剩膘，是你專業(yè)化的開始可婶。
空格規(guī)范
【強制】 選擇器 與 { 之間必須包含空格。
示例： .selector { }
【強制】 屬性名 與之后的 : 之間不允許包含空格援雇， : 與 屬性值 之間必須包含空格矛渴。
示例：
font-size: 12px;
選擇器規(guī)范
【強制】 當一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行惫搏。
示例：
/* good */
.post,
.page,
.comment {
?? line-height: 1.5;
}
/* bad */
.post, .page, .comment {
?? line-height: 1.5;
}
【建議】 選擇器的嵌套層級應不大于 3 級具温，位置靠后的限定條件應盡可能精確。
示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
屬性規(guī)范
【強制】 屬性定義必須另起一行筐赔。
示例：
/* good */
.selector {
?? margin: 0;
?? padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【強制】 屬性定義后必須以分號結(jié)尾铣猩。
示例：
/* good */
.selector {
?? margin: 0;
}
/* bad */
.selector {
?? margin: 0
}
CSS 三大特性
層疊 繼承? 優(yōu)先級 是我們學習CSS 必須掌握的三個特性。
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加茴丰。
是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設置到同一個元素上达皿，那么這個時候一個屬性就會將另一個屬性層疊掉
比如先給某個標簽指定了內(nèi)部文字顏色為紅色，接著又指定了顏色為藍色贿肩，此時出現(xiàn)一個標簽指定了相同樣式不同值的情況峦椰，這就是樣式?jīng)_突。
一般情況下汰规，如果出現(xiàn)樣式?jīng)_突汤功，則會按照CSS書寫的順序，以最后的樣式為準溜哮。
樣式?jīng)_突滔金，遵循的原則是就近原則色解。 那個樣式離著結(jié)構(gòu)近，就執(zhí)行那個樣式餐茵。
樣式不沖突科阎，不會層疊
CSS最后的執(zhí)行口訣：? 長江后浪推前浪，前浪死在沙灘上忿族。
CSS繼承性
所謂繼承性是指書寫CSS樣式表時锣笨，子標簽會繼承父標簽的某些樣式，如文本顏色和字號肠阱。想要設置一個可繼承的屬性票唆，只需將它應用于父元素即可朴读。
簡單的理解就是：? 子承父業(yè)屹徘。
CSS最后的執(zhí)行口訣：? 龍生龍，鳳生鳳衅金，老鼠生的孩子會打洞噪伊。
注意：
恰當?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復雜性氮唯。子元素可以繼承父元素的樣式（text-鉴吹，font-，line-這些元素開頭的都可以繼承惩琉，以及color屬性）
CSS優(yōu)先級
定義CSS樣式時豆励，經(jīng)常出現(xiàn)兩個或更多規(guī)則應用在同一元素上轩褐，這時就會出現(xiàn)優(yōu)先級的問題乖篷。
在考慮權(quán)重時尝丐，初學者還需要注意一些特殊的情況唁毒，具體如下：
繼承樣式的權(quán)重為0诸狭。即在嵌套結(jié)構(gòu)中肮雨，不管父元素樣式的權(quán)重多大睹限，被子元素繼承時啄寡，他的權(quán)重都為0窍箍，也就是說子元素定義的樣式會覆蓋繼承來的樣式串纺。
行內(nèi)樣式優(yōu)先。應用style屬性的元素椰棘，其行內(nèi)樣式的權(quán)重非常高纺棺，可以理解為遠大于100⌒澳總之五辽，他擁有比上面提高的選擇器都大的優(yōu)先級。
權(quán)重相同時外恕，CSS遵循就近原則杆逗。也就是說靠近元素的樣式具有最大的優(yōu)先級乡翅，或者說排在最后的樣式優(yōu)先級最大。
CSS定義了一個!important命令罪郊，該命令被賦予最大的優(yōu)先級蠕蚜。也就是說不管權(quán)重如何以及樣式位置的遠近，!important都具有最大優(yōu)先級悔橄。
CSS特殊性（Specificity）
關(guān)于CSS權(quán)重靶累，我們需要一套計算公式來去計算，這個就是 CSS Specificity癣疟，我們稱為CSS 特性或稱非凡性挣柬，它是一個衡量CSS值優(yōu)先級的一個標準 具體規(guī)范入如下：
specificity用一個四位的數(shù) 字串(CSS2是三位)來表示，更像四個級別睛挚，值從左到右邪蛔，左面的最大，一級大于一級扎狱，數(shù)位之間沒有進制侧到，級別之間不可超越。
繼承或者* 的貢獻值0,0,0,0
每個元素（標簽）貢獻值為0,0,0,1
每個類淤击，偽類貢獻值為0,0,1,0
每個ID貢獻值為0,1,0,0
每個行內(nèi)樣式貢獻值1,0,0,0
每個!important貢獻值∞ 無窮大
權(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ù)位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0匠抗， 所以不會存在10個div能趕上一個類選擇器的情況。
繼承的 權(quán)重是 0
總結(jié)優(yōu)先級：
使用了 !important聲明的規(guī)則污抬。
內(nèi)嵌在 HTML 元素的 style屬性里面的聲明汞贸。
使用了 ID 選擇器的規(guī)則。
使用了類選擇器印机、屬性選擇器矢腻、偽元素和偽類選擇器的規(guī)則。
使用了元素選擇器的規(guī)則耳贬。
只包含一個通用選擇器的規(guī)則踏堡。
同一類選擇器則遵循就近原則。
總結(jié)：權(quán)重是優(yōu)先級的算法咒劲，層疊是優(yōu)先級的表現(xiàn)
CSS 背景(background)
CSS 可以添加背景顏色和背景圖片顷蟆，以及來進行圖片設置。
background-color背景顏色
background-image背景圖片地址
background-repeat是否平鋪
background-position背景位置
背景的合寫（復合屬性）
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
背景圖片(image)
語法：
background-image:none|url(url)
參數(shù)：
none : 無背景圖（默認的）url : 使用絕對或相對地址指定背景圖像
background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用腐魂。 如果圖片不重復地話帐偎，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪蛔屹，則會覆蓋背景顏色削樊。
小技巧：? 我們提倡 背景圖片后面的地址，url不要加引號。
背景平鋪（repeat）
語法：
background-repeat:repeat|no-repeat|repeat-x|repeat-y
參數(shù)：
repeat : 背景圖像在縱向和橫向上平鋪（默認的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設置背景圖片時漫贞，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素甸箱。
repeat-x : 背景圖像在橫向上平鋪?
repeat-y : 背景圖像在縱向平鋪
設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素迅脐。
背景位置(position)
語法：
background-position:length||length
background-position:position||position
參數(shù)：
length : 百分數(shù) | 由浮點數(shù)字和單位標識符組成的長度值芍殖。請參閱長度單位 position : top | center | bottom | left | center | right? ? 如果您僅規(guī)定了一個關(guān)鍵詞，那么第二個值將是"center"谴蔑。
說明：
設置或檢索對象的背景圖像位置豌骏。必須先指定background-image屬性。默認值為：(0% 0%)隐锭。如果只指定了一個值窃躲，該值將用于橫坐標∏账縱坐標將默認為50%蒂窒。第二個值將用于縱坐標。
注意：
position 后面是x坐標和y坐標赎婚。 可以使用方位名詞或者 精確單位刘绣。
如果和精確單位和方位名字混合使用樱溉，則必須是x坐標在前挣输，y坐標后面。比如 background-position: 15px top;? 則 15px 一定是? x坐標? top是 y坐標福贞。
實際工作用的最多的撩嚼，就是背景圖片居中對齊了。
背景附著
語法：
background-attachment:scroll|fixed
參數(shù)：
scroll : 背景圖像是隨對象內(nèi)容滾動fixed : 背景圖像固定
說明：
設置或檢索背景圖像是隨對象內(nèi)容滾動還是固定的挖帘。
背景簡寫
background屬性的值的書寫順序官方并沒有強制標準的完丽。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background:transparenturl(image.jpg)repeat-yscroll50%0;
背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
background:rgba(0,0,0,0.3);
最后一個參數(shù)是alpha 透明度? 取值范圍 0~1之間
注意：? 背景半透明是指盒子背景半透明拇舀， 盒子里面的內(nèi)容不收影響逻族。
導航欄案例
使用技巧：在一行內(nèi)的盒子內(nèi)，我們設定行高等于盒子的高度骄崩，就可以使文字垂直居中聘鳞。
<head>
<metacharset="utf-8">
<style>
? ? ? ? body{
? ? ? ? ? ? background-color:#000;
? ? ? ? }
? ? ? ? a{
? ? ? ? ? ? width:200px;
? ? ? ? ? ? height:50px;
? ? ? ? ? ? /* background-color: orange; */
? ? ? ? ? ? display:inline-block;/* 把a 行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素 */
? ? ? ? ? ? text-align:center;/* 文字水平居中 */
? ? ? ? ? ? line-height:50px;/* 我們設定行高等于盒子的高度，就可以使文字垂直居中 */
? ? ? ? ? ? color:#fff;
? ? ? ? ? ? font-size:22px;
? ? ? ? ? ? text-decoration:none;/* 取消下劃線 文本裝飾 */
? ? ? ? }
? ? ? ? a:hover{/* 鼠標經(jīng)過 給我們的鏈接添加背景圖片*/
? ? ? ? ? ? background:url(images/h.png)no-repeat;
? ? ? ? }
</style>
</head>
<body>
<ahref="#">專區(qū)說明</a>
<ahref="#">申請資格</a>
<ahref="#">兌換獎勵</a>
<ahref="#">下載游戲</a>
</body>
盒子模型（CSS重點）
其實要拂，CSS就三個大模塊：? 盒子模型 抠璃、 浮動 、 定位脱惰，其余的都是細節(jié)搏嗡。要求這三部分，無論如何也要學的非常精通。?
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子采盒，也就是一個盛裝內(nèi)容的容器旧乞。每個矩形都由元素的內(nèi)容、內(nèi)邊距（padding）磅氨、邊框（border）和外邊距（margin）組成良蛮。
看透網(wǎng)頁布局的本質(zhì)
網(wǎng)頁布局中，我們是如何把里面的文字悍赢，圖片决瞳，按照美工給我們的效果圖排列的整齊有序呢？
牛奶是怎樣運輸左权，讓消費者購買的呢皮胡？
我們說過，行內(nèi)元素比如 文字 類似牛奶赏迟，也需要一個盒子把他們裝起來屡贺，我們前面學過的雙標簽都是一個盒子。有了盒子锌杀，我們就可以隨意的甩栈，自由的，擺放位置了糕再。
看透網(wǎng)頁布局的本質(zhì)：? 把網(wǎng)頁元素比如文字圖片等等量没，放入盒子里面，然后利用CSS擺放盒子的過程突想，就是網(wǎng)頁布局殴蹄。
CSS 其實沒有太多邏輯可言 ， 類似我們小時候玩的積木,我們可以自由的猾担，隨意的擺放出我們想要的效果袭灯。
盒子模型（Box Model）
這里略過 老舊的ie盒子模型（IE6以下），對不起绑嘹，我都沒見過IE5的瀏覽器稽荧。
首先，我們來看一張圖工腋，來體會下什么是盒子模型姨丈。
所有的文檔元素（標簽）都會生成一個矩形框，我們成為元素框（element box）夷蚊，它描述了一個文檔元素再網(wǎng)頁布局匯總所占的位置大小构挤。因此，每個盒子除了有自己大小和位置外惕鼓，還影響著其他盒子的大小和位置筋现。
盒子邊框（border）
邊框就是那層皮。? 橘子皮。矾飞。柚子皮一膨。。橙子皮洒沦。豹绪。。
語法：
border:border-width||border-style||border-color
邊框?qū)傩浴O置邊框樣式（border-style）
邊框樣式用于定義頁面中邊框的風格申眼，常用屬性值如下：
none：沒有邊框即忽略所有邊框的寬度（默認值）
solid：邊框為單實線(最為常用的)
dashed：邊框為虛線 ?
dotted：邊框為點線
double：邊框為雙實線
盒子邊框?qū)懛偨Y(jié)表
設置內(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:寬度 樣式 顏色;
樣式綜合設置border-style:上邊 [右邊 下邊 左邊];none無（默認）瞒津、solid單實線、dashed虛線括尸、dotted點線巷蚪、double雙實線
寬度綜合設置border-width:上邊 [右邊 下邊 左邊];像素值
顏色綜合設置border-color:上邊 [右邊 下邊 左邊];顏色值、#十六進制濒翻、rgb(r,g,b)屁柏、rgb(r%,g%,b%)
邊框綜合設置border:四邊寬度 四邊樣式 四邊顏色;
表格的細線邊框
以前學過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來有送。 讓我們真的相信淌喻，CSS就是我們的白馬王子（白雪公主）。
table{ border-collapse:collapse; }? collapse 單詞是合并的意思
border-collapse:collapse; 表示邊框合并`1在一起雀摘。
圓角邊框(CSS3)
從此以后裸删，我們的世界不只有矩形。radius 半徑（距離）
語法格式：
border-radius: 左上角? 右上角? 右下角? 左下角;
內(nèi)邊距（padding）
padding屬性用于設置內(nèi)邊距届宠。? 是指 邊框與內(nèi)容之間的距離烁落。
padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
注意：? 后面跟幾個數(shù)值表示的意思是不一樣的乘粒。
值的個數(shù)表達意思
1個值padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素
2個值padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3個值padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4個值padding:上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針
課堂案例：? 新浪導航
外邊距（margin）
margin屬性用于設置外邊距豌注。? 設置外邊距會在元素之間創(chuàng)建“空白”， 這段空白通常不能放置其他內(nèi)容灯萍。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距? 下外邊距? 左外邊
取值順序跟內(nèi)邊距相同轧铁。
外邊距實現(xiàn)盒子居中
可以讓一個盒子實現(xiàn)水平居中，需要滿足一下兩個條件：
必須是塊級元素旦棉。? ?
盒子必須指定了寬度（width）
然后就給左右的外邊距都設置為auto齿风，就可使塊級元素水平居中。
實際工作中常用這種方式進行網(wǎng)頁布局绑洛，示例代碼如下：
.header{width:960px;margin:0auto;}
文字盒子居中圖片和背景區(qū)別
文字水平居中是? text-align: center
盒子水平居中? 左右margin 改為 auto
text-align:center;/*? 文字居中水平 */
margin:10pxauto;/* 盒子水平居中? 左右margin 改為 auto 就闊以了 */
插入圖片 我們用的最多 比如產(chǎn)品展示類
背景圖片我們一般用于小圖標背景 或者 超大背景圖片
sectionimg{
? ? ? ? width:200px;/* 插入圖片更改大小 width 和 height */
? ? ? ? height:210px;
? ? ? ? margin-top:30px;/* 插入圖片更改位置 可以用margin 或padding? 盒模型 */
? ? ? ? margin-left:50px;/* 插入當圖片也是一個盒子 */
? ? }
aside{
? ? ? ? width:400px;
? ? ? ? height:400px;
? ? ? ? border:1pxsolidpurple;
? ? ? ? background:#fffurl(images/sun.jpg)no-repeat;
? ? ? ? background-size:200px210px;/*? 背景圖片更改大小只能用 background-size */
? ? ? ? background-position:30px50px;/* 背景圖片更該位置 我用 background-position */
? ? }
清除元素的默認內(nèi)外邊距
為了更方便地控制網(wǎng)頁中的元素救斑，制作網(wǎng)頁時，可使用如下代碼清除元素的默認內(nèi)外邊距：
* {
padding:0;/* 清除內(nèi)邊距 */
margin:0;/* 清除外邊距 */
}
注意：? 行內(nèi)元素是只有左右外邊距的真屯，是沒有上下外邊距的脸候。 內(nèi)邊距，在ie6等低版本瀏覽器也會有問題。
我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距就好了运沦。
外邊距合并
使用margin定義塊元素的垂直外邊距時泵额，可能會出現(xiàn)外邊距的合并。
相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素相遇時携添，如果上面的元素有下外邊距margin-bottom嫁盲，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和烈掠，而是兩者中的較大者羞秤。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
解決方案：? 避免就好了左敌。
嵌套塊元素垂直外邊距的合并
對于兩個嵌套關(guān)系的塊元素锥腻，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發(fā)生合并母谎，合并后的外邊距為兩者中的較大者瘦黑，即使父元素的上外邊距為0，也會發(fā)生合并奇唤。
解決方案：
可以為父元素定義1像素的上邊框或上內(nèi)邊距幸斥。
可以為父元素添加overflow:hidden。
待續(xù)咬扇。甲葬。。懈贺。
content寬度和高度
使用寬度屬性width和高度屬性height可以對盒子的大小進行控制经窖。
width和height的屬性值可以為不同單位的數(shù)值或相對于父元素的百分比%，實際工作中最常用的是像素值梭灿。
大多數(shù)瀏覽器画侣，如Firefox、IE6及以上版本都采用了W3C規(guī)范堡妒，符合CSS規(guī)范的盒子模型的總寬度和總高度的計算原則是：
? /*外盒尺寸計算（元素空間尺寸）*/
? Element空間高度 = content height + padding + border + margin
? Element 空間寬度 = content width + padding + border + margin
? /*內(nèi)盒尺寸計算（元素實際大信渎摇）*/
? Element Height = content height + padding + border （Height為內(nèi)容高度）
? Element Width = content width + padding + border （Width為內(nèi)容寬度）
注意：
1、寬度屬性width和高度屬性height僅適用于塊級元素皮迟，對行內(nèi)元素無效（ img 標簽和 input除外）搬泥。
2、計算盒子模型的總高度時伏尼，還應考慮上下兩個盒子垂直外邊距合并的情況忿檩。
3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度爆阶，則padding 不會影響本盒子大小燥透。
盒子模型布局穩(wěn)定性
開始學習盒子模型代赁，同學們最大的困惑就是， 分不清內(nèi)外邊距的使用兽掰，什么情況下使用內(nèi)邊距芭碍，什么情況下使用外邊距？
答案是：? 其實他們大部分情況下是可以混用的孽尽。? 就是說窖壕，你用內(nèi)邊距也可以，用外邊距也可以杉女。 你覺得哪個方便瞻讽，就用哪個。
但是熏挎，總有一個最好用的吧速勇，我們根據(jù)穩(wěn)定性來分，建議如下：
按照 優(yōu)先使用? 寬度 （width）? 其次 使用內(nèi)邊距（padding）? ? 再次? 外邊距（margin）坎拐。?
? width >? padding? > ? margin ?
原因：
margin 會有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用烦磁。
padding? 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用哼勇。
width? 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來做都伪。
盒子陰影
語法格式：
box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色? 內(nèi)/外陰影；
前兩個屬性是必須寫的积担。其余的可以省略陨晶。
外陰影 (outset) 但是不能寫? ? 默認? ? ? 想要內(nèi)陰影? inset
div{
? ? ? ? ? ? width:200px;
? ? ? ? ? ? height:200px;
? ? ? ? ? ? border:10pxsolidred;
? ? ? ? ? ? /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);? */
? ? ? ? ? ? /* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色? 內(nèi)/外陰影帝璧； */
? ? ? ? ? ? box-shadow:015px30pxrgba(0,0,0,.4);
}
浮動(float)
普通流(normal flow)
這個單詞很多人翻譯為 文檔流 先誉， 字面翻譯? 普通流 或者標準流都可以。
前面我們說過的烁，網(wǎng)頁布局的核心褐耳，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置撮躁？?
CSS的定位機制有3種：普通流（標準流）漱病、浮動和定位。
html語言當中另外一個相當重要的概念----------標準流把曼！或者普通流。普通流實際上就是一個網(wǎng)頁內(nèi)標簽元素正常從上到下漓穿，從左到右排列順序的意思嗤军，比如塊級元素會獨占一行，行內(nèi)元素會按順序依次前后排列晃危；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局叙赚。
浮動(float)
浮動最早是用來控制圖片老客，以便達到其他元素（特別是文字）實現(xiàn)“環(huán)繞”圖片的效果。
后來震叮，我們發(fā)現(xiàn)浮動有個很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題胧砰，用浮動的特性來布局了。（CSS3已經(jīng)我們真正意義上的網(wǎng)頁布局苇瓣，具體CSS3我們會詳細解釋）
什么是浮動尉间？
元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程击罪。
在CSS中哲嘲，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{float:屬性值;}
屬性值描述
left元素向左浮動
right元素向右浮動
none元素不浮動（默認值）
浮動詳細內(nèi)幕特性
浮動脫離標準流媳禁，不占位置眠副，會影響標準流。浮動只有左右浮動竣稽。
浮動首先創(chuàng)建包含塊的概念（包裹）囱怕。就是說， 浮動的元素總是找理它最近的父級元素對齊毫别。但是不會超出內(nèi)邊距的范圍光涂。
浮動的元素排列位置，跟上一個元素（塊級）有關(guān)系拧烦。如果上一個元素有浮動忘闻，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流恋博，則A元素的頂部會和上一個元素的底部對齊齐佳。
由2可以推斷出，一個父盒子里面的子盒子债沮，如果其中一個子級有浮動的炼吴，則其他子級都需要浮動。這樣才能一行對齊顯示疫衩。
元素添加浮動后硅蹦，元素會具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認的內(nèi)容多少浮動根據(jù)元素書寫的位置來顯示相應的浮動闷煤。
總結(jié)：? 浮動 --->? ?
浮動的目的就是為了讓多個塊級元素同一行上顯示童芹。
float? ? ? 浮 漏 特?
浮：? ? 加了浮動的元素盒子是浮起來的鲤拿，漂浮在其他的標準流盒子上面假褪。漏：? ? 加了浮動的盒子，不占位置的近顷，它浮起來了生音，它原來的位置漏 給了標準流的盒子宁否。特：? ? 特別注意，首先浮動的盒子需要和標準流的父級搭配使用缀遍， 其次 特別的注意浮動可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性慕匠。
版心和布局流程
閱讀報紙時容易發(fā)現(xiàn)，雖然報紙中的內(nèi)容很多域醇，但是經(jīng)過合理地排版台谊，版面依然清晰、易讀歹苦。同樣青伤，在制作網(wǎng)頁時，要想使頁面結(jié)構(gòu)清晰殴瘦、有條理狠角，也需要對網(wǎng)頁進行“排版”。
“版心”(可視區(qū)) 是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域蚪腋。一般在瀏覽器窗口中水平居中顯示丰歌，常見的寬度值為960px、980px屉凯、1000px立帖、1200px等。
布局流程
為了提高網(wǎng)頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：
1师倔、確定頁面的版心（可視區(qū)）。
2绑咱、分析頁面中的行模塊，以及每個行模塊中的列模塊枢泰。
3描融、制作HTML結(jié)構(gòu) 。
4衡蚂、CSS初始化窿克，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個模塊毛甲。
一列固定寬度且居中
最普通的年叮，最為常用的結(jié)構(gòu)
兩列左窄右寬型
比如小米? ? ?小米官網(wǎng)?
通欄平均分布型
比如錘子? ? ?錘子官網(wǎng)?
清除浮動
人生就像乘坐北京地鐵一號線：
途經(jīng)國貿(mào)，羨慕繁華丽啡；
途經(jīng)天安門谋右，幻想權(quán)力；
途經(jīng)金融街补箍，夢想發(fā)財改执；
經(jīng)過公主墳，遙想華麗家族坑雅；
經(jīng)過玉泉路辈挂，依然雄心勃勃…
這時，有個聲音飄然入耳:乘客你好,八寶山馬上就要到了裹粤！
頓時醒悟：人生苦短终蒂，有始有終。
好比我們的浮動遥诉，有浮動開始拇泣，則就應該有浮動結(jié)束。
為什么要清除浮動
我們前面說過矮锈，浮動本質(zhì)是用來做一些文字混排效果的霉翔，但是被我們拿來做布局用，則會有很多的問題出現(xiàn)苞笨， 但是债朵，你不能說浮動不好 。?
由于浮動元素不再占用原文檔流的位置瀑凝，所以它會對后面的元素排版產(chǎn)生影響序芦，為了解決這些問題，此時就需要在該元素中清除浮動粤咪。
準確地說谚中，并不是清除浮動，而是清除浮動后造成的影響
如果浮動一開始就是一個美麗的錯誤寥枝，那么請用正確的方法挽救它宪塔。
清除浮動本質(zhì)
清除浮動主要為了解決父級元素因為子級浮動引起內(nèi)部高度為0 的問題。
清除浮動的方法
其實本質(zhì)叫做閉合浮動更好一些, 記住脉顿，清除浮動就是把浮動的盒子圈到里面蝌麸，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在CSS中艾疟，clear屬性用于清除浮動来吩，其基本語法格式如下：
選擇器{clear:屬性值;}
屬性值描述
left不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響）
right不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響）
both同時清除左右兩側(cè)浮動的影響
額外標簽法
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如<divstyle=”clear:both”></div>，或則其他標簽br等亦可蔽莱。
優(yōu)點： 通俗易懂弟疆，書寫方便
缺點： 添加許多無意義的標簽，結(jié)構(gòu)化較差盗冷。? 我只能說怠苔，w3c你推薦的方法我不接受，你不值得擁有仪糖。柑司。迫肖。
父級添加overflow屬性方法
可以通過觸發(fā)BFC的方式，可以實現(xiàn)清除浮動效果攒驰。（BFC后面講解）
可以給父級添加：overflow為hidden|auto|scroll都可以實現(xiàn)蟆湖。
優(yōu)點：? 代碼簡潔
缺點：? 內(nèi)容增多時候容易造成不會自動換行導致內(nèi)容被隱藏掉，無法顯示需要溢出的元素玻粪。
使用after偽元素清除浮動
:after 方式為空元素的升級版隅津，好處是不用單獨加標簽了
使用方法：
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;? }
.clearfix{*zoom:1;}/* IE6、7 專有 */
優(yōu)點： 符合閉合浮動思想? 結(jié)構(gòu)語義化正確
缺點： 由于IE6-7不支持:after劲室，使用 zoom:1觸發(fā) hasLayout伦仍。
代表網(wǎng)站： 百度、淘寶網(wǎng)很洋、網(wǎng)易等
注意： content:"."? 里面盡量跟一個小點充蓝，或者其他，盡量不要為空蹲缠，否則再firefox 7.0前的版本會有生成空格棺克。
使用before和after雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after{
content:"";
display:table;/* 這句話可以出發(fā)BFC BFC可以清除浮動,BFC我們后面講 */
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
優(yōu)點：? 代碼更簡潔
缺點：? 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout线定。
代表網(wǎng)站： 小米娜谊、騰訊等
定位(position)
如果，說浮動斤讥， 關(guān)鍵在一個 “浮” 字上面纱皆， 那么 我們的定位，關(guān)鍵在于一個 “位” 上芭商。
PS: 定位是我們CSS算是數(shù)一數(shù)二難點的了派草，但是，你務必要學好它铛楣，我們CSS離不開定位近迁，特別是后面的js特效，天天和定位打交道簸州。不要抵觸它鉴竭，反而要愛上它，它可以讓我們工作更加輕松哦岸浑！
為什么要用定位搏存？
那么定位，最長運用的場景再那里呢矢洲？? 來看幾幅圖片璧眠，你一定會有感悟！
第一幅圖， 小黃色塊可以再圖片上移動：
第二幅圖责静， 左右箭頭壓住圖片：
如果用標準流或者浮動袁滥，實現(xiàn)會比較復雜或者難以實現(xiàn)，此時我們用定位來做
元素的定位屬性
元素的定位屬性主要包括定位模式和邊偏移兩部分泰演。
1呻拌、邊偏移
邊偏移屬性描述
top頂端偏移量葱轩，定義元素相對于其父元素上邊線的距離
bottom底部偏移量睦焕，定義元素相對于其父元素下邊線的距離
left左側(cè)偏移量，定義元素相對于其父元素左邊線的距離
right右側(cè)偏移量靴拱，定義元素相對于其父元素右邊線的距離
也就說垃喊，以后定位要和這邊偏移搭配使用了， 比如 top: 100px;? left: 30px; 等等
2袜炕、定位模式(定位的分類)
在CSS中本谜，position屬性用于定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值;}
position屬性的常用值
值描述
static自動定位（默認定位方式）
relative相對定位偎窘，相對于其原文檔流的位置進行定位
absolute絕對定位乌助，相對于其上一個已經(jīng)定位的父元素進行定位
fixed固定定位，相對于瀏覽器窗口進行定位
靜態(tài)定位(static)
靜態(tài)定位是所有元素的默認定位方式陌知，當position屬性的取值為static時他托，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個元素在HTML文檔流中默認的位置仆葡。
上面的話翻譯成白話：? 就是網(wǎng)頁中所有元素都默認的是靜態(tài)定位哦赏参！ 其實就是標準流的特性。
在靜態(tài)定位狀態(tài)下沿盅，無法通過邊偏移屬性（top把篓、bottom、left或right）來改變元素的位置腰涧。
PS： 靜態(tài)定位其實沒啥可說的韧掩。
相對定位relative(自戀型)
小笑話：
剛剛看到一個超級超級帥的帥哥，看得我都忍不住想和他搞基了窖铡。世間怎會有如此之完美的男人疗锐。我和他就這樣一動不動的對視著，就仿佛一見鐘情万伤。時間也在這一瞬間停止了窒悔。直到我的手麻了。才戀戀不舍的放下鏡子敌买。简珠。。。
相對定位是將元素相對于它在標準流中的位置進行定位聋庵，當position屬性的取值為relative時膘融，可以將元素定位于相對位置。
對元素設置相對定位后祭玉，可以通過邊偏移屬性改變元素的位置氧映，但是它在文檔流中的位置仍然保留。如下圖所示脱货，即是一個相對定位的效果展示：
注意：?
相對定位最重要的一點是岛都，它可以通過邊偏移移動位置，但是原來的所占的位置振峻，繼續(xù)占有臼疫。
其次，每次移動的位置扣孟，是以自己的左上角為基點移動（相對于自己來移動位置）
就是說烫堤，相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它凤价。（相對定位不脫標）
如果說浮動的主要目的是 讓多個塊級元素一行顯示鸽斟，那么定位的主要價值就是 移動位置， 讓盒子到我們想要的位置上去利诺。
絕對定位absolute (拼爹型)
小笑話：
吃早飯時富蓄，老婆往兒子碗里放了兩個煎蛋，兒子全給了我立轧，還一本正經(jīng)地說：“爸爸格粪，多吃點，男人養(yǎng)家不容易氛改≌饰” <br/>
我一陣感動，剛想夸他兩句胜卤。
兒子接著說：“以后全靠你讓我拼爹了疆导！”
[注意] 如果文檔可滾動，絕對定位元素會隨著它滾動葛躏，因為元素最終會相對于正常流的某一部分定位澈段。
當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位舰攒。
注意：? ? 絕對定位最重要的一點是败富，它可以通過邊偏移移動位置，但是它完全脫標摩窃，完全不占位置兽叮。
父級沒有定位
若所有父元素都沒有定位芬骄，以瀏覽器為準對齊(document文檔)。
父級有定位
絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對鹦聪、固定或相對定位）的父元素（祖先）進行定位账阻。
子絕父相
這個“子絕父相”太重要了，是我們學習定位的口訣泽本，時時刻刻記住的淘太。
這句話的意思是 子級是絕對定位的話， 父級要用相對定位规丽。
首先蒲牧， 我們說下， 絕對定位是將元素依據(jù)最近的已經(jīng)定位絕對嘁捷、固定或相對定位）的父元素（祖先）進行定位造成。
就是說， 子級是絕對定位雄嚣，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以）喘蟆，就是說缓升， 子絕父絕，子絕父相都是正確的蕴轨。
但是港谊，在我們網(wǎng)頁布局的時候， 最常說的 子絕父相是怎么來的呢橙弱？ 請看如下圖：
所以歧寺，我們可以得出如下結(jié)論：
因為子級是絕對定位，不會占有位置棘脐， 可以放到父盒子里面的任何一個地方斜筐。
父盒子布局時，需要占有位置蛀缝，因此父親只能是 相對定位.
這就是子絕父相的由來顷链。
絕對定位的盒子水平/垂直居中
普通的盒子是左右margin 改為 auto就可， 但是對于絕對定位就無效了
定位的盒子也可以水平或者垂直居中屈梁，有一個算法嗤练。
首先left 50%? 父盒子的一半大小
然后走自己外邊距負的一半值就可以了 margin-left。
固定定位fixed(認死理型)
固定定位是絕對定位的一種特殊形式在讶，類似于 正方形是一個特殊的 矩形煞抬。它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當position屬性的取值為fixed時构哺，即可將元素的定位模式設置為固定定位革答。
當對元素設置固定定位后，它將脫離標準文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置蝗碎。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化湖笨，該元素都會始終顯示在瀏覽器窗口的固定位置。
固定定位有兩點：
固定定位的元素跟父親沒有任何關(guān)系蹦骑，只認瀏覽器慈省。
固定定位完全脫標，不占有位置眠菇，不隨著滾動條滾動边败。
記憶法：? 就類似于孫猴子， 無父無母捎废，好不容易找到一個可靠的師傅（瀏覽器）笑窜，就聽的師傅的，別的都不聽登疗。
ie6等低版本瀏覽器不支持固定定位排截。
疊放次序（z-index）
當對多個元素同時設置定位時，定位元素之間有可能會發(fā)生重疊辐益。
在CSS中断傲，要想調(diào)整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性智政，其取值可為正整數(shù)认罩、負整數(shù)和0。
比如：? z-index: 2;
注意：
z-index的默認屬性值是0续捂，取值越大垦垂，定位元素在層疊元素中越居上。
如果取值相同牙瓢，則根據(jù)書寫順序劫拗，后來居上。
后面數(shù)字一定不能加單位一罩。
只有相對定位杨幼，絕對定位，固定定位有此屬性聂渊，其余標準流差购，浮動，靜態(tài)定位都無此屬性汉嗽，亦不可指定此屬性欲逃。
四種定位總結(jié)
定位模式是否脫標占有位置是否可以使用邊偏移移動位置基準
靜態(tài)static不脫標，正常模式不可以正常模式
相對定位relative不脫標饼暑，占有位置可以相對自身位置移動（自戀型）
絕對定位absolute完全脫標稳析，不占有位置可以相對于定位父級移動位置（拼爹型）
固定定位fixed完全脫標洗做，不占有位置可以相對于瀏覽器移動位置（認死理型）
定位模式轉(zhuǎn)換
跟 浮動一樣， 元素添加了 絕對定位和固定定位之后彰居， 元素模式也會發(fā)生轉(zhuǎn)換诚纸， 都轉(zhuǎn)換為 行內(nèi)塊模式，
** 因此 比如 行內(nèi)元素 如果添加了 絕對定位或者 固定定位后 浮動后陈惰，可以不用轉(zhuǎn)換模式畦徘，直接給高度和寬度就可以了。**
元素的顯示與隱藏
在CSS中有三個顯示和隱藏的單詞比較常見抬闯，我們要區(qū)分開井辆，他們分別是 display visibility 和 overflow。
他們的主要目的是讓一個元素在頁面中消失溶握，但是不在文檔源碼中刪除杯缺。 最常見的是網(wǎng)站廣告，當我們點擊類似關(guān)閉不見了睡榆，但是我們重新刷新頁面萍肆，它們又會出現(xiàn)和你玩躲貓貓！肉微！
display 顯示
display 設置或檢索對象是否及如何顯示匾鸥。
display : none 隱藏對象 與它相反的是 display:block 除了轉(zhuǎn)換為塊級元素之外，同時還有顯示元素的意思碉纳。
特點： 隱藏之后，不再保留位置馏艾。
visibility 可見性
設置或檢索是否顯示對象劳曹。
visible : 對象可視
hidden : 對象隱藏
特點： 隱藏之后，繼續(xù)保留原有位置琅摩。（停職留薪）
overflow 溢出
檢索或設置當對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容铁孵。
visible : 不剪切內(nèi)容也不添加滾動條。
auto : 超出自動顯示滾動條房资，不超出不顯示滾動條
hidden : 不顯示超過對象尺寸的內(nèi)容蜕劝，超出的部分隱藏掉
scroll : 不管超出內(nèi)容否，總是顯示滾動條
CSS高級技巧
CSS用戶界面樣式
所謂的界面樣式轰异， 就是更改一些用戶操作樣式岖沛， 比如 更改用戶的鼠標樣式， 表單輪廓等搭独。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制婴削，因此我們就放棄了。 防止表單域拖拽
鼠標樣式cursor
設置或檢索在對象上移動的鼠標指針采用何種系統(tǒng)預定義的光標形狀牙肝。
cursor :? default? 小白 | pointer? 小手? | move? 移動? |? text? 文本
鼠標放我身上查看效果哦：
<ul>
<listyle="cursor:default">我是小白</li>
<listyle="cursor:pointer">我是小手</li>
<listyle="cursor:move">我是移動</li>
<listyle="cursor:text">我是文本</li>
</ul>
盡量不要用hand? 因為 火狐不支持? ? pointer ie6以上都支持的盡量用
輪廓 outline
是繪制于元素周圍的一條線唉俗，位于邊框邊緣的外圍嗤朴，可起到突出元素的作用。
outline:outline-color||outline-style||outline-width
但是我們都不關(guān)心可以設置多少虫溜，我們平時都是去掉的雹姊。
最直接的寫法是 ：? outline: 0;? 或者? outline: none;
<inputtype="text"style="outline: 0;"/>
防止拖拽文本域resize
resize：none? ? 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域。
右下角可以拖拽：
右下角不可以拖拽：
<textareastyle="resize: none;"></textarea>
vertical-align 垂直對齊
以前我們講過讓帶有寬度的塊級元素居中對齊衡楞，是margin: 0 auto;
以前我們還講過讓文字居中對齊吱雏，是 text-align: center;
但是我們從來沒有講過有垂直居中的屬性， 我們的媽媽一直很擔心我們的垂直居中怎么做寺酪。
vertical-align 垂直對齊坎背， 這個看上去很美好的一個屬性， 實際有著不可捉摸的脾氣寄雀，否則我們也不會這么晚來講解得滤。
vertical-align:baseline|top|middle|bottom
設置或檢索對象內(nèi)容的垂直對其方式。
vertical-align 不影響塊級元素中的內(nèi)容對齊盒犹，它只針對于 行內(nèi)元素或者行內(nèi)塊元素懂更，特別是行內(nèi)塊元素， 通常用來控制圖片/表單與文字的對齊急膀。
圖片沮协、表單和文字對齊
所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關(guān)系了卓嫂。 默認的圖片會和文字基線對齊慷暂。
去除圖片底側(cè)空白縫隙
有個很重要特性你要記住： 圖片或者表單等行內(nèi)塊元素晨雳，他的底線會和父級盒子的基線對齊行瑞。這樣會造成一個問題，就是圖片底側(cè)會有一個空白縫隙餐禁。
解決的方法就是：?
給img vertical-align:middle | top等等血久。? 讓圖片不要和基線對齊。
給img 添加 display：block; 轉(zhuǎn)換為塊級元素就不會存在問題了帮非。
溢出的文字隱藏
word-break:自動換行
normal? 使用瀏覽器默認的換行規(guī)則氧吐。
break-all? 允許在單詞內(nèi)換行。
keep-all? ? 只能在半角空格或連字符處換行末盔。
主要處理英文單詞
white-space
white-space設置或檢索對象內(nèi)文本顯示方式筑舅。通常我們使用于強制一行顯示內(nèi)容
normal : 默認處理方式nowrap : 強制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標簽對象才換行庄岖。
可以處理中文
text-overflow 文字溢出
text-overflow : clip | ellipsis
設置或檢索是否使用一個省略標記（...）標示對象內(nèi)文本的溢出
clip : 不顯示省略標記（...）豁翎，而是簡單的裁切
ellipsis : 當對象內(nèi)文本溢出時顯示省略標記（...）
注意一定要首先強制一行內(nèi)顯示，再次和overflow屬性? 搭配使用
#CSS精靈技術(shù)（sprite） 小妖精? 雪碧
精靈技術(shù)產(chǎn)生的背景
圖所示為網(wǎng)頁的請求原理圖隅忿，當用戶訪問一個網(wǎng)站時心剥，需要向服務器發(fā)送請求邦尊，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶。
然而优烧，一個網(wǎng)頁中往往會應用很多小的背景圖像作為修飾蝉揍，當網(wǎng)頁中的圖像過多時，服務器就會頻繁地接受和發(fā)送請求畦娄，這將大大降低頁面的加載速度又沾。為了有效地減少服務器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度熙卡，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites杖刷、CSS雪碧）。
精靈技術(shù)本質(zhì)
簡單地說驳癌，CSS精靈是一種處理網(wǎng)頁背景圖像的方式滑燃。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應用于網(wǎng)頁，這樣，當用戶訪問該頁面時匣屡，只需向服務發(fā)送一次請求，網(wǎng)頁中的背景圖像即可全部展示出來乐严。通常情況下，這個由很多小的背景圖像合成的大圖被稱為精靈圖（雪碧圖）衣摩，如下圖所示為京東網(wǎng)站中的一個精靈圖昂验。
精靈技術(shù)的使用
CSS 精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖），然而艾扮，各個網(wǎng)頁元素通常只需要精靈圖中不同位置的某個小圖凛篙，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image栏渺、background-repeat和background-position屬性進行背景定位，其中最關(guān)鍵的是使用background-position屬性精確地定位锐涯。
制作精靈圖
CSS 精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）磕诊，那我們要做的，就是把小圖拼合成一張大圖纹腌。
大部分情況下霎终，精靈圖都是網(wǎng)頁美工做。
我們精靈圖上放的都是小的裝飾性質(zhì)的背景圖片升薯。 插入圖片不能往上放莱褒。
我們精靈圖的寬度取決于最寬的那個背景。
我們可以橫向擺放也可以縱向擺放涎劈，但是每個圖片之間广凸，間隔至少隔開偶數(shù)像素合適阅茶。
在我們精靈圖的最低端，留一片空隙谅海，方便我們以后添加其他精靈圖脸哀。
結(jié)束語：? 小公司，背景圖片很少的情況扭吁，沒有必要使用精靈技術(shù)撞蜂，維護成本太高。 如果是背景圖片比較多侥袜，可以建議使用精靈技術(shù)蝌诡。
字體圖標
圖片是有諸多優(yōu)點的，但是缺點很明顯枫吧，比如圖片不但增加了總文件的大小浦旱，還增加了很多額外的"http請求"，這都會大大降低網(wǎng)頁的性能的由蘑。更重要的是圖片不能很好的進行“縮放”闽寡，因為圖片放大和縮小會失真。 我們后面會學習移動端響應式尼酿，很多情況下希望我們的圖標是可以縮放的爷狈。此時，一個非常重要的技術(shù)出現(xiàn)了裳擎，額不是出現(xiàn)了涎永，是以前就有，是被從新"寵幸"啦鹿响。羡微。 這就是字體圖標（iconfont).
字體圖標優(yōu)點
可以做出跟圖片一樣可以做的事情,改變透明度、旋轉(zhuǎn)度惶我，等..
但是本質(zhì)其實是文字妈倔，可以很隨意的改變顏色、產(chǎn)生陰影绸贡、透明效果等等...
本身體積更小盯蝴，但攜帶的信息并沒有削減。
幾乎支持所有的瀏覽器
移動端設備必備良藥...
字體圖標使用流程
總體來說听怕，字體圖標按照如下流程：
設計字體圖標
假如圖標是我們公司單獨設計捧挺，那就需要第一步了，這個屬于UI設計人員的工作尿瞭， 他們在 illustrator 或 Sketch 這類矢量圖形軟件里創(chuàng)建 icon圖標闽烙， 比如下圖：
? 之后保存為svg格式，然后給我們前端人員就好了声搁。
? 其實第一步黑竞，我們不需要關(guān)心捕发，只需要給我們這些圖標就可以了，如果圖標是大眾的摊溶，網(wǎng)上本來就有的爬骤，可以直接跳過第一步，進入第三步莫换。
上傳生成字體包
? 當UI設計人員給我們svg文件的時候霞玄，我們需要轉(zhuǎn)換成我們頁面能使用的字體文件， 而且需要生成的是兼容性的適合各個瀏覽器的拉岁。
? ? 推薦網(wǎng)站： http://icomoon.io
icomoon字庫
IcoMoon成立于2011年坷剧，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標喊暖，使它們成一字型惫企。 內(nèi)容種類繁多，非常全面陵叽，唯一的遺憾是國外服務器狞尔，打開網(wǎng)速較慢。
? 推薦網(wǎng)站： http://www.iconfont.cn/
阿里icon font字庫
這個是阿里媽媽M2UX的一個icon font字體圖標字庫巩掺，包含了淘寶圖標庫和阿里媽媽圖標庫偏序。可以使用AI制作圖標上傳生成胖替。 一個字研儒，免費，免費６懒睢端朵！
fontello
在線定制你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集燃箭，該項目也是開源的冲呢。
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
這是我最喜歡的字庫之一了，更新比較快招狸。目前已經(jīng)有369個圖標了碗硬。
Glyphicon Halflings
這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標瓢颅。
Icons8
提供PNG免費下載，像素大能到500PX
下載兼容字體包
剛才上傳完畢弛说， 網(wǎng)站會給我們把UI做的svg圖片轉(zhuǎn)換為我們的字體格式挽懦， 然后下載下來就好了
當然，我們不需要自己專門的圖標木人，是想網(wǎng)上找?guī)讉€圖標使用信柿，以上2步可以直接省略了冀偶， 直接到剛才的網(wǎng)站上找喜歡的下載使用吧。
字體引入到HTML
得到壓縮包之后渔嚷，最后一步进鸠，是最重要的一步了， 就是字體文件已經(jīng)有了形病，我們需要引入到我們頁面中客年。
首先把 以下4個文件放入到 fonts文件夾里面。 通俗的做法
第一步：在樣式里面聲明字體： 告訴別人我們自己定義的字體
@font-face{
font-family:'icomoon';
src:url('fonts/icomoon.eot?7kkyc2');
src:url('fonts/icomoon.eot?7kkyc2#iefix')format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2')format('truetype'),
url('fonts/icomoon.woff?7kkyc2')format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon')format('svg');
font-weight:normal;
font-style:normal;
}
第二步：給盒子使用字體
span{
? ? ? ? font-family:"icomoon";
? ? }
第三步：盒子里面添加結(jié)構(gòu)
span::before{
? ? ? ? content:"\e900";
? ? }
或者 ?
?
追加新圖標到原來庫里面
如果工作中漠吻，原來的字體圖標不夠用了量瓜，我們需要添加新的字體圖標，但是原來的不能刪除途乃，繼續(xù)使用绍傲，此時我們需要這樣做
把壓縮包里面的selection.json 從新上傳，然后耍共，選中自己想要新的圖標烫饼，從新下載壓縮包，替換原來文件即可试读。
##
引入ico圖標
代碼：? <link rel="shortcut icon" href="favicon.ico"? type="image/x-icon"/> ? ?
注意：
她(它)不是iconfont字體哦杠纵。
位置是放到 head 標簽中間。
后面的type="image/x-icon"? 屬性可以省略鹏往。（我相信你也愿意省略淡诗。）
為了兼容性，請將favicon.ico 這個圖標放到根目錄下伊履。（我們就不要任性了韩容，聽話放位置，省很多麻煩唐瀑。群凶。你好，我也好）
轉(zhuǎn)換ico圖標
我們可以自己做的圖片哄辣，轉(zhuǎn)換為 ico圖標请梢，以便放到我們站點里面。 http://www.bitbug.net/
網(wǎng)站優(yōu)化三大標簽
SEO是由英文Search Engine Optimization縮寫而來力穗， 中文意譯為“搜索引擎優(yōu)化”毅弧！SEO是指通過對網(wǎng)站進行站內(nèi)優(yōu)化、網(wǎng)站結(jié)構(gòu)調(diào)整当窗、網(wǎng)站內(nèi)容建設够坐、網(wǎng)站代碼優(yōu)化等)和站外優(yōu)化，從而提高網(wǎng)站的關(guān)鍵詞排名以及公司產(chǎn)品的曝光度。 簡單的說就是元咙，把產(chǎn)品做好梯影，搜索引擎就會介紹客戶來。?
我們現(xiàn)在階段主要進行站內(nèi)優(yōu)化庶香。網(wǎng)站優(yōu)化甲棍，我們應該要懂。赶掖。感猛。
網(wǎng)頁title 標題
title具有不可替代性，是我們的內(nèi)頁第一個重要標簽倘零，是搜索引擎了解網(wǎng)頁的入口唱遭，和對網(wǎng)頁主題歸屬的最佳判斷點。
建議：
首頁標題：網(wǎng)站名（產(chǎn)品名）- 網(wǎng)站的介紹? ?
例如：
京東(JD.COM)-綜合網(wǎng)購首選-正品低價呈驶、品質(zhì)保障拷泽、配送及時、輕松購物袖瞻！
小米商城 - 小米5s司致、紅米Note 4、小米MIX聋迎、小米筆記本官方網(wǎng)站
Description? 網(wǎng)站說明
對于關(guān)鍵詞的作用明顯降低脂矫，但由于很多搜索引擎，仍然大量采用網(wǎng)頁的MATA標簽中描述部分作為搜索結(jié)果的“內(nèi)容摘要”霉晕。 就是簡要說明我們網(wǎng)站的主要做什么的庭再。我們提倡，Description作為網(wǎng)站的總體業(yè)務和主題概括牺堰，多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話：010…”之類語句拄轻。
京東網(wǎng)：
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊伟葫、電腦恨搓、家居百貨、服裝服飾筏养、母嬰斧抱、圖書、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷渐溶、誠信的服務辉浦，為您提供愉悅的網(wǎng)上購物體驗!" />
注意點：
描述中出現(xiàn)關(guān)鍵詞，與正文內(nèi)容相關(guān)茎辐，這部分內(nèi)容是給人看的盏浙，所以要寫的很詳細眉睹，讓人感興趣， 吸引用戶點擊废膘。
同樣遵循簡短原則，字符數(shù)含空格在內(nèi)不要超過 120? 個漢字慕蔚。
補充在 title? 和 keywords? 中未能充分表述的說明.
用英文逗號 關(guān)鍵詞1,關(guān)鍵詞2
<meta name="description" content="小米商城直營小米公司旗下所有產(chǎn)品丐黄，囊括小米手機系列小米MIX、小米Note 2孔飒，紅米手機系列紅米Note 4灌闺、紅米4，智能硬件坏瞄，配件及小米生活周邊桂对，同時提供小米客戶服務及售后支持。" />
Keywords 關(guān)鍵字
Keywords是頁面關(guān)鍵詞鸠匀，是搜索引擎關(guān)注點之一蕉斜。Keywords應該限制在6～8個關(guān)鍵詞左右，電商類網(wǎng)站可以多 少許缀棍。
京東網(wǎng)：
<meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,京東" />
小米網(wǎng)：
<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />
BFC(塊級格式化上下文)
BFC(Block formatting context)
直譯為"塊級格式化上下文"宅此。
元素的顯示模式
我們前面講過 元素的顯示模式 display。
分為 塊級元素? 行內(nèi)元素? 行內(nèi)塊元素 爬范，其實父腕，它還有很多其他顯示模式。
那些元素會具有BFC的條件
不是所有的元素模式都能產(chǎn)生BFC青瀑，w3c 規(guī)范：
display 屬性為 block, list-item, table 的元素璧亮，會產(chǎn)生BFC.
大家有么有發(fā)現(xiàn)這個三個都是用來布局最為合理的元素，因為他們就是用來可視化布局斥难。
注意其他的枝嘶，display屬性，比如 line 等等蘸炸，他們創(chuàng)建的是 IFC 躬络，我們暫且不研究。
這個BFC 有著具體的布局特性：
有寬度和高度 搭儒， 有 外邊距margin? 有內(nèi)邊距padding 有邊框 border穷当。
就好比，你有了練習武術(shù)的體格了淹禾。 有潛力馁菜，有資質(zhì)。
什么情況下可以讓元素產(chǎn)生BFC
以上盒子具有BFC條件了铃岔，就是說有資質(zhì)了汪疮，但是怎樣觸發(fā)才會產(chǎn)生BFC峭火，從而創(chuàng)造這個封閉的環(huán)境呢？
在好比智嚷，你光有資質(zhì)還不行卖丸，你需要一定額外效果才能出發(fā)的武學潛力，要么你掉到懸崖下面盏道，撿到了一本九陰真經(jīng)稍浆，要么你學習葵花寶典，欲練此功必先....
同樣猜嘱，要給這些元素添加如下屬性就可以觸發(fā)BFC衅枫。
-float屬性不為none
-position為absolute或fixed
-display為inline-block, table-cell, table-caption, flex, inline-flex
-overflow不為visible。
BFC元素所具有的特性
BFC布局規(guī)則特性：
1.在BFC中朗伶，盒子從頂端開始垂直地一個接一個地排列.
2.盒子垂直方向的距離由margin決定弦撩。屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊
3.在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說论皆，則觸碰到右邊緣）益楼。
BFC的區(qū)域不會與浮動盒子產(chǎn)生交集，而是緊貼浮動邊緣纯丸。
計算BFC的高度時偏形，自然也會檢測浮動或者定位的盒子高度。
它是一個獨立的渲染區(qū)域觉鼻，只有Block-level box參與俊扭， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干坠陈。
白話文： 孩子在家里愿意怎么折騰都行萨惑，但是出了家門口，你就的乖乖的仇矾，不能影響外面的任何人庸蔼。
BFC的主要用途
BFC能用來做什么？
(1) 清除元素內(nèi)部浮動
只要把父元素設為BFC就可以清理子元素的浮動了贮匕，最常見的用法就是在父元素上設置overflow: hidden樣式姐仅，對于IE6加上zoom:1就可以了。
主要用到
計算BFC的高度時刻盐，自然也會檢測浮動或者定位的盒子高度掏膏。
(2) 解決外邊距合并問題
外邊距合并的問題。
主要用到
盒子垂直方向的距離由margin決定敦锌。屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊
屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊馒疹，那么我們創(chuàng)建不屬于同一個BFC，就不會發(fā)生margin重疊了乙墙。
(3) 制作右側(cè)自適應的盒子問題
主要用到
普通流體元素BFC后颖变，為了和浮動元素不產(chǎn)生任何交集生均，順著浮動邊緣形成自己的封閉上下文
BFC 總結(jié)
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素腥刹。反之也如此马胧。包括浮動，和外邊距合并等等衔峰，因此漓雅，有了這個特性，我們布局的時候就不會出現(xiàn)意外情況了朽色。
優(yōu)雅降級和漸進增強
什么是漸進增強（progressive enhancement）、優(yōu)雅降級（graceful degradation）呢组题？
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構(gòu)建頁面葫男，保證最基本的功能，然后再針對高級瀏覽器進行效果崔列、交互等改進和追加功能達到更好的用戶體驗梢褐。
類似 爬山，由低出往高處爬
? 優(yōu)雅降級 graceful degradation：
一開始就構(gòu)建完整的功能赵讯，然后再針對低版本瀏覽器進行兼容盈咳。
類似蹦極，由高處往低處下落
區(qū)別：漸進增強是向上兼容边翼，優(yōu)雅降級是向下兼容鱼响。
個人建議： 現(xiàn)在互聯(lián)網(wǎng)發(fā)展很快， 連微軟公司都拋棄了ie瀏覽器组底，轉(zhuǎn)而支持 edge這樣的高版本瀏覽器丈积，我們很多情況下沒有必要再時刻想著低版本瀏覽器了，而是一開始就構(gòu)建完整的效果债鸡，根據(jù)實際情況江滨，修補低版本瀏覽器問題。
