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