1. 什么是 FOUC? 如何避免

1. 什么是 Fouc(文檔樣式短暫失效)？

   在引用 css 的過程中，如果方法不當(dāng)或者位置引用不對，會導(dǎo)致某些頁面在 windows 下的 ie 出現(xiàn)一些奇怪的現(xiàn)象，以無樣式顯示頁面內(nèi)容的瞬間閃爍，這種現(xiàn)象稱之為文檔樣式短暫失效，簡稱 FOCU。

2. 原因大致為：

   • 使用 import 方法導(dǎo)入樣式表
   • 將樣式表放在頁面底部
   • 有幾個樣式表，放在 html 結(jié)構(gòu)的不同位置

當(dāng)樣式表晚于結(jié)構(gòu)性 html 加載，當(dāng)加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現(xiàn)了短暫的花屏現(xiàn)象。

3. 解決方法：
   使用 link 標(biāo)簽將樣式表放在文檔 head 中

2. CSS 預(yù)編語言是什么？它們之間有什么區(qū)別呢？

CSS 預(yù)編語言是一種基于 CSS 的擴(kuò)展語言，可以更加方便和高效地編寫 CSS 代碼。其主要作用是為 CSS 提供了變量、函數(shù)、嵌套、繼承、混合等功能，以及更加易于維護(hù)和組織的代碼結(jié)構(gòu)。

常見的 CSS 預(yù)編語言有 Sass、Less 和 Stylus，它們的區(qū)別有：

• 語法不同：Sass 和 Less 使用類似于 CSS 的語法規(guī)則，而 Stylus 則使用了更加簡潔和靈活的縮進(jìn)式語法。
• 變量定義方式不同：Sass 使用 $ 符號來定義變量，Less 使用 @ 符號，Stylus 則直接使用變量名即可。
• 操作符和函數(shù)庫不同：Sass 和 Less 支持常見的操作符和函數(shù)庫，例如運(yùn)算符、顏色處理、字符串處理等，而 Stylus 的函數(shù)庫更加強(qiáng)大，支持更多的特性和功能。
• 編譯方式不同：Sass 和 Less 都需要通過編譯器進(jìn)行編譯，可以將預(yù)編譯的代碼轉(zhuǎn)換成標(biāo)準(zhǔn)的 CSS 代碼。而 Stylus 則可以直接在瀏覽器中解析和執(zhí)行，可以動態(tài)調(diào)整樣式和布局。

3. z-index屬性在什么情況下會失效？

z-index 的使用是在有兩個重疊的標(biāo)簽，在一定的情況下控制其中一個在另一個的上方或者下方出現(xiàn)。z-index值越大就越是在上層。z-index元素的position屬性需要是relative，absolute或是fixed。

z-index屬性在下列情況下會失效：

• 父元素position為relative時，子元素的z-index失效。解決：父元素position改為absolute或static；
• 元素沒有設(shè)置position屬性為非static屬性。解決：設(shè)置該元素的position屬性為relative，absolute或fixed中的一種；
• 元素在設(shè)置z-index的同時還設(shè)置了float浮動。解決：float去除，改為display：inline-block；

4. 單行文本怎么實(shí)現(xiàn)兩端對齊？

大家首先想到的可能是 text-align: justify;，但justify對最后一行無效

方法一：添加一行
根據(jù)justify對最后一行無效，我們可以新增一行，使該行文本不是最后一行，實(shí)現(xiàn)如下：

//html
<div class="box">
    <span class="item-label" >{{item.label}}</span>：
    <span class="iten-value">{{item.value}}</span>
</div>
//scss
.box{
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    .item-label {
        display: inline-block;
        height: 100%;
        width: 100px;
        text-align: justify;
        vertical-align: top;
        &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
        }
    }
    .item-value {
        padding-right: 10px;
    }
}

方法二： text-align-last
text-align-last，該屬性定義的是一段文本中最后一行在被強(qiáng)制換行之前的對齊規(guī)則。

//scss
.box{
    margin-bottom: 8px;
    .item-label {
        display: inline-block;
        height: 100%;
        min-width: 100px;
        text-align: justify;
        text-align-last: justify;
    }
    .item-value {
        padding-right: 10px;
    }
}

5. 怎么實(shí)現(xiàn)單行、多行文本溢出隱藏？

• 單行文本溢出

overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;      // 溢出用省略號顯示
white-space: nowrap;         // 規(guī)定段落中的文本不進(jìn)行換行

• 多行文本溢出

overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;     // 溢出用省略號顯示
display:-webkit-box;         // 作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; // 設(shè)置伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3;        // 顯示的行數(shù)

6. transition和animation的區(qū)別

transition是過渡屬性，強(qiáng)調(diào)過渡，它的實(shí)現(xiàn)需要觸發(fā)一個事件（比如鼠標(biāo)移動上去，焦點(diǎn)，點(diǎn)擊等）才執(zhí)行動畫。它類似于flash的補(bǔ)間動畫，設(shè)置一個開始關(guān)鍵幀，一個結(jié)束關(guān)鍵幀。
animation是動畫屬性，它的實(shí)現(xiàn)不需要觸發(fā)事件，設(shè)定好時間之后可以自己執(zhí)行，且可以循環(huán)一個動畫。它也類似于flash的補(bǔ)間動畫，但是它可以設(shè)置多個關(guān)鍵幀（用@keyframe定義）完成動畫。

7. CSS動畫和JS實(shí)現(xiàn)的動畫分別有哪些優(yōu)缺點(diǎn)？

1. CSS動畫
   優(yōu)點(diǎn)

   • 瀏覽器可以對動畫進(jìn)行優(yōu)化
   • 代碼相對簡單,性能調(diào)優(yōu)方向固定
   • 對于幀速表現(xiàn)不好的低版本瀏覽器，CSS3可以做到自然降級，而JS則需要撰寫額外代碼

   缺點(diǎn)

   • 運(yùn)行過程控制較弱,無法附加事件綁定回調(diào)函數(shù)
   • 代碼冗長，想用CSS實(shí)現(xiàn)稍微復(fù)雜一點(diǎn)動畫,最后CSS代碼都會變得非常笨重

2. JS動畫
   優(yōu)點(diǎn)

   • 控制能力很強(qiáng), 可以在動畫播放過程中對動畫進(jìn)行控制：開始、暫停、回放、終止、取消都是可以做到的。
   • 動畫效果比css3動畫豐富,有些動畫效果，比如曲線運(yùn)動,沖擊閃爍,視差滾動效果，只有js動畫才能完成
   • CSS3有兼容性問題，而JS大多時候沒有兼容性問題

   缺點(diǎn)

   • 代碼的復(fù)雜度高于CSS動畫
   • JavaScript在瀏覽器的主線程中運(yùn)行，而主線程中還有其它需要運(yùn)行的JavaScript腳本、樣式計(jì)算、布局、繪制任務(wù)等,對其干擾導(dǎo)致線程可能出現(xiàn)阻塞，從而造成丟幀的情況

8. 脫離文檔流有哪些方法？

1. 什么是文檔流？

將窗體自上而下分成一行一行，并在每行中按從左至右依次排放元素，稱為文檔流，也稱為普通流。HTML中全部元素都是盒模型，盒模型占用一定的空間，依次排放在HTML中，形成了文檔流。

2. 什么是脫離文檔流？

元素脫離文檔流之后，將不再在文檔流中占據(jù)空間，而是處于浮動狀態(tài)（可以理解為漂浮在文檔流的上方）。脫離文檔流的元素的定位基于正常的文檔流，當(dāng)一個元素脫離文檔流后，依然在文檔流中的其他元素將忽略該元素并填補(bǔ)其原先的空間。

3. 怎么脫離文檔流？

• float
  使用float可以脫離文檔流。

  使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在該元素的周圍。

• absolute
  absolute稱為絕對定位，使用absolute脫離文檔流后的元素，是相對于該元素的父類（及以上，如果直系父類元素不滿足條件則繼續(xù)向上查詢）元素進(jìn)行定位的，并且這個父類元素的position必須是非static定位的（static是默認(rèn)定位方式）。

• fixed
  完全脫離文檔流，相對于瀏覽器窗口進(jìn)行定位。（相對于瀏覽器窗口就是相對于html）。文章來源地址http://www.zghlxwxcb.cn/news/detail-511912.html

到了這里，關(guān)于CSS知識點(diǎn)匯總(五)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！