好家伙，看完了新版教學(xué)視頻，發(fā)現(xiàn)css3中有很重要的新增內(nèi)容，所以寫一篇文章應(yīng)該會(huì)比較長(zhǎng)，還是再分成兩篇。這是倒數(shù)第二篇html&css的整理筆記了，css3的一些關(guān)于動(dòng)效動(dòng)畫的內(nèi)容等學(xué)完了JavaScript會(huì)再補(bǔ)充整理～
開學(xué)可以進(jìn)入新的學(xué)習(xí)了，到時(shí)要實(shí)習(xí)盡量保證每天看幾集教程吧，仍定期總結(jié)，不過應(yīng)該不會(huì)使用簡(jiǎn)書平臺(tái)了，可能會(huì)總結(jié)在GitHub上，hhh～
本文整理的內(nèi)容及新增的學(xué)習(xí)內(nèi)容flex（重要）和less預(yù)處理語言。
1.彈性盒（flex）
在學(xué)習(xí)float時(shí)就感概網(wǎng)頁布局好復(fù)雜，不夠靈活不說還會(huì)出現(xiàn)各種問題，float引起的高度塌陷問題我聽了兩三遍才厘清，然后就發(fā)現(xiàn)彈性盒這個(gè)知識(shí)點(diǎn)，新版本瀏覽器基本能兼容，移動(dòng)端更是不用多想直接用就是～不僅又感慨前端知識(shí)更新好快，不進(jìn)則退則淘汰（顫抖==）
言歸正傳，flex就是一個(gè)新的布局工具，十分靈活且不會(huì)出現(xiàn)float那樣麻煩的問題，也提供了一個(gè)更為方便的寫代碼方式。
彈性盒涉及兩個(gè)基本內(nèi)容，彈性容器和彈性元素，以及兩個(gè)重要概念，主軸和輔軸。
（1）基本概念
1）彈性容器
要使用彈性盒進(jìn)行布局首先要將元素設(shè)置為彈性容器，使用display屬性，選擇flex或inline-flex，將元素變?yōu)閺椥匀萜鳎?/p>
display：flex? ? ?（設(shè)置為塊級(jí)彈性容器）
或
display：inline-flex（設(shè)置為行內(nèi)彈性容器）
設(shè)置后，這個(gè)元素中的子元素橫向排列，且不會(huì)脫離文檔流使父元素高度塌陷。
2）彈性元素
彈性容器的子元素即是彈性元素（彈性項(xiàng)）。
彈性容器和彈性元素可以互相嵌套，即是一個(gè)元素可以同時(shí)是彈性容器和彈性元素。
3）主軸和輔軸
彈性元素排列的方向即為主軸方向；
與主軸垂直的方向就是輔軸方向（與平面直角坐標(biāo)系方向規(guī)則一樣。）
（2）常用樣式
1）彈性容器
flex-direction
flex-wrap
flex-flow
justify-content
align-content
align-items
flex-direction，用來指定容器中彈性元素的排列方向，可選值
：row??默認(rèn)（按國(guó)家習(xí)慣默認(rèn)方向），彈性元素會(huì)水平排列，從左到右排列
：row-reverse? ?彈性元素在容器中反向水平排列，從右到左排列
：column??彈性元素在容器中縱向排列，從上到下
：column-reverse? 彈性元素在容器中縱向排列，從下到上
同時(shí)，設(shè)置flex-direction的值也就指定了彈性盒主軸的方向。
flex-wrap，用以設(shè)置彈性元素?fù)Q行形式，可選值
：nowrap? 默認(rèn)值，元素不會(huì)自動(dòng)換行
：wrap? 元素沿著輔軸方向自動(dòng)換行
：wrap-reverse 元素沿著輔軸反方向換行
flex-flow? 是flex-direction和flex-wrap的簡(jiǎn)寫屬性，兩個(gè)屬性的值用空格隔開即可
justify-content? 設(shè)置如何分配元素在主軸上的對(duì)齊方式，可選值：
：flex-start? 默認(rèn)值，表示元素沿著主軸起始位置排列
：flex-end??表示元素沿著主軸終止位置排列
：center? ?表示元素沿著主軸居中排列
：space-around? 父元素空白空間平均分布在元素主軸兩側(cè)
：space-between 父元素的空白空間平均分布在元素主軸中間，即子元素在主軸平均分布，且子元素頂著父元素的起始和終止位置
：space-evenly?父元素空白空間平均分布在元素主軸一側(cè)，也就是子元素在主軸上平均分布了，且父元素起始和終止位置均留有空白（兼容性不是很好，慎重使用）
align-content? 設(shè)置如何分配元素在輔軸上的對(duì)齊方式，可選值：
：flex-start? 默認(rèn)值，表示元素沿著輔軸起始位置排列
：flex-end??表示元素沿著輔軸終止位置排列
：center? ?表示元素沿著輔軸居中排列
：space-around? 父元素空白空間平均分布在元素輔軸兩側(cè)
：space-between 父元素的空白空間平均分布在元素輔軸中間，
：space-evenly?父元素空白空間平均分布在元素輔軸一側(cè)
align-items 設(shè)置元素在輔軸上如何對(duì)齊，可選值
：stretch? 默認(rèn)值，將元素長(zhǎng)度拉伸且每行設(shè)置為相同值
：flex-start? 元素不會(huì)被拉伸，并沿著輔軸起始位置對(duì)齊
：flex-end? 元素不會(huì)被拉伸，并沿著輔軸終止位置對(duì)齊
：center? 元素不會(huì)被拉伸，并沿著輔軸居中對(duì)齊
：baseline 元素不會(huì)被拉伸，并沿著輔軸基線對(duì)齊
2）彈性元素
彈性元素可以類比彈簧，有本身的長(zhǎng)度還有拉長(zhǎng)和縮短的長(zhǎng)度。
flex-grow
flex-shrink
flex-basis
flex
order
align-self
flex-grow，用以指定彈性元素的伸展系數(shù)，即當(dāng)父元素有多余空間時(shí)，子元素如何伸展，按指定的值來進(jìn)行分配，如
li:nth-child(1){flex-grow：1}
li:nth-child(2){flex-grow：2}
li:nth-child(3){flex-grow：3}
就是說這三個(gè)li會(huì)在原來大小基礎(chǔ)上，按1:2:3的比例分配父元素空白空間，撐滿父元素，
0表示不增長(zhǎng)，仍是原來的長(zhǎng)度。
flex-shrink，指定彈性元素的收縮系數(shù)，0表示不收縮，仍是原來的長(zhǎng)度；元素越大縮減得越多
flex-basis， 指定元素在主軸上的基礎(chǔ)長(zhǎng)度，如果主軸是水平的，這個(gè)值就是元素寬度，原本設(shè)定的寬度會(huì)被覆蓋；如果主軸是豎直的，這個(gè)值就是元素高度，原本設(shè)定的長(zhǎng)度會(huì)被覆蓋；默認(rèn)值是auto，參考原本設(shè)置的長(zhǎng)度和寬度
flex，簡(jiǎn)寫屬性，可以同時(shí)設(shè)置彈性元素的增長(zhǎng)系數(shù)、收縮系數(shù)、基礎(chǔ)長(zhǎng)度的值，順序固定。除了指定外，還有三個(gè)可選值
：initial? 表示增長(zhǎng)0 縮減1 基礎(chǔ)長(zhǎng)度auto
：auto? ?表示增長(zhǎng)1 縮減1?基礎(chǔ)長(zhǎng)度auto
：none? 表示增長(zhǎng)0 縮減0?基礎(chǔ)長(zhǎng)度auto
order，用以設(shè)置彈性元素的排列順序，用此屬性實(shí)現(xiàn)只靠屬性調(diào)整元素順序而不用調(diào)整結(jié)構(gòu)。
align-self，用以覆蓋當(dāng)前彈性元素上的align-items，即用來單獨(dú)設(shè)置某個(gè)或某幾個(gè)彈性元素的對(duì)齊方式
2.less預(yù)處理語言
這又是一個(gè)很強(qiáng)大的內(nèi)容，源于大佬不習(xí)慣css語言語法而寫出來的，看彈幕上說less語法結(jié)構(gòu)很有親切感，不過我什么都不知道，畢竟我還只是一只小菜狗罷了，手動(dòng)doge～
在css中l(wèi)ess語言主要是擴(kuò)充css的一些功能，比如對(duì)變量的支持且兼容性好、對(duì)mixins的支持等，可以通過編寫更少的代碼實(shí)現(xiàn)更強(qiáng)大的功能，結(jié)構(gòu)也更加清晰，還避免了選擇器權(quán)重可能導(dǎo)致的樣式不生效等等，目前只學(xué)了皮毛，但已經(jīng)能清楚感覺到其強(qiáng)大了。我用vscode編寫的，下載插件后，創(chuàng)建less文件，保存后自動(dòng)編譯生成一個(gè)css文件，對(duì)應(yīng)less中編寫的內(nèi)容，需要注意引用外部樣式表時(shí)仍需引用css文件（轉(zhuǎn)換后的）。
（1）基本語法
1）無需使用后代選擇器設(shè)置樣式，直接按結(jié)構(gòu)的層級(jí)編寫（牛批?。?，如：
在less中直接如下按包含（層級(jí)）關(guān)系書寫
它所表示的就是為body中的div設(shè)置了寬高，轉(zhuǎn)換成css就是如下圖
既方便閱讀和理解，代碼量也將大大減少。
2）使用//進(jìn)行單行注釋，不會(huì)解析到css文件中；css注釋方法也可以使用，且會(huì)解析到css文件中。
3）多個(gè)相同變量名，采取就近原則。
4）使用@import可以引用其他的less文件，語法：@import“xxx.less”;
可以模塊化管理less文件，方便維護(hù)。
（2）less變量
css原生的變量兼容性差，less兼容性更強(qiáng)，因此通常使用less來編寫變量。
在變量中可以存儲(chǔ)任意的一個(gè)值，并且可以任意的修改變量的值，比如設(shè)計(jì)時(shí)一個(gè)主體色發(fā)生改變，就可以通過編寫時(shí)設(shè)置的變量一鍵更改所有用到這個(gè)變量的地方，大大提高維護(hù)效率。
語法：
定義時(shí)? @變量名：變量值；
使用時(shí)?
?1）直接使用：
?選擇器{屬性名：@變量名；}
? 2）作為類名，或者一部分使用時(shí)：
? .@{變量名1}{屬性名：屬性值；}
如：
@a:100px;
@b:box1
.@ {width:@a;
background-image:url"@/1.png";}
3）引用出現(xiàn)過的屬性其屬性值
語法：
選擇器{屬性名1:屬性值1；
屬性名2:$屬性名1；}
即可引用屬性1的值
4）父元素選擇器
在用層級(jí)書寫樣式時(shí)，如果需要對(duì)父元素設(shè)置樣式，則直接使用&符號(hào)表示外層父元素，外一層是什么&符號(hào)就表示什么
5）extend
很有用的東西，如果兩個(gè)元素有部分樣式一致，也有不同的性質(zhì)，用extend就不需要用選擇器分組，直接寫不同的性質(zhì)，語法：
選擇器2：extend（選擇器1）{屬性名：屬性值；}
如：
? ?.p1{width:100px;
height:100px;}
? ?.p2{width:100px;
height:100px;
color:red;}
就可以寫成
? ?.p1{width:100px;
height:100px;}
.p2:extend(.p1){color:red;}
（3）Mixins
Mixins相當(dāng)于混合函數(shù)，在Mixins中可以直接設(shè)置變量，定義幾個(gè)變量，就需要設(shè)置幾個(gè)變量的值，值需要一一對(duì)應(yīng)且不可省略，如
.p1(@w,@h){width:@w;
height:@h;}
div{.p1(200px,200px);}
這就是創(chuàng)建了一個(gè)寬高200px的盒子
可以在定義變量時(shí)直接指定值作為一個(gè)默認(rèn)值，如
.p1(@w:100px,@h:100px){width:@w;
height:@h;}
div{.p1(200px);}
此時(shí)省略的值就使用默認(rèn)值，也就是說創(chuàng)建了一個(gè)寬200px,高100px的盒子。
先整理到這了，最后還有一些內(nèi)容，不是很難，明天整理好，再寫下感受，over！
