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

面試官：請你談談自適應(適配)的方案

面試官：談談你對響應式的理解

面试官：css 动画与 js 动画哪个性能更好？

面试官：为什么会发生样式抖动？

面试官：你做前端有多少时间花在写 css 上？

面试官：介绍 CSS 隐藏页面中某个元素的几种方法

面试官：CSS 如何设置一行或多行超出显示省略号？

面试官：flex 布局中 order 有何作用？

首頁

web前端

css教學

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

青灯夜游

Feb 20, 2023 pm 07:19 PM

css html 前端面試題

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

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

面試官：請你談談自適應(適配)的方案

我：呃~，好的，解決自適應問題可以採用「 淘寶無限適配 佈局單位使用rem 」，適配所需的js還有說明文件：淘寶的github網址，整出程式碼如下：

<style>
    *{margin: 0;padding: 0;}
    html{
        height: 37.5px;
    }
    .container{
        width: 1rem;
        height: 1rem;
        background-color: #f00;
    }
</style>
<script src="../index.js"></script>
<body>
    <div class="container">111</div>
</body>

登入後複製

#【相關推薦：web前端開發】

面試官：談談你對響應式的理解

我：呃~，好的，通俗來講，在html css中，響應式意為：一個URL可以回應多端，簡言之在不同的設備不同尺寸的情況下，相同的url都能對其進行適配，如何做？整出程式碼如下：

<style>
    *{margin: 0;padding: 0;}
    ul{
        list-style: none;
    }
    ul li {
        display: inline-block;
        width: 100px;
        background-color: #f00;
    }
    @media only screen and (max-width: 1000px){
        ul li:last-child{
            display: none;
        }
    }
    @media only screen and (max-width: 800px){
        ul li:nth-child(5){
            display: none;
        }
    }
    @media only screen and (max-width: 500px){
        ul li:nth-child(4){
            display: none;
        }
    }
</style>
<body>
    <ul>
        <li>首页</li>
        <li>消息</li>
        <li>题库</li>
        <li>面试</li>
        <li>内容</li>
        <li>offer</li>
    </ul>
</body>

登入後複製

當然也可以為圖片加上回應式，整出程式碼如下：

<style>
    *{margin: 0;padding: 0;}
    picture{
        width: 300px;
	    height: 300px;
    }
    img {
		width: 100%;
	    height: 100%;
	    object-fit: contain;
	};
    source {
		width: 80%;
	    height: 80%;
	    object-fit: contain;
	};
</style>
<body>
    <picture>
        <!-- 如果切换到不同设备上 -->
        <source srcset="../7.jpeg" media="(min-width: 1000px)">
        <source srcset="../004.jpeg" media="(min-width: 700px)">
        <!-- 默认加载该图片 -->
        <img src="../4.jpeg">
    </picture>
</body>

登入後複製

##面試官：談談你對佈局方案的理解

我：呃~，好的，佈局方案根據項目特點，有以下選擇：
一、
什麼情況下採用響應式佈局資料不是特別多，使用者量不是特別大，純粹展示類別的專案適合響應式佈局
例如:公司的官網、專題頁面
特別追求效能的項目，不太適合響應式，因為如果添加了很多的響應式就會造成載入速度變慢。
二、
pc 行動端應該做什麼樣的佈局方案注意:訪問量還可以或比較大，類似淘寶網。
pc是一套，會加入一點點響應式。
行動端是一套，會使用自適應的佈局方式。
三、
pc的設計圖 ui: 1980
筆記型電腦:1280
ui圖的寬度和電腦的寬度不對該怎麼辦?
1．把ui圖進行等比縮放，縮放成和電腦一樣的尺寸
2．換1980的電腦
四、
行動端的設計圖寬度:750
因為750設計圖/2就是375，剛好是iphone6的尺寸，我們要把iphone6的尺寸做成基準點。

面試官：什麼是重排重繪，如何減少重拍重繪？

我：呃~，好的，總結如下：
重排(Reflow)：元素的位置變動時發生重排，也叫回流。此時在關鍵渲染路徑中的 Layout 階段，計算每個元素在裝置視窗內的確切位置和大小。當一個元素位置改變時，其父元素及其後邊的元素位置都可能發生變化，代價極高。

重繪(Repaint): 元素的樣式發生變動，但是位置沒有改變。此時在關鍵渲染路徑中的 Paint 階段，將渲染樹中的每個節點轉換成螢幕上的實際像素，這一步通常稱為繪製或柵格化。

另外，重排必定會造成重繪。以下是避免多重拍重繪的方法
1）使用DocumentFragment 進行DOM 操作，不過現在原生操作很少也基本上用不到
2）CSS 樣式盡量批量修改
3）避免使用table 佈局
4）為元素提前設定好高寬，且不因多次渲染而改變位置

面试官：css 动画与 js 动画哪个性能更好？

我：呃~，我对这两者的看法以及优缺点总结如下：

CSS3 的动画：

1.在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化（比如专门新建一个图层用来跑动画）

2.代码相对简单

3.在动画控制上不够灵活　

4.兼容性不好

5.部分动画功能无法实现（如滚动动画，视差滚动等）

JavaScript 的动画：

弥补了 css 缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且功能强大。

总结：对于一些复杂控制的动画，使用 javascript 会比较好。而在实现一些小的交互动效的时候，可以多考虑 CSS。

面试官：为什么会发生样式抖动？

我：呃~，因为没有指定元素具体高度和宽度,比如数据还没有加载进来时元素高度是 100px(假设这里是 100px),数据加载进来后,因为有了数据,然后元素被撑大,所有出现了抖动。

面试官：你做前端有多少时间花在写 css 上？

我：呃~，如果说是开发阶段，我会用 20%-30% 的时间写 CSS。但是如果项目是采用某种组件库的时候，比如：UI 设计时遵循了 element-ui 的规范，而开发使用的 UI 框架为 element-ui，因此大多数的界面并不需要写大量的 CSS，因为预设样式已足够使用。

面试官：介绍 CSS 隐藏页面中某个元素的几种方法

我：呃~，好的，隐藏元素的方法有如下几种：

display: none; ：通过 CSS 操控 display，移出文档流。

opacity: 0; ：透明度为 0，仍在文档流中，当作用于其上的事件(如点击)仍有效。

visibility: hidden; ：透明度为 0，仍在文档流中，但作用于其上的事件(如点击)无效，这也是 visibility:hidden 与 opacity: 0 的区别。

content-visibility; ：移出文档流，但是再次显示时消耗性能低。

position: absolute;top: -9000px;left: -9000px; ：绝对定位于当前页面的不可见位置。

font-size: 0; ：字体大小设置为 0

面试官：CSS 如何设置一行或多行超出显示省略号？

我：呃~，好的，整出代码如下：

<style>
  div{
    width: 100px;
    /* 使用如下来设置一行行超出显示省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  p{
    width: 100px;
    /* 使用 -webkit-line-clamp 来设置多行超出显示省略号 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
</style>
<body>
  <div>
    1222222222222222222222222222222
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste esse velit illum vel cumque obcaecati. Quae, dicta nihil quod vero mollitia dignissimos autem, necessitatibus, iure a debitis temporibus eaque ratione.</p>
</body>

登入後複製

面试官：flex 布局中 order 有何作用？

我：呃~，order 属性定义 Flex 布局中子元素的排列顺序，数值越小，排列越靠前，默认为 0。整出代码如下：

<style>
  .container{
    width: 500px;
    border: 5px solid #ddd;
    display: flex;
    justify-content: space-around;
  }
  .container div{
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
  #d1{
    order: 3;
  }
  #d2{
    order: 2;
  }
  #d3{
    order: 1;
  }
</style>
<body>
  <div class="container">
    <div id="d1">老大</div>
    <div id="d2">老二</div>
    <div id="d3">老三</div>
  </div>
</body>

登入後複製