HTML太丑了，怎么辦？
CSS層疊樣式表——表現(xiàn)，凡是頁面中所有能看見的東西的設(shè)置
CSS指的是層疊樣式表(Cascading Style Sheets) ，用于為網(wǎng)頁創(chuàng)建樣式表，對網(wǎng)頁進行裝飾，如設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式），圖片的外形（寬高、邊框樣式、邊距等）；
1、層疊：
網(wǎng)頁是一層一層的，層次高的將會覆蓋層次低的，我們看到的只是最上面的一層；
2、樣式：
CSS可以為網(wǎng)頁各個層次分別設(shè)置樣式；
3、注釋：css的注釋/* */，必須編寫在 <style> 標簽中；
4、
.box + tab== <div class="box"></div> 創(chuàng)建一個class為box的div ；
CSS有專有的<style>樣式標簽，可以分別為網(wǎng)頁各個層次設(shè)置樣式；
<style>樣式可分為三類：行內(nèi)樣式、內(nèi)部樣式、外部樣式；
1、特點：
直接將css樣式寫到<body>標簽內(nèi)部的style屬性中，給哪個標簽設(shè)置就寫在哪，直接寫聲明即可，內(nèi)聯(lián)樣式又稱行內(nèi)樣式；內(nèi)聯(lián)樣式只對當前元素中的內(nèi)容起作用；
2、語法：
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標簽名><p style="color:red; font-size:12px;"> </p>;
3、優(yōu)點：編寫簡單，定位準確,不需填寫選擇器，直接編寫聲明即可；
4、缺點：直接將css代碼寫到html內(nèi)部，使結(jié)構(gòu)與表現(xiàn)耦合，導致樣式不能復用；不方便后期維護，不推薦；
1、特點：
將css樣式編寫到<head>標簽中的<style>標簽中，通過css選擇器來指定元素；
2、語法：
<head> <style type="text/css"> // type="text/css" 在html5中可以省略 p { color: red; font-size: 30px; } </style></head>
type="text/css"是默認樣式文本，將樣式編寫到<style>標簽中，對頁面中所有的這個標簽統(tǒng)一設(shè)置樣式；
3、優(yōu)點：使css獨立于html代碼，同時為多個元素設(shè)置樣式，可以使樣式進一步復用，也可以使結(jié)構(gòu)與表現(xiàn)進一步分離，常用；
4、缺點：內(nèi)部樣式樣式只能在一個頁面使用，結(jié)構(gòu)與表現(xiàn)沒有徹底分離，一個好的程序是需要每個部分都是獨立的個體，模塊化的概念；
1、特點：
希望寫一個css的樣式在不同的頁面都可以使用，可以將所有樣式表統(tǒng)一編寫到外部樣式文件 style.css 中,再通過<link>標簽，將style.css樣式引入到當前頁面中，建立關(guān)系；
2、語法：
<head>
<!-- head標簽內(nèi)引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="style.css"/>
/* css文件內(nèi)直接定義樣式，不用寫style標簽 */
li {
list-style: none;
}</head>
3、優(yōu)點：
?。?）使結(jié)構(gòu) 表現(xiàn)完全分離，可以使樣式表同時控制多個頁面，最大限度的使樣式可以復用；
?。?）瀏覽器第一次加載圖片之后已經(jīng)將圖片下載了，以后訪問則不需下載，可以利用瀏覽器的緩存，加速用戶訪問的速度，提高了用戶體驗；
所以在開發(fā)中，最推薦使用外部css；文件級別：三者中 行內(nèi)樣式表 級別最高；
4、屬性：
| 屬性 | 作用 |
|---|---|
| rel | 定義當前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。 |
| type | 定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。我們都可以省略 |
| href | 定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。 |
| 樣式表 | 優(yōu)點 | 缺點 | 使用情況 | 控制范圍 |
|---|---|---|---|---|
| 行內(nèi)樣式表 | 書寫方便，權(quán)重高 | 沒有實現(xiàn)樣式和結(jié)構(gòu)相分離 | 較少 | 控制一個標簽（少） |
| 內(nèi)部樣式表 | 部分結(jié)構(gòu)和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |
1、結(jié)構(gòu)：選擇器 { 聲明塊 }
?。?）選擇器用于指定CSS樣式的HTML標簽，花括號內(nèi)是設(shè)置的具體樣式；
?。?）聲明塊緊跟選擇器后，用一組{ }括起來，里面是一組組的名值對結(jié)構(gòu)；
一組一組的名值稱為聲明，一個聲明塊中可以有多個聲明，用 ；隔開使用，聲明的樣式名和樣式值之間使用 ：來連接；
格式：屬性值前，冒號后面，保留一個空格；選擇器和花括號之間保留空格；
2、語法
<style>/* 給誰改樣式 { 改什么樣式 } */
p {
color: red;
font-size: 25px;
}</style>
1、作用：告訴瀏覽器：網(wǎng)頁上的哪些元素需要設(shè)置設(shè)么樣的樣式，即選擇器是選擇標簽用的；
2、分類：選擇器分為—基礎(chǔ)選擇器和復合選擇器；
基礎(chǔ)選擇器是由單個選擇器組成的；
包括：標簽選擇器、類選擇器、id選擇器和通配符選擇器；
| 基礎(chǔ)選擇器 | 作用 | 特點 | 使用 | 用法 |
|---|---|---|---|---|
| 標簽選擇器 | 可以選出所有相同的標簽 | 不能差異化選擇 | 較多 | p {color: red} |
| 類選擇器 | 可以選出1個或者多個標簽 | 根據(jù)需求選擇 | 非常多 | .nav {color: red;} |
| id選擇器 | 一次只能選擇1個標簽 | id選擇器在每個html中只能出現(xiàn)一次 | 一般和js搭配 | #nav {color: red;} |
| 通配符選擇器 | 選擇所有的標簽 | 選擇的太多，有部分不需要 | 特殊情況如清除全文樣式 | * {color: red;} |
以HTML標簽名作為選擇器，把頁面中某一類標簽都選擇，能快速統(tǒng)一標簽樣式；
語法：
標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例：p會選取頁面中所有的p標簽；
<style>
p {
color: red;
font-size: 25px;
}</style>
作用：通過元素的class屬性值選中一組元素，可選中一個或多個元素；
口訣：樣式點定義，結(jié)構(gòu)類（class）調(diào)用，一個或多個，開發(fā)最常見；
語法：
.類名 {
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}<p class='類名'></p>?。?）可以同時為 一個元素設(shè)置多個class屬性值，多個值之間用空格隔開；
?。?）可以允許多個標簽調(diào)用一個共用的class類；
<style>/* .class選擇器會選取頁面中所有 class屬性值為red的元素； */
.red {
color: red;
}
.font20 {
font-size: 20px;
}
</style></head><body>
<!-- 可以允許多個標簽調(diào)用一個共用的class-->
<p class="red">選擇器</p>
<p class="red">選擇器</p>
<!-- 同時為一個元素設(shè)置多個class屬性值 多類名樣式：把一個標簽相同的樣式放在一個類里-->
<p class="red font20">選擇器</p></body>
多類名開發(fā)：
可以把一些標簽相同的樣式放到一個類里；這些標簽都可以調(diào)用這個共用的類，然后再調(diào)用自己的類；從而節(jié)省css代碼，統(tǒng)一修改。
<div class="pink fontWeight font20">亞瑟</div><div class="font20">劉備</div><div class="font14 pink">安其拉</div><div class="font14">貂蟬</div>
常用類：
| 類命名 | 描述 |
|---|---|
| 頭 | header |
| 內(nèi)容 | content/container |
| 尾 | footer |
| 導航 | nav |
| 側(cè)欄 | sidebar |
| 欄目 | column |
| 頁面外圍控制整體布局寬度 | wrapper |
| 左右中 | left、right、center |
| 登錄條 | loginbar |
| 標志 | logo |
| 廣告 | banner |
| 頁面主體 | main |
| 熱點 | hot |
| 新聞 | news |
| 下載 | download |
| 子導航 | subnav |
| 菜單 | menu |
| 子菜單 | submenu |
作用：可以在頁面中單獨選取某一個標簽；
口訣：樣式 #定義，結(jié)構(gòu)id調(diào)用，只能調(diào)用一次，別人切勿使用
語法：
#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }<p id="id名"></p> // 元素的id值是唯一的，只能對應于文檔中某一個具體的元素。
例：
<head><style>
/* #p1會選取頁面中唯一 id屬性值為p1的元素； */
#p1 {
color: red;
font-size: 25px;
}</style></head><body>
<p id="p1">選擇器</p></body>
作用：選擇頁面中的 所有元素，特殊情況使用；
會匹配頁面所有的元素，降低頁面響應速度，不建議隨便使用
語法：
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內(nèi)邊距*/
}
復合選擇器是由兩個或多個基礎(chǔ)選擇器組合成的；
復合選擇器分為 后代選擇器，子選擇器，交并集選擇器，偽類選擇器；
| 選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
|---|---|---|---|---|
| 后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 div span |
| 子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav > p |
| 交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
| 并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav， .header |
| 鏈接偽類選擇器 | 給鏈接更改狀態(tài) | 較多 | 重點記住 a{} 和 a:hover 實際開發(fā)的寫法 |
父級 子級{屬性:屬性值;屬性:屬性值;}
作用：選中指定父元素里的 后代元素，可以是子孫后代；
/*例；為頁面中所有div中的span設(shè)置一個顏色為綠色*/
<style> div span { color: greenyellow; } </style>
作用：選中指定父元素的 直接后代，子元素；
/*例：為div標簽的直接子元素 span設(shè)置一個背景顏色為黃色；*/
div > span {
backage-color: yellow，親兒子
}*IE6及以下的瀏覽器不支持子元素選擇器
作用：同時選中多組標簽，為它們定義相同的樣式，用于集體聲明；
任何形式的選擇器都可以作為并集選擇器的一部分，用，連接，和的意思；
/*例：為id為p1的元素，class為p2的元素，還有h1,同時設(shè)置一個背景顏色為黃色（并集選擇器豎著寫，最后一個不加逗號）*/
#p1,
.p2 ,h1 {
backage-color: yellow;
}
#交集選擇器：既有標簽一的特點，也有標簽二的特點。并且，又的意思。
比如： p.one 選擇的是： 類名為 .one 的 段落標簽。
偽類：專門用來表示元素的 某種特殊的狀態(tài)，用 ： 表示；
比如：訪問過得超鏈接，普通的超鏈接，獲取焦點的文本框； 當我們需要為處在這種特殊狀態(tài)的元素設(shè)置樣式時，就可以使用偽類；
?。?）超鏈接偽類 lvha：
例：超鏈接按顏色分：訪問過的——紫色 ；沒訪問過的——藍色；正在點擊時是紅色；
以根據(jù)訪問者與該鏈接的交互方式，通過四個偽類 將鏈接設(shè)置 成4種不同的狀態(tài):順序不能亂；
:link{} 選擇所有未被訪問的鏈接；
:visited{} 選擇所有已被訪問的鏈接
:hover{} 選擇鼠標指針移動到上面的狀態(tài)
:active{} 選擇鼠標按下時被點擊時的狀態(tài)
?。?）注意：
寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序
hover和active也可為其他選擇器設(shè)置；但IE6中不支持對超鏈接之外的元素設(shè)置；
使用visited偽類只能設(shè)置字體的顏色；原理：瀏覽器是通過歷史記錄來判斷一個鏈接是否訪問過，有歷史，訪問過；由于涉及到了用戶隱私，所以使用visited偽類只能設(shè)置字體的顏色；
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經(jīng)過 */
color: red; /* 鼠標經(jīng)過的時候，由原來的 灰色 變成了紅色 */
}
?。?）：focus偽類選擇器
用于選取獲取焦點（光標）的表單元素，主要針對表單元素；
/* 將獲得光標的input元素選取出來 */
input:focus {
background-color: pink;
}
父元素：直接 包含子元素的元素；
子元素：直接被父元素包含的元素；
祖先元素：包含父元素 ，直接或間接包含后代元素的元素；
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素；
兄弟元素；擁有相同父元素的元素；
CSS有三個非常重要的特性：繼承性、優(yōu)先級、層疊性；
1、作用：現(xiàn)實中：像兒子只可以繼承父親遺產(chǎn)一樣，子承父業(yè)；
在css中，祖先元素的樣式，也會被后代元素繼承；如文本的顏色和字號；
利用繼承可以將一些基本的樣式設(shè)置給祖先元素，這樣所有的后代元素將會自動繼承這些樣式，只需要設(shè)置一個；
但不是所有元素都會被子元素繼承，比如，背景相關(guān)的樣式不會被繼承，邊框，定位不繼承；背景是有一個默認值，是透明顏色，可以通過子元素透過去；
2、特點：
恰當?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復雜性；
子元素可以繼承父元素的樣式（text-、font-、line-這些元素開頭的可以繼承，以及color屬性）
繼承性口訣：龍生龍，鳳生鳳，老鼠的孩子會打洞；
3、語法：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div { color: red; }
p { color: green; }
/*因為demo 沒有選p標簽，所以 繼承的權(quán)重為 0*/
.demo { color: blue; }
#test { color: pink; }
</style></head><body>
<div class="demo" id="test">
<!-- p是綠色 -->
<p>繼承的權(quán)重為 0</p>
</div></body>
4、行高的繼承
語法：
body{
font:12px/1.5 Microsoft YaHei;
}
特點：
行高可以接單位也可以不接；
若子元素沒設(shè)置行高，則匯集成父元素的行高/1.5；
此時的行高是當前子元素的文字大小*1.5；
body行高1.5的優(yōu)勢：里面的子元素可以根據(jù)自己文字大小自動調(diào)整行高；
1、作用：是瀏覽器處理沖突的一個能力，如果一個屬性通過兩個相同選擇器設(shè)置到同一個元素上，此時一個樣式會覆蓋（層疊）另外一個沖突的樣式，層疊性主要解決樣式?jīng)_突的問題；
2、原則：
樣式?jīng)_突，遵守就近原則，那個樣式離結(jié)構(gòu)近，就執(zhí)行哪個；
樣式不沖突，不會層疊；
當使用不同選擇器選擇同一個元素，并且設(shè)置相同的樣式時，樣式之間產(chǎn)生了沖突，最終采用哪個選擇器的樣式，由選擇器的優(yōu)先級（即權(quán)重）決定：
選擇器相同，則執(zhí)行層疊性；
選擇器不同，則根據(jù)選擇器權(quán)重執(zhí)行；
1、權(quán)重計算公式
選擇器的權(quán)重：計算權(quán)重需要將一個樣式的全部選擇器相加；
優(yōu)先級規(guī)則：
| 標簽選擇器 | 計算權(quán)重公式 |
|---|---|
| 繼承或者 *通配 | 0,0,0,0 |
| 元素（標簽選擇器） | 0,0,0,1 |
| 類，偽類，屬性 | 0,0,1,0 |
| ID選擇器 | 0,1,0,0 |
| 行內(nèi)樣式 style="" | 1,0,0,0 |
| 每個!important 重要的 | ∞ 無窮大 |
通配符和繼承權(quán)重為0；標簽為1，類（偽類）為10，id為100，行內(nèi)1000；
注意：
當選擇器中包含多種選擇器時 需要相加；
選擇器的優(yōu)先級計算，不會超過他的最大的數(shù)量級；
如果選擇器的優(yōu)先級一樣，則使用靠后的樣式；
并集選擇器的優(yōu)先級是單獨計算的：div, p, #p1, .hello{}
不相加計算：在樣式后面添加！important會獲得一個最高的優(yōu)先級，但是開發(fā)中盡量避免使用；不利js修改；
例：如果該元素沒有直接選中，不管父元素權(quán)重多高，子元素得到的權(quán)重都是0，因為繼承沒有權(quán)重；
<style>
/*父親的權(quán)重是100*/
#father {
color: red;!important; }
/*雖然權(quán)重有高低，但繼承的權(quán)重為0*/
/*所以以后看標簽到底執(zhí)行哪個樣式，就先看這個標簽有沒有直接被選出來*/
p {
color: pink;
}</style><body>
<div id="father">
<p>內(nèi)容</p>
</div> </body>
2、權(quá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
數(shù)位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況。
Fonts屬性定義字體系列、大小、粗細、和文本樣式（如斜體）；
| 屬性 | 表示 | 注意點 |
|---|---|---|
| font-size | 字號 | 一定要有單位，通常px |
| font-family | 字體 | 按照團隊約定抒寫字體 |
| font-weight | 字體粗細 | 加粗700/bold；不加粗400/normal；數(shù)字常用無單位 |
| font-style | 字體樣式 | 傾斜italic；不傾斜normal（常用默認）用于em不傾斜 |
| font | 字體簡寫 | 有序順；字號和字體必須有； |
| font-variant | 大小寫 | small-caps：小型大寫字母； |
1、font-size：文本大小/字號
（1）結(jié)構(gòu)：
/* 標題標簽比較特殊，需要單獨指定文字大小 */
p {
font-size: 25px;
}
（2）特點：其實設(shè)置的并不是文字本身真正大小，而是是文字在頁面中所屬的看不見的框空間的大小（盒子模型），類似于方格紙，所以字體大小實際值是小于font-size值；
不同瀏覽器默認字體不同，所以在網(wǎng)頁中默認顯示的效果也不同，谷歌瀏覽器默認16px；
當使用某種字體時，如果瀏覽器支持則使用該字體，不支持則使用默認字體；
2、font-famliy：字體系列
?。?）結(jié)構(gòu)：
body {
font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';
}?。?）特點：可以同時指定多個字體，優(yōu)先使用前面的字體;超過兩個單詞加引號；
?。?）分類：5大類
serif（襯線字體）：結(jié)尾拐個彎，宋體
sans-serif（非襯線字體）：橫平豎直，雅黑
monospace（等寬字體）：一邊寬，英文也是，編程程序一般用
cursive（草書字體）：楷書
fantasy（虛幻字體）：
?。?）應用場景：
瀏覽器會自動選擇指定的字體并應用樣式，選擇大字體中的一類；
不同瀏覽器對字體的理解效果不同，所以網(wǎng)頁中顯現(xiàn)的字體也不同；
一般會將字體的大分類指定為font-family中最后一個字體；
瀏覽器默認使用的是計算機字體，計算機有，就可以設(shè)置，但有些只支持英文；字體查看——c盤，windows，fonts；注意奇怪字體不要用；
?。?）常用字體：
| 字體名稱 | 英文名稱 | Unicode 編碼 |
|---|---|---|
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隸書 | LiSu | \96B6\4E66 |
| 幼園 | YouYuan | \5E7C\5706 |
| 華文細黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細明體 | MingLiU | \7EC6\660E\4F53 |
| 新細明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體
3、font：字體復合屬性
?。?）特點：將字體的樣式的值統(tǒng)一寫到font中，不同值間用空格隔開；
?。?）結(jié)構(gòu)：
body {
font: font-style font-weight font-size/line height font-family;
}
前面可省略，但最后兩項，font-size和font-family必須有且遵循順序；
優(yōu)點：使用簡寫屬性也會有一個比較好的性能；
Text屬性可定義文本的外觀，比如文本的顏色、對齊、裝飾、文本縮進、行間距；
| 屬性 | 表示 | 注意點 |
|---|---|---|
| color | 文本顏色 | 英文單詞；十六進制 #fff（常用）；RGB值 |
| text-align | 文本對齊 | center/left/right/justify(兩端對齊) |
| text-decoration | 文本修飾 | 下劃線：underline；取消：none（常用） |
| text-indent | 文本縮進 | 段落首行縮進，text-indent：2em； |
| line-height | 行高 | 調(diào)整行與行之間的距離 |
| text-shadow | 文本陰影 | ：水平偏移 垂直偏移 模糊程度 模糊顏色 |
| text-transform | 大小寫轉(zhuǎn)換 | 大uppercase；小lowercase；首大寫capitalize |
| letter-spacing | 字符間距 | |
| word-spacing | 單詞間距 | 只對英文起作用，設(shè)置空格多少，單位px |
1、color：文本顏色
CSS顏色的表達形式有三種：（1）使用顏色的單詞；（2）RGB代碼；（3）十六進制；
?。?）顏色的英文單詞：
p {
color: red;
}
?。?）RGB值：
RGB是指通過Red,Green,Blue三元色的不同濃度，來表示出不同的顏色；
p {
color: RGB(255,0,0); /* 以表示顏色濃度的數(shù)值表示 0-255 */
color: RGB(100%,0%,0%); /* 以百分數(shù)表示濃度 0-100%，最后轉(zhuǎn)為數(shù)字 */
}?。?）十六進制
使用十六進制RGB的值表示顏色：三組兩位的十六進制表示顏色，每組表示一個顏色；每組范圍：00-ff 即0-255；
p {
color: #ff0000;/* 可簡寫為#f00 */
}RGBA：表示透明度；可選值：0—1的值，完全透明—完全不透明；
2、text-align：水平文本對齊方式
可選值：center/left/right/justify（兩端對齊)
通過調(diào)整文本之間的空格的大小，來達到一個兩端對齊的目的
.pic {
/*想要圖片居中對齊，則讓他的父親p標簽添加水平居中的代碼*/
text-align: center;
}
3、text-decoration：修飾文本
可選值：Underline（下劃線) / overline（上劃線）/ line-through（刪除線）/ none
| 值 | 描述 |
|---|---|
| none | 默認，用于取消下劃線（最常用） |
| underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的（常用） |
| overline | 定義文本上的一條線。上劃線（不用） |
| line-through | 定義穿過文本下的一條線。刪除線（不常用） |
4、text-indent：文本首行縮進（縮進em字節(jié)）
一般都會使用em作為單位正值向右移，負值左移，可以將不想顯示的字隱藏起來；
p {
/*行間距*/
line-height: 25px;
/*首行縮進2個字 em 1個em 就是1個字的大小*/
text-indent: 2em;
}
5、行間距
（1）特點：
行間距包括：文本高度，上間距和下間距；
文字默認在行高中 垂直居中；
CSS中并沒有提供一個設(shè)置行間距的單獨方式，而是通過 行高 間接設(shè)置，行高越大，間距越大；
對于單行文本，可以將行高設(shè)置為和父元素高度一致；可以使單行文本在父元素中垂直居中；
（2）行間距的設(shè)置：
/* 1、直接指定大?。?px或者% ）*/
p {
/* line-height: 10%; */
line-height: 10px;
}
/* 2、通過行高指定：指定行高,字體大小后添加 / 指定行高，行高越大間距越大，行間距=行高-字體=50-30=20 */
.p2 {
font-size: 30px/50px "微軟雅黑"；
}
/* 3、設(shè)置字體相應的倍數(shù):line-height:1; */
6、行高和高度的三種關(guān)系
如果 行高 等 高度 文字會 垂直居中
如果行高 大于 高度 文字會 偏下
如果行高小于高度 文字會 偏上
背景屬性可以設(shè)背景顏色，背景圖片，背景平鋪，背景圖片位置，背景圖片固定；
應用場景：網(wǎng)頁扒圖片，超大的圖片或者小圖標及l(fā)ogo等都使用背景圖片，然后通過定位調(diào)節(jié)背景圖片位置；
| 屬性 | 作用 | 值 |
|---|---|---|
| background-color | 背景顏色 | 預定義的顏色值/十六進制/RGB代碼 |
| background-image | 背景圖片 | url(圖片路徑) |
| background-repeat | 是否平鋪 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分別是x 和 y坐標， 切記 如果有 精確數(shù)值單位，則必須按照先X 后Y 的寫法 |
| background-attachment | 背景固定還是滾動 | scroll/fixed |
| 背景簡寫 | 更簡單 | 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置; 他們沒有順序 |
| 背景透明 | 讓盒子半透明 | background: rgba(0,0,0,0.3); 后面必須是 4個值 |
1、background-color：顏色值
為元素設(shè)置背景顏色；若不設(shè)置，默認透明transparent，實際會顯示父元素的背景顏色；
2、background-image：背景圖片
background-image : none | url (images/demo.png)
為元素指定背景圖片；
如果背景圖片大于元素大小，默認顯示圖片左上角；
如果背景圖片小于元素大小，則會默認將圖片平鋪，直到填滿頁面；
插入圖片和背景圖片區(qū)別
插入圖片 我們用的最多 比如產(chǎn)品展示類 移動位置只能靠盒模型 padding margin
背景圖片我們一般用于小圖標背景 或者 超大背景圖片 背景圖片 只能通過 background-position
img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當圖片也是一個盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景圖片更改位置 我用 background-position */
}
3、background-repeat：背景平鋪方式
background-repeat : repeat | no-repeat | repeat-x | repeat-y
可選值：
| 參數(shù) | 作用 |
|---|---|
| repeat | 背景圖像在縱向和橫向上平鋪（默認的） |
| no-repeat | 背景圖像不平鋪 |
| repeat-x | 背景圖像在橫向上平鋪 |
| repeat-y | 背景圖像在縱向平鋪 |
background-size：cover；布滿全局最?。?/pre>
4、background-position：背景圖片位置
精確調(diào)整背景圖片在元素中的位置；背景圖片默認貼著元素左上角顯示；
position 后面是x坐標和y坐標?？梢允褂梅轿幻~或者 精確單位。
| 參數(shù) | 值 |
|---|---|
| position | top | center | bottom | left | center | right 方位名詞 |
| length | 百分數(shù) | 由浮點數(shù)字和單位標識符組成的長度值 |
?。?）指定的兩個值都是方位名詞，則兩個值前后順序無關(guān)；如果只給出一個值，則第二個值默認center；
?。?）如果position 后面是精確坐標， 第一個肯定是 x ,第二個一定是y；
如果只指定一個，則第一個是x坐標，第二個默認是center；
5、background-attachment：背景附著
用來設(shè)置背景圖片是否固定或隨頁面一起滾動，后期做視差滾動效果；
background-attachment : scroll | fixed
可選值：
| 參數(shù) | 作用 |
|---|---|
| scroll | 背景圖像是隨窗口對象內(nèi)容滾動 |
| fixed | 背景圖片固定在某位置，相對于瀏覽器，不隨窗口滾動；文字動，背景不動；不隨窗口滾動的元素一般給body設(shè)置，不給其他標簽設(shè)置； |
6、background：簡寫屬性
沒有順序要求和數(shù)量要求；不設(shè)置的為默認值；
通常：background:背景顏色 背景圖片 背景平鋪 背景圖片滾動 背景位置
body {
background: black url(images/bg.jpg) no-repeat fixed center top;
} <style>
.bg {
width: 800px;
height: 500px;
background-color: pink;
/*背景圖片 1. 必須加url 2. url 里面的地址不要加 引號*/
background-image: url(images/l.jpg);
/*背景圖片不平鋪*/
background-repeat: no-repeat;
/*背景位置*/
/*background-position: x坐標 y坐標;*/
/*background-position: right top; 右上角*/
/*那么第一個，肯定是 x 是 50 第二的一定是y 是 10*/
/*background-position: 50px 10px ;*/
/*以下說明 x 10像素 y 垂直居中的*/
/*background-position: 10px center;*/
background-position: center 10px;
}
</style>
7、背景圖片透明（CSS3）
語法：
background: rgba(0, 0, 0, 0.3);
alpha是透明度，范圍0-1；0.3可簡寫為.3;
因為是CSS3 ，所以 低于 ie9 的版本是不支持的
IE6:半透明背景 filter:alpha（opacity=50），范圍0-100；
案例：
<style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height: 58px;
color: #ffffff;
text-decoration: none;
}
/* .nav .bg1 {
background: url() no-repeat;
} */</style></head><body>
<div class="nav">
<a href="#" class="bg1">五彩導航</a>
<a href="#" class="bg2">五彩導航</a>
<a href="#" class="bg3">五彩導航</a>
<a href="#" class="bg4">五彩導航</a>
<a href="#" class="bg5">五彩導航</a>
</div></body>
css學習三大重點： css 盒子模型 、 浮動 、 定位
網(wǎng)頁布局的本質(zhì)：
首先利用CSS設(shè)置好盒子的大小，然后擺放盒子的位置。
最后把網(wǎng)頁元素比如文字圖片等等，放入盒子里面。
盒子是網(wǎng)頁布局的關(guān)鍵點
一、作用：
盒子模型（BOX）也叫 框 模型：在網(wǎng)頁中，一切皆是盒子，是一個盛裝內(nèi)容的容器；
css處理頁面時，每個html元素都看作包含在一個不可見的盒子里；
盒子默認矩形，對網(wǎng)頁進行布局就等同于擺放盒子；
二、結(jié)構(gòu)：
盒子分四部分：內(nèi)容區(qū)（content）、邊框（border）、內(nèi)邊距（padding）、和外邊距（margin）組成。
1、內(nèi)容區(qū)（content）：
內(nèi)容區(qū)是盒子中放置內(nèi)容的區(qū)域，元素中的文本內(nèi)容；
如果沒有設(shè)置內(nèi)邊距和邊框，則內(nèi)容區(qū)的大小默認是和盒子大小一致；
width和height設(shè)置的是內(nèi)容區(qū)寬度和高度，而非整個盒子的大小，此外，width和height只適合塊元素；
2、邊框（border）：
border : border-width || border-style || border-color border: 1px solid red; 沒有順序
?。?）作用：元素可見框的最外部；邊框會影響盒子大小，測量時需減去；
?。?）樣式：要為一個元素設(shè)置邊框必須指定三個樣式：width/style/color;
border-style：solid（實線）dotted（點）dashed（虛線）double（雙線）
注意：
大部分的瀏覽器中，邊框的寬度和顏色都是默認值；而邊框的樣式style默認值都是none，所以前兩者不寫也可出現(xiàn)邊框，樣式不寫就無法顯示；所以border-style必須寫；
CSS中還可以單獨設(shè)置某邊的樣式，如 border-xxx-style，xxx的值可能是top right bottom left；其余同理；
若想設(shè)置除一邊之外的三邊統(tǒng)一設(shè)置：
border：red solid 10px； border-right：none；
?。?）表格相鄰邊框合并，細線邊框；
border-collapse：collapse；
3、內(nèi)邊距（padding）：
?。?）作用：盒子內(nèi)容區(qū)與邊框間的距離；內(nèi)邊距會影響盒子的可見框大小，測量需減去（雙倍兩側(cè)）；盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定；
?。?）格式：padding：10px；
（3）屬性：padding-top/right/bottom/left 逆時針方向；
?。?）盒子的實際的大小 = 內(nèi)容的寬度和高度 + 兩側(cè)內(nèi)邊距 + 兩側(cè)邊框
盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
（5）應用場景：padding可以撐開盒子，巧妙運用，常用于制作導航欄；
因為每個導航欄里的字數(shù)不一樣，所以不給盒子設(shè)置寬度，直接給padding撐開；
?。?）注意：如果盒子本身沒給寬高，則padding則不會撐開；
?。?）內(nèi)邊距導致的問題：會撐大原來的盒子
解決：通過給設(shè)置了寬高的盒子，減去相應的內(nèi)邊距的值，維持盒子原有的大??；
4、外邊距（margin）：
（1）作用：元素邊框與周圍元素相距的空間；即當前盒子與其他盒子之間的距離；不會影響可見框的大小，只是影響盒子的位置；
（2）盒子有四個方向的外邊距，頁面中的元素都是靠左上擺放的，當設(shè)置 上 和左外邊距時，會導致盒子自身發(fā)生變化；當設(shè)置右和下邊距會擠其他盒子，改變其他盒子的位置；
?。?）外邊距可以指定正負值，負值反方向移動；
?。?）垂直方向框如果設(shè)置為auto，則外邊框默認是0；
?。?）當左右外邊距（水平方向）設(shè)置為auto時，瀏覽器會將左右外邊距設(shè)置為相等，將外邊框設(shè)置為最大值；前提是盒子設(shè)置了高度；
5、文字居中和盒子居中區(qū)別
（1）盒子內(nèi)的文字 水平居中是 text-align: center；而且還可以讓 行內(nèi)元素和行內(nèi)塊居中對齊
?。?）盒子內(nèi)的文字 垂直居中是 line-height= 高度；
?。?）塊級盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字 行內(nèi)元素 行內(nèi)塊元素水平居中 */
line-height: height;
margin: 10px auto; /* 塊級盒子水平居中 左右margin 改為 auto 就闊以了 上下margin都可以 */
.box {
margin：0 auto;
}
我們根據(jù)穩(wěn)定性來分，建議如下： 按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）。 ``` width > padding > margin ```
原因： - margin 會有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用。 - padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。 - width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來做。
使用margin定義塊元素的垂直外邊距時，會出現(xiàn)外邊距的合并；
主要會出現(xiàn)兩種情況：
相鄰塊元素垂直外邊距的合并——外邊距重疊；
嵌套塊元素垂直外邊距的塌陷；
1、相鄰塊元素垂直外邊距的合并
- 當上下相鄰的兩個塊元素（兄弟關(guān)系）相遇時，如果上面的元素有下外邊距margin-bottom，
- 下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是 **取兩個值中的較大者** 這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。如100 100取100；
如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會設(shè)置給父元素；
解決：盡量只給一個盒子設(shè)置margin值；
2、嵌套塊元素垂直外邊距的合并（塌陷）
- 對于兩個嵌套關(guān)系(父子)的塊元素，如果父元素沒有上內(nèi)邊距及邊框
- 父元素的上外邊距會與子元素的上外邊距發(fā)生合并 - 合并后的外邊距為兩者中的較大者
對于兩個嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距，而子元素也有上外邊距時，此時父元素會塌陷較大的外邊距值；
解決：
1、為父元素設(shè)置上邊框border隔開；設(shè)置屬性會增加像素，可以在寬高上減去；
2、為父元素設(shè)置上內(nèi)邊距padding-top；但是最后要在高度減去100px；
3、若想不使他重疊：在兩個塊元素div間添加其他，則不相鄰，不重疊；
4、為父元素添加overflow：hidden；
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
/*嵌套關(guān)系 垂直外邊距合并 解決方案 */
/*1. 可以為父元素定義上邊框 transparent 透明*/
/*border-top: 1px solid transparent;*/
/*2. 可以給父級指定一個 上 padding值*/
/*padding-top: 1px; */
/*3. 可以為父元素添加overflow:hidden。*/
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 100px;
}
</style></head><body>
<div class="father">
<div class="son"></div>
</div></body>
有了浮動，定位就不會有外邊距塌陷的問題了；
瀏覽器為了在頁面中不設(shè)置樣式時，也可以有很好的顯示效果，所以瀏覽器為很多的元素都設(shè)置了一些默認的margin和padding。而這些默認樣式，正常情況下不需要；所以使用前需要去掉；
清除瀏覽器默認樣式；
* {
margin：0；/* 清除內(nèi)邊距 */
padding：0； /* 清除外邊距 */
}
行內(nèi)元素為了照顧兼容性， 盡量只設(shè)置左右內(nèi)外邊距， 不要設(shè)置上下內(nèi)外邊距。
特點：
1、內(nèi)聯(lián)元素只占本身大小，水平排列，一行可放多個；
2、內(nèi)聯(lián)元素不能設(shè)置width和height；
3、水平內(nèi)邊距padding可以設(shè)置；垂直內(nèi)邊距雖然可以設(shè)置，但不會影響布局；
4、可以設(shè)置邊框，但垂直方向不會影響布局；
5、內(nèi)聯(lián)元素不支持垂直外邊距margin-top、margin-bottom；
| 元素模式 | 元素排列 | 設(shè)置樣式 | 默認寬度 | 包含 |
|---|---|---|---|---|
| 塊級元素 | 一行一個 | 可設(shè)置寬高 | 整行 | 包含任何標簽 |
| 行內(nèi)元素 | 一行多個 | 不可直接設(shè)置寬高 | 本身 | 容納文本或其他行內(nèi) |
| 行內(nèi)塊元素 | 一行多個塊級 | 可設(shè)置寬高 | 本身 |
display屬性：設(shè)置一個元素如何顯示
（1）作用：
通過diaplay樣式可以修改元素的類型，將一個內(nèi)聯(lián)元素變成塊元素；
內(nèi)聯(lián)元素不能設(shè)置width、height、margin-top、margin-bottom，但通過display轉(zhuǎn)為塊元素后可設(shè)置寬高；
display：none隱藏元素后，不在占有原來的位置；
?。?）可選值：
none:隱藏元素；頁面中不顯示，并且元素在頁面中不占位；
inline：可以將一個元素設(shè)置為內(nèi)聯(lián)元素，橫向排列；
block：可以將一個元素設(shè)置為塊元素，縱向排列；
inline-block：將一個元素設(shè)置為行內(nèi) 塊元素；可以使一個元素既有行內(nèi)元素的特點，又有塊元素特點；既可以設(shè)置寬高，又不獨占一行；
| 屬性 | 語法 | 描述 | 特點 |
|---|---|---|---|
| display | display：none； | 隱藏元素，頁面中不顯示 | 元素在頁面中不占位 |
| visible | visible： hidden; | 指定一個元素是可見還是隱藏 | 元素隱藏后占位 |
| overflow | overflow:hidden； | 內(nèi)容溢出一個元素的框（超過其指定高度及寬度） 時，元素隱藏，以免影響布局 | 只是對于溢出的部分處理 |
注意：對于有定位的盒子，請慎用overflow:hidden 因為它會隱藏多余的部分。
overflow屬性值：
| 屬性值 | 描述 |
|---|---|
| visible | 不剪切內(nèi)容也不添加滾動條 |
| hidden | 不顯示超過對象尺寸的內(nèi)容，超出部分隱藏 |
| scroll | 不管超出內(nèi)容否，總是顯示滾動條 |
| auto | 超出自動顯示滾動條，不超出不顯示滾動條 |
導航欄案例
注意，實際重要的導航欄中，我們不會直接用鏈接a 而是用 li 包含鏈接(li+a)的做法。
li+a 語義更清晰，一看這就是有條理的列表型內(nèi)容。
如果直接用a，搜索引擎容易辨別為有堆砌關(guān)鍵字嫌疑（故意堆砌關(guān)鍵字容易被搜索引擎有降權(quán)的風險），從而影響網(wǎng)站排名
案例：簡潔版小米側(cè)邊欄
將鏈接轉(zhuǎn)為塊元素，這樣鏈接就可以獨占一行，并有寬高；
鼠標經(jīng)過a 給連接設(shè)置背景顏色；
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
ul {
background-color: #55585a;
width: 230px;
}
ul li {
width: 230px;
height: 40px;
line-height: 40px;
}
ul li a {
/* display: block; */
font-size: 14px;
color: #ffffff;
text-decoration: none;
text-indent: 2em;
}
ul li:hover {
background-color: #ff6700;
}
</style></head><body>
<ul>
<li><a href="#">手機 電話卡</a></li>
<li><a href="#">電視 盒子</a></li>
<li><a href="#">筆記本 平板</a></li>
<li><a href="#">出行 穿戴</a></li>
<li><a href="#">智能 路由器</a></li>
<li><a href="#">健康 兒童</a></li>
</ul></body></html>
案例：新浪導航欄
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>新浪導航欄案例</title>
<style>
/*清除元素默認的內(nèi)外邊距*/
* {
margin: 0;
padding: 0;
}
.nav {
height: 41px;
background-color: #FCFCFC;
/*上邊框*/
border-top: 3px solid #FF8500;
/*下邊框*/
border-bottom: 1px solid #EDEEF0;
}
.nav a {
/*轉(zhuǎn)換為行內(nèi)塊*/
display: inline-block;
height: 41px;
line-height: 41px;
color: #4C4C4C;
/*代表 上下是 0 左右是 20 內(nèi)邊距*/
padding: 0 20px;
/*background-color: pink;*/
text-decoration: none;
font-size: 12px;
}
.nav a:hover {
background-color: #eee;
}
</style></head><body>
<div class="nav">
<a href="#">設(shè)為首頁</a>
<a href="#">手機新浪網(wǎng)</a>
<a href="#">移動客戶端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">關(guān)注我</a>
</div></body></html>
案例：藍牙耳機
錯誤~！
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
margin: 100px auto;
}
.box img {
width: 100%;
background-color: pink;
}
.review {
height: 70px;
padding: 0 28px;
margin-top: 30px;
font-size: 14px;
}
.appraise {
margin-top: 20px;
font-size: 14px;
color: #b0b0b0;
padding: 0 28px;
}
.info {
margin-top: 15px;
padding: 0 28px;
font-size: 14px;
}
.info h4 {
display: inline-block;
font-weight: normal;
}
.info span {
color: #ff6700;
}
</style></head><body>
<div class="box">
<img src="../1.png" alt="">
<p class="review">快遞牛，整體不錯藍牙可以說秒連，紅米給力</p>
<div class="appraise">來自于***的評價</div>
<div class="info">
<h4>Redml AirDots真無線藍...|</h4>
<span>99.9元</span>
</div>
</div></body>
還有一個豎線：方法：加<em>里然后去除斜體加顏色；再加上鏈接；
原理：
border-邊框；radius-半徑；
假如給一個矩形盒子設(shè)置圓角邊框，給border-radius：length指定一個數(shù)值，繪制一個以length為半徑的圓，讓這個圓分別與矩形的四個邊框相切，得出一個圓弧
1、語法：
border-radius：length; // 數(shù)值或百分比的形式 border-radius: 50%; // 讓一個正方形 變成圓圈 border-radius: 左上角 右上角 右下角 左下角 逆時針順序;
2、特點：數(shù)值越大，圓角的幅度越大，越明顯；
3、設(shè)置方法：
（1）參數(shù)值可以是數(shù)值或百分數(shù)；
（2）若是正方形想設(shè)置一個圓，就把數(shù)值改為高度或是寬度的一半即可，或50%；
?。?）若是矩形，改為高度一半即可；
（4）可簡寫也可分開寫：四個值分別代表：左上角 右上角 右下角 左下角；
若只設(shè)置兩個值，則是對角線形式；
案例：設(shè)置圓形、橢圓形
<style>
* {
margin: 0;
padding: 0;
}
.radius {
width: 200px;
height: 200px;
background-color: blue;
border-radius: 10px 20px 30px 40px;
}
.yuan {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
}
.juxing {
width: 300px;
height: 100px;
background-color: red;
border-radius: 50px;
}</style></head><body>
<div class="yuan"></div>
<div class="juxing"></div>
<div class="radius"></div></body>
1、語法：
box-shadow:水平陰影 垂直陰影 模糊距離（虛實） 陰影尺寸（影子大小） 陰影顏色 內(nèi)/外陰影； box-shadow：h-shadow v-shadow blur spread color inset;
2、特點：
盒子陰影不占用空間，不會影響其他盒子排列。
3、屬性：
前兩個屬性是必須寫的。其余的可以省略。
外陰影 (outset) 是默認的 但是不能寫 ;想要內(nèi)陰影可以寫 inset
| 值 | 描述 |
|---|---|
| h-shadow | 必須，水平陰影位置，允許負值 |
| v-shadow | 必須，垂直陰影位置，允許負值 |
| blur | 可選，模糊距離 |
| spread | 可選，陰影尺寸 |
| color | 可選，陰影顏色 |
| inset | 可選，將外部陰影改為內(nèi)部陰影 |
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3) inset;
}</style>
1、語法：
text-shadow: h-shadow v-shadow blur color;
2、屬性：
h-shadow、 v-shadow、 blur、 color
網(wǎng)頁布局的本質(zhì)是用css擺放盒子；
網(wǎng)頁布局的三種傳統(tǒng)方式有：文檔流（標準流）/ 浮動 / 定位；
文檔流處在網(wǎng)頁的最底層，表示一個頁面中的位置，像地基一樣的東西；
我們所創(chuàng)建的元素都默認在文檔流里；
1、塊元素會獨占一行，從上到下順序排列（按列排列）；
常用塊元素：<div> <hr> <h1> <p> <ul> <ol> <form> <table>
2、行內(nèi)元素會按照順序，從左到右順序排列（按行排列），碰到父元素邊緣自動換行；
常用行內(nèi)元素：<span> <a> <i> <em>
以上都是標準流的布局；
1、為什么需要浮動？
很多布局標準流無法完成，需要借助浮動完成布局，因為浮動可改變元素的默認排列方式；
典型應用：可以讓多個塊元素（盒子）在一行內(nèi)排列；
?。▔K元素轉(zhuǎn)為行內(nèi)塊也可實現(xiàn)一行顯示，但是中間有空白縫隙）
2、什么是浮動？
利用float屬性創(chuàng)建浮動框，將其移動到一邊，直到左右邊緣或遇另一個浮動框邊緣；
概念：元素的浮動是指設(shè)置了浮動屬性的元素會
脫離標準普通流的控制
移動到指定位置
格式：選擇器 { float：none/left/right }
3、浮動特性：
（1）浮動元素脫離原來的文本流（脫標），不再占位；
?。?）浮動的元素會在一行內(nèi)顯示且元素頂部對齊；
?。?）浮動的元素具有行內(nèi)塊元素的性質(zhì)，若給span浮動，則不需轉(zhuǎn)換為行內(nèi)塊；
?。?）浮動的元素是緊貼在一起的，無縫隙，若一行裝不下，另起一行；
?。?）浮動的元素不會蓋住文字，文字會自動環(huán)繞在浮動元素的周圍；可以通過浮動設(shè)置文字環(huán)繞圖片效果；
?。?）文檔流中，子元素寬度默認占父元素全部；
4、塊元素和行內(nèi)元素都可以設(shè)置浮動， 當行內(nèi)元素設(shè)置浮動以后，脫離文檔流，將會自動變成一個塊元素；
但當一個塊元素浮動之后，寬度會默認被內(nèi)容撐開，所以當漂浮一個跨級元素時會為他指定一個寬度； 浮動元素默認會變成塊元素，即使設(shè)置display：inline以后依舊是塊元素；
案例：
若第一個粉色的盒子加了浮動，他就飄起來了，不會占位，下面的元素立即上移；
如果第一、三個盒子不浮動，第二個盒子浮動，則第一個div獨占一行，2不浮上去；得出浮動的盒子只對它下面的元素有影響；
如果第一、三盒子浮動，第二個不浮動，則第二個上升第一個，第三個浮到挨著第二個；
<style>
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: rgba(0,153,255);
}</style>
浮動小結(jié)：
| 特點 | 說明 |
|---|---|
| 浮 | 加了浮動的盒子是浮起來的，漂浮在其他標準流盒子的上面。 |
| 漏 | 加了浮動的盒子是不占位置的，它原來的位置漏給了標準流的盒子。 |
| 特 | 特別注意：浮動元素會改變display屬性， 類似轉(zhuǎn)換為了行內(nèi)塊，但是元素之間沒有空白縫隙 |
1、浮動引發(fā)的高度塌陷
文檔流中，父元素的高度默認被子元素撐開，子元素多高，父元素多高；
但是當為子元素設(shè)置浮動之后，子元素會完全脫離文檔流，導致子元素無法撐起父元素高度，導致父元素高度塌陷；
由于父元素高度塌陷，則父元素下的所有元素都會向上移動，導致頁面布局混亂； 所以開發(fā)中一定要避免塌陷問題的出現(xiàn)；
可以將父元素的高度寫死，解決塌陷，但是一但將高度寫死，父元素的高度將不能自動適應子元素的高度；不建議使用；
由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產(chǎn)生影響
準確地說，并不是清除浮動，而是清除浮動后造成的影響
2、清除浮動本質(zhì)
清除浮動主要為了解決父級元素因為子級浮動引起內(nèi)部高度為0 的問題。清除浮動之后， 父級就會根據(jù)浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。
3、 清除浮動clear
1、原理：
?。?）清除其他元素的浮動對當前元素的影響，也就是說元素不會因為上方出現(xiàn)了浮動元素而改變位置；
（2）如果父盒子本有高度，則不需要清除浮動；
?。?）清除浮動后，父級會根據(jù)浮動的子盒子自動檢測高度，父級有了高度，就不會影響下面的標準流了；
2、為什么要清除浮動？父級沒高度；子盒子浮動了；影響下面布局了；
3、方法：清除浮動的策略就是閉合浮動，只讓浮動在父盒子內(nèi)部影響，不影響父盒子外邊的盒子；
4、可選值：None/left/right/both：清除兩側(cè)，清除對他影響最大的一側(cè)；
語法：選擇器{clear:屬性值;} clear 清除
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響） |
| right | 不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響） |
| both | 同時清除左右兩側(cè)浮動的影響（常用） |
4、高度塌陷問題的解決——清除浮動方法：
額外標簽法也稱為隔墻法，是 W3C 推薦的做法。
父級添加 overflow 屬性
父級添加after偽元素
父級添加雙偽元素
后面兩種偽元素清除浮動算是第一種額外標簽法的一個升級和優(yōu)化。
在最后一個浮動的子元素后面添加一個額外的空標簽（必須是塊級元素），清除浮動樣式；
例如 <div style=”clear:both”></div>，或則其他標簽br等亦可。
原理：由于這個div沒有浮動，所以他是撐開父元素高度的，然后對其進行清除浮動，通過這個空白的div撐開父元素的高度，基本沒有副作用；
優(yōu)點： 通俗易懂，書寫方便
缺點： 添加許多無意義的標簽，添加了多余結(jié)構(gòu)，結(jié)構(gòu)化較差。
<head><style>
/*清除浮動*/
.clear {
clear: both;
}
</style></head><body>
<div class="one">
<div class="damao"></div>
<div class="ermao"></div>
<div class="clear"></div> // 額外標簽法，div無意義 </div>
<div class="two"></div></body>
可以給父級添加： overflow為 hidden| auto| scroll 都可以實現(xiàn)。
之前清除 外邊距合并 也用了 overflow；
原理：w3c標準，頁面中的元素都有一個隱含的屬性，叫做block formatting context，簡稱***\*BFC\****;該屬性可以設(shè)置打開或者關(guān)閉，默認關(guān)閉；
當開啟元素的BFC后，元素將具有如下特性：
父元素的垂直外邊距不會和子元素重疊；
開啟BFC的元素不會被浮動元素覆蓋；
開啟BFC的父元素可以包含浮動的子元素
優(yōu)點： 代碼簡潔
缺點： 內(nèi)容增多時候容易造成不會自動換行導致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。
如何開啟BFC
設(shè)置元素浮動；——雖然可以撐起父元素但會導致父元素寬度丟失，而且也會導致下面元素上移，不能夠解決；
設(shè)置元素絕對定位；——同上
設(shè)置元素inline-block；——可以解決問題，會導致寬度丟失；
不是直接開啟的，間接的，會有副作用；
將元素的overflow設(shè)置一個非visible得值；
推薦方式：將overflow設(shè)置為hidden是副作用最小的開啟BFC的方式；
overflow：auto/hidden；
在IE6以下瀏覽器不支持BFC；IE6雖然按不兼容BFC，但是有另一個隱藏的屬性——haslayout，作用和BFC相似，IE6可以通過haslayout解決該問題；
開啟父元素的haslayout： zoom：1；
zoom是放大的意思，后面跟一個數(shù)值，表示將元素放大幾倍；
zoom：1；表示不放大元素，但是通過該樣式開啟haslayout，
zoom樣式在IE支持，在火狐和其他不兼容；
:after 方式為空元素額外標簽法的升級版，好處是不用單獨加標簽了
若不想添加div，又想解決塌陷，可通過css添加after偽類，選中box1的兩邊，after向元素的最后邊添加一個空白的塊元素，然后對其清除浮動（閉合浮動）；這樣和添加一個div的原理一樣，得到相同的效果；而且沒有在頁面里添加多余的div；
使用方法：
.clearfix :after {
/*添加一個內(nèi)容*/
content: "";
/*轉(zhuǎn)換為一個塊元素 默認是行內(nèi)元素*/
display: block;
/*清除兩側(cè)的浮動*/
clear: both;
height: 0;
visibility: hidden;
}
/*在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來處理 */
.clearfix{
zoom：1;
} /* IE6、7 專有 */
優(yōu)點： 符合閉合浮動思想 結(jié)構(gòu)語義化正確
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等
解決父子元素的外邊距重疊：使用空的table標簽可以隔離父元素和子元素的外邊距，阻止外邊距的重疊；
display：table可以將元素作為一個表格顯示；
修改后的clearfix是一個多功能，既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距不會重疊
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
zoom: 1;
}
優(yōu)點： 代碼更簡潔
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 小米、騰訊等
清除浮動總結(jié)
父級沒高度
子盒子浮動了
影響下面布局了，我們就應該清除浮動了。
| 清除浮動的方式 | 優(yōu)點 | 缺點 |
|---|---|---|
| 額外標簽法（隔墻法） | 通俗易懂，書寫方便 | 添加許多無意義的標簽，結(jié)構(gòu)化較差。 |
| 父級overflow:hidden; | 書寫簡單 | 溢出隱藏 |
| 父級after偽元素 | 結(jié)構(gòu)語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
| 父級雙偽元素 | 結(jié)構(gòu)語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
圖片質(zhì)量問題
一、PNG24圖片格式問題
1、問題：IE6中對圖片格式PNG24支持度不高，如果使用，會導致效果無法正常顯示；
2、解決：
使用png8代替png24，利用ps操作，文件存儲為web格式，但清晰度下降；
利用javascript解決，需要向頁面中引入一個外部的js文件，寫一個js代碼處理這個問題；
?。?）引入js方法：
在<body>標簽的最后引入外部js文件，相當于link；
<script type="text/javascript" src="script.js"> </script>
?。?）然后要再創(chuàng)建一個新的<script>標簽，并編寫js代碼；
<script type="text/javascript>
DO-belatedPNG.fix("div");修復
</script>
二、hack瀏覽器版本問題
css hack 實際是一個特殊的代碼，只有部分瀏覽器能識別；所以用來為一些瀏覽器設(shè)置特殊代碼；
方式一：
若只想在一些如IE6等特殊的瀏覽器執(zhí)行，IE10及以上不支持，可以用css hack來解決；
但css hack不推薦使用，它等同于bug，后期不好維護；
條件hack，只對IE瀏覽器有效，其它都視為注釋；IE10及以上不支持；
以下內(nèi)容只會出現(xiàn)在IE6，后面跟的是版本；
<!-- [if IE 6]--> <p></p><!-- [endif]-->
以下內(nèi)容只會出現(xiàn)在IE9以下 瀏覽器；
<!-- [if lte IE 6]-->
方式二：
在樣式前面添加下劃線 —，則該樣式只有IE6及以下瀏覽器可以實現(xiàn)；
三、IE6的雙邊距問題
在IE6中，當為一個向左浮動的元素設(shè)置左外邊距，或者為一個向右浮動的元素設(shè)置右外邊距時，這個外邊距將會是設(shè)置的值的2倍——IE6的雙邊距問題：
解決：
通過添加display：inline樣式來解決IE6的雙邊距問題，雖然對于一個浮動元素來說設(shè)置行內(nèi)塊元素沒有任何意義，但可以解決雙邊距問題；
.box1 {
width: 100px;
height: 100px;
float: left;
display: inline;
background-color: red;
margin-left: 100px;
}
Positon使用場景：標準流和浮動都無法實現(xiàn)的效果，采用定位；
?。?）浮動可以讓多個塊盒子一行沒有縫隙排列，用于橫向排列盒子；
（2）定位則是讓盒子 自由的在某個盒子內(nèi)移動位置 或 滾動窗口時固定在屏幕中心 某個位置，并且可以壓住其他盒子；
當開啟了元素的定位（position屬性是一個 非static值）時， 可以通過left right top bottom四個屬性來設(shè)置元素的偏移量；
如：left：元素相對于其定位位置的左側(cè)偏移量； 腦海應該有三種布局機制的上下順序： 標準流在最底層 (海底) ------- 浮動 的盒子 在 中間層 (海面) ------- 定位的盒子 在 最上層 （天空） 通常偏移量只用兩個方向?qū)傩跃涂梢詫υ囟ㄎ唬喈斢趚 y;坐標的概念：
例：
p {
position：relative；
left：100px；
top：200px；
}
注意：
邊偏移需要和定位模式聯(lián)合使用，單獨使用無效；
top 和 bottom 不要同時使用；
left 和 right 不要同時使用。
| 定位模式 | 是否脫標占有位置 | 移動位置基準 | 模式轉(zhuǎn)換（行內(nèi)塊） | 使用情況 |
|---|---|---|---|---|
| 相對定位relative | 不脫標，占位 | 相對自身位置移動 | 不能 | 基本單獨使用 |
| 絕對定位absolute | 完全脫標，不占位 | 相對于定位父級移動位置 | 能 | 要和定位父級元素搭配使用 |
| 固定定位fixed | 完全脫標，不占位 | 相對于瀏覽器移動位置 | 能 | 單獨使用，不需要父級 |
| 靜態(tài)static | 不脫標，正常模式 | 正常模式 | 不能 | 幾乎不用 |
| 粘性定位sticky | 不脫標，占位 | 相對于瀏覽器移動位置 |
1、相對定位：relative
?。?）當開啟了相對定位以后，而不設(shè)置偏移量時，元素位置不會發(fā)生任何變化：
（2）相對定位是相對于元素在文檔流中 原來的位置進行定位；
?。?）相對定位的元素不會脫離文檔流，元素在文本流的位置不會改變，還會占位；
（4）相對定位會使元素提升層級，定位元素蓋住元素；
（5）相對元素不會改變元素的性質(zhì)，塊還是塊，內(nèi)聯(lián)還是內(nèi)聯(lián)；
2、絕對定位：absolute
?。?）特點：
開啟絕對定位，會是元素完全脫離文檔流，不再占位；
如果不設(shè)置偏移量，元素的位置不會發(fā)生變化；
絕對定位是相對于離它最近的開啟了定位的祖先元素進行定位的，如果所有的祖先元素都沒有開啟定位，則會按照瀏覽器窗口（左上角）進行定位，通常用于輪播圖；
絕對定位會使元素提升層級；
絕對定位會改變元素的性質(zhì)，內(nèi)聯(lián)（行內(nèi)）元素會變成塊元素，塊元素寬和高都被內(nèi)容撐開；
（2）絕對定位的盒子居中
加了絕對定位的盒子不能通過 margin:0 auto 水平居中，但是可以通過以下計算方法實現(xiàn)水平和垂直居中。
?。?）子絕父相
子級是絕對定位的話，父級要用相對定位；
子盒子不需要占有位置，則是絕對定位，父級需要占位置，所以是相對定位；
3、固定定位：fixed
固定定位也是一種絕對定位，他的大部分特點和絕對定位一樣；
不同的是固定定位永遠相對于瀏覽器 窗口（頁面可視區(qū)）定位；
固定定位會固定在瀏覽器窗口的某個位置，不會隨滾動條滾動；
?、?nbsp;固定定位小技巧：固定在版心右側(cè)
小算法：
讓固定定位的盒子left：50%，走到瀏覽器可視區(qū)（版心）的一半位置；
讓固定定位的盒子margin-left：版心寬度的一半距離，多走版心寬度的一半位置，就可以讓固定定位的盒子貼著版心右側(cè)對齊了；
淘寶輪播圖： ① left: 50%;：讓盒子的左側(cè)移動到父級元素的水平中心位置。 ?、?nbsp;margin-left: -100px;：讓盒子向左移動自身寬度的一半transition：50% 自身寬度一半
?、?固定定位特點：
?。?）IE6不支持固定定位；
?。?）絕對定位（固定定位）會完全壓住盒子
浮動元素不同，只會壓住它下面標準流的盒子，但是不會壓住下面標準流盒子里面的文字（圖片） ；
但是絕對定位（固定定位） 會壓住下面標準流所有的內(nèi)容。 浮動之所以不會壓住文字，因為浮動產(chǎn)生的目的最初是為了做文字環(huán)繞效果的。 文字會圍繞浮動元素。
注意：脫標的盒子不會觸發(fā)外邊距塌陷 ，浮動元素、絕對定位(固定定位）元素的都不會觸發(fā)外邊距合并的問題。
4、粘性定位：sticky（了解）
?。?）特點：
以瀏覽器的可視窗口為參照點1移動元素（固定定位特點）
粘性定位占有原先的位置（相對定位特點）
必須添加top left right bottom其中的一個才有效；跟頁面滾動搭配使用，兼容性差，IE不支持；
?。?）語法：
p {
Position：sticky；
top：10px;
}
5、靜態(tài)定位：static
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background: rgba(255,255,255,.3);
border-radius: 7px;
}
固定定位的應用場景：固定在瀏覽器可視窗口某個位置的布局；
在使用固定和絕對定位時，如果盒子中沒有內(nèi)容，需要指定寬度
步驟 1 —— 頂部圖片和底部內(nèi)容
.top {
/* 注意：使用固定定位時，如果盒子中沒有內(nèi)容，需要指定寬度 */
width: 100%;
height: 44px;
background: url(images/top.png) no-repeat top center;
position: fixed;
left: 0px;
top: 0px;
}
.box {
width: 1002px;
/* 頂部的 44px 的 margin 可以讓 box 顯示在頂部圖片下方 */
margin: 44px auto;
}注意：
在使用固定定位時，如果盒子中沒有內(nèi)容，需要指定寬度
設(shè)置底部內(nèi)容圖片的頂部 margin，可以讓底部盒子初始顯示在頂部圖片的下方。
步驟 2 —— 左右兩側(cè)廣告
.ad-left,
.ad-right {
position: fixed;
top: 100px;
}
.ad-left {
left: 0px;
}
.ad-right {
right: 0px;
}注意：不要同時使用 left 和 right 和邊偏移屬性。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>絕對定位以帶有定位的父級元素來移動位置</title>
<style>
.yeye {
width: 500px;
height: 500px;
background-color: skyblue;
position: absolute;
}
.father {
width: 350px;
height: 350px;
background-color: pink;
margin: 100px;
/*標準流的子盒子總是以父級為準移動位置*/
/*如果 父級 沒有定位 絕對定位子盒子 以我們文檔為準瀏覽器移動位置*/
/*如果 父級 有定位 絕對定位子盒子 以父級為準移動位置*/
/*position: relative;*/
}
.son {
width: 200px;
height: 200px;
background-color: purple;
/*margin-left: 100px;*/
position: absolute;
top: 50px;
left: 50px;
}
</style></head><body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div></body></html>
注意：絕對定位/固定定位的盒子不能通過設(shè)置 margin: auto 設(shè)置水平居中。
在使用絕對定位時要想實現(xiàn)水平居中，
left: 50%;：讓盒子的左側(cè)移動到父級元素的水平中心位置；
margin-left: -100px;：讓盒子向左移動自身寬度的一半。
在使用 定位 布局時，可能會 出現(xiàn)盒子重疊的情況，z-index只能用于定位。 加了定位的盒子，默認**后來者居上**， 后面的盒子會壓住前面的盒子。 應用 `z-index` 層疊等級屬性可以**調(diào)整盒子的堆疊順序**。
z-index 的特性如下：
屬性值：正整數(shù)、負整數(shù)或 0，默認值是 0，數(shù)值越大，盒子越靠上；
如果屬性值相同，則按照書寫順序，后來居上；
數(shù)字后面不能加單位。
注意：z-index 只能應用于相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態(tài)定位無效。
前面我們講過， display 是 顯示模式， 可以改變顯示模式有以下方式:
可以用inline-block 轉(zhuǎn)換為行內(nèi)塊
可以用浮動 float 默認轉(zhuǎn)換為行內(nèi)塊（類似，并不完全一樣，因為浮動是脫標的）
絕對定位和固定定位也和浮動類似， 默認轉(zhuǎn)換的特性 轉(zhuǎn)換為行內(nèi)塊。
所以說， 一個行內(nèi)的盒子，如果加了浮動、固定定位和絕對定位，不用轉(zhuǎn)換，就可以給這個盒子直接設(shè)置寬度和高度等。
完善新浪導航案例
浮動元素、絕對定位(固定定位）元素的都不會觸發(fā)外邊距合并的問題。 （我們以前是用padding border overflow解決的）
也就是說，我們給盒子改為了浮動或者定位，就不會有垂直外邊距合并的問題了。
聯(lián)系客服
