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