CSS

課程目標:

學會使用CSS選擇器

熟記CSS樣式和外觀屬性

熟練掌握CSS各種選擇器

熟練掌握CSS各種選擇器

熟練掌握CSS三種顯示模式

熟練掌握CSS背景屬性

熟練掌握CSS三大特性

熟練掌握CSS盒子模型

熟練掌握CSS浮動
10.熟練掌握CSS定位
11.熟練掌握CSS高級技巧強化CSS
typora-copy-images-to: media

CSS的發(fā)展歷程

從HTML被發(fā)明開始占业，樣式就以各種形式存在乞榨。不同的瀏覽器結(jié)合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性许师。
隨著HTML的成長犁嗅，為了滿足頁面設(shè)計者的要求膳犹，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)樣式表）沛鸵，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小缆八、對齊方式等）曲掰、圖片的外形（寬高、邊框樣式奈辰、邊距等）以及版面的布局等外觀顯示樣式栏妖。

CSS以HTML為基礎(chǔ)，提供了豐富的功能奖恰，如字體吊趾、顏色、背景的控制及整體排版等瑟啃，而且還可以針對不同的瀏覽器設(shè)置不同的樣式论泛。

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

CSS可以寫到那個位置？是不是一定寫到html文件里面呢蛹屿？

內(nèi)聯(lián)樣式表

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

<head>
<style type="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)樣式诚镰、行間樣式、內(nèi)嵌樣式。是通過標簽的style屬性來設(shè)置元素的樣式怕享，其基本語法格式如下：

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

語法中style是標簽的屬性执赡，實際上任何HTML標簽都擁有style屬性，用來設(shè)置行內(nèi)式函筋。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同沙合，行內(nèi)式只對其所在的標簽及嵌套在其中的子標簽起作用。

外部樣式表（外鏈式）

鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中跌帐，通過link標簽將外部樣式表文件鏈接到HTML文檔中首懈，其基本語法格式如下：

<head>
  <link href="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)是對該對象設(shè)置的具體樣式蛹磺。
2.屬性和屬性值以“鍵值對”的形式出現(xiàn)。
3.屬性是對指定的對象設(shè)置的樣式屬性野崇，例如字體大小称开、文本顏色等。
4.屬性和屬性值之間用英文“:”連接乓梨。
5.多個“鍵值對”之間用英文“;”進行區(qū)分。
可以用段落 和 表格的對齊的演示清酥。

選擇器（重點）

要想將CSS樣式應(yīng)用于特定的HTML元素扶镀，首先需要找到該目標元素。在CSS中焰轻，執(zhí)行這一任務(wù)的樣式規(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)一樣式臣镣，同時這也是他的缺點辅愿，不能設(shè)計差異化樣式。

標簽選擇器可以把某一類標簽全部選擇出來 div span

類選擇器

類選擇器使用“.”（英文點號）進行標識忆某，后面緊跟類名点待，其基本語法格式如下：

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

 標簽調(diào)用的時候用 class=“類名”  即可。

類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式弃舒。可以選擇一個或者多個標簽

<img src="media/good.png" />小技巧：

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

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

3.不要純數(shù)字苗踪、中文等命名， 盡量使用英文字母來表示坝冕。

命名是我們通俗約定的徒探，但是沒有規(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>

多類名選擇器

我們可以給標簽指定多個類名喂窟，從而達到更多的選擇目的测暗。

注意：

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

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

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

id選擇器

id選擇器使用“#”進行標識稳摄，后面緊跟id名稚字，其基本語法格式如下：

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

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

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

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

W3C標準規(guī)定，在同一個頁面內(nèi)减噪，不允許有相同名字的id對象出現(xiàn)短绸，但是允許相同名字的class车吹。

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

id選擇器好比人的身份證號碼窄驹，全中國是唯一的，不得重復(fù)证逻。只能使用一次乐埠。

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

通配符選擇器

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

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

例如下面的代碼洞拨，使用通配符選擇器定義CSS樣式扯罐，清除所有HTML標記的默認邊距。

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

注意：

這個通配符選擇器烦衣，就像我們的電影明星中的夢中情人歹河，想想它就好了，但是它不會和你過日子花吟。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用于設(shè)置字號秸歧，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位衅澈。其中键菱，相對長度單位比較常用，推薦使用像素單位px今布，絕對長度單位使用較少经备。具體如下：

font-family:字體

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

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

可以同時指定多個字體纷闺，中間以逗號隔開，表示如果瀏覽器不支持第一個字體份蝴，則會嘗試下一個犁功，直到找到合適的字體。

<img src="media/good.png" />常用技巧：

1. 現(xiàn)在網(wǎng)頁中普遍使用14px+婚夫。
2. 盡量使用偶數(shù)的數(shù)字字號波桩。ie6等老式瀏覽器支持奇數(shù)會有bug。
3. 各種字體之間必須使用英文狀態(tài)下的逗號隔開请敦。
4. 中文字體需要加英文狀態(tài)下的引號镐躲，英文字體一般不需要加引號。當需要設(shè)置英文字體時侍筛，英文字體名必須位于中文字體名之前萤皂。
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ù)倍）。

<img src="media/good.png" />小技巧：

數(shù)字 400 等價于 normal迟蜜，而 700 等價于 bold刹孔。  但是我們更喜歡用數(shù)字來表示。

font-style:字體風格

字體傾斜除了用 i 和 em 標簽之外娜睛，可以使用CSS 來實現(xiàn)髓霞，但是CSS 是沒有語義的。

font-style屬性用于定義字體風格微姊，如設(shè)置斜體酸茴、傾斜或正常字體，其可用屬性值如下：

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

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

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

<img src="media/good.png" />小技巧：

平時我們很少給文字加斜體酪穿，反而喜歡給斜體標簽（em，i）改為普通模式晴裹。

font:綜合設(shè)置字體樣式

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

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

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

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

CSS外觀屬性

color:文本顏色

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

1.預(yù)定義的顏色值元媚，如red轧叽，green，blue等刊棕。

2.十六進制炭晒，如#FF0000，#FF6600甥角，#29D794等网严。實際工作中，十六進制是最常用的定義顏色的方式蜈膨。

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

需要注意的是翁巍，如果使用RGB代碼的百分比顏色值驴一，取值為0時也不能省略百分號，必須寫為0%灶壶。

line-height:行間距

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

一般情況下，行距比字號大7.8像素左右就可以了胚宦。

text-align:水平對齊方式

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

left：左對齊（默認值）

right：右對齊

center：居中對齊

text-indent:首行縮進

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

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

text-decoration 文本的裝飾

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

值	描述
none	默認鹤盒。定義標準的文本蚕脏。
underline	定義文本下的一條線侦副。下劃線也是我們鏈接自帶的
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線蝗锥。

<img src="media/good.png" />小技巧：

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

CSS復(fù)合選擇器

復(fù)合選擇器是由兩個或多個基礎(chǔ)選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽葱蝗。

交集選擇器

交集選擇器由兩個選擇器構(gòu)成穴张，其中第一個為標簽選擇器，第二個為class選擇器两曼，兩個選擇器之間不能有空格皂甘，如h3.special。

記憶技巧：

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

比如：   p.one   選擇的是： 類名為 .one  的 段落標簽偿枕。

并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過<strong style="color:#f00">逗號</strong>連接而成的，任何形式的選擇器（包括標簽選擇器户辫、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。

測試題

<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ù)：

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

偽類選擇器

偽類選擇器用于向某些選擇器添加特殊的效果就漾。比如給鏈接添加特殊效果呐能，比如可以選擇第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ù)一整行或多整行，可以對其設(shè)置寬度灌曙、高度菊碟、對齊等屬性，常用于網(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)活喊，一般不可以設(shè)置寬度、高度量愧、對齊等屬性钾菊，常用于控制頁面中文本的樣式。

常見的行內(nèi)元素有<a>侠畔、<strong>结缚、<b>、<em>软棺、<i>、<del>尤勋、<s>喘落、<ins>、<u>最冰、<span>等，其中<span>標簽最典型的行內(nèi)元素。

<img src="media/wf.jpg" /> 我一樣重要

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

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

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

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

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

<img src="media/w.jpg" /> 注意：

只有文字才能組成段落因此 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可以設(shè)置，垂直方向的無效扰路。
（3）默認寬度就是它本身內(nèi)容的寬度尤溜。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。

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

在行內(nèi)元素中有幾個特殊的標簽——<img />汗唱、<input />宫莱、<td>，可以對它們設(shè)置寬高和對齊屬性哩罪，有些資料可能會稱它們?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;
}

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

示例：

/* 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樣式的疊加。

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

比如先給某個標簽指定了內(nèi)部文字顏色為紅色伊约，接著又指定了顏色為藍色，此時出現(xiàn)一個標簽指定了相同樣式不同值的情況孕蝉，這就是樣式?jīng)_突屡律。

一般情況下，如果出現(xiàn)樣式?jīng)_突降淮，則會按照CSS書寫的順序超埋，以最后的樣式為準搏讶。

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

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

CSS繼承性

所謂繼承性是指書寫CSS樣式表時月弛，子標簽會繼承父標簽的某些樣式肴盏，如文本顏色和字號。想要設(shè)置一個可繼承的屬性帽衙，只需將它應(yīng)用于父元素即可菜皂。

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

CSS最后的執(zhí)行口訣：  龍生龍厉萝，鳳生鳳恍飘，老鼠生的孩子會打洞。

注意：

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

CSS優(yōu)先級

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

在考慮權(quán)重時焦辅，初學者還需要注意一些特殊的情況博杖，具體如下：

繼承樣式的權(quán)重為0。即在嵌套結(jié)構(gòu)中筷登，不管父元素樣式的權(quán)重多大剃根，被子元素繼承時，他的權(quán)重都為0前方，也就是說子元素定義的樣式會覆蓋繼承來的樣式狈醉。

行內(nèi)樣式優(yōu)先。應(yīng)用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

<img src="media/w.jpg" /> 注意：

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 可以添加背景顏色和背景圖片涝开，以及來進行圖片設(shè)置。

background-color	背景顏色
background-image	背景圖片地址
background-repeat	是否平鋪
background-position	背景位置

背景的合寫（復(fù)合屬性）
background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

背景圖片(image)

語法：

background-image : none | url (url)

參數(shù)：

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

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

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

背景平鋪（repeat）

語法：

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

參數(shù)：

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

no-repeat : 　背景圖像不平鋪

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

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

設(shè)置背景圖片時纵朋，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素柿顶。

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

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

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

背景位置(position)

語法：

background-position : length || length

background-position : position || position

參數(shù)：

說明：

設(shè)置或檢索對象的背景圖像位置家乘。必須先指定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 : 　背景圖像固定

說明：

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

背景簡寫

background屬性的值的書寫順序官方并沒有強制標準的咽笼。為了可讀性，建議大家如下寫：

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

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

背景透明(CSS3)

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

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

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

注意：背景半透明是指盒子背景半透明戚炫，盒子里面的內(nèi)容不收影響剑刑。

導(dǎo)航欄案例

使用技巧：在一行內(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 行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素 */
            text-align: center;  /* 文字水平居中 */
            line-height: 50px;  /* 我們設(shè)定行高等于盒子的高度，就可以使文字垂直居中 */
            color: #fff;
            font-size: 22px;
            text-decoration: none;  /* 取消下劃線 文本裝飾 */
        }
        a:hover {  /* 鼠標經(jīng)過 給我們的鏈接添加背景圖片*/
            background: url(images/h.png) no-repeat; 
        }
        </style>
    </head>
    <body>
    <a href="#">專區(qū)說明</a>
    <a href="#">申請資格</a>
    <a href="#">兌換獎勵</a>
    <a href="#">下載游戲</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)頁布局匯總所占的位置大小妖枚。因此，<strong style="color: #f00;">每個盒子除了有自己大小和位置外苍在，還影響著其他盒子的大小和位置绝页。</strong>

盒子邊框（border）

邊框就是那層皮荠商。橘子皮。抒寂。柚子皮结啼。。橙子皮屈芜。郊愧。。

語法：

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

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

邊框樣式用于定義頁面中邊框的風格井佑，常用屬性值如下：

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

solid：邊框為單實線(最為常用的)

dashed：邊框為虛線  

dotted：邊框為點線

double：邊框為雙實線

盒子邊框?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無（默認）属铁、solid單實線、dashed虛線躬翁、dotted點線焦蘑、double雙實線
寬度綜合設(shè)置	border-width:上邊 [右邊下邊左邊];	像素值
顏色綜合設(shè)置	border-color:上邊 [右邊下邊左邊];	顏色值、#十六進制盒发、rgb(r,g,b)例嘱、rgb(r%,g%,b%)
邊框綜合設(shè)置	border:四邊寬度四邊樣式四邊顏色;

表格的細線邊框

以前學過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來宁舰。讓我們真的相信拼卵，CSS就是我們的白馬王子（白雪公主）。

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

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

圓角邊框(CSS3)

從此以后腋腮，我們的世界不只有矩形。radius 半徑（距離）

語法格式：

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

內(nèi)邊距（padding）

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

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

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

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

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

<img src="media/w.jpg"/>注意：后面跟幾個數(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 順時針

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

外邊距（margin）

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

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

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

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

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

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

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

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

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

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

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

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

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

插入圖片我們用的最多比如產(chǎn)品展示類
背景圖片我們一般用于小圖標背景或者超大背景圖片

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

aside {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
    
        background-size: 200px 210px; /*  背景圖片更改大小只能用 background-size */
        background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
    }

清除元素的默認內(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渠啊、計算盒子模型的總高度時，還應(yīng)考慮上下兩個盒子垂直外邊距合并的情況权旷。

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)常使用寬度剩余法高度剩余法來做影所。

浮動(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我們會詳細解釋）

什么是浮動闹炉？

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

在CSS中渣触，通過float屬性來定義浮動羡棵，其基本語法格式如下：

選擇器{float:屬性值;}

屬性值	描述
left	元素向左浮動
right	元素向右浮動
none	元素不浮動（默認值）

浮動詳細內(nèi)幕特性

浮動脫離標準流，不占位置嗅钻，會影響標準流皂冰。浮動只有左右浮動。

浮動首先創(chuàng)建包含塊的概念（包裹）养篓。就是說秃流， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內(nèi)邊距的范圍柳弄。

浮動的元素排列位置舶胀，跟上一個元素（塊級）有關(guān)系。如果上一個元素有浮動语御，則A元素頂部會和上一個元素的頂部對齊峻贮；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊应闯。

由2可以推斷出纤控，一個父盒子里面的子盒子，如果其中一個子級有浮動的碉纺，則其他子級都需要浮動船万。這樣才能一行對齊顯示。

元素添加浮動后骨田，元素會具有行內(nèi)塊元素的特性耿导。元素的大小完全取決于定義的大小或者默認的內(nèi)容多少浮動根據(jù)元素書寫的位置來顯示相應(yīng)的浮動。

總結(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)

兩列左窄右寬型

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

通欄平均分布型

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

清除浮動

人生就像乘坐北京地鐵一號線：

途經(jīng)國貿(mào)，羨慕繁華与学；

途經(jīng)天安門彤悔，幻想權(quán)力；

途經(jīng)金融街癣防，夢想發(fā)財蜗巧；

經(jīng)過公主墳，遙想華麗家族蕾盯；

經(jīng)過玉泉路幕屹，依然雄心勃勃…

這時蓝丙，有個聲音飄然入耳:乘客你好,八寶山馬上就要到了！

頓時醒悟：人生苦短望拖，有始有終渺尘。

好比我們的浮動，有浮動開始说敏，則就應(yīng)該有浮動結(jié)束鸥跟。

為什么要清除浮動

我們前面說過，浮動本質(zhì)是用來做一些文字混排效果的盔沫，但是被我們拿來做布局用医咨，則會有很多的問題出現(xiàn)，但是架诞，你不能說浮動不好 <img src="media/wq.jpg" height="100" />拟淮。

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

準確地說沾谓，并不是清除浮動委造，而是清除浮動后造成的影響

如果浮動一開始就是一個美麗的錯誤，那么請用正確的方法挽救它均驶。

清除浮動本質(zhì)

清除浮動主要為了解決父級元素因為子級浮動引起內(nèi)部高度為0 的問題昏兆。

清除浮動的方法

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

在CSS中，clear屬性用于清除浮動伟骨，其基本語法格式如下：

選擇器{clear:屬性值;}

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

額外標簽法

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <div style=”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)容增多時候容易造成不會自動換行導(dǎo)致內(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ù)二難點的了珊拼，但是，你務(wù)必要學好它流炕，我們CSS離不開定位澎现，特別是后面的js特效，天天和定位打交道每辟。不要抵觸它剑辫，反而要愛上它，它可以讓我們工作更加輕松哦渠欺！

為什么要用定位妹蔽？

那么定位，最長運用的場景再那里呢挠将？來看幾幅圖片胳岂，你一定會有感悟！

第一幅圖舔稀，小黃色塊可以再圖片上移動：

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

如果用標準流或者浮動，實現(xiàn)會比較復(fù)雜或者難以實現(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時访敌，可以將元素定位于相對位置。

對元素設(shè)置相對定位后衣盾，可以通過邊偏移屬性改變元素的位置寺旺，但是它在文檔流中的位置仍然保留爷抓。如下圖所示，即是一個相對定位的效果展示：

注意：

相對定位最重要的一點是阻塑，它可以通過邊偏移移動位置蓝撇，但是原來的所占的位置，繼續(xù)占有陈莽。
其次渤昌，每次移動的位置，是以自己的左上角為基點移動（相對于自己來移動位置）

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

如果說浮動的主要目的是讓多個塊級元素一行顯示私植，那么定位的主要價值就是移動位置忌栅，讓盒子到我們想要的位置上去。

絕對定位absolute (拼爹型)

小笑話：

吃早飯時曲稼，老婆往兒子碗里放了兩個煎蛋，兒子全給了我贫悄，還一本正經(jīng)地說：“爸爸瑞驱，多吃點，男人養(yǎng)家不容易清女。” <br/>

我一陣感動晰筛，剛想夸他兩句嫡丙。 

兒子接著說：“以后全靠你讓我拼爹了！”

[注意] 如果文檔可滾動读第，絕對定位元素會隨著它滾動曙博，因為元素最終會相對于正常流的某一部分定位。

當position屬性的取值為absolute時怜瞒，可以將元素的定位模式設(shè)置為絕對定位父泳。

注意：絕對定位最重要的一點是，它可以通過邊偏移移動位置吴汪，但是它完全脫標惠窄，完全不占位置。

父級沒有定位

若所有父元素都沒有定位漾橙，以瀏覽器為準對齊(document文檔)杆融。

父級有定位

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

子絕父相

這個“子絕父相”太重要了脾歇，是我們學習定位的口訣蒋腮，時時刻刻記住的。

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

首先，我們說下激况，絕對定位是將元素依據(jù)最近的已經(jīng)定位絕對作彤、固定或相對定位）的父元素（祖先）進行定位。

就是說誉碴，子級是絕對定位宦棺，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以）黔帕，就是說代咸，子絕父絕，子絕父相都是正確的成黄。

但是呐芥，在我們網(wǎng)頁布局的時候，最常說的子絕父相是怎么來的呢奋岁？請看如下圖：

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

因為子級是絕對定位，不會占有位置闻伶，可以放到父盒子里面的任何一個地方滨攻。

父盒子布局時，需要占有位置蓝翰，因此父親只能是相對定位.

這就是子絕父相的由來光绕。

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

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

定位的盒子也可以水平或者垂直居中畜份，有一個算法诞帐。

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

固定定位fixed(認死理型)

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

當對元素設(shè)置固定定位后，它將脫離標準文檔流的控制册倒，始終依據(jù)瀏覽器窗口來定義自己的顯示位置完慧。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

固定定位的元素跟父親沒有任何關(guān)系屈尼，只認瀏覽器册着。
固定定位完全脫標，不占有位置脾歧，不隨著滾動條滾動甲捏。

記憶法：就類似于孫猴子，無父無母鞭执，好不容易找到一個可靠的師傅（瀏覽器）司顿，就聽的師傅的，別的都不聽兄纺。

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

疊放次序（z-index）

當對多個元素同時設(shè)置定位時，定位元素之間有可能會發(fā)生重疊估脆。

在CSS中钦奋，要想調(diào)整重疊定位元素的堆疊順序慰于，可以對定位元素應(yīng)用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 設(shè)置或檢索對象是否及如何顯示。

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

特點：隱藏之后，不再保留位置岭佳。

visibility 可見性

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

visible : 　對象可視

hidden : 　對象隱藏

特點：隱藏之后，繼續(xù)保留原有位置珊随。（停職留薪）

overflow 溢出

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

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

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

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

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

CSS高級技巧

CSS用戶界面樣式

所謂的界面樣式衩辟，就是更改一些用戶操作樣式螟炫，比如更改用戶的鼠標樣式，表單輪廓等艺晴。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制昼钻，因此我們就放棄了。防止表單域拖拽

鼠標樣式cursor

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

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

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

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

盡量不要用hand 因為火狐不支持 pointer ie6以上都支持的盡量用

輪廓 outline

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

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

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

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

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

防止拖拽文本域resize

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

右下角可以拖拽：

<textarea></textarea>
右下角不可以拖拽：

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

vertical-align 垂直對齊

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

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

但是我們從來沒有講過有垂直居中的屬性，我們的媽媽一直很擔心我們的垂直居中怎么做纳像。

vertical-align 垂直對齊魂莫，這個看上去很美好的一個屬性，實際有著不可捉摸的脾氣爹耗，否則我們也不會這么晚來講解耙考。

vertical-align : baseline |top |middle |bottom

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

vertical-align 不影響塊級元素中的內(nèi)容對齊潭兽，它只針對于行內(nèi)元素或者行內(nèi)塊元素倦始，特別是行內(nèi)塊元素， 通常用來控制圖片/表單與文字的對齊山卦。

[圖片上傳失敗...(image-7cc4dd-1576330511903)]

圖片鞋邑、表單和文字對齊

所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關(guān)系了账蓉。默認的圖片會和文字基線對齊枚碗。

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

有個很重要特性你要記住：圖片或者表單等行內(nèi)塊元素铸本，他的底線會和父級盒子的基線對齊肮雨。這樣會造成一個問題，就是圖片底側(cè)會有一個空白縫隙箱玷。

解決的方法就是：

給img vertical-align:middle | top等等怨规。讓圖片不要和基線對齊。<img src="media/1633.png" width="500" style="border: 1px dashed #ccc;" />

給img 添加 display：block; 轉(zhuǎn)換為塊級元素就不會存在問題了锡足。<img src="media/sina1.png" width="500" style="border: 1px dashed #ccc;"/>

溢出的文字隱藏

word-break:自動換行

normal 使用瀏覽器默認的換行規(guī)則波丰。

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

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

主要處理英文單詞

white-space

white-space設(shè)置或檢索對象內(nèi)文本顯示方式掰烟。通常我們使用于強制一行顯示內(nèi)容

normal : 　默認處理方式
nowrap : 　強制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標簽對象才換行沐批。

可以處理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

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

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

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

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

CSS精靈技術(shù)（sprite）小妖精雪碧

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

圖所示為網(wǎng)頁的請求原理圖珠插，當用戶訪問一個網(wǎng)站時惧磺，需要向服務(wù)器發(fā)送請求颖对，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶捻撑。

然而，一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾，當網(wǎng)頁中的圖像過多時顾患，服務(wù)器就會頻繁地接受和發(fā)送請求番捂，這將大大降低頁面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)江解，提高頁面的加載速度设预，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites、CSS雪碧）犁河。

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

簡單地說鳖枕，CSS精靈是一種處理網(wǎng)頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去桨螺，然后將大圖應(yīng)用于網(wǎng)頁宾符，這樣，當用戶訪問該頁面時灭翔，只需向服務(wù)發(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)頁的性能的昌跌。更重要的是圖片不能很好的進行“縮放”构订，因為圖片放大和縮小會失真。我們后面會學習移動端響應(yīng)式避矢，很多情況下希望我們的圖標是可以縮放的悼瘾。此時，一個非常重要的技術(shù)出現(xiàn)了审胸，額不是出現(xiàn)了亥宿，是以前就有，是被從新"寵幸"啦砂沛。烫扼。這就是字體圖標（iconfont).

字體圖標優(yōu)點

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

字體圖標使用流程

總體來說苹享，字體圖標按照如下流程：

設(shè)計字體圖標

假如圖標是我們公司單獨設(shè)計双絮，那就需要第一步了，這個屬于UI設(shè)計人員的工作得问，他們在 illustrator 或 Sketch 這類矢量圖形軟件里創(chuàng)建 icon圖標囤攀，比如下圖：

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

其實第一步焚挠，我們不需要關(guān)心，只需要給我們這些圖標就可以了漓骚，如果圖標是大眾的蝌衔，網(wǎng)上本來就有的榛泛，可以直接跳過第一步，進入第三步胚委。

上傳生成字體包

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

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

icomoon字庫

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

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

阿里icon font字庫

http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字體圖標字庫荚板，包含了淘寶圖標庫和阿里媽媽圖標庫》砸伲可以使用AI制作圖標上傳生成跪另。一個字，免費煤搜，免費Ｃ饴獭！

fontello

http://fontello.com/

在線定制你自己的icon font字體圖標字庫擦盾，也可以直接從GitHub下載整個圖標集嘲驾，該項目也是開源的。

Font-Awesome

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

這是我最喜歡的字庫之一了迹卢，更新比較快辽故。目前已經(jīng)有369個圖標了。

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標可以在Bootstrap下免費使用腐碱。自帶了200多個圖標榕暇。

Icons8

https://icons8.com/

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

下載兼容字體包

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

當然，我們不需要自己專門的圖標筒饰，是想網(wǎng)上找?guī)讉€圖標使用缴啡，以上2步可以直接省略了，直接到剛才的網(wǎng)站上找喜歡的下載使用吧瓷们。

字體引入到HTML

得到壓縮包之后业栅，最后一步秒咐，是最重要的一步了，就是字體文件已經(jīng)有了碘裕，我們需要引入到我們頁面中携取。

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

[圖片上傳失敗...(image-bc8792-1576330511903)]

第一步：在樣式里面聲明字體：告訴別人我們自己定義的字體
```
@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";
 }
或者  
<span>?</span>  
```
追加新圖標到原來庫里面

如果工作中帮孔，原來的字體圖標不夠用了雷滋，我們需要添加新的字體圖標，但是原來的不能刪除文兢，繼續(xù)使用晤斩，此時我們需要這樣做

把壓縮包里面的selection.json 從新上傳，然后姆坚，選中自己想要新的圖標澳泵，從新下載壓縮包，替換原來文件即可兼呵。

<img src="media/fontt5.png" />

引入ico圖標

代碼：  <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

注意：

她(它)不是iconfont字體哦兔辅。
位置是放到 head 標簽中間。
后面的type="image/x-icon" 屬性可以省略击喂。（我相信你也愿意省略幢妄。）
為了兼容性，請將favicon.ico 這個圖標放到根目錄下茫负。（我們就不要任性了蕉鸳，聽話放位置，省很多麻煩忍法。潮尝。你好，我也好）

<img src="media/icotu.png" />

轉(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)容建設(shè)徒蟆、網(wǎng)站代碼優(yōu)化等)和站外優(yōu)化，從而提高網(wǎng)站的關(guān)鍵詞排名以及公司產(chǎn)品的曝光度型型。簡單的說就是段审，把產(chǎn)品做好，搜索引擎就會介紹客戶來闹蒜。

我們現(xiàn)在階段主要進行站內(nèi)優(yōu)化寺枉。網(wǎng)站優(yōu)化抑淫，我們應(yīng)該要懂。姥闪。始苇。

網(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ù)和主題概括鸟缕，多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話：010…”之類語句。

京東網(wǎng)：

<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電排抬、數(shù)碼通訊懂从、電腦、家居百貨蹲蒲、服裝服飾番甩、母嬰、圖書届搁、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷缘薛、誠信的服務(wù)，為您提供愉悅的網(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，智能硬件敦间，配件及小米生活周邊瓶逃，同時提供小米客戶服務(wù)及售后支持。" />

Keywords 關(guān)鍵字

Keywords是頁面關(guān)鍵詞廓块，是搜索引擎關(guān)注點之一厢绝。Keywords應(yīng)該限制在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)唆香，要么你學習葵花寶典，欲練此功必先....

<img src="media/kuihua.png" />
同樣吨艇，要給這些元素添加如下屬性就可以觸發(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)部浮動

只要把父元素設(shè)為BFC就可以清理子元素的浮動了凡蚜，最常見的用法就是在父元素上設(shè)置overflow: hidden樣式，對于IE6加上zoom:1就可以了吭从。

主要用到

計算BFC的高度時朝蜘，自然也會檢測浮動或者定位的盒子高度。

<img src="media/fu.jpg" />
(2) 解決外邊距合并問題

外邊距合并的問題涩金。

主要用到

盒子垂直方向的距離由margin決定谱醇。屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊

屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊，那么我們創(chuàng)建不屬于同一個BFC步做，就不會發(fā)生margin重疊了副渴。

(3) 制作右側(cè)自適應(yīng)的盒子問題

主要用到

普通流體元素BFC后，為了和浮動元素不產(chǎn)生任何交集全度，順著浮動邊緣形成自己的封閉上下文

BFC 總結(jié)

BFC就是頁面上的一個隔離的獨立容器煮剧，容器里面的子元素不會影響到外面的元素。反之也如此。包括浮動勉盅，和外邊距合并等等佑颇，因此，有了這個特性草娜，我們布局的時候就不會出現(xiàn)意外情況了漩符。

優(yōu)雅降級和漸進增強

什么是漸進增強（progressive enhancement）、優(yōu)雅降級（graceful degradation）呢驱还？

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構(gòu)建頁面嗜暴，保證最基本的功能，然后再針對高級瀏覽器進行效果议蟆、交互等改進和追加功能達到更好的用戶體驗闷沥。

類似爬山，由低出往高處爬

<b>優(yōu)雅降級 graceful degradation：</b>

一開始就構(gòu)建完整的功能咐容，然后再針對低版本瀏覽器進行兼容舆逃。

類似蹦極，由高處往低處下落

區(qū)別：漸進增強是向上兼容戳粒，優(yōu)雅降級是向下兼容路狮。

個人建議：現(xiàn)在互聯(lián)網(wǎng)發(fā)展很快，連微軟公司都拋棄了ie瀏覽器蔚约，轉(zhuǎn)而支持 edge這樣的高版本瀏覽器奄妨，我們很多情況下沒有必要再時刻想著低版本瀏覽器了，而是一開始就構(gòu)建完整的效果苹祟，根據(jù)實際情況砸抛，修補低版本瀏覽器問題。

伸縮布局(CSS3)

CSS3在布局方面做了非常大的改進树枫，使得我們對塊級元素的布局排列變得十分靈活直焙，適應(yīng)性非常強，其強大的伸縮性砂轻，在響應(yīng)式開中可以發(fā)揮極大的作用奔誓。

主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向

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

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

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

[圖片上傳失敗...(image-4ac877-1576330511903)]

**2杯聚、各屬性詳解******

1.flex子項目在主軸的縮放比例，不指定flex屬性抒痒，則不參與伸縮分配

min-width 最小值 min-width: 280px 最小寬度不能小于 280

max-width: 1280px 最大寬度不能大于 1280

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

flex-direction: column 垂直排列

flex-direction: row 水平排列

http://m.ctrip.com/html5/ 攜程網(wǎng)手機端地址

3幌绍、justify-content調(diào)整主軸對齊（水平對齊）

子盒子如何在父盒子里面水平對齊

值	描述	白話文
flex-start	默認值。項目位于容器的開頭。	讓子元素從父容器的開頭開始排序但是盒子順序不變
flex-end	項目位于容器的結(jié)尾傀广。	讓子元素從父容器的后面開始排序但是盒子順序不變
center	項目位于容器的中心颁独。	讓子元素在父容器中間顯示
space-between	項目位于各行之間留有空白的容器內(nèi)。	左右的盒子貼近父盒子伪冰，中間的平均分布空白間距
space-around	項目位于各行之前誓酒、之間、之后都留有空白的容器內(nèi)贮聂。	相當于給每個盒子添加了左右margin外邊距

4靠柑、align-items調(diào)整側(cè)軸對齊（垂直對齊）

子盒子如何在父盒子里面垂直對齊（單行）

值	描述	白話文
stretch	默認值。項目被拉伸以適應(yīng)容器吓懈。	讓子元素的高度拉伸適用父容器（子元素不給高度的前提下)
center	項目位于容器的中心歼冰。	垂直居中
flex-start	項目位于容器的開頭。	垂直對齊開始位置上對齊
flex-end	項目位于容器的結(jié)尾耻警。	垂直對齊結(jié)束位置底對齊

5隔嫡、flex-wrap控制是否換行

當我們子盒子內(nèi)容寬度多于父盒子的時候如何處理

值	描述
nowrap	默認值。規(guī)定靈活的項目不拆行或不拆列甘穿。不換行腮恩，則收縮（壓縮）顯示強制一行內(nèi)顯示
wrap	規(guī)定靈活的項目在必要的時候拆行或拆列。
wrap-reverse	規(guī)定靈活的項目在必要的時候拆行或拆列温兼，但是以相反的順序秸滴。

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

flex-flow: flex-direction  flex-wrap;

白話記： flex-flow: 排列方向換不換行;

兩個中間用空格

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap;   這兩句話等價于下面的這句話*/
flex-flow: column wrap;  /* 兩者的綜合 */

7缸榛、align-content堆棧（由flex-wrap產(chǎn)生的獨立行）多行垂直對齊方式齊

align-content是針對flex容器里面多軸(多行)的情況,align-items是針對一行的情況進行排列吝羞。

必須對父元素設(shè)置自由盒屬性display:flex;兰伤，并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行，flex-wrap:wrap;這樣這個屬性的設(shè)置才會起作用钧排。

值	描述	測試
stretch	默認值敦腔。項目被拉伸以適應(yīng)容器。
center	項目位于容器的中心恨溜。
flex-start	項目位于容器的開頭符衔。
flex-end	項目位于容器的結(jié)尾。
space-between	項目位于各行之間留有空白的容器內(nèi)糟袁。
space-around	項目位于各行之前判族、之間、之后都留有空白的容器內(nèi)项戴。

8形帮、order控制子項目的排列順序，正序方式排序，從小到大

用css 來控制盒子的前后順序辩撑。用order 就可以

用整數(shù)值來定義排列順序界斜，數(shù)值小的排在前面『霞剑可以為負值各薇。默認值是 0

order: 1;

此知識點重在理解，要明確找出主軸君躺、側(cè)軸峭判、方向，各屬性對應(yīng)的屬性值

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末棕叫，一起剝皮案震驚了整個濱河市朝抖，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌谍珊，老刑警劉巖治宣，帶你破解...
沈念sama閱讀 219,490評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異砌滞，居然都是意外死亡侮邀，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,581評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門贝润，熙熙樓的掌柜王于貴愁眉苦臉地迎上來绊茧，“玉大人，你說我怎么就攤上這事打掘』罚” “怎么了？”我有些...
開封第一講書人閱讀 165,830評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵尊蚁，是天一觀的道長亡笑。經(jīng)常有香客問我，道長横朋，這世上最難降的妖魔是什么仑乌？我笑而不...
開封第一講書人閱讀 58,957評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮琴锭，結(jié)果婚禮上晰甚，老公的妹妹穿的比我還像新娘。我一直安慰自己决帖，他們只是感情好厕九，可當我...
茶點故事閱讀 67,974評論 6贊 393
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著地回，像睡著了一般扁远。火紅的嫁衣襯著肌膚如雪腺阳。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,754評論 1贊 307
城市分裂傳說
那天穿香，我揣著相機與錄音亭引，去河邊找鬼。笑死皮获，一個胖子當著我的面吹牛焙蚓，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播洒宝，決...
沈念sama閱讀 40,464評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼购公，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了雁歌？” 一聲冷哼從身側(cè)響起宏浩，我...
開封第一講書人閱讀 39,357評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎靠瞎，沒想到半個月后比庄，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,847評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡乏盐，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,995評論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年佳窑，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片父能。...
茶點故事閱讀 40,137評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡神凑，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出何吝，到底是詐尸還是另有隱情溉委，我是刑警寧澤，帶...
沈念sama閱讀 35,819評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布爱榕，位于F島的核電站瓣喊，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏呆细。R本人自食惡果不足惜型宝，卻給世界環(huán)境...
茶點故事閱讀 41,482評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望絮爷。院中可真熱鬧，春花似錦梨树、人聲如沸坑夯。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,023評論 0贊 22
一樁弒父案抡四，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽柜蜈。三九已至仗谆，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間淑履，已是汗流浹背隶垮。一陣腳步聲響...
開封第一講書人閱讀 33,149評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留秘噪，地道東北人狸吞。一個月前我還...
沈念sama閱讀 48,409評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像指煎，于是被迫代替她去往敵國和親蹋偏。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 45,086評論 2贊 355