99、將上例的0%改為30%，會如何變化？

?? ?none:延遲2秒間無色，3.8秒（0%-30%占1.8秒）前無色，之后變紅到5秒綠最后藍，動畫結束時恢復初始（無色）。
?? ?forward:延遲2秒間無色，3.8秒（0%-30%占1.8秒）前無色，之后變紅到5秒綠最后藍，動畫結束時保持最后一幀藍色位于最右終點。
?? ?backward:在延遲2秒間使用0%狀態(tài)即“無色”，3.8秒（0%-30%占1.8秒）前無色，之后變紅到5秒綠最后藍，動畫結束時恢復初始（無色）。
?? ?both:在延遲2秒間使用0%狀態(tài)即“無色”，3.8秒（0%-30%占1.8秒）前無色，之后變紅到5秒綠最后藍，動畫結束時保持最后一幀藍色位于最右終點。
?? ?
?? ?關鍵點：
?? ??? ?backward與both延遲期間使用哪個顏色？
?? ??? ?使用0%狀態(tài)！若無0%，則保持初始狀態(tài)，直到第一個改變幀（上例為30%）的時間改變狀態(tài)。
?? ?

100、彈性項目顯示時類似inline-block，但為何是塊元素？

?? ?塊元素（block elements）通常會占據(jù)其父容器的整個寬度，并且每個塊元素會獨占一行。然而，當你將一個容器設置為 display: flex 時，它的子元素（即彈性項目）的行為會發(fā)生變化。

?? ?在彈性盒子（Flexbox）中，彈性項目的默認排列方式是沿著主軸（通常是水平軸）從左到右排列，這與 inline-block 元素的排列方式類似。但是，彈性項目并不是 inline-block 元素，它們仍然是塊級元素，只是它們的排列方式被彈性容器所控制。

?? ?具體來說，彈性容器的默認主軸方向是水平方向（flex-direction: row），這意味著彈性項目會從左到右排列。如果你希望彈性項目從上到下排列，可以設置 flex-direction: column。
?? ?
?? ?以下是一些關鍵點：
?? ?塊元素：
?? ??? ?默認情況下，塊元素會占據(jù)其父容器的整個寬度，并且每個塊元素會獨占一行。
?? ?彈性項目：
?? ??? ?在彈性容器中，彈性項目默認會沿著主軸（水平軸）從左到右排列，即使它們是塊級元素。
?? ?inline-block 元素：
?? ??? ?inline-block 元素會像內聯(lián)元素一樣排列在一行中，但它們可以設置寬度和高度。
?? ?
?? ?總結:
?? ??? ?彈性項目在彈性容器中的排列方式是由彈性容器的屬性（如 flex-direction）決定的，而不是由它們本身的塊級或內聯(lián)特性決定的。這就是為什么即使彈性項目是塊級元素，它們也可以從左到右排列的原因。
?? ??? ?
?? ?測試：
?? ??? ?可將彈性項目的width取消，它仍然不會獨占一行，寬度由其內部內容撐開，若沒有就只有左右兩個border線，若無這個線，就會占著一個“空”位置，
?? ??? ?
?? ??? ?另外可以用開發(fā)者工具檢查里面的computed，可以看到它的display是block.

內容提示：117-134,187-196就夠了

101、align-item,align-content一般不同時使用，為什么，能同時使用嗎？

?? ?align-items 用于設置每一行的項目在側軸（通常是垂直方向）上的對齊方式。常用于設置單行伸縮項目。
?? ?align-content 用于設置當項目換行后的多行在側軸上的分布和對齊方式。常用于設置多行伸縮項目。
?? ?
?? ?所以上面兩個使用場景不同，所以常不同時出現(xiàn)在一個元素中。
?? ?
?? ?在大多數(shù)情況下，用 align-items 和 align-content 來達到預期效果時可能會有重疊，但在某些情況下（例如，少量項目且需要特定的對齊和分布），同時使用這兩個屬性可以實現(xiàn)更精細的控制。例如：

?? ??? ?<style>.container {display: flex;flex-wrap: wrap; /* 允許項目換行 */height: 400px; /* 固定容器高度 */align-items: center;/* 每一行的項目垂直居中對齊 */align-content: space-between;/* 多行項目在垂直方向上均勻分布 */border: 2px solid #000;background-color: lightgray;}.item {width: 100px;height: 50px; /* 各項具有不同的高度 */background-color: lightblue;margin: 10px;display: flex;align-items: center;justify-content: center;}.item2 {height: 80px;}.item3 {height: 100px;}</style><div class="container"><div class="item">1</div><div class="item item2">2</div><div class="item item3">3</div><div class="item">4</div><div class="item item2">5</div><div class="item">6</div></div>?? ?

?? ?
?? ?.container 容器允許項目換行 (flex-wrap: wrap) 且高度固定 (height: 400px)。
?? ?align-items: center; 確保每個項目的內容在自身高度內垂直居中對齊。
?? ?align-content: space-between; 確保當項目不足以填滿容器高度時，它們被分布在容器的兩端。
?? ?
?? ?這個例子特殊在于：
?? ??? ?當容器內項目只有兩行時，align-content: space-between 會將這兩個項目推到容器的頂部和底部。
?? ??? ?align-items: center; 獨自定義每個項目內部內容的垂直居中(單行)。

102、align-items: baseline是按什么對齊的？

?? ?
?? ?是按文字x的下邊沿進行對齊的。有幾中情況：
?? ?
?? ?(1)若有多行，按照每個伸縮項目（flex item）的第一行文字的基線來對齊它們。
?? ?(2)沒有內容（文字），則按伸縮項目的下邊沿對齊。
?? ?(3)若只有圖片，則按圖片最下沿對齊。
?? ?
?? ?例如：

?? ??? ?<style>.container {width: 600px;height: 400px;background-color: gray;display: flex;flex-flow: row wrap;align-items: baseline;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;}.box4 {width: 250px;height: 250px;display: flex;justify-content: center;align-items: center;}</style><div class="container"><div class="box box1">1x</div><div class="box box2"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><p>Lorem ipsum dolor sit amet.</p></div><div class="box box3"></div><div class="box box4"><img src="./14多列布局/img5.jpg" alt="" /></div></div>

?? ?備注：上面例子為了讓img居中，再次使用了伸縮盒子。
?? ??? ? ?只要是伸縮盒子（box4)，它的所有子元素(img)，都會塊狀化，都會按伸縮項目進行排列。

103、父元素用display:flex，子元素用margin:auto就能自動垂直水平居中，為什么？

?? ?簡言之：flex有水平與垂直兩個方向的軸設置，所以會呈現(xiàn)兩個方向的自動居中。
?? ?
?? ?margin: auto; 的行為在不同的布局模式下有不同的解釋和限制。

?? ?（1）在常規(guī)文檔流中，margin: auto; 主要用于水平居中塊級元素。這是因為瀏覽器默認會嘗試在左右兩邊分配相等的外邊距來填充剩余空間。但這種自動分配僅限于水平方向，且僅在元素寬度小于其容器寬度時才有效。對于垂直方向，margin: auto; 是不起作用的，因為常規(guī)流布局中垂直空間的分配不由外邊距控制。

?? ?（2）在 Flexbox 布局中，存在兩個軸：主軸和交叉軸。justify-content 控制的是主軸上的對齊方式，而 align-items 控制的是交叉軸上的對齊方式。通過將 justify-content 設置為 center 并將 align-items 設置為 center，可以實現(xiàn)子元素在兩個軸上的居中對齊。此時，margin: auto; 在子元素上的應用將確保在主軸方向上的居中，而 align-items 則確保了在交叉軸方向上的居中。

?? ?因此，flex中會呈現(xiàn)兩個方向的居中。

104、flex-grow是如何分配空間的？

?? ?當有空余時才按比例分配 到每個盒子上去。
?? ?沒有空余（剛好占完）即使有分配比例，也不會分配。
?? ?另外，如果是換行造成的剩余空間，則按當前該行各伸縮項目的比較分配剩余空間

?? ??? ?<style>.outer {width: 600px;height: 600px;background-color: gray;display: flex;flex-flow: row wrap;}.box {width: 150px;height: 100px;background-color: skyblue;box-sizing: border-box;border: 1px solid black;flex-grow: 1;}.box2 {width: 200px;}</style><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div></div>

?? ?解釋：
?? ??? ?第一行容納box1-3,600-（150+200+150）剩余100，按1:1:1分配，故 box1為150+33.3=183.3....第二行只有box4，直接全部分配 給它，即600。
?? ??? ?
?? ??? ?可以看到容納不下?lián)Q行后，會對當前行按比較分配剩余的空間。

105、在伸縮盒子規(guī)定：

?? ??? ?<style>.outer {width: 600px;height: 800px;background-color: gray;display: flex;flex-flow: row wrap;align-items: flex-start;}.box {width: 200px;height: 200px;background-color: skyblue;box-sizing: border-box;border: 1px solid black;}/* .box1 {height: 400px;} *//* .box5 {height: 300px;} *//* .box3 {align-self: flex-end;} */?? ??? ? ?</style><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div></div>

?? ?上面有換行時，為什么第二行看似是居中的呢？
?? ?
?? ?在規(guī)范中，第二行的排列布局并沒有明確規(guī)定，若推算的話，應該是緊貼第一行。但各瀏覽器為了美觀，會將第二行放于垂直居中位置，也即上下的空隙相等。
?? ?
?? ?為了進一步說明，取消上面box1和box5的注釋，第一行（box1-3)會按最高（box1為400px)計算整個行高（為400px)，第二同理會按最高（box4-5中最高box5為300px)為行高。
?? ?800-400=400，剩下的400中第二行占300，故它上下端空隙為（400-300）/2=50。第二行，會按align-items: flex-start;繼續(xù)對齊，故box4與box5會頂端對齊。
?? ?
?? ?接著上面繼續(xù)，align-items: flex-start;改為center，則間距有會變化，第一、二行仍然以每行的伸縮項中最高的高度為準。第一行是400px，第二行是300px，剩下的是800-400-300=100，這個分成四份，最上面一份，最下面一份，中間為2份。即，第一行最高項目的頂部距容器頂部頂部為25px,第二行最高項底部距容器底端為25px，兩行中的空隙（第一行最高項底端與第二行最高項頂端的距離）是50px，但若對應的項有align-self：flex-start，則會靠近上面50px中的一半處。
?? ?
?? ?
?? ?為了驗證設計了一個尺寸，請看下面：

?? ??? ?<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>Document</title><style>.outer {width: 650px;height: 800px;background-color: #999;border: 1px solid black;display: flex;flex-flow: row wrap;}.lbox {width: 50px;height: 50px;box-sizing: border-box;border: 1px solid black;display: flex;justify-content: flex-end;align-items: flex-end;}.rightinner {width: 600px;height: 800px;background-color: #ccc;box-sizing: border-box;/* border: 1px solid black; */display: flex;flex-flow: row wrap;align-items: center;}.rbox {width: 200px;height: 200px;box-sizing: border-box;background-color: skyblue;border: 1px solid black;}.rbox1 {height: 400px;}.rbox5 {height: 200px;/* align-self: flex-start; */}.rbox3 {align-self: flex-end;}</style></head><body><div class="outer"><div class="leftinner"><div class="lbox lbox1">50</div><div class="lbox lbox2">100</div><div class="lbox lbox3">150</div><div class="lbox lbox4">200</div><div class="lbox lbox5">250</div><div class="lbox lbox6">300</div><div class="lbox lbox7">350</div><div class="lbox lbox8">400</div><div class="lbox lbox9">450</div><div class="lbox lbox10">500</div><div class="lbox lbox11">550</div><div class="lbox lbox12">600</div><div class="lbox lbox13">650</div><div class="lbox lbox14">700</div><div class="lbox lbox15">750</div><div class="lbox lbox16">800</div></div><div class="rightinner"><div class="rbox rbox1">1</div><div class="rbox rbox2">2</div><div class="rbox rbox3">3</div><div class="rbox rbox4">4</div><div class="rbox rbox5">5</div></div></div></body></html>

?? ?第一行最高rbox1為400px，第二行最高為rbox4為200px（可修改rbox5為150不會改變整個布局)，
?? ?進行分配，800-400-200=200，分成四份，rbox1距容器頂端為1份50px,rbox4距容器底端為1份50px，剩下的2份100px為第一行最底端與第二行最頂端的距離。如果此時有單獨的align-self，會將這100px再平分。
?? ?將上例的rbox5調整為align-self:flex-start，將會發(fā)現(xiàn)rbox3與rbox5會緊頂，匯合在500px高度處。

106、align-self: flex-end;是調整單個項目到側軸底端嗎？

?? ?是的，但不完全正確。
?? ?嚴格的說：是調整單個項目到“底端”。這個底端是指下面有人阻礙就在阻礙處停止，比如第二行有項目，它會阻礙向下掉，直接靠近第二行有項目處。

?? ??? ?<style>.outer {width: 600px;height: 600px;background-color: gray;display: flex;flex-flow: row wrap;align-items: flex-start;/* align-content: flex-start; */}.inner {width: 200px;height: 200px;background-color: skyblue;box-sizing: border-box;border: 1px solid black;}.inner3 {order: -1;align-self: flex-end;}.inner2 {align-self: flex-end;}.inner5 {height: 220px;}</style><div class="outer"><div class="inner inner1">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div><div class="inner inner4">4</div><!-- <div class="inner inner5">5</div> --></div>

?? ?
?? ?上面容器中inner3排第一位，整行有換行inner4在第二行，故inner3在向下掉時，會被inner4“托住”或阻礙，就會靠近4，即此時第一行向下的底端就是第二行的頂端，inner2也不會掉到最下端，它會靠近第二行。

107、在網(wǎng)頁沒有內容時，使用：

?? ??? ? ?body {width: 100%;height: 100%;}

?? ?為什么去檢查進有寬度值，但沒有高度值？
?? ?
?? ?塊級元素（block-level elements）默認情況下會盡可能地擴展以填滿其父元素的寬度（除非明確值）。如 <div>, <p>, <section> 等，在沒有內容時默認寬度并不會自動變?yōu)?0。這些元素通常會有一個默認的寬度，這個寬度基于其父元素的寬度。
?? ?
?? ?但是，對于內聯(lián)元素（inline elements），如 <span> 或文本，它們的寬度確實是基于它們所包含的內容的寬度。如果一個內聯(lián)元素沒有內容，那么它的寬度確實會是 0，因為沒有內容來確定寬度。
?? ?
?? ?對于body元素，自身沒有明確時，看包含塊<html>元素，而<html>元素的默認尺寸通常就是瀏覽器的可視區(qū)域（viewport）。也即視口。
?? ?
?? ?默認的html也是0，除非內部有內容，如果沒有內容，上面如果對html的height用100%它對標的就是視口,視口的高度。這樣body就繼承，因100%所以使用整個視口高度。
?? ??? ? ?html,body {
?? ??? ??? ?width: 100%;
?? ??? ??? ?height: 100%;
?? ??? ? ?}

108、子絕父相，若父元素使用相對定位，但本身無尺寸，會怎么？

?? ?父元素使用相對定位的目的，就是為子元素的變化提供錨定物，若父元素無尺寸，則無法錨定，會繼續(xù)向上尋找錨定物，找到后再確定當前子元素的變化。例如

?? ??? ?<style>.header {height: 70px;background-color: gray;}.outer {position: relative;/* height: 700px; */}.inner {width: 400px;height: 400px;background-color: rgba(255, 255, 0, 0.3);position: absolute;top: 50%;left: 0;right: 0;bottom: 0;margin: auto;}</style><div class="header">1</div><div class="outer"><div class="inner">2222</div></div>

?? ?由于盡管父元素.outer有相對定位，但.outer 沒有實際的高度，.inner 元素就會"穿透"這個沒有尺寸的父元素，繼續(xù)向上尋找下一個可以作為參考的祖先元素。?
? ? 當絕對定位元素找不到已定位的祖先元素時，它實際上是相對于視口進行定位的，而不是嚴格意義上相對于 <body>。但由于 <body> 通常填滿了整個視口，所以在視覺上看起來就像是相對于 <body> 定位的。
?? ?
?? ?所以哪怕沒有父元素相對定位，最終都會以視口為錨定物。
?? ?
?? ?注意：
?? ??? ?絕對定位元素會向上查找最近的已定位（position 不為 static）的祖先元素作為其定位參考。如果找不到，則會以初始包含塊（initial containing block）為參考，而不是嚴格意義上的視口。
?? ??? ?初始包含塊通常與視口大小相同，但它們并不完全等同。初始包含塊是一個概念性的矩形，其尺寸和位置通常與視口一致，但在某些情況下（如使用 transform 屬性）可能會有所不同。
?? ??? ?這里用“視口”來代替初始包含塊來理解
?? ?
?? ?

109、什么是初始包含塊?

?? ?初始包含塊（initial containing block）是一個概念性的矩形框，它是在渲染頁面時確定布局的基準。初始包含塊的尺寸和位置通常與視口（瀏覽器窗口）的尺寸和位置相匹配，但在某些情況下可能有所不同。
?? ?
?? ?比如常用的版心，通常它就是初始包含塊，而視口（整個網(wǎng)頁）通常都比版心大。

?? ?初始包含塊具有以下特點：
?? ??? ?- 它是所有元素的根容器，是頁面的最外層容器。
?? ??? ?- 它的尺寸通常由視口的大小決定，但也受到一些 CSS 屬性的影響，比如 transform 屬性可以改變初始包含塊的尺寸和位置。
?? ??? ?- 對于根元素（<html> 元素），初始包含塊的左上角是文檔流的起點。
?? ??? ?- 它是頁面中所有固定定位（position: fixed）元素的定位參考。
?? ??? ?- 絕對定位元素在沒有已定位祖先元素時，會相對于初始包含塊進行定位。

?? ?注意：
?? ??? ?初始包含塊并不是一個實際存在的元素或容器，而是一個概念上的概念，用于確定頁面元素的布局和定位。?? ?
?? ?

?? ?
110、background-image: linear-gradient(red, yellow, green);背景圖為什么是背景色呢？

?
?? ?在 CSS 的早期版本中，background-image 屬性主要用于加載并顯示圖像文件（如 .jpg, .png, .gif 等），這要求服務器上必須有相應的圖像資源，并且在頁面加載時需要下載這些圖像。
?? ?
?? ?隨著 CSS3 的引入，有了更多創(chuàng)建復雜視覺效果的方式，而不必依賴于預加載的圖像文件。CSS3 引入了 linear-gradient, radial-gradient, 和 conic-gradient 這樣的漸變類型，它們允許開發(fā)者直接在 CSS 中定義背景圖案，通過顏色和透明度的動態(tài)變化來生成這些圖案。

?? ?使用這些漸變，你可以創(chuàng)建出類似圖像的效果，但它們實際上是基于矢量的，這意味著它們可以無限放大而不失真，同時也不需要額外的網(wǎng)絡請求來加載圖像文件，從而提高了網(wǎng)頁的加載速度和性能。此外，漸變背景還可以輕松地適應不同的屏幕尺寸和設備，使得響應式設計更加靈活。

111、@media all有什么用？

?? ?@media all 在技術上是冗余的，有時你仍然可能看到它被使用，原因有以下幾點：

?? ??? ?明確性：
?? ??? ??? ?使用 @media all 可以明確表明這一組樣式是適用于所有設備的，這在閱讀和維護代碼時提供了清晰性。
?? ??? ?優(yōu)先級：
?? ??? ??? ?媒體查詢具有較高的CSS優(yōu)先級，這意味著在同一個選擇器中，位于媒體查詢內的樣式可能會覆蓋位于媒體查詢外的相同屬性的樣式。
?? ??? ?組合使用：
?? ??? ??? ?當你需要同時使用多個媒體查詢時，將通用樣式放在 @media all 下面，可以使結構更清晰，也便于將特定于設備的樣式添加到其他媒體查詢中。
?? ??? ?兼容性：
?? ??? ??? ?盡管現(xiàn)代瀏覽器默認會應用沒有媒體查詢的樣式，但在某些舊版或非標準瀏覽器中，明確使用 @media all 可能有助于確保樣式正確應用。
?? ?
?? ?因此，雖然從技術角度講，@media all 不是必需的，但在實踐中，它可以幫助保持CSS代碼的組織性和兼容性，尤其是在處理復雜項目時。例如，一個常見的模式是在 @media all 中放置基礎樣式，然后在特定的媒體查詢中添加響應式設計規(guī)則。?? ?

112、一個元素浮動后清除浮動后，為什么仍然可能不被父元素內容？

例如：

?? ??? ?<style>.outer {width: 400px;/* height: 300px; */background-color: gray;border: 1px solid black;/* float: left; */}.box {width: 100px;height: 100px;background-color: skyblue;font-size: 30px;box-sizing: border-box;border: 1px solid black;margin: 10px;}.box1,.box2,.box3 {float: left;}.box3 {clear: both;}</style><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>

?? ?盡管對已經(jīng)浮動的元素進行清除浮動影響，但它仍然一個浮動元素，仍然脫離正常的文檔流，它只是清除浮動元素對后續(xù)元素布局造成的影響，上面box3清除前面浮動元素對自己的影響(不清除則會尾隨在box2的后面)。
?? ?
?? ?注意：
?? ??? ?box3盡管清除了前面對自己的影響，但自己浮動的特征沒有改變，它仍然是一個浮動元素，仍然脫離文檔流。
?? ??? ?box3會遵守清除浮動的規(guī)則，垂直位置不受之前浮動元素影響。
?? ??? ?但作為浮動元素，它仍然不會影響其后續(xù)元素的正常文檔流布局。
?? ??? ?它也不會撐開父元素的高度（除非父元素采用了清除浮動的技巧）。
?? ?
?? ?如果父元素outer開啟左浮動，則會創(chuàng)建BFC，它將包含其內部的所有浮動子元素，確保它們不會溢出到外部元素的范圍之外。因此所有box將會被outer容納。
?? ?
?? ?