高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (4)-CSSチュートリアル-php.cn

高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (4)

毎日 10 問、100 日後には、フロントエンド面接の高頻度の知識ポイントをすべてマスターしていることになります。さあ! ！！ , 記事を読みながら、答えを直接見るのではなく、まず知っているかどうか、知っている場合の答えは何かを考えてください。考えて、答えと比べてみてください。それが良いでしょうか? もちろん、私の答えよりも良い答えがある場合は、コメント欄にメッセージを残して、テクノロジーの美しさについて一緒に話し合ってください。

インタビュアー: アダプティブ (適応) ソリューションについて話してください。

私: えーっと、わかりました。アダプティブ問題を解決してください。問題は次のとおりです。「淘宝網無制限適応 レイアウトユニットは rem を使用しています」を使用して解決しました。適応に必要な js にもドキュメントがあります: タオバオの github URL、コード全体は次のとおりです:

<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 では、レスポンシブネスとは次のことを意味します: 1 つの 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>

ログイン後にコピー

もちろん、画像に応答性を追加することもできます。コード全体は次のとおりです。

##インタビュアー : レイアウトプランについてのあなたの理解を話してください

私 : ええと、わかりました。レイアウトプランには、プロジェクトの特性に基づいて次のオプションがあります。1,

レスポンシブレイアウトを使用する場合

データが多くなく、ユーザー数もそれほど多くないため、純粋な表示プロジェクトが適しています。レスポンシブレイアウト例：会社公式サイト、特設ページ 特にパフォーマンスを追求するプロジェクトは、レスポンシブ性を高めすぎると読み込み速度が遅くなるため、レスポンシブ化には向きません。 2.
PCモバイル端末ではどのようなレイアウトプランを立てるか

注意: アクセス数はタオバオと同様にまあまあか比較的多いです。 PC がセットになっており、少しだけ応答性が追加されます。 モバイル版はセットになっており、アダプティブレイアウト方式を採用します。 3.
PC 設計図面

ui: 1980 Laptop: 1280 ui 図面の幅が同じでない場合はどうすればよいですかコンピューターの幅と同じですか? 1. UI イメージをコンピューターと同じサイズに比例して拡大縮小します
2。 1980 年のコンピューターに変更します。

4.
モバイル設計図面

幅: 750 750 設計図面/2 は 375 なので、これはたまたま次のようになります。 iPhone6のサイズである場合は、iPhone6のサイズを基準点として使用する必要があります。
インタビュアー: 並べ替えと再描画とは何ですか?また、再撮影と再描画を減らすにはどうすればよいですか?

私: えー、わかりました。要約すると次のとおりです。リフロー: リフローは、要素の位置が変更されるときに発生します。リフローとも呼ばれます。クリティカルレンダリングパスのレイアウトフェーズのこの時点で、デバイスビューポート内の各要素の正確な位置とサイズが計算されます。要素の位置が変更されると、その親要素とその背後にある要素の位置が変更される可能性があり、これは非常にコストがかかります。

再ペイント: 要素のスタイルは変更されますが、位置は変わりません。クリティカルレンダリングパスのペイントステージのこの時点で、レンダーツリー内の各ノードが画面上の実際のピクセルに変換されます。このステップは、ペイントまたはラスタライゼーションと呼ばれることがよくあります。

また、再配置すると必ず再描画が発生します。過度の再撮影と再描画を避ける方法は次のとおりです。

1) DOM 操作には DocumentFragment を使用しますが、現在ネイティブ操作はまれであり、基本的に使用されません
2) CSS スタイルはバッチで変更する必要があります。可能な限り
3) テーブルレイアウトの使用を避ける
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>

ログイン後にコピー