看看這些前端面試題，帶你搞定高頻知識點（五）-css教學-PHP中文網

面試官：css 如何實現左側固定 300px，右側自適應的佈局？

面試長：flex 版面中align-content 與align-items 有何不同？

面试官：z-index: 999 元素一定会置于 z-index: 0 元素之上吗？

面试官：什么是 Data URL？

面试官：网站设置字体时，如何设置优先使用系统默认字体？

面试官：CSS如何实现圣杯布局？

首頁

web前端

css教學

看看這些前端面試題，帶你搞定高頻知識點（五）

青灯夜游

Feb 23, 2023 pm 07:23 PM

css html 前端面試題

看看這些前端面試題，帶你搞定高頻知識點（五）

每天10題，100天后，搞定所有前端面試的高頻知識點，加油！！！，在看文章的同時，希望不要直接看答案，先思考一下自己會不會，如果會，自己的答案是什麼？想過之後再與答案比對，是不是會好一點，當然如果你有比我更好的答案，歡迎留言區留言，一起探討技術之美。

面試官：css 如何實現左側固定 300px，右側自適應的佈局？

我：呃~，好的，可以採用flex佈局，或是浮動BFC，整出程式碼如下：

flex佈局：

<style>
  *{margin: 0;padding: 0;}
  .container{
    display: flex; 
  }
  .left{
    width: 300px;
    height: 100vh;
    background-color: #f00;
  }
  .main{
    flex: 1;
    background-color: #ae5aca; 
  }
</style>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="main"></div>
  </div>
</body>

登入後複製

#浮動BFC：

<style>
  *{margin: 0;padding: 0;}
  .container {
    height: 100vh;
  }
  .left {
    float: left;
    width: 300px;
    height: 100%;
    background-color: #f00;
  }
  .main {
    height: 100%;
    background-color: #ae5aca;
    overflow: hidden;
  }
</style>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="main"></div>
  </div>
</body>

登入後複製

面試長：flex 版面中align-content 與align-items 有何不同？

我：呃~，它們都是作用於縱軸的元素，具體區別如下：

##align-content：作用於縱軸多行元素，一行元素不起作用。【相關推薦：web前端開發】

<style>
  .container {
    background-color: #efefef;
    border: 1px solid #888;
    margin-top: 3rem;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    /* 纵轴多元素一起居中 */
    align-content: center;
  }
  .item {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    border: 1px solid #aaa;
  }
</style>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

登入後複製

#align-items：作用於縱軸單行元素

<style>
  .container {
    background-color: #efefef;
    border: 1px solid #888;
    margin-top: 3rem;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    /* 纵轴单元素居中 */
    align-items: center;
  }
  .item {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    border: 1px solid #aaa;
  }
</style>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

登入後複製

面試官：Grid 佈局的優勢在哪裡？

我：呃~，Flex 佈局是軸線佈局，只能指定"項目"針對軸線的位置，可以看作是一維佈局。 Grid 佈局則是將容器分割成"行"和"列"，產生儲存格，然後指定"項目所在"的儲存格，可以看作是二維佈局。 Grid 佈局遠比 Flex 佈局強大。

訪談員：Flex 版面中的 flex-basis 與 width 有何不同？

我：呃~，flex-basis 的值為理想情況，而在實際情況中可能被壓縮，當flex-direction 為column 時，主軸為縱軸，此時flex-basis 與height 對應

訪談員：css 載入會阻塞DOM 樹的解析與渲染嗎？

我：呃~，css 載入會直接影響網頁的渲染，因為只有css 載入完畢，建置完CSSOM 後，渲染樹(Render Tree)才會構建，然後渲染成點陣圖，如果html 中有載入script 的話，還會間接影響DOM 樹的解析，因為javascript 的下載、解析和執行和阻塞DOM 樹的解析，而javascript 中有可能存取CSSOM，例如Element.getBoundingClientRect，因此CSSOM建置完畢以後才會開始javascript 的執行，間接阻斷dom 樹的解析。

面試官：什麼是層疊上下文(stacking contect)，談談對它的理解

我：呃~，好的，層疊上下文就是這些HTML 元素的一個三維構想。眾 HTML 元素基於其元素屬性按照優先順序佔據這個空間。優先順序如下：

想了解更深層脈絡：建議文章：
深入理解CSS中的層疊上下文與層疊順序。

面试官：z-index: 999 元素一定会置于 z-index: 0 元素之上吗？

我：呃~，不会，我们在进行层叠上下文时，会优先比较父级，如果父级是层叠上下文，子级即使有z-index也不再起作用了，如果父级层叠上下文层叠顺序相等，那么采取后来居上原则，前者覆盖后者。如果父级是普通元素，子级层叠比较就不受父级的影响，谁的层叠顺序高谁就先展示。

层叠黄金准则：

谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

整出代码如下：

<style>
  .first {
    background-color: red;
    height: 3rem;
    z-index: 2;
    opacity: 0.99;
  }
  .item1 {
    z-index: 0;
    height: 100%;
    width: 3rem;
    background-color: orange;
  }

  .second {
    background-color: blue;
    height: 3rem;
    margin-top: -1.5rem;
    z-index: 3;
    position: relative;
  }  
  .item2 {
    z-index: 999;
    height: 100%;
    width: 3rem;
    background-color: green;
  }
</style>
<body>
  <div class="first">
    <div class="item1"></div>
  </div>
  <div class="second">
    <div class="item2"></div>
  </div>
</body>

登入後複製

面试官：什么是 Data URL？

我：呃~，Data URL 是将图片转换为 base64 直接嵌入到了网页中。

使用这种方式引用图片，不需要再发请求获取图片。

使用 Data URL 也有一些缺点：

base64 编码后的图片会比原来的体积大三分之一左右。

Data URL 形式的图片不会缓存下来，每次访问页面都要被下载一次。可以将 Data URL 写入到 CSS 文件中随着 CSS 被缓存下来。

面试官：网站设置字体时，如何设置优先使用系统默认字体？

我：呃~，system-ui 将会自动选取系统默认字体作为字体。

面试官：CSS如何实现圣杯布局？

我：呃~，圣杯布局是指两端宽度固定，中间自适应。在日常开发中，圣杯布局的使用频率是比较高的。举一个简单的浮动例子，当然也可以使用定位或flex布局，整出代码如下：

浮动：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                border: 1px solid black;
                overflow: hidden;
                padding: 0px 100px;
                min-width: 100px;
            }
            .left {
                background-color: greenyellow;
                float: left;
                width: 100px;
                margin-left: -100%;
                position: relative;
                left: -100px;
            }
            .center {
                background-color: darkorange;
                float: left;
                width: 100%;
            }
            .right {
                background-color: darkgreen;
                float: left;
                width: 100px;
                margin-left: -100px;
                position: relative;
                left: 100px;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><br /><br /><br /></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

登入後複製