一篇搞定css基础（超详细，附代码）
第一章：css概述
1.1.css的簡介
? ? ?1)什么是CSS
? ? ? css中文名稱叫層疊樣式表，層疊為css的布局，表示布局方式是通過一層層來實現(xiàn)的；樣式是布局層的顯示效果，主要是通過css提供的一些屬性和屬性值實現(xiàn)。
? ? ?css樣式設(shè)置是以名值對存在，名值用：隔開，以；結(jié)束。
color: red;? ? 2)css的作用
? ? ? 使得頁面顯示效果更加好，CSS將網(wǎng)頁內(nèi)容和顯示樣式進(jìn)行分離，提高了顯示功能。也就是css負(fù)責(zé)網(wǎng)頁的顯示效果，html負(fù)責(zé)頁面的結(jié)構(gòu)，兩者互不干擾。
1.2.html頁面引入css樣式的方式
? ? ? html頁面引入css樣式的方式分為兩大類：內(nèi)部引入和外部引入
? ? ?1）內(nèi)部映入css樣式的方式
? ? ? ? ?a，標(biāo)簽的屬性style
<div style="background-color:red;color:green;">? ? ? ? ?b，標(biāo)簽style實現(xiàn)樣式設(shè)置
<html><head><title>HTML示例</title> /**style標(biāo)簽設(shè)置樣式**/<style type="text/css"> div{background-color:green;color: red;} </style></head><body> <div>其意博，其理奧，其趣深，天地之象分，陰陽之候列。</div></body> </html>? ? 2）外部引入css樣式文件
? ? ? ?a，link標(biāo)簽引入外部css樣式（主要使用）
<link rel="stylesheet" type="text/css" href="css文件的路徑" />? ? ? b，在style標(biāo)簽使用@import引入外部css樣式（兼容性差）
<html><head><title>HTML示例</title><style type="text/css">@import url(div.css);</style></head><body> <div>變化之由表，死生之兆彰，不謀而遺跡自同，</div></body> </html>1.3.css加載
? ? ? ?css使用的加載方式是自上而下從右到左（優(yōu)化方面）加載方式，所以在引入css樣式的時候，通常都是放在head里面，這樣優(yōu)先加載樣式，再加載結(jié)構(gòu)，這樣保證在加載結(jié)構(gòu)的時候可以將樣式加載到結(jié)構(gòu)中。內(nèi)部加載也是這個原理，自上而下加載的時候，如果同時設(shè)置一個樣式，下面的樣式會把上面的樣式給覆蓋掉。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{height: 10px;width: 100px;/* 出現(xiàn)樣式覆蓋 */background-color: teal;background-color: red; }</style> </head> <body><div class="div1"></div> </body> </html>1.4.css注釋
css注釋注釋為：
/* 注釋*/第二章：CSS選擇器
? ? ? ? CSS可以通過自身、設(shè)置屬性class以及設(shè)置ID屬性來獲取該元素并設(shè)置該元素的屬性，選擇器主要分為單選擇器、多選擇器以及偽類選擇器等。
? ? ? ? 由于官方?jīng)]有給出單個選擇器和多個選擇器的名稱定義，在此為了好分類，我就只能直接為他們定義了。官方給出的選擇器分類主要有標(biāo)記名選擇器（元素選擇器）、類選擇器以及id選擇器三種分類，三種分類可以單獨寫，也可以多個寫在一起。我就把單獨寫的命名為單選擇器，多個寫在一起的命名為多選擇器。
2.1.單選擇器
1）標(biāo)記名選擇器（元素選擇器）
? ? ? 格式：元素名{樣式}
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: blue;font-size: 30px;}</style> </head> <body><div> <p>好好學(xué)習(xí)，天天向上</p> </div> </body> </html>2）類選擇器
? ? ? ? 每個元素都會有一個class屬性，通過設(shè)置該屬性值，在通過"."來獲取該元素并設(shè)置其樣式。
? ? ? ? 類選擇器的特點：屬性值可以設(shè)置成相同的，獲取時，就是獲取屬性值為該值得全部元素。
格式：.類名{樣式}
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 獲取屬性值為div1的全部標(biāo)簽*/.div1{color: crimson;}</style> </head> <body><div class="div1">每天進(jìn)步一點點</div><div class="div1"><li>第一</li><li>第二</li></div> </body> </html>3）id選擇器
? ? ? ? ?和類選擇器一樣，每個元素都會有一個id屬性，通過設(shè)置該id屬性值，通過"#"獲取id值為該值得元素
? ? ? ? id值得特點：id值應(yīng)該是一個唯一不重復(fù)的值
格式：#id值{樣式}
? ? ? ?注意：如果兩個元素設(shè)置id值為相同值，在獲取的時候，主流的瀏覽器解析的效果會和類選擇器一樣而不是強制要求唯一不重復(fù)。這個類似只是定成一個規(guī)則。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#title1{color: chartreuse;}</style> </head> <body><h1 id="title1">題目1</h1> </body> </html>4）通配符選擇器
? ? ? 通配符選擇器是獲取全部的元素。
格式：*{樣式}
? ? ? ? 該方式主要用來設(shè)置元素的初始化值，很多情況下的元素都會有默認(rèn)值，比如外邊距，內(nèi)邊距等，如果需要消除這個默認(rèn)值以便布局，可以使用該方式，后面也會說明一樣給元素初始化。
2.2.多選擇器
2.2.1.復(fù)合選擇器
1）交集選擇器
????????作用：選中同時符合多個條件的元素。
????????語法：選擇器1選擇器2選擇器n{樣式}
????????注意：如果有元素選擇器，元素選擇器必須在最前面。
</head> <style>/* 表示選中標(biāo)簽為div并同時滿足class為.box2。id為#box2的標(biāo)簽 */div.box2#box2{height: 20px;width: 20px;background-color: red;} </style> <body><!-- 交集選擇器 --><div class="box1" id="box2"></div><div class="box2" id="box2"><ul class="u1"><li class="li1"></li><li></li></ul></div>值得注意的是，交集選擇器只能在一個表情內(nèi)的多個選擇器使用，如果選擇class為box2下的ul標(biāo)簽，則不可以實現(xiàn)，只能通過后面講的子類選擇器或者后代選擇器。
2）并集選擇器（組合選擇器）
? ? ? 作用：同時選擇多個選擇器對應(yīng)的元素
? ? ?語法：選擇器1，選擇器2，選擇器n{樣式}
</head> <style>/* 組合選擇器（并集選擇器） *//* 表示選中class為box3和class為li1的標(biāo)簽 */.box3,.li1{height: 20px;width: 20px;background-color: red;} </style> <body><div class="box1" id="box2"></div><div class="box2" id="box2"><ul class="u1"><li class="li1"></li><li></li></ul></div><div class="box3"><ul><li></li><li></li></ul></div> </body>2.2.2.關(guān)系選擇器
? ? ? ?在html頁面中html元素時其他全部元素的父標(biāo)簽，其他元素都是html元素的子標(biāo)簽或者后代標(biāo)簽。所以可以得出一個元素相對于其他元素的元素關(guān)系：
父元素
????????——?直接包含子元素的元素?
子元素
????????——?直接被父元素包含的元素
祖先元素?
????????——?直接或者間接包含后代元素的元素，一個元素的父元素也是他的祖先元素
后代元素?
????????——?直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素
????????——?擁有相同父元素的元素
1）子元素選擇器
????????語法：父元素>子元素{}
<style>/* 子類選擇器 *//* 表示選父類class為.box2中的子元素名為div的元素 */.box2>div{height: 100px;width: 100px;background-color: red;} </style> <body><!-- 交集選擇器 --><div class="box1" id="box2"></div><div class="box2" id="box2"><div>aaaa</div><ul class="u1"><li class="li1"><div>aa</div><a href=""></a></li><li></li></ul></div><div class="box3"><ul><li></li><li></li></ul></div> </body>注意的是，就算.box2中有個div在li標(biāo)簽內(nèi)，不屬于給元素的子類，而是屬于他的后代，也不選擇。
2）后代選擇器：
????????語法：祖先元素? 后代元素{樣式}（注意有空格）
<style>.box2 div{height: 100px;width: 100px;background-color: red;} </style> <body><!-- 交集選擇器 --><div class="box1" id="box2"></div><div class="box2" id="box2"><div>aaaa</div><ul class="u1"><li class="li1"><div>aa</div><a href=""></a></li><li></li></ul></div><div class="box3"><ul><li></li><li></li></ul></div> </body>表示選中class為box2的標(biāo)簽內(nèi)的全部div標(biāo)簽?
3）兄弟選擇器（獲取該元素下一個兄弟元素）
????????語法：兄弟元素+下一個兄弟元素{樣式}
</head> <style>.li1+li{height: 100px;width: 100px;background-color: red;} </style> <body><li class="li1">1</li><li>2</li><li>3</li> </body> </html>這個選中的是第二個li標(biāo)簽，還有種情況是：
</head> <style>li+li{height: 100px;width: 100px;background-color: red;} </style> <body><li class="li1">1</li><li>2</li><li>3</li> </body> </html>這種情況選中的是內(nèi)容為2和3的li標(biāo)簽，?li+li表示的是由兄弟標(biāo)簽的li元素，其中有兄弟標(biāo)簽的元素有第一個和第二個，所以選中的會是第二個和第三個li標(biāo)簽
4）兄弟元素（獲取該元素下的全部兄弟元素）
????????語法：兄弟元素~下一個兄弟元素{樣式}
</head> <style>/* 選中class為li1下全部div兄弟標(biāo)簽 */.li1~div{height: 100px;width: 100px;background-color: red;} </style> <body><li class="li1">1</li><li>2</li><li>3</li><div>4</div><div>5</div> </body>2.2.3.偽類選擇器
? ? ?偽元素：表示頁面中一些的特殊的并不真實存在的一個元素。
1）偽類
:first-child:只選中第一個子元素 :last-child：只選中最后一個元素 :nth-child()：第n個子元素2n：表示選中偶數(shù)位數(shù)的子元素2n+1：選中奇數(shù)位數(shù)的子元素 :first-of-type :last-of-type :nth-of-type() 和上面類似，但是只是選中同類型的元素。 :not()：否定偽類，表示將符合條件的元素從選擇器中去掉2）常見的偽類選擇器
::first-letter：表示該元素內(nèi)容的第一個字母
?::first-line:表示該標(biāo)簽內(nèi)容的第一行
::selection:表示選中的內(nèi)容
::before：在該元素的子元素之前。添加的內(nèi)容為給元素類型的元素，如果只是該元素沒有其他子元素，就只是將內(nèi)容添加到該元素行內(nèi)。
::after：在該元素的子元素之后添加內(nèi)容，添加的內(nèi)容為給元素類型的元素，如果只是該元素沒有其他子元素，就只是將內(nèi)容添加到該元素行內(nèi)。
????????在使用該偽類元素的時候，添加的內(nèi)容是無法被選中的。（常用的作用）
3）實例，在div標(biāo)簽?zāi)笞訕?biāo)簽之后添加任意內(nèi)容；
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> </head> <style>.div1::after{content: "這是在妮妮后面添加的內(nèi)容";}</style> <body><div class="div1"><div>哈哈</div><div>哦哦</div><div>妮妮</div></div> </body> </html>2.2.4.屬性選擇器
????????語法：元素[屬性]{}：表示選擇擁有該屬性的元素
?????????????元素[屬性=屬性值]{}：表示選擇擁有該屬性且為該屬性值的元素
?????????????元素[屬性^=屬性值]{}：表示選擇擁有該屬性且以該元素屬性值開頭的元素
?????????????元素[屬性$=屬性值]{}：表示選擇擁有該屬性且以該元素屬性值結(jié)尾的元素
?????????????元素[屬性*=屬性值]{}：表示選擇擁有該屬性且包含元素屬性值的元素
??????????????[屬性]{}：前面默認(rèn)為通配符*，表示選中任意元素?fù)碛性搶傩詫傩?/p>
2.3.a標(biāo)簽的偽類
? ? ? 1）未訪問過的鏈接狀態(tài)
? ? ?
:link? ?2） 已訪問過的鏈接狀態(tài)
???
?:visited????為了隱私問題，樣式設(shè)置的時候，除了link狀態(tài)的，其他的只能設(shè)置他的顏色。
????這兩個偽類屬于a標(biāo)簽特有的，下面兩個是其他元素也可以有的偽類。???
：hover?表示鼠標(biāo)移入的狀態(tài)：active?表示鼠標(biāo)點擊的狀態(tài)2.4.樣式繼承
? ? ? ?為一個元素設(shè)置樣式同時會應(yīng)用到它的后代元素上的現(xiàn)象，叫做繼承。繼承只能發(fā)生在祖先后代之間。為了方便開發(fā)，可以利用繼承將共同的樣式設(shè)置在祖先元素上。
? ? ? 注意：并不是所有的樣式都會被繼承，例如背景相關(guān)的，布局相關(guān)的樣式都不會被繼承。
? ? ? ?父元素未設(shè)置高度，會被子元素的高度撐開。
2.5.選擇器的權(quán)重（優(yōu)先級）
！important>內(nèi)聯(lián)選擇器（1000）>id選擇器（100）>class選擇器（10）>元素選擇器（1）>通配符選擇器（0）>繼承樣式。
? ? ? ? 1）交集選擇器優(yōu)先級是將各個選擇器權(quán)重相加；組合選擇器（并）單獨選擇。
? ? ? ? 2）同權(quán)重時，會出現(xiàn)樣式覆蓋的情況，解析從上到下，下面的樣式會覆蓋掉上面的樣式。
? ? ? ? ? ? ? ?注意：當(dāng)樣式不生效的時候，首先要想到優(yōu)先級不足。
? ? ? ?3）如果一個選擇器過低，但是這個樣式必須優(yōu)先顯示，需要在屬性值的后面加上：！important。該方式優(yōu)先級超過內(nèi)聯(lián)樣式。
2.6.單位和顏色
2.6.1.像素
? ? ? ? 單位：px
????????不同的設(shè)備像素顯示效果不一樣
2.6.2.百分比:
? ? ? ? 設(shè)置屬性相對于父元素屬性的百分比（不嚴(yán)謹(jǐn)）
????????例如:50%;
2.6.3.em：相對于元素的字體的大小計算，1?em=1?font-size
????????會根據(jù)自身字體大小的改變而改變。
2.6.4.rem：和em類似，只是會根據(jù)根元素的字體改變。
2.6.5.顏色
??????????單詞表示：
??????????RGB值表示：
??????????RGBA值表示：
??????????十六進(jìn)制的RGB值：（最常用）
??????????HSL值：（色相，飽和度，亮度）
第三章：盒子模型
3.1.盒子模型概述
3.1.1.什么是盒子模型
? ? ? ? ?css將頁面中所有的元素都設(shè)置成一一個個的矩形的盒子。將盒子設(shè)置成一個個矩形盒子之后，對頁面的布局就變成了將不同的盒子擺放在不同的位置。
3.1.2.盒子的構(gòu)成
? ?每一個盒子的組成成分
? ? ? ? 1）內(nèi)容區(qū)（content）
????????????在使用width，height，color等屬性的時候，是對盒子的內(nèi)容區(qū)進(jìn)行
????????????設(shè)置樣式。
? ? ? ? 2）內(nèi)邊距（padding）
????????????內(nèi)邊距是內(nèi)容區(qū)和邊框之間的距離
? ? ? ? 3）邊框（border）
????????????對邊框設(shè)置樣式的時候，需要指明其對應(yīng)的border關(guān)鍵詞。
? ? ? ? 4）外邊距（margin）
????????????外邊距的邊框和其他盒子（元素）的距離
????????所以一個盒子的實際大小是等于內(nèi)容區(qū)大小+內(nèi)邊距大小+邊框大小。其中內(nèi)容區(qū)，內(nèi)邊距，邊框?qū)儆诳梢娋钟?#xff0c;外邊距屬于不可見區(qū)域（不可以設(shè)置樣色等可見樣式）
3.2.邊框
? ? ? 邊框一般情況設(shè)置至少三個樣式
border-width：邊框?qū)挾?border-color：邊框顏色 border-style：邊框樣式? ? ?可以同時設(shè)置：
border：寬度 樣式 顏色；? ? ?注意：同時設(shè)置的時候，邊框的寬度，樣式和樣式?jīng)]有固定寫法，誰在前后不區(qū)分。
3.2.1.邊框?qū)挾萣order-width
? ? ? ? border-width：用來指定四個方向的邊框?qū)挾?#xff0c;不設(shè)置會有默認(rèn)值，但是由于瀏覽器的不同，給的默認(rèn)值也不同，一般還是需要自己設(shè)置一個值。
1）值的情況：
????????????????四個值：上??右??下??左
????????????????三個值：上??左右??下
????????????????三個值：上下?左右
????????????????一個值：上下左右
? ? ? ?除了用這種方式設(shè)置，還可以通過特定方式來設(shè)置其值：
border-top-width border-right-width border-bottom-width border-left-width2）?border-color和border-style規(guī)則和border-width是一樣的。
3.2.2.border-style（默認(rèn)值是none）?
?樣式：
solid??單實線? dashed?線性虛線 dotted?點狀虛線 double?雙線3.3.內(nèi)邊距padding
內(nèi)邊距：內(nèi)邊距是內(nèi)容相對于邊框的部分。?一共有四個方向的內(nèi)邊距：??????
padding-top padding-right padding-bottom padding-left? ?可見框：內(nèi)容區(qū)，內(nèi)邊距，邊框。
3.4.?外邊距margin
? ? ? ? ?外邊距不屬于盒子的一部分了，其影響主要是盒子的位置。?外邊距有四個方向的外邊距?。
margin-top margin-right margin-bottom margin-left? ? ? ? 注意：在設(shè)置了top和left的寬度的時候，會將自身移動，而設(shè)置right和bottom的寬度的時候，只會移動它相鄰的其他的元素，這個移動距離是相對于父元素來移動。
? ? ? 通過上述所示：margin的作用是控制盒子占的空間大小。
3.4.1.垂直外邊距重疊：
? ? ? ? 1）兄弟元素的重疊：
????????????當(dāng)設(shè)置了上元素（例如div）的bottom的時候，下邊的一個元素（div）設(shè)置top，這時候會發(fā)生外邊距重疊，距離取較大值，而不是。
? ? ? ? 2）相關(guān)邊距之和：
? ? ? ? 特殊情況是一負(fù)一正，為兩者之和。
????????如果相鄰的外邊距都為負(fù)值，取絕對數(shù)最大的值。
????????說明：兄弟之間的外邊距重疊，是有利的，一般是不處理。
? ? ? ? 3）父子元素的重疊：
????????????父子相鄰?fù)膺吘嘀丿B情況，當(dāng)設(shè)置子元素的上外邊距而父元素不設(shè)置外邊距，子元素的外邊距會專遞給父元素的外邊距，這是就會出現(xiàn)外邊距重疊，
????????????解決方式：
????????????方式一：不用外邊距，設(shè)置padding，這是這種情況會導(dǎo)致父元素高度變大，只要減去增加的padding就可以了，。
????????????方式二：不讓他們相鄰，父子元素的外邊距相鄰的主要原因是父元素沒有設(shè)置一個邊框大小，當(dāng)父元素的邊框大小為0的時候，父子元素的?外邊距就相鄰了，這時候可以設(shè)置父元素的邊框大小，來隔開父子元素的外邊距。只是這樣還需要修改父元素的height值。
????????????方式三：使用偽元素隔離（后面布局單講，詳情可到5.6查看解決方式）
第四：CSS布局
4.1.CSS水平布局
? ? ?4.1.1.水平布局的規(guī)范
????????????子元素在其父元素中水平方向的位置由以下幾個屬性共同決定的：??????????????
margin-left border-left padding-left width padding-right border-right margin-right? ? ?一個或者多個元素在其父元素中，水平布局必須滿足以下等式：
margin-left+border-left+padding-left+width+padding-right+?border-right+margin-right=父元素內(nèi)容區(qū)的width
4.1.2.過渡約束
? ? ?如果不滿足這個等式瀏覽器會根據(jù)相對于的情況對該等式進(jìn)行約束，叫做過渡約束。
如果margin-left和?margin-right都沒有設(shè)置值，默認(rèn)值都為0，瀏覽器會將margin-right設(shè)置成一個值，用于滿足這個等式。
在這七個值中，有三個值（width，margin-left，margin-right）可以設(shè)置成auto，auto的意思的，如果不滿足等式，瀏覽器會根據(jù)等式相同的元素設(shè)置設(shè)置屬性為auto的元素的值，以滿足該等式：
如果這三個都設(shè)置為0，則寬度設(shè)置成最大，能多大就多大。
如果設(shè)置兩個外邊距為一個auto，width為默認(rèn)值，則把寬度設(shè)置成最大值，
如果把兩個外邊距為一個auto，寬度為一個固定值，則把兩個外邊距設(shè)置成相同值。
第三種情況一般使用它來設(shè)置在其父元素中水平居中，margin：0?auto；（上下為0，左右相同值）
4.2.垂直方向布局：
? ? ? ?在父元素不設(shè)置高度的時候，父元素默認(rèn)高度等于子元素高度。在父元素設(shè)置高度的時候，子元素高度大于父元素，會出現(xiàn)子元素樣式溢出。對于溢出，css提供了處理機制，主要是針對子元素在父元素出現(xiàn)溢出時，父元素做出的處理手段。
????????overflow：XXXXX；
可選值：?
visible?:默認(rèn)值，子元素出現(xiàn)溢出，則會在父元素外面顯示 hidden:將子元素溢出部分給隱藏掉； scroll:添加滾動條 auto：根據(jù)需要生成滾動條，水平方向出現(xiàn)溢出，就生成水平方向，垂直方向出現(xiàn)溢出，就生成垂直方向； overflow-x:單獨處理水平方向 overflow-y:單獨處理垂直方向4.3.?行內(nèi)元素的盒子模型
? ? ? ? 4.3.1.行內(nèi)元素不支持設(shè)置寬度和高度，原因是行內(nèi)元素的寬和高是由內(nèi)容區(qū)的內(nèi)容決定的，不可以直接通過設(shè)置寬高來設(shè)置內(nèi)容區(qū)的寬高。
? ? ? ?4.3.2.行內(nèi)元素可以設(shè)置padding，border和margin，垂直方向的padding，border和margin不會影響頁面的布局、
? ? ? ?4.3.3.轉(zhuǎn)換元素類型
? ? ? ? 屬性：display
? ? ? ? 可選值：???????????
inline:將元素轉(zhuǎn)換為行內(nèi)元素 block：將元素轉(zhuǎn)換為塊元素 inline-block：將元素設(shè)置成行內(nèi)塊元素，既可以設(shè)置寬高又不獨占一行（能不用盡量不用） table：將元素設(shè)置成一個表格，表格的主體是不占位置的。 none：將元素不顯示在頁面中，位置也不會占了;4.3.4.設(shè)置元素的顯示狀態(tài)。
? ? ? 屬性：visibility
? ? ?屬性值：
hidden：元素在頁面隱藏不顯示，但是占位置。 visible:默認(rèn)值，表示元素在頁面正常顯示。4.4.去掉默認(rèn)樣式
? ? ? ? 標(biāo)簽自身會有css樣式，為了方便布局以及設(shè)置樣式，需要將標(biāo)簽原有的樣式去掉，一般的話直接時候一個大公司去默認(rèn)樣式模板css就可以了，這里就不多說了。
4.5.盒子的尺寸
? ? ? ? 默認(rèn)情況下，盒子的可見框的大小由內(nèi)容區(qū)，內(nèi)邊距和邊框共同決定
????????box-sizing用來設(shè)置盒子尺寸的計算方式（設(shè)置width和height的作用）????????
可選值：
content-box默認(rèn)值，寬度和高度用來設(shè)置內(nèi)容區(qū)的大小 border-box：寬度和高度用來設(shè)置整個盒子可見框的大小設(shè)置成border-box后width和height就變成內(nèi)容區(qū)，內(nèi)邊距和邊框的總大小。
4.6.陰影和圓角
4.6.1.陰影
? box-shadow用來設(shè)置元素的陰影效果，陰影不會影響頁面布局。
????????第一個值：水平偏移量?設(shè)置陰影的水平位置?正值向左偏移?負(fù)值向右偏移
????????第二個值：垂直偏移量?設(shè)置陰影的垂直位置?正值向下偏移?負(fù)值向上偏移
????????第三個值：模糊的模糊半徑
????????第四個值：背景顏色
4.6.2.輪廓線
????????outline：用于設(shè)置元素的輪廓線，用法和border一樣。
4.6.3. 圓角
????????border-radius：用于設(shè)置圓角，圓角設(shè)置的圓的半徑大小
????????單獨設(shè)置：
border-top-left-radius： border-top-right-radius： border-bottom-left-radius： border-bottom-right-radius：20px?20px；????????border-radius：四個值
????????順時針，和margin類似。
圓的畫法：border-radius：50% 50%；
第五章：浮動float
5.1.浮動的概述
? ? ? ? 浮動可以通過浮動使得一個元素向其父元素的左側(cè)或者右側(cè)移動。浮動開始的設(shè)計初衷是為了實現(xiàn)文字環(huán)繞圖片，只是后來被開發(fā)出來用于頁面布局。
5.2.浮動關(guān)鍵字：float
可選值：? ? ??
none：默認(rèn)值，不浮動； left：左浮動； right：右浮動；? ? 注意：元素設(shè)置了浮動之后，水平布局等式便不需要強制成立。
????????????如果外邊距設(shè)置距離不足以讓子元素浮動到父元素的左邊或者右邊時，將不浮動。
????????????如果父元素中的子元素都是兩個塊元素，想設(shè)置第二個兄弟元素右浮動，必須設(shè)置第一個兄弟元素為左浮動（浮動位置不是固定方向）
????????????如果元素浮動，元素將從文檔流中脫離出來，不再占用文檔流的位置，所以下面的元素會自動向上移動。
????????????如果元素都先同一個方向浮動，他們會發(fā)生并排
5.3,浮動特點
????????1）浮動元素會完全脫離文檔流，不會占據(jù)文檔流中的位置
????????2）設(shè)置浮動以后元素會向父元素的左側(cè)或者右側(cè)移動
????????3）浮動元素默認(rèn)不會從父元素中移出（溢出時會溢出父元素）
????????4）浮動元素中先左或者向右移動時，不會超過它前邊的其他浮動元素
????????5）如果浮動元素的上邊是一個沒有浮動的塊元素，浮動元素就無法上移。
????????6）當(dāng)瀏覽器窗口調(diào)小，浮動一行無法容納浮動元素時，會自動將浮動元素下移，
????????7）浮動元素不會超過它上邊浮動兄弟元素的高度，最多就是和他一樣高（和他在一行）
5.4.浮動導(dǎo)致的問題：高度塌陷問題
5.4.1.問題概述
? ? ? ?在浮動布局中，父元素的高度默認(rèn)被子元素給撐開。當(dāng)子元素浮動之后，會完全脫離文檔流，將會無法撐起父元素的高度，導(dǎo)致父元素高度丟失,這時其他下元素會上移，導(dǎo)致頁面布局混亂。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><style>.div1{border: 10px red solid;}.div2{width:100px;height:100px;background-color:yellow;float:left;}</style> </body> <div class="div1"><div class="div2"></div> </div> </html>5.4.2.高度塌陷問題的解決方式
? ? ? ? 1）設(shè)置父元素的高度
? ? ? ? 2）不使用浮動而是使用行內(nèi)元素代替
? ? ? ? 3）BFC（塊級格式化環(huán)境或格式化上下文）：隱含元素
? ? ? ? ? ? ? ? ——開啟BFC的元素不會被浮動元素所覆蓋
? ? ? ? ? ? ? ?——開啟BFC的元素子元素外邊距不會重疊
? ? ? ? ? ? ? ?——開啟BFC的元素可以包含浮動的子元素
????開啟BFC的方式
- ????? 浮動元素，float 除 none 以外的值；?
- ? ? ? 定位元素，position（absolute，fixed）；?
- ? ? ?display 為以下其中之一的值 inline-block，table-cell，table-caption；?
- ? ? ?overflow 除了 visible 以外的值（hidden，auto，scroll）；
? ? 4)使用clear屬性（最終方式）
5.4.3.高度塌陷問題的最終解決方式-使用clear屬性
clear的作用：清除浮動元素對當(dāng)前元素的影響
????可選值：??????
left：清除左邊浮動元素對當(dāng)前元素的影響???????? right：清除右邊元素對當(dāng)前元素的影響 both：清除兩側(cè)元素中影響最大的元素的影響? ? 原理：設(shè)置清除浮動影響之后，瀏覽器會自動為元素這是一個上外邊距，使其位置不受元素的影響。
方式一：通過加入一個空元素，將其設(shè)置為both，這時候該空元素的外邊距為影響最大浮動元素的整個寬度，這樣這個空元素會把父元素的高度給撐開。方式一的缺點是使用html結(jié)構(gòu)來解決css的顯示問題，這個背離了html負(fù)責(zé)結(jié)構(gòu)，css負(fù)責(zé)樣式的準(zhǔn)則。
方式二：使用偽類元素向最后面添加一個內(nèi)容
：：after????????該偽類元素默認(rèn)是一個行內(nèi)標(biāo)簽，一般使用的時候，需要將其設(shè)置成塊標(biāo)簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><style>.box1{border:10px red solid;}.box2{width:100px;height: 50px;background-color: teal;float:left;}.box3{width:200px;height: 40px;background-color: whitesmoke;float:left;}/* 空元素：將作用為將父元素?fù)伍_ */.box4{clear: both;}/* 方式二 */.div1{border:10px red solid;}.div2{width:100px;height: 50px;background-color: teal;float:left;}.div3{width:200px;height: 40px;background-color: whitesmoke;float:left;}.div1::after{/* 設(shè)置空內(nèi)容，不占位置 */content: "";display: block;clear: both;}</style><div class="box1"> <div class="box2"> </div><div class="box3"></div><div class="box4"></div></div><div class="div1"><div class="div2"></div><div class="div3"></div></div> </body> </html>5.5.偽元素解決父子外邊距重疊問題
在子類設(shè)置外邊距的時候，由于若父類的未設(shè)置padding時，會導(dǎo)致子元素的外邊距和父類的外邊距發(fā)生重疊，從而導(dǎo)致外邊距重疊的情況。正常的代碼代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><style>.div1{width: 200px;height: 200px;background-color: teal;}.div2{width: 100px;height: 100px;background-color:violet;}</style> </body> <div class="div1"><div class="div2"></div> </div> </html>樣式效果：
設(shè)置了子標(biāo)簽的上外邊距之后：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><style>.div1{width: 200px;height: 200px;background-color: teal;}.div2{width: 100px;height: 100px;margin-top:100px;background-color:violet;}</style> </body> <div class="div1"><div class="div2"></div> </div> </html>? ? ? 當(dāng)設(shè)置之后，由于子元素的外邊距和父元素的外邊距相鄰，會導(dǎo)致將父元素頂下去的問題，一般的解決問題是通過設(shè)置父類的內(nèi)邊距將子元素的外邊距和父元素的外邊距隔開，同時將其設(shè)置為table（table不占位）。
過程：設(shè)置前置偽類元素，設(shè)置內(nèi)容為空，將元素顯示為table
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><style>.div1{width: 200px;height: 200px;background-color: teal;}.div2{width: 100px;height: 100px;margin-top:50px;background-color:violet;}/* 解決方式 */.div1::before{content: " ";display: table;}</style> </body> <div class="div1"><div class="div2"></div> </div> </html>5.6.同時解決高度塌陷和邊距重疊問題的最初方案
在解決高度塌陷的問題的時候，需要將偽元素設(shè)置為塊元素，在同時解決兩個問題的時候，只需要向display 設(shè)置成table，table是一個塊元素同時還不占位置。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><style>.div1{border:20px red solid;/* background-color: tomato; */}.div2{width: 100px;height: 100px;background-color:teal;margin-top:50px;float: left;}.div1::after,.div1::before{content: " ";display: table;clear: both;}</style> </body> <div class="div1"><div class="div2"></div> </div> </html>第六章：定位
6.1.定位的概述
? ? ? 定位是一個高級的布局手段，通過定位可以將一個元素，可以將頁面擺放在頁面的任意位置
6.2.定位的使用
6.2.1.定位的屬性
? ? ? ?定位的屬性名為：position
? ? ? ?可選值為：
? ? ? ? ? ? ? ? -static：默認(rèn)值，元素時靜止的，沒有開啟定位
????????????????-relative?：開啟元素的相對定位???
????????????????-absolute?：開啟元素的絕對定位
????????????????-fixed：開啟元素的固定定位
????????????????-sticky：開啟元素的粘滯定位
? ? ? ? 注意：當(dāng)使用可選值除了static之外，使用其他可選值都表示開啟元素的定位功能。當(dāng)開啟元素的定位功能之后，就可以使用屬性top，bottom，left以及right。（這幾個值表示偏移量）
6.3.?相對定位：relative?
當(dāng)元素設(shè)置為：
position:relative;就表示開啟了元素的相對定位。通過設(shè)置偏移量（top，bottom，left或者right）來實現(xiàn)元素的定位布局。
<body><style>html{font-size:30px;}.div1{width:100px;height:100px;background-color: teal;}.div2{width:100px;height:100px;background-color: orange;position:relative;top:-100px;left:100px;}.div3{width:200px;height:200px;background-color:red;float: right;}</style><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div> </body> </html>這段代碼會將div2定位到div1的左邊。在設(shè)置偏移量的時候，需要知道相對定位的定位位置，這樣，才能知道如何實現(xiàn)定位
相對定位的定位位置：相對定位的定位位置是在該元素所在的文檔流的位置（該元素左上角位置為原點）。
1）相對定位的特點
? ? ? ? ? ? 相對定位會提升元素的層級
????????????相對定位不會使得元素脫離文檔流
????????????相對定位的定位元素原來的位置還存在。
????????????相對定位不會改變元素的性質(zhì)，是塊元素還是塊元素，行內(nèi)元素還是行內(nèi)元素。
6.4.絕對定位
?-absolute?：開啟元素的絕對定位
??絕對定位的特點：
????????開啟絕對定位的時候，元素會從文檔流中脫離
????????絕對定位會改變元素屬性，行內(nèi)元素變成塊元素，塊的寬高被內(nèi)容撐開。
????????絕對定位會使元素提高一個層級
絕對定位的定位位置：絕對定位元素是相對于包含塊進(jìn)行定位
????????包含塊：
?????????- 一般情況：
????????????????包含塊是當(dāng)前元素最近的祖先元素（父元素）
?????????-? 開啟定位
????????????????如果該定位元素的祖先元素都開啟或者部分開啟定位，包含塊就是離它最近的開啟了定位的祖先元素
????????????????如果他的祖先元素都沒有開啟定位，則包含塊表示的就是根元素
6.5.固定定位
??-fixed：開啟元素的固定定位
?????????固定定位是一個特殊的絕對定位，大部分的特點和絕對定位是相同的。
?????????唯一不同是：固定定位參考于瀏覽器的視口進(jìn)行定位。
?????????視口：瀏覽器的可視窗口
6.6.粘滯定位
?粘滯定位：粘滯定位是新推出的一個定位，所以兼容性不好，比如火狐瀏覽器就不支持。? 粘滯定位的相對于包含塊定位。
6.7.定位布局
6.7.1.定位的水平布局
? ? ? ?在盒子模型的時候，水平布局需要滿足以下等式
margin-left+border-left+padding-left+width+padding-right+ border-right+margin-right=父元素內(nèi)容區(qū)的width? ? ? 但是使用定位之后，會多出兩個變量：left和right，所以定位水平布局需要滿足下面這個等式：
left+margin-left+border-left+padding-left+width+padding-right+ border-right+marginright+right =父元素內(nèi)容區(qū)的width? ? ? 其中l(wèi)eft和right也可以設(shè)置成auto，在未設(shè)置的時候，它們的默認(rèn)值就是auto，所以在進(jìn)行水平居中時，需要對left和right進(jìn)行設(shè)置為0，為其他的值會導(dǎo)致不生效。
6.7.2.定位的垂直布局
? ? ? 在之前的盒子模型中，垂直方向的布局沒有什么等式要求，但是在使用定位的時候，需要在垂直方向滿足等式：
top+margin-top+border-top+padding-top+height+padding-bottom+ border-bottom+margin-bottom+bottom =父元素內(nèi)容區(qū)的height6.8.層級關(guān)系
在普通情況下，元素的層級關(guān)系是由元素關(guān)系，后代元素的層級關(guān)系比祖先的高，。在開啟定位之后，可以通過設(shè)置z-index來設(shè)置定位元素的層級關(guān)系。z-index屬性的可取值為整數(shù)，取值越高，層級越高，值得注意的是，如果祖先設(shè)置的層級就算比后代元素的高，瀏覽器解析的時候，祖先元素都不會覆蓋后代元素。
第七章：字體
7.1.字體相關(guān)的樣式
color：字體顏色
font-size：字體的大小
font-family：字體族（這是字體格式）
? ? ? ? ? ? 可選值：
? ? ? ? ? ? ? ? ? serif:襯線字體
? ? ? ? ? ? ? ? ? sans-serif：非襯線字體
? ? ? ? ? ? ? ? ? monospace：等寬字體
這里的可選值是指字體的類型，可以指出具體的字體，例如：
font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", 宋體, sans-serif;7.2.圖標(biāo)字體
在網(wǎng)頁中經(jīng)常需要使用一些圖標(biāo)，可以通過圖片來引入，而通過將這些圖片設(shè)置成字體，可以實現(xiàn)對圖標(biāo)顏色的設(shè)置，大小的改動等。
7.2.1.fontawesome的使用
fontawesome是一個國外的字體網(wǎng)站，再使用的時候需要注意版權(quán)，個人倒是無所謂，但是如果是商用，可能會導(dǎo)致版權(quán)問題，值得注意。
第一步：下載：https://fontawesome.com
第二步：解壓
第三部：將css和webfonts文件加入到項目中
第四部：將all.css導(dǎo)入到網(wǎng)頁
第五步：使用圖標(biāo)（固定）
class=“fas fa-bell”：通過換fa-bell來使用其他圖標(biāo)。
7.3.行高
? ? ? 行高是指字體占有的空間實際高度，通過line-height來設(shè)置行高。
? ? ?1） 字體框：字體框就是字體存在的格子，只能通過font-size間接設(shè)置其高度。
? ? ? 行高包括字體框高度，行距會等于行高減去字體框高度并在字體框上下平均分配。
7.4.字體簡寫屬性? ?
? ? ?1）font：字重 字體的風(fēng)格 字體大小/行高 字體族;(行高可以不寫)
? ? ? ? 使用簡寫，font會給出默認(rèn)值，再設(shè)置會覆蓋之前設(shè)置的行高
? ? ?2）font-weight 字重 字體的加粗
?? ??? ??? ??? ??? ?normal 默認(rèn)值 不加粗
? ? ? ? ? ? ? ? ? ? bold 加粗
? ? ? ? ? ? ? ? ? ? 100-900 九個級別（沒什么用）
? ? ?3） font-style 字體的風(fēng)格
? ? ? ? ? ? ? ? ? ? normal 正常的
? ? ? ? ? ? ? ? ? ? italic 斜體
? 8.文本樣式
8.1.text-align 文本的水平對齊
? ? ? ? ? ? 可選值：
? ? ? ? ? ? ? ? left 文字左側(cè)對齊
? ? ? ? ? ? ? ? right 文字右對齊
? ? ? ? ? ? ? ? center 文字居中對齊
? ? ? ? ? ? ? ? justify 文字兩端對齊
?8.2.vertical-align 設(shè)置元素垂直對齊的方式
? ? ? ? ? ? 可選值：
? ? ? ? ? ? ? ? baseline 默認(rèn)值 文字基線對齊
? ? ? ? ? ? ? ? top 頂部對齊
? ? ? ? ? ? ? ? bottom 底部對齊
? ? ? ? ? ? ? ? middle 居中對齊?? ?
?? ??? ??? ??? ?例如使用圖片的時候，會和父元素有個縫，是因為img標(biāo)簽是行內(nèi)標(biāo)簽，按照基線對齊。
?? ??? ??? ??? ?如果想要去掉這個縫，只要設(shè)置成不是基線對齊就可以了。? ?
8.3.text-decoration 設(shè)置文本修飾
? ? ? ? ?可選值：
? ? ? ? ? ? none 什么都沒有
? ? ? ? ? ? underline 下劃線
? ? ? ? ? ? line-through 刪除線
? ? ? ? ? ? overline 上劃線
8.4.white-space 設(shè)置網(wǎng)頁如何處理空白
? ? ? ? ? ? 可選值：
? ? ? ? ? ? ? ? normal 正常
? ? ? ? ? ? ? ? nowrap 不換行
? ? ? ? ? ? ? ? pre 保留空白
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? white-space: nowrap;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? text-overflow: ellipsis;
?? ??? ??? ?必須設(shè)置以上者四個值，要不然會失效。
9.背景
9.1.背景相關(guān)的樣式
1）background-color 設(shè)置背景顏色
?? ??? ??? ??? ?
2）? background-image 設(shè)置背景圖片?
? ? ? ? ? ? ? ? ? ? - 可以同時設(shè)置背景圖片和背景顏色，這樣背景顏色將會成為圖片的背景色
? ? ? ? ? ? ? ? ? ? - 如果背景的圖片小于元素，則背景圖片會自動在元素中平鋪將元素鋪滿
? ? ? ? ? ? ? ? ? ? - 如果背景的圖片大于元素，將會一個部分背景無法完全顯示
? ? ? ? ? ? ? ? ? ? - 如果背景圖片和元素一樣大，則會直接正常顯示?? ??? ??? ?
3）background-repeat 用來設(shè)置背景的重復(fù)方式
? ? ? ? ? ? ? ? ? ? 可選值：
? ? ? ? ? ? ? ? ? ? ? ? repeat 默認(rèn)值 ， 背景會沿著x軸 y軸雙方向重復(fù)
? ? ? ? ? ? ? ? ? ? ? ? repeat-x 沿著x軸方向重復(fù)
? ? ? ? ? ? ? ? ? ? ? ? repeat-y 沿著y軸方向重復(fù)
? ? ? ? ? ? ? ? ? ? ? ? no-repeat 背景圖片不重復(fù)
4）background-position 用來設(shè)置背景圖片的位置
? ? ? ? ? ? ? ? ? ? 設(shè)置方式：
? ? ? ? ? ? ? ? ? ? ? ? 通過 top left right bottom center 幾個表示方位的詞來設(shè)置背景圖片的位置
? ? ? ? ? ? ? ? ? ? ? ? ? ? 使用方位詞時必須要同時指定兩個值，如果只寫一個則第二個默認(rèn)就是center
? ? ? ? ? ? ? ? ? ? ? ? 通過偏移量來指定背景圖片的位置：
? ? ? ? ? ? ? ? ? ? ? ? ? ? 水平方向的偏移量 垂直方向變量?? ?
9.2.設(shè)置背景的范圍
1）background-clip?
? ? ? ? ? ? ? ? ? ? ? ? 可選值：
? ? ? ? ? ? ? ? ? ? ? ? ? ? border-box 默認(rèn)值，背景會出現(xiàn)在邊框的下邊
? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-box 背景不會出現(xiàn)在邊框，只出現(xiàn)在內(nèi)容區(qū)和內(nèi)邊距
? ? ? ? ? ? ? ? ? ? ? ? ? ? content-box 背景只會出現(xiàn)在內(nèi)容區(qū)
2） background-origin 背景圖片的偏移量計算的原點
? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-box 默認(rèn)值，background-position從內(nèi)邊距處開始計算
? ? ? ? ? ? ? ? ? ? ? ? ? ? content-box 背景圖片的偏移量從內(nèi)容區(qū)處計算
? ? ? ? ? ? ? ? ? ? ? ? ? ? border-box 背景圖片的變量從邊框處開始計算?? ??? ??? ??? ??? ??? ??? ?
3）background-size 設(shè)置背景圖片的大小
?? ??? ??? ??? ??? ??? ?第一個值表示寬度?
?? ??? ??? ??? ??? ??? ?第二個值表示高度
?? ??? ??? ??? ??? ??? ?- 如果只寫一個，則第二個值默認(rèn)是 auto
?? ??? ??? ??? ??? ??? ?cover 圖片的比例不變，將元素鋪滿
?? ??? ??? ??? ??? ??? ?contain 圖片比例不變，將圖片在元素中完整顯示
9.3.背景相關(guān)的設(shè)置
? ? ? ? background-color
? ? ? ? background-image
? ? ? ? background-repeat
? ? ? ? background-position
? ? ? ? background-size
? ? ? ? background-origin
? ? ? ? background-clip
? ? ? ? background-attachment
? ? ? ? ?- backgound 背景相關(guān)的簡寫屬性，所有背景相關(guān)的樣式都可以通過該樣式來設(shè)置
? ? ? ? ? ? ? ? ? ? 并且該樣式?jīng)]有順序要求，也沒有哪個屬性是必須寫的
? ? ?注意：
? ? ? ? ? ? ?background-size必須寫在background-position的后邊，并且使用/隔開
? ? ? ? ? ? background-position/background-size
? ? ? ? ? ? ?background-origin background-clip 兩個樣式 ，orgin要在clip的前邊?? ??? ??? ??? ??? ??? ?
9.5. background-attachment
? ? ? ? ? ? ? ? - 背景圖片是否跟隨元素移動
? ? ? ? ? ? ? ? - 可選值：
? ? ? ? ? ? ? ? ? ? scroll 默認(rèn)值 背景圖片會跟隨元素移動
? ? ? ? ? ? ? ? ? ? fixed 背景會固定在頁面中，不會隨元素移動
10.漸變
通過漸變可以設(shè)置一些復(fù)雜的背景顏色，可以實現(xiàn)從一個顏色向其他顏色過渡的效果
10.1.線性漸變
? ? ? ?線性漸變，顏色沿著一條直線發(fā)生變化
? 1） linear-gradient()
? ? ? ? ? ? ? ? ? ? linear-gradient(red,yellow) 紅色在開頭，黃色在結(jié)尾，中間是過渡區(qū)域
? ? ? ? ?- 線性漸變的開頭，我們可以指定一個漸變的方向
? ? ? ? ? ? ? ? ? ? ? ? to left
? ? ? ? ? ? ? ? ? ? ? ? to right
? ? ? ? ? ? ? ? ? ? ? ? to bottom
? ? ? ? ? ? ? ? ? ? ? ? to top
? ? ? ? ? ? ? ? ? ? ? ? deg deg表示度數(shù)
? ? ? ? ? ? ? ? ? ? ? ? turn 表示圈
? ? ? ? ?- 漸變可以同時指定多個顏色，多個顏色默認(rèn)情況下平均分布，
? ? ? ? ? ? ? ? ? ? ? ? 也可以手動指定漸變的分布情況
? 2）repeating-linear-gradient() 可以平鋪的線性漸變
? ? ? ? ? ? background-image: linear-gradient(red,yellow,#bfa,orange);?
? ? ? ? ? ? background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px);?
? ? ? ? ? ? background-image: repeating-linear-gradient(to right ,red, yellow 50px);
10.2.徑向漸變
1）radial-gradient() 徑向漸變(放射性的效果)?
? ? ? ? ? ? ? ? ?默認(rèn)情況下徑向漸變的形狀根據(jù)元素的形狀來計算的
? ? ? ? ? ? ? ? ? ? 正方形 --> 圓形
? ? ? ? ? ? ? ? ? ? 長方形 --> 橢圓形
? ? ? ? ? ? ? ? ? ? - 我們也可以手動指定徑向漸變的大小
? ? ? ? ? ? ? ? ? ? circle
? ? ? ? ? ? ? ? ? ? ellipse
? ? ? ? ? ? ? ? ? ? - 也可以指定漸變的位置
? ? ? ? ? ? ? ? ? ? - 語法：
2） radial-gradient(大小 at 位置, 顏色 位置 ,顏色 位置 ,顏色 位置)
? ? ? ? ? ? ? ? ? ? ? ? ? ? 大小：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? circle 圓形
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ellipse 橢圓
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? closest-side 近邊?? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? closest-corner 近角
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? farthest-side 遠(yuǎn)邊
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? farthest-corner 遠(yuǎn)角
? ? ? ? ? ? ? ? ? ? ? ? ? ? 位置：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? top right left center bottom?? ?
11.動畫
11.1.過渡
?過渡（transition）通過過渡可以指定一個屬性發(fā)生變化時的切換方式；通過過渡可以創(chuàng)建一些非常好的效果，提升用戶的體驗。
11.1.1.過渡的屬性
? ? ? 1）transition-property: 指定要執(zhí)行過渡的屬性 ?
? ? ? ? ? ? ? ? 多個屬性間使用,隔開。如果所有屬性都需要過渡，則使用all關(guān)鍵字；大部分屬性都支持過渡效果，注意過渡時必須是從一個有效數(shù)值向另外一個有效數(shù)值進(jìn)行過渡。
? ? ? ?2）??transition-duration: 指定過渡效果的持續(xù)時間
? ? ? ? ? ? ? ? 時間單位：s 和 ms ?1s = 1000ms
? ? ? ?3）?transition-timing-function: 過渡的時序函數(shù)
? ? ? ? ?指定過渡的執(zhí)行的方式 ?
? ? ? ? ? ? ? ? 可選值：
? ? ? ? ? ? ? ? ? ? ease 默認(rèn)值，慢速開始，先加速，再減速
? ? ? ? ? ? ? ? ? ? linear 勻速運動
? ? ? ? ? ? ? ? ? ? ease-in 加速運動
? ? ? ? ? ? ? ? ? ? ease-out 減速運動
? ? ? ? ? ? ? ? ? ? ease-in-out 先加速 后減速
? ? ? ? ? ? ? ? ? ? cubic-bezier() 來指定時序函數(shù)（ ? https://cubic-bezier.com）
? ? ? ? ? ? ? ? ? ? steps() 分步執(zhí)行過渡效果
? ? ? ? ? ? ? ? ? ? ? ? 可以設(shè)置一個第二個值：
? ? ? ? ? ? ? ? ? ? ? ? ? ? end ， 在時間結(jié)束時執(zhí)行過渡(默認(rèn)值)
? ? ? ? ? ? ? ? ? ? ? ? ? ? start ， 在時間開始時執(zhí)行過渡
11.1.2.過渡屬性簡寫
transition 可以同時設(shè)置過渡相關(guān)的所有屬性，只有一個要求，如果要寫延遲，則兩個時間中第一個是持續(xù)時間，第二個是延遲 */
?
12.動畫
12.1.動畫
12.2.編寫
12.3.平移
12.4.縮放
13.flex布局
13. 1，flex
中文名為彈性盒或者伸縮盒，是css的一種布局手段，主要是代替浮動來完成頁面布局；flex可以使元素具有彈性，讓元素可以跟頁面的大小的改變而改變。設(shè)為?Flex?布局以后，子元素的float、clear和vertical-align屬性將失效。在這之前需要知道幾個概念：
13.1.1彈性容器：
?要使用flex，必須先將一個元素設(shè)置成彈性容器，開啟彈性容器：
????????????disply：flex;設(shè)置塊級元素為彈性容器。
????????????display：inline-flex：設(shè)置行內(nèi)元素為彈性容器。
? ? ? ? ? ? ?Webkit?內(nèi)核的瀏覽器，必須加上-webkit前綴。
? ? ? ? ? ? ?disply：-webkit-flex;設(shè)置塊級元素為彈性容器。
? ? ? ? ? ? ? ?display：-webkit-inline-flex：設(shè)置行內(nèi)元素為彈性容器。
注：容器默認(rèn)存在兩根軸：水平的主軸（main?axis）和垂直的交叉軸（cross?axis）。主軸的開始位置（與邊框的交叉點）叫做main?start，結(jié)束位置叫做main?end；交叉軸的開始位置叫做cross?start，結(jié)束位置叫做cross?end。項目默認(rèn)沿主軸排列。單個項目占據(jù)的主軸空間叫做main?size，占據(jù)的交叉軸空間叫做cross?size。
????????主軸：彈性元素的子元素排列方向叫做主軸。
???????代碼：
?.box{ display:?-webkit-flex;?/*?Safari?*/display:?flex;}13.1.2.彈性元素（彈性項）：
彈性容器的子元素（不是后代元素），一個彈性元素既同時是彈性容器。
13.2,彈性容器的屬性。
????a,flex-direction：元素的排列方向，同時水平的主軸方向是由該容器屬性?flex-direction確定的。元素排列向那主軸就向那邊指。
????????????屬性：row：元素從main?start開始從左向右水平排列;
? ? ? ? ? ?row-reverse：元素從main?star開始，從左向右水平排列開始，元素從右向左水平排列（注意：此時主軸從右邊指向左邊，也就是說，main?start在做右邊）。
? ? ? ? ? column：元素從cross?start開始從上而下垂直排列;
? ? ? ? ? column-reverse：元素從cross?start開始從下而上垂直排列;
?b,flex-rawp:設(shè)置彈性元素是否在彈性容器中換行。
????????????nowrap:默認(rèn)值，不換行。
????????????wrap:沿著主軸方向自動換行。
????????????wrap-reverse：沿著主軸的反方向自動換行。
c，flex-flow：flex-direction和?flex-rawp的簡寫屬性，沒有順序要求。???????
d,justify-content:如何分配空白空間（彈性元素如何排列）?????????
????????flex-start：默認(rèn)值，沿著主軸main?start排列
????????flex-end：沿著主軸main?end排列
????????center：彈性元素水平居中排列
????????space-between：空白分布到等量元素兩側(cè)。
????????space-around：空白分布到等量元素單側(cè)。（實現(xiàn)效果是，彈性元素之間的距離以及兩側(cè)彈性元素距離父元素邊框距離）
????????space-between：空白均勻分布到元素之間。
e,align-items
????????????表示元素在側(cè)軸如何對齊
????????????flex-start：沿著cross?start（起軸）對齊，不會被拉伸。
????????????flex-end：沿著cross?end（終軸）對齊，不會被拉伸。
????????????center：彈性元素垂直居中排列
????????????baseline：沿著基線對齊（用的不多）
????????????stretch：默認(rèn)值，將元素的長度設(shè)置為等同高度，元素高度不夠會被拉伸。
f，align-content：
????????lex-start：默認(rèn)值，沿著側(cè)軸main?start排列
????????flex-end：沿著側(cè)軸main?end排列
????????center：彈性元素垂直居中排列
????????space-between：空白分布到等量元素兩側(cè)。
????????space-around：空白分布到等量元素單側(cè)。
????????space-between：空白均勻分布到元素之間。
???
13.3，彈性元素的屬性：
a,flex-grow:指定彈性元素的伸縮系數(shù)（當(dāng)彈性容器有空間時，彈性元素如何伸縮）
????默認(rèn)值是0，意思是有剩余空間也不進(jìn)行分配。父元素的剩余空間會按照比例進(jìn)行分配：例如兩個彈性元素分別為1和2，彈性容器剩余空間長度為150px;???按照1:2的比例，一個元素可分得50，另一個元素可分得100.
b,flex-shrink:彈性元素的收縮系數(shù)。默認(rèn)值是1，表示等比例收縮，取為零時，表示彈性元素不收縮。值越大，收縮的就越多。
c，flex-basis：指定的是元素在主軸上的基礎(chǔ)長度，一般設(shè)置成auto就可以了。
????????????如果主軸是橫向的，該值指定的是元素的寬度。
????????????如果主軸是縱向的，該值指定的是元素的高度。
????????????默認(rèn)為auto，表示參考元素自身的高度和寬度。
????????????如果設(shè)置成一個值，就以此值為準(zhǔn)。
d,flex:以上三個屬性得勁簡寫，有順序要求
????????????flex：flex-grow?flex-shrink?flex-basis;
????????????可選值：none
????????????????????auto：一般選這個
e,order
????屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
14.less
css語法在less文件中都可用，但是less中擴(kuò)充了css語法。
a:后代選擇器
.box1{.box2{}}
?? ?對比css為：
?? ?d:子類選擇器
??
?? ?c,變量：
?? ?語法：@變量名：變量值;（變量可以是類名,樣式或者id名）
?? ?引用：樣式使用：@變量名；
?? ??? ?類名或者id名：.@{變量名}或#{變量名}
?? ??? ?其他的也是@{變量名}
?? ?d:&符號：表示父類元素選擇器。
??
?? ?e: ?:extend()(選擇器分組)
?? ?表示繼承其他元素的樣式
?
?? ?編譯成css之后：
??
?? ?f：混合函數(shù)
?? ?定義函數(shù)：
??
?? ?調(diào)用函數(shù)（樣式模板）
??
15,響應(yīng)體布局
響應(yīng)體布局可以根據(jù)窗口的大小來設(shè)置不同的樣式，想要實現(xiàn)響應(yīng)體布局，需要通過媒體查詢設(shè)備的狀態(tài)。
15.1.媒體查詢
使用媒體查詢
????????語法：@media??查詢規(guī)則{}
????????????查詢規(guī)則有：???????????
all：所有設(shè)備 print：打印設(shè)備 screen帶屏幕的設(shè)備（常用） speech：屏幕閱讀器? ?--可以使用，鏈接多個媒體類型，變成一個或關(guān)系
??????????
@media??screen，speech{}????可以使用only關(guān)鍵字來規(guī)定只要那種媒體規(guī)則
media?only?screen{}使用這個只要是為了兼容一些老版本瀏覽器，有些老版本的瀏覽器知道媒體查詢但是不能實現(xiàn)，加only只要是在新版本瀏覽器能用only關(guān)鍵字而老版本不認(rèn)識，這樣老版本瀏覽器就會忽視媒體查詢。
? ? 15.2.媒體特征????????
width：視口寬度 height：視口高度 nim-width：視口最小寬度（視口大于指定寬度時生效） max-width：視口最大寬度（視口小于指定寬度是生效） max-height：視口最大高度 nim-height：視口最小高度上面這幾個值叫做斷點，表示網(wǎng)頁在這個點發(fā)生樣式切換。
常用的斷點：???
小于768：超小屏幕，大于768：小屏幕大于992：大屏幕 <style>@media only screen and (min-width: 500px) and (max-width: 700px){body{background-color: red;} } </style>總結(jié)
以上是生活随笔為你收集整理的一篇搞定css基础（超详细，附代码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： edup无线网卡linux,linux
- 下一篇： 雷塞SMC304系列控制器VC6.0例程