css

課程目標(biāo):

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

熟記CSS樣式和外觀屬性

熟練掌握CSS各種選擇器

熟練掌握CSS各種選擇器

熟練掌握CSS三種顯示模式

熟練掌握CSS背景屬性

熟練掌握CSS三大特性

熟練掌握CSS盒子模型

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

CSS的發(fā)展歷程

從HTML被發(fā)明開始磷籍，樣式就以各種形式存在搏存。不同的瀏覽器結(jié)合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。
隨著HTML的成長(zhǎng)，為了滿足頁面設(shè)計(jì)者的要求，HTML添加了很多顯示功能材鹦。但是隨著這些功能的增加，HTML變的越來越雜亂耕姊，而且HTML頁面也越來越臃腫桶唐。于是CSS便誕生了。

CSS 網(wǎng)頁的美容師

CSS的出現(xiàn)茉兰，拯救了混亂的HTML尤泽，當(dāng)讓更加拯救了我們web開發(fā)者。讓我們的網(wǎng)頁更加豐富多彩规脸。

CSS的最大貢獻(xiàn)就是：讓 HTML 從樣式中解脫苦海坯约，實(shí)現(xiàn)了 HTML 專注去做結(jié)構(gòu)呈現(xiàn)。而樣式交給 CSS 后莫鸭，你完全可以放心的早點(diǎn)洗洗睡了闹丐！

而且。被因。卿拴。衫仑。。 CSS 做的很出色堕花，如果JavaScript是網(wǎng)頁的魔法師文狱，那么CSS它是我們網(wǎng)頁的美容師，不信航徙，你看:

ps: 你跟Angelababy只差了一個(gè)妝容的距離

有人說如贷，沒有不漂亮的女人，只有不會(huì)打扮的女人到踏。

我想說，沒有不好看的網(wǎng)頁尚猿，只有不會(huì)CSS的前端窝稿。

CSS初識(shí)

CSS(Cascading Style Sheets) 美化樣式

CSS通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體凿掂、大小伴榔、對(duì)齊方式等）、圖片的外形（寬高庄萎、邊框樣式踪少、邊距等）以及版面的布局等外觀顯示樣式。

CSS以HTML為基礎(chǔ)糠涛，提供了豐富的功能援奢，如字體、顏色忍捡、背景的控制及整體排版等集漾，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。

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

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

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

內(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)樣式、行間樣式臭笆、內(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)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用茂洒。

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

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

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

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

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

href：定義所鏈接外部樣式表文件的URL智哀，可以是相對(duì)路徑次询，也可以是絕對(duì)路徑。
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)（多）

CSS樣式規(guī)則

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

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

1.選擇器用于指定CSS樣式作用的HTML對(duì)象屉佳，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。
2.屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)洲押。
3.屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性武花，例如字體大小、文本顏色等杈帐。
4.屬性和屬性值之間用英文“:”連接体箕。
5.多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分。
可以用段落 和 表格的對(duì)齊的演示挑童。

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

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

如上圖所以，要把里面的小黃人分為2組尽楔，最快的方法怎辦投储？

很多第练，比如一只眼睛的一組，剩下的一組

選擇器干啥的玛荞？選擇標(biāo)簽用的

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

CSS基礎(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ì)差異化樣式客蹋。

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

類選擇器

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

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

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

類選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式浮还。可以選擇一個(gè)或者多個(gè)標(biāo)簽

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

1.長(zhǎng)名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器闽巩。

? 輸入的時(shí)候少按一個(gè)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>

多類名選擇器

我們可以給標(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)識(shí)，后面緊跟id名仔粥，其基本語法格式如下：

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

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

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

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

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

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

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

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

通配符選擇器

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

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

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

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

注意：

這個(gè)通配符選擇器，就像我們的電影明星中的夢(mèng)中情人赡突，想想它就好了对扶，但是它不會(huì)和你過日子。

CSS字體樣式屬性

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

font-size屬性用于設(shè)置字號(hào)惭缰，該屬性的值可以使用相對(duì)長(zhǎng)度單位浪南，也可以使用絕對(duì)長(zhǎng)度單位。其中漱受，相對(duì)長(zhǎng)度單位比較常用络凿，推薦使用像素單位px，絕對(duì)長(zhǎng)度單位使用較少昂羡。具體如下：

font-family:字體

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

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

可以同時(shí)指定多個(gè)字體赴穗，中間以逗號(hào)隔開憔四，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)般眉，直到找到合適的字體了赵。

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

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

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

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

font-weight屬性用于定義字體的粗細(xì)劫流，其可用屬性值：normal、bold丛忆、bolder祠汇、lighter、100~900（100的整數(shù)倍）熄诡。

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

數(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)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式康栈。

italic：瀏覽器會(huì)顯示斜體的字體樣式递递。

oblique：瀏覽器會(huì)顯示傾斜的字體樣式。

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

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

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

font屬性用于對(duì)字體樣式進(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屬性將不起作用禁灼。

CSS外觀屬性

color:文本顏色

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

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

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

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

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

line-height:行間距

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

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

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

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

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

right：右對(duì)齊

center：居中對(duì)齊

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

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

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

text-decoration 文本的裝飾

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

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

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

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

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">逗號(hào)</strong>連接而成的基矮，任何形式的選擇器（包括標(biāo)簽選擇器淆储、class類選擇器id選擇器等），都可以作為并集選擇器的一部分家浇。如果某些選擇器定義的樣式完全相同本砰，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式钢悲。

記憶技巧：

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

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

后代選擇器

后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代娃肿，其寫法就是把外層標(biāo)簽寫在前面咕缎，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔料扰。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)凭豪，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。

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

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級(jí)標(biāo)簽寫在前面帖努，子級(jí)標(biāo)簽寫在后面撰豺，中間跟一個(gè) > 進(jìn)行連接，注意拼余，符號(hào)左右兩側(cè)各保留一個(gè)空格污桦。

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

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

測(cè)試題

<div class="nav">    <!-- 主導(dǎo)航欄 -->
  <ul>
    <li><a href="#">公司首頁</a></li>
    <li><a href="#">公司簡(jiǎn)介</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)航欄里面的所有的鏈接改為pink (簡(jiǎn)單)
主導(dǎo)航欄和側(cè)導(dǎo)航欄里面文字都是14像素并且是微軟雅黑亭姥。（中等)
主導(dǎo)航欄里面的一級(jí)菜單鏈接文字顏色為綠色稼钩。（難)

偽類選擇器

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

為了和我們剛才學(xué)的類選擇器相區(qū)別氮块，  類選擇器是一個(gè)點(diǎn) 比如 .demo {}   而我們的偽類 用 2個(gè)點(diǎn) 就是 冒號(hào)  比如  :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í)候滔蝉，由原來的 灰色 變成了紅色 */
}

CSS注釋

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

例如：

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

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

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

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

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

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

常見的塊元素有<h1>~<h6>、<p>冒窍、<div>递沪、<ul>、<ol>综液、<li>等款慨，其中<div>標(biāo)簽是最典型的塊元素。

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

（1）總是從新行開始

（2）高度谬莹，寬度檩奠，行高桩了、外邊距以及內(nèi)邊距都可以控制。

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

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

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

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

常見的行內(nèi)元素有<a>欠啤、<strong>、<b>屋灌、<em>洁段、<i>、<del>共郭、<s>祠丝、<ins>、<u>除嘹、<span>等写半，其中<span>標(biāo)簽最典型的行內(nèi)元素。

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

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

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

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

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

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

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

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

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

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

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

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

在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />义锥、<input />、<td>岩灭，可以對(duì)它們?cè)O(shè)置寬高和對(duì)齊屬性拌倍，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素。

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

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

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

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

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

此階段车摄，我們只需關(guān)心這三個(gè)寺谤，其他的是我們后面的工作。

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;
}

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

示例：

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

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

屬性規(guī)范

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

示例：

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

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

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

示例：

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

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

CSS 三大特性

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

CSS層疊性

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

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

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

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

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

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

CSS繼承性

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

簡(jiǎn)單的理解就是：子承父業(yè)扶关。

CSS最后的執(zhí)行口訣：  龍生龍阴汇，鳳生鳳，老鼠生的孩子會(huì)打洞节槐。

注意：

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

CSS優(yōu)先級(jí)

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

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

繼承樣式的權(quán)重為0。即在嵌套結(jié)構(gòu)中食茎，不管父元素樣式的權(quán)重多大蒂破，被子元素繼承時(shí)牲蜀，他的權(quán)重都為0怪蔑，也就是說子元素定義的樣式會(huì)覆蓋繼承來的樣式晴玖。

行內(nèi)樣式優(yōu)先孔飒。應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高蒙挑，可以理解為遠(yuǎn)大于100俯抖〖彰樱總之拨与，他擁有比上面提高的選擇器都大的優(yōu)先級(jí)稻据。

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

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

CSS特殊性（Specificity）

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

specificity用一個(gè)四位的數(shù) 字串(CSS2是三位)來表示，更像四個(gè)級(jí)別纸颜，值從左到右兽泣，左面的最大，一級(jí)大于一級(jí)胁孙，數(shù)位之間沒有進(jìn)制唠倦，級(jí)別之間不可超越。

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

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

比如的例子：

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

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

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

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

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

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

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

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

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

使用了 !important聲明的規(guī)則狂票。
內(nèi)嵌在 HTML 元素的 style屬性里面的聲明候齿。
使用了 ID 選擇器的規(guī)則。
使用了類選擇器闺属、屬性選擇器慌盯、偽元素和偽類選擇器的規(guī)則。
使用了元素選擇器的規(guī)則掂器。
只包含一個(gè)通用選擇器的規(guī)則亚皂。
同一類選擇器則遵循就近原則。

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

CSS 背景(background)

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

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

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

背景圖片(image)

語法：

background-image : none | url (url)

參數(shù)：

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

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

小技巧：我們提倡背景圖片后面的地址，url不要加引號(hào)肪康。

背景平鋪（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è)置或檢索對(duì)象的背景圖像位置抵皱。必須先指定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í)際工作用的最多的便脊，就是背景圖片居中對(duì)齊了蚂四。

背景附著

語法：

background-attachment : scroll | fixed

參數(shù)：

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

說明：

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

背景簡(jiǎn)寫

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)容不收影響晌杰。

導(dǎo)航欄案例

使用技巧：在一行內(nèi)的盒子內(nèi)跷睦，我們?cè)O(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;  /* 我們?cè)O(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="#">申請(qǐng)資格</a>
    <a href="#">兌換獎(jiǎng)勵(lì)</a>
    <a href="#">下載游戲</a>
    </body>

盒子模型（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)者購(gòu)買的呢悔叽？

我們說過，行內(nèi)元素比如文字類似牛奶爵嗅，也需要一個(gè)盒子把他們裝起來娇澎，我們前面學(xué)過的雙標(biāo)簽都是一個(gè)盒子。有了盒子睹晒，我們就可以隨意的趟庄，自由的，擺放位置了伪很。

看透網(wǎng)頁布局的本質(zhì)：把網(wǎng)頁元素比如文字圖片等等戚啥，放入盒子里面，然后利用CSS擺放盒子的過程锉试，就是網(wǎng)頁布局猫十。

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

盒子模型（Box Model）

這里略過老舊的ie盒子模型（IE6以下），對(duì)不起应又，我都沒見過IE5的瀏覽器宙项。

首先，我們來看一張圖株扛，來體會(huì)下什么是盒子模型尤筐。

所有的文檔元素（標(biāo)簽）都會(huì)生成一個(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: 左上角  右上角  右下角  左下角;

內(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"/>注意：后面跟幾個(gè)數(shù)值表示的意思是不一樣的。

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

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

外邊距（margin）

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

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

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

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

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

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

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

然后就給左右的外邊距都設(shè)置為auto三痰，就可使塊級(jí)元素水平居中吧寺。

實(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等低版本瀏覽器也會(huì)有問題。

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

外邊距合并

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

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

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

解決方案：避免就好了。

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

對(duì)于兩個(gè)嵌套關(guān)系的塊元素队伟，如果父元素沒有上內(nèi)邊距及邊框穴吹，則父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者嗜侮，即使父元素的上外邊距為0港令，也會(huì)發(fā)生合并。

解決方案：

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

待續(xù)干毅。宜猜。。硝逢。

content寬度和高度

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

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

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

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

注意：

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

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

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

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

開始學(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 會(huì)有外邊距合并還有 ie6下面margin 加倍的bug（討厭）所以最后使用饥伊。
padding 會(huì)影響盒子大小，需要進(jìn)行加減計(jì)算（麻煩）其次使用蔫饰。
width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法高度剩余法來做琅豆。

浮動(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)簽元素正常從上到下次兆，從左到右排列順序的意思稿茉，比如塊級(jí)元素會(huì)獨(dú)占一行，行內(nèi)元素會(huì)按順序依次前后排列芥炭；按照這種大前提的布局排列之下絕對(duì)不會(huì)出現(xiàn)例外的情況叫做普通流布局狈邑。

浮動(dòng)(float)

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

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

什么是浮動(dòng)良瞧？

元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(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)脫離標(biāo)準(zhǔn)流况增，不占位置赞庶，會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)澳骤。

浮動(dòng)首先創(chuàng)建包含塊的概念（包裹）歧强。就是說， 浮動(dòng)的元素總是找理它最近的父級(jí)元素對(duì)齊为肮。但是不會(huì)超出內(nèi)邊距的范圍摊册。

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

由2可以推斷出，一個(gè)父盒子里面的子盒子重斑，如果其中一個(gè)子級(jí)有浮動(dòng)的兵睛，則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示绸狐。

元素添加浮動(dòng)后卤恳，元素會(huì)具有行內(nèi)塊元素的特性累盗。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少浮動(dòng)根據(jù)元素書寫的位置來顯示相應(yīng)的浮動(dòng)寒矿。

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

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

float 浮漏特

溉粽：加了浮動(dòng)的元素盒子是浮起來的符相，漂浮在其他的標(biāo)準(zhǔn)流盒子上面。
漏：加了浮動(dòng)的盒子蠢琳，不占位置的啊终，它浮起來了，它原來的位置漏給了標(biāo)準(zhǔn)流的盒子傲须。
特：特別注意蓝牲，首先浮動(dòng)的盒子需要和標(biāo)準(zhǔn)流的父級(jí)搭配使用，其次特別的注意浮動(dòng)可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性泰讽。

版心和布局流程

閱讀報(bào)紙時(shí)容易發(fā)現(xiàn)例衍，雖然報(bào)紙中的內(nèi)容很多昔期，但是經(jīng)過合理地排版，版面依然清晰佛玄、易讀硼一。同樣痴奏，在制作網(wǎng)頁時(shí)该默，要想使頁面結(jié)構(gòu)清晰、有條理骑科，也需要對(duì)網(wǎng)頁進(jìn)行“排版”奥吩。

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

布局流程

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

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

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

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

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

一列固定寬度且居中

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

兩列左窄右寬型

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

通欄平均分布型

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

清除浮動(dòng)

人生就像乘坐北京地鐵一號(hào)線：

途經(jīng)國(guó)貿(mào)涎才，羨慕繁華鞋既；

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

途經(jīng)金融街邑闺，夢(mèng)想發(fā)財(cái)；

經(jīng)過公主墳棕兼，遙想華麗家族陡舅；

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

這時(shí)伴挚，有個(gè)聲音飄然入耳:乘客你好,八寶山馬上就要到了靶衍！

頓時(shí)醒悟：人生苦短臂寝，有始有終。

好比我們的浮動(dòng)摊灭，有浮動(dòng)開始咆贬，則就應(yīng)該有浮動(dòng)結(jié)束。

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

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

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

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

如果浮動(dòng)一開始就是一個(gè)美麗的錯(cuò)誤酪夷，那么請(qǐng)用正確的方法挽救它榴啸。

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

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

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

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

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

選擇器{clear:屬性值;}

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

額外標(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你推薦的方法我不接受疏咐，你不值得擁有纤掸。。浑塞。

父級(jí)添加overflow屬性方法

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

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

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

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

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

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

使用方法：

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

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

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

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

代表網(wǎng)站：百度辛掠、淘寶網(wǎng)谢谦、網(wǎng)易等

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

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

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 這句話可以出發(fā)BFC BFC可以清除浮動(dòng),BFC我們后面講 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

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

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

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

定位(position)

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

PS: 定位是我們CSS算是數(shù)一數(shù)二難點(diǎn)的了，但是淋袖，你務(wù)必要學(xué)好它鸿市，我們CSS離不開定位，特別是后面的js特效即碗，天天和定位打交道焰情。不要抵觸它，反而要愛上它剥懒，它可以讓我們工作更加輕松哦内舟！

為什么要用定位？

那么定位初橘，最長(zhǎng)運(yùn)用的場(chǎng)景再那里呢验游？來看幾幅圖片，你一定會(huì)有感悟保檐！

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

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

如果用標(biāo)準(zhǔn)流或者浮動(dòng)夜只，實(shí)現(xiàn)會(huì)比較復(fù)雜或者難以實(shí)現(xiàn)垒在，此時(shí)我們用定位來做

元素的定位屬性

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

1扔亥、邊偏移

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

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

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

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

選擇器{position:屬性值;}

position屬性的常用值

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

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

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

上面的話翻譯成白話：就是網(wǎng)頁中所有元素都默認(rèn)的是靜態(tài)定位哦怔檩！其實(shí)就是標(biāo)準(zhǔn)流的特性。

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

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

相對(duì)定位relative(自戀型)

小笑話： 
剛剛看到一個(gè)超級(jí)超級(jí)帥的帥哥乙埃，看得我都忍不住想和他搞基了。世間怎會(huì)有如此之完美的男人锯岖。我和他就這樣一動(dòng)不動(dòng)的對(duì)視著介袜，就仿佛一見鐘情。時(shí)間也在這一瞬間停止了出吹。直到我的手麻了遇伞。才戀戀不舍的放下鏡子。捶牢。鸠珠。。

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

對(duì)元素設(shè)置相對(duì)定位后竹勉，可以通過邊偏移屬性改變?cè)氐奈恢梅膳瑁撬谖臋n流中的位置仍然保留娄琉。如下圖所示次乓，即是一個(gè)相對(duì)定位的效果展示：

注意：

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

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

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

絕對(duì)定位absolute (拼爹型)

小笑話：

吃早飯時(shí)赃阀，老婆往兒子碗里放了兩個(gè)煎蛋，兒子全給了我擎颖，還一本正經(jīng)地說：“爸爸榛斯，多吃點(diǎn)，男人養(yǎng)家不容易搂捧⊥运祝” <br/>

我一陣感動(dòng)，剛想夸他兩句允跑。 

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

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

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

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

父級(jí)沒有定位

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

父級(jí)有定位

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

子絕父相

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

這句話的意思是子級(jí)是絕對(duì)定位的話，父級(jí)要用相對(duì)定位仓技。

首先鸵贬，我們說下，絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位絕對(duì)脖捻、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位阔逼。

就是說，子級(jí)是絕對(duì)定位地沮，父親只要是定位即可（不管父親是絕對(duì)定位還是相對(duì)定位嗜浮，甚至是固定定位都可以），就是說摩疑，子絕父絕危融，子絕父相都是正確的。

但是雷袋，在我們網(wǎng)頁布局的時(shí)候专挪，最常說的子絕父相是怎么來的呢？請(qǐng)看如下圖：

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

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

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

這就是子絕父相的由來冶共。

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

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

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

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

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

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

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

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

固定定位的元素跟父親沒有任何關(guān)系疏虫，只認(rèn)瀏覽器永罚。
固定定位完全脫標(biāo)啤呼，不占有位置，不隨著滾動(dòng)條滾動(dòng)呢袱。

記憶法：就類似于孫猴子官扣，無父無母，好不容易找到一個(gè)可靠的師傅（瀏覽器）产捞，就聽的師傅的醇锚，別的都不聽哼御。

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

疊放次序（z-index）

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

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

比如： z-index: 2;

注意：

z-index的默認(rèn)屬性值是0嗦哆，取值越大谤祖，定位元素在層疊元素中越居上。
如果取值相同老速，則根據(jù)書寫順序粥喜，后來居上。
后面數(shù)字一定不能加單位橘券。
只有相對(duì)定位额湘，絕對(duì)定位，固定定位有此屬性旁舰，其余標(biāo)準(zhǔn)流锋华，浮動(dòng)，靜態(tài)定位都無此屬性箭窜，亦不可指定此屬性毯焕。

四種定位總結(jié)

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

定位模式轉(zhuǎn)換

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

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

元素的顯示與隱藏

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

他們的主要目的是讓一個(gè)元素在頁面中消失诗舰，但是不在文檔源碼中刪除警儒。最常見的是網(wǎng)站廣告，當(dāng)我們點(diǎn)擊類似關(guān)閉不見了眶根，但是我們重新刷新頁面蜀铲，它們又會(huì)出現(xiàn)和你玩躲貓貓！属百！

display 顯示

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

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

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

visibility 可見性

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

visible : 　對(duì)象可視

hidden : 　對(duì)象隱藏

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

overflow 溢出

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

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

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

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

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

CSS高級(jí)技巧

CSS用戶界面樣式

所謂的界面樣式，就是更改一些用戶操作樣式巩检，比如更改用戶的鼠標(biāo)樣式厚骗，表單輪廓等。但是比如滾動(dòng)條的樣式改動(dòng)受到了很多瀏覽器的抵制兢哭，因此我們就放棄了领舰。防止表單域拖拽

鼠標(biāo)樣式cursor

設(shè)置或檢索在對(duì)象上移動(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; 或者 outline: none;

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

防止拖拽文本域resize

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

右下角可以拖拽：

右下角不可以拖拽：

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

vertical-align 垂直對(duì)齊

以前我們講過讓帶有寬度的塊級(jí)元素居中對(duì)齊窍株，是margin: 0 auto;

以前我們還講過讓文字居中對(duì)齊民轴，是 text-align: center;

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

vertical-align 垂直對(duì)齊后裸，這個(gè)看上去很美好的一個(gè)屬性瑰钮，實(shí)際有著不可捉摸的脾氣，否則我們也不會(huì)這么晚來講解。

vertical-align : baseline |top |middle |bottom

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

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

[圖片上傳失敗...(image-b89972-1565585904996)]

圖片、表單和文字對(duì)齊

所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關(guān)系了梁呈。默認(rèn)的圖片會(huì)和文字基線對(duì)齊婚度。

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

有個(gè)很重要特性你要記渍好亍：圖片或者表單等行內(nèi)塊元素，他的底線會(huì)和父級(jí)盒子的基線對(duì)齊蝗茁。這樣會(huì)造成一個(gè)問題醋虏，就是圖片底側(cè)會(huì)有一個(gè)空白縫隙。

解決的方法就是：

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

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

溢出的文字隱藏

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

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

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

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

主要處理英文單詞

white-space

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

normal : 　默認(rèn)處理方式
nowrap : 　強(qiáng)制在同一行內(nèi)顯示所有文本限煞，直到文本結(jié)束或者遭遇br標(biāo)簽對(duì)象才換行。

可以處理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

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

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

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

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

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

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

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

然而糖埋，一個(gè)網(wǎng)頁中往往會(huì)應(yīng)用很多小的背景圖像作為修飾宣吱，當(dāng)網(wǎng)頁中的圖像過多時(shí)，服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求瞳别，這將大大降低頁面的加載速度征候。為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)钦听，提高頁面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites倍奢、CSS雪碧）朴上。

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

簡(jiǎn)單地說，CSS精靈是一種處理網(wǎng)頁背景圖像的方式卒煞。它將一個(gè)頁面涉及到的所有零星背景圖像都集中到一張大圖中去痪宰，然后將大圖應(yīng)用于網(wǎng)頁，這樣畔裕，當(dāng)用戶訪問該頁面時(shí)衣撬，只需向服務(wù)發(fā)送一次請(qǐng)求，網(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請(qǐng)求"搔确，這都會(huì)大大降低網(wǎng)頁的性能的彼棍。更重要的是圖片不能很好的進(jìn)行“縮放”，因?yàn)閳D片放大和縮小會(huì)失真膳算。我們后面會(huì)學(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ì)人員的工作，他們?cè)?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字庫(kù)

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

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

阿里icon font字庫(kù)

http://www.iconfont.cn/

這個(gè)是阿里媽媽M2UX的一個(gè)icon font字體圖標(biāo)字庫(kù)，包含了淘寶圖標(biāo)庫(kù)和阿里媽媽圖標(biāo)庫(kù)录淡“颇荆可以使用AI制作圖標(biāo)上傳生成。一個(gè)字嫉戚，免費(fèi)刨裆，免費(fèi)！彬檀！

fontello

http://fontello.com/

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

Font-Awesome

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

這是我最喜歡的字庫(kù)之一了努潘，更新比較快。目前已經(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)站會(huì)給我們把UI做的svg圖片轉(zhuǎn)換為我們的字體格式，然后下載下來就好了

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

字體引入到HTML

得到壓縮包之后，最后一步羽利，是最重要的一步了宫患，就是字體文件已經(jīng)有了，我們需要引入到我們頁面中。

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

[圖片上傳失敗...(image-997822-1565585904996)]

第一步：在樣式里面聲明字體：告訴別人我們自己定義的字體
```
@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>  
```
追加新圖標(biāo)到原來庫(kù)里面

如果工作中虚汛，原來的字體圖標(biāo)不夠用了，我們需要添加新的字體圖標(biāo)皇帮，但是原來的不能刪除卷哩，繼續(xù)使用，此時(shí)我們需要這樣做

把壓縮包里面的selection.json 從新上傳属拾，然后将谊，選中自己想要新的圖標(biāo)，從新下載壓縮包渐白，替換原來文件即可尊浓。

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

引入ico圖標(biāo)

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

注意：

她(它)不是iconfont字體哦。
位置是放到 head 標(biāo)簽中間纯衍。
后面的type="image/x-icon" 屬性可以省略栋齿。（我相信你也愿意省略。）
為了兼容性襟诸，請(qǐng)將favicon.ico 這個(gè)圖標(biāo)放到根目錄下瓦堵。（我們就不要任性了，聽話放位置歌亲，省很多麻煩菇用。。你好陷揪，我也好）

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

轉(zhuǎn)換ico圖標(biāo)

我們可以自己做的圖片惋鸥，轉(zhuǎn)換為 ico圖標(biāo)，以便放到我們站點(diǎn)里面鹅龄。 http://www.bitbug.net/

網(wǎng)站優(yōu)化三大標(biāo)簽

SEO是由英文Search Engine Optimization縮寫而來揩慕，中文意譯為“搜索引擎優(yōu)化”！SEO是指通過對(duì)網(wǎng)站進(jìn)行站內(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)品的曝光度。簡(jiǎn)單的說就是劲藐，把產(chǎn)品做好八堡，搜索引擎就會(huì)介紹客戶來。

我們現(xiàn)在階段主要進(jìn)行站內(nèi)優(yōu)化聘芜。網(wǎng)站優(yōu)化兄渺，我們應(yīng)該要懂。汰现。挂谍。

網(wǎng)頁title 標(biāo)題

title具有不可替代性叔壤，是我們的內(nèi)頁第一個(gè)重要標(biāo)簽，是搜索引擎了解網(wǎng)頁的入口口叙，和對(duì)網(wǎng)頁主題歸屬的最佳判斷點(diǎn)炼绘。

建議：

首頁標(biāo)題：網(wǎng)站名（產(chǎn)品名）- 網(wǎng)站的介紹

例如：

京東(JD.COM)-綜合網(wǎng)購(gòu)首選-正品低價(jià)、品質(zhì)保障妄田、配送及時(shí)俺亮、輕松購(gòu)物！

小米商城 - 小米5s疟呐、紅米Note 4脚曾、小米MIX、小米筆記本官方網(wǎng)站

Description 網(wǎng)站說明

對(duì)于關(guān)鍵詞的作用明顯降低启具，但由于很多搜索引擎斟珊，仍然大量采用網(wǎng)頁的MATA標(biāo)簽中描述部分作為搜索結(jié)果的“內(nèi)容摘要”。就是簡(jiǎn)要說明我們網(wǎng)站的主要做什么的富纸。
我們提倡囤踩，Description作為網(wǎng)站的總體業(yè)務(wù)和主題概括，多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話：010…”之類語句晓褪。

京東網(wǎng)：

<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城,銷售家電堵漱、數(shù)碼通訊、電腦涣仿、家居百貨勤庐、服裝服飾、母嬰好港、圖書愉镰、食品等數(shù)萬個(gè)品牌優(yōu)質(zhì)商品.便捷、誠(chéng)信的服務(wù)钧汹，為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!" />

注意點(diǎn)：

描述中出現(xiàn)關(guān)鍵詞丈探，與正文內(nèi)容相關(guān)，這部分內(nèi)容是給人看的拔莱，所以要寫的很詳細(xì)碗降，讓人感興趣，吸引用戶點(diǎn)擊塘秦。
同樣遵循簡(jiǎn)短原則讼渊，字符數(shù)含空格在內(nèi)不要超過 120 個(gè)漢字。
補(bǔ)充在 title 和 keywords 中未能充分表述的說明.
用英文逗號(hào) 關(guān)鍵詞1,關(guān)鍵詞2

<meta name="description" content="小米商城直營(yíng)小米公司旗下所有產(chǎn)品尊剔，囊括小米手機(jī)系列小米MIX爪幻、小米Note 2，紅米手機(jī)系列紅米Note 4、紅米4挨稿，智能硬件仇轻，配件及小米生活周邊，同時(shí)提供小米客戶服務(wù)及售后支持叶组。" />

Keywords 關(guān)鍵字

Keywords是頁面關(guān)鍵詞拯田，是搜索引擎關(guān)注點(diǎn)之一。Keywords應(yīng)該限制在6～8個(gè)關(guān)鍵詞左右甩十，電商類網(wǎng)站可以多少許船庇。

京東網(wǎng)：

<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡,京東" />

小米網(wǎng)：

<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />

BFC(塊級(jí)格式化上下文)

BFC(Block formatting context)

直譯為"塊級(jí)格式化上下文"。

元素的顯示模式

我們前面講過元素的顯示模式 display侣监。

分為塊級(jí)元素行內(nèi)元素行內(nèi)塊元素鸭轮，其實(shí)，它還有很多其他顯示模式橄霉。

那些元素會(huì)具有BFC的條件

不是所有的元素模式都能產(chǎn)生BFC窃爷，w3c 規(guī)范：

display 屬性為 block, list-item, table 的元素，會(huì)產(chǎn)生BFC.

大家有么有發(fā)現(xiàn)這個(gè)三個(gè)都是用來布局最為合理的元素姓蜂，因?yàn)樗麄兙褪怯脕砜梢暬季帧?/p>

注意其他的按厘，display屬性，比如 line 等等钱慢，他們創(chuàng)建的是 IFC 逮京，我們暫且不研究。

這個(gè)BFC 有著具體的布局特性：

有寬度和高度束莫，有外邊距margin 有內(nèi)邊距padding 有邊框 border懒棉。

就好比，你有了練習(xí)武術(shù)的體格了览绿。有潛力策严，有資質(zhì)。

什么情況下可以讓元素產(chǎn)生BFC

以上盒子具有BFC條件了饿敲，就是說有資質(zhì)了妻导，但是怎樣觸發(fā)才會(huì)產(chǎn)生BFC，從而創(chuàng)造這個(gè)封閉的環(huán)境呢诀蓉？

在好比栗竖，你光有資質(zhì)還不行，你需要一定額外效果才能出發(fā)的武學(xué)潛力渠啤，要么你掉到懸崖下面，撿到了一本九陰真經(jīng)添吗，要么你學(xué)習(xí)葵花寶典沥曹，欲練此功必先....

<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中僵腺，盒子從頂端開始垂直地一個(gè)接一個(gè)地排列.

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

3.在BFC中壶栋，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來說辰如，則觸碰到右邊緣）。

BFC的區(qū)域不會(huì)與浮動(dòng)盒子產(chǎn)生交集贵试，而是緊貼浮動(dòng)邊緣琉兜。
計(jì)算BFC的高度時(shí)，自然也會(huì)檢測(cè)浮動(dòng)或者定位的盒子高度毙玻。

它是一個(gè)獨(dú)立的渲染區(qū)域豌蟋，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局桑滩，并且與這個(gè)區(qū)域外部毫不相干梧疲。

白話文：孩子在家里愿意怎么折騰都行，但是出了家門口运准，你就的乖乖的幌氮，不能影響外面的任何人。

BFC的主要用途

BFC能用來做什么胁澳？

(1) 清除元素內(nèi)部浮動(dòng)

只要把父元素設(shè)為BFC就可以清理子元素的浮動(dòng)了该互，最常見的用法就是在父元素上設(shè)置overflow: hidden樣式，對(duì)于IE6加上zoom:1就可以了听哭。

主要用到

計(jì)算BFC的高度時(shí)慢洋，自然也會(huì)檢測(cè)浮動(dòng)或者定位的盒子高度。

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

外邊距合并的問題陆盘。

主要用到

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

屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會(huì)發(fā)生重疊，那么我們創(chuàng)建不屬于同一個(gè)BFC隘马，就不會(huì)發(fā)生margin重疊了太防。

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

主要用到

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

BFC 總結(jié)

BFC就是頁面上的一個(gè)隔離的獨(dú)立容器蜒车，容器里面的子元素不會(huì)影響到外面的元素。反之也如此幔嗦。包括浮動(dòng)酿愧，和外邊距合并等等，因此邀泉，有了這個(gè)特性嬉挡，我們布局的時(shí)候就不會(huì)出現(xiàn)意外情況了钝鸽。

優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)

什么是漸進(jìn)增強(qiáng)（progressive enhancement）、優(yōu)雅降級(jí)（graceful degradation）呢庞钢？

漸進(jìn)增強(qiáng) progressive enhancement：

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面拔恰，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果基括、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)颜懊。

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

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

一開始就構(gòu)建完整的功能风皿，然后再針對(duì)低版本瀏覽器進(jìn)行兼容河爹。

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

區(qū)別：漸進(jìn)增強(qiáng)是向上兼容揪阶，優(yōu)雅降級(jí)是向下兼容昌抠。

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

伸縮布局(CSS3)

CSS3在布局方面做了非常大的改進(jìn)拓挥，使得我們對(duì)塊級(jí)元素的布局排列變得十分靈活唠梨，適應(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可以互換赁炎。

[圖片上傳失敗...(image-30b11d-1565585904996)]

**2醉箕、各屬性詳解******

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

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

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

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

flex-direction: column 垂直排列

flex-direction: row 水平排列

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

3讥裤、justify-content調(diào)整主軸對(duì)齊（水平對(duì)齊）

子盒子如何在父盒子里面水平對(duì)齊

值	描述	白話文
flex-start	默認(rèn)值。項(xiàng)目位于容器的開頭姻报。	讓子元素從父容器的開頭開始排序但是盒子順序不變
flex-end	項(xiàng)目位于容器的結(jié)尾己英。	讓子元素從父容器的后面開始排序但是盒子順序不變
center	項(xiàng)目位于容器的中心。	讓子元素在父容器中間顯示
space-between	項(xiàng)目位于各行之間留有空白的容器內(nèi)吴旋。	左右的盒子貼近父盒子，中間的平均分布空白間距
space-around	項(xiàng)目位于各行之前、之間运授、之后都留有空白的容器內(nèi)咏尝。	相當(dāng)于給每個(gè)盒子添加了左右margin外邊距

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

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

值	描述	白話文
stretch	默認(rèn)值褂傀。項(xiàng)目被拉伸以適應(yīng)容器忍啤。	讓子元素的高度拉伸適用父容器（子元素不給高度的前提下)
center	項(xiàng)目位于容器的中心。	垂直居中
flex-start	項(xiàng)目位于容器的開頭仙辟。	垂直對(duì)齊開始位置上對(duì)齊
flex-end	項(xiàng)目位于容器的結(jié)尾同波。	垂直對(duì)齊結(jié)束位置底對(duì)齊

5、flex-wrap控制是否換行

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

值	描述
nowrap	默認(rèn)值叠国。規(guī)定靈活的項(xiàng)目不拆行或不拆列未檩。不換行，則收縮（壓縮）顯示強(qiáng)制一行內(nèi)顯示
wrap	規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列粟焊。
wrap-reverse	規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列冤狡，但是以相反的順序。

6项棠、flex-flow是flex-direction悲雳、flex-wrap的簡(jiǎn)寫形式

flex-flow: flex-direction  flex-wrap;

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

兩個(gè)中間用空格

例如：

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

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

align-content是針對(duì)flex容器里面多軸(多行)的情況,align-items是針對(duì)一行的情況進(jìn)行排列香追。

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

值	描述	測(cè)試
stretch	默認(rèn)值晴楔。項(xiàng)目被拉伸以適應(yīng)容器。
center	項(xiàng)目位于容器的中心峭咒。
flex-start	項(xiàng)目位于容器的開頭税弃。
flex-end	項(xiàng)目位于容器的結(jié)尾。
space-between	項(xiàng)目位于各行之間留有空白的容器內(nèi)讹语。
space-around	項(xiàng)目位于各行之前钙皮、之間、之后都留有空白的容器內(nèi)顽决。

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

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

用整數(shù)值來定義排列順序，數(shù)值小的排在前面赋访】啥迹可以為負(fù)值缓待。默認(rèn)值是 0

order: 1;

此知識(shí)點(diǎn)重在理解，要明確找出主軸渠牲、側(cè)軸旋炒、方向，各屬性對(duì)應(yīng)的屬性值

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

人面猴
序言：七十年代末签杈，一起剝皮案震驚了整個(gè)濱河市瘫镇，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌答姥，老刑警劉巖铣除，帶你破解...
沈念sama閱讀 221,430評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異鹦付，居然都是意外死亡尚粘，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,406評(píng)論 3贊 398
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門敲长，熙熙樓的掌柜王于貴愁眉苦臉地迎上來郎嫁，“玉大人，你說我怎么就攤上這事潘明⌒屑粒” “怎么了？”我有些...
開封第一講書人閱讀 167,834評(píng)論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵钳降，是天一觀的道長(zhǎng)厚宰。經(jīng)常有香客問我，道長(zhǎng)遂填，這世上最難降的妖魔是什么铲觉？我笑而不...
開封第一講書人閱讀 59,543評(píng)論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮吓坚，結(jié)果婚禮上撵幽，老公的妹妹穿的比我還像新娘。我一直安慰自己礁击，他們只是感情好盐杂，可當(dāng)我...
茶點(diǎn)故事閱讀 68,547評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著哆窿，像睡著了一般链烈。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上挚躯，一...
開封第一講書人閱讀 52,196評(píng)論 1贊 308
城市分裂傳說
那天强衡，我揣著相機(jī)與錄音，去河邊找鬼码荔。笑死漩勤，一個(gè)胖子當(dāng)著我的面吹牛感挥，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播越败，決...
沈念sama閱讀 40,776評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼触幼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了眉尸？” 一聲冷哼從身側(cè)響起域蜗，我...
開封第一講書人閱讀 39,671評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎噪猾，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體筑累，經(jīng)...
沈念sama閱讀 46,221評(píng)論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡袱蜡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,303評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了慢宗。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片坪蚁。...
茶點(diǎn)故事閱讀 40,444評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖镜沽，靈堂內(nèi)的尸體忽然破棺而出敏晤，到底是詐尸還是另有隱情，我是刑警寧澤缅茉，帶...
沈念sama閱讀 36,134評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布嘴脾，位于F島的核電站，受9級(jí)特大地震影響蔬墩，放射性物質(zhì)發(fā)生泄漏译打。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,810評(píng)論 3贊 333
男人毒藥：我在死后第九天來索命
文/蒙蒙一拇颅、第九天我趴在偏房一處隱蔽的房頂上張望奏司。院中可真熱鬧，春花似錦樟插、人聲如沸韵洋。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,285評(píng)論 0贊 24
一樁弒父案黄锤，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽搪缨。三九已至，卻和暖如春猜扮，著一層夾襖步出監(jiān)牢的瞬間勉吻，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,399評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來泰國(guó)打工旅赢，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留齿桃，地道東北人惑惶。一個(gè)月前我還...
沈念sama閱讀 48,837評(píng)論 3贊 376
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像短纵，于是被迫代替她去往敵國(guó)和親带污。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,455評(píng)論 2贊 359