この記事では、学生が秋採用で成功するために役立つ、フロントエンド面接における CSS の高頻度テストポイントを要約して共有します。急いで集めて勉強してください。

[編集と共有] フロントエンドインタビューのための CSS の 75 個の高頻度テストポイント

理論

1. ボックスサイズ変更属性値の機能は何ですか?

要素の制御に使用されるボックスモデルの解析モード 、デフォルトは content-box

context- box: W3C の標準ボックスモデル。要素の高さ/幅属性の設定は、コンテンツ部分の高さ/幅を参照します。
border-box : IE従来のボックスモデル。要素の高さ/幅属性の設定は、ボーダーパディングコンテンツの高さ/幅を参照します。

[学習ビデオ共有:

css ビデオチュートリアル , Web フロントエンド ]

2. 絶対絶対位置は誰に対する相対的な位置ですか?

CSS 位置プロパティは、ドキュメント内で要素を配置する方法を指定するために使用されます。

絶対要素は通常のドキュメントフローから移動され、要素用のスペースは確保されません。要素の位置は、最も近い

非静的に配置された要素を基準にして指定された要素を配置することによって決定されます。祖先要素。絶対的に配置された要素にはマージンを設定できますが、他のマージンとマージされません。

3. インライン要素とブロックレベル要素の違いは何ですか?

インライン要素:

インライン要素は、対応するラベルの境界線に含まれるスペースのみを占有します。

ブロックレベルの要素:

ブロックレベルの要素は、その親要素 (コンテナ) のスペース全体を占有するため、「ブロック」が作成されます。

違い:

新しい行を開始するかどうか: デフォルトでは、インライン要素は新しい行で始まりません。ブロックレベル要素は新しい行から始まります。
幅と高さを設定できるかどうか: ブロックレベル要素は幅と高さの属性を設定できます。注: ブロックレベル要素の幅が設定されていても、が設定されていても、依然として専用回線を占有しています。インライン要素の幅と高さの設定は無効です。
内マージンと外マージンを設定できるかどうか: ブロックレベルの要素を使用でき、インラインの水平方向のパディング左/右とマージン左/右も使用できます。マージン効果はありますが、垂直方向のパディング-上/下、マージン-上/下ではマージン効果は生成されません。 (つまり、水平方向は有効、垂直方向は無効です)
#お互いを含めるかどうか: ブロックレベルの要素にはインライン要素を含めることができますおよびブロックレベルの要素。インライン要素にはブロックレベルの要素を含めることはできません

4. 一般的なインライン要素とブロックレベルの要素は何ですか?

1. 共通のインライン要素

<span>、<a>、<lable>、<strong>、<b>、、<abbr>、<button>、<input>、<textarea>、<select>、<img alt="[編集と共有] フロントエンドインタビューのための CSS の 75 個の高頻度テストポイント" ></select></textarea></button></abbr></b></strong></lable></a></span>

2. 共通のブロックレベル要素

<div>、<p>、</p> <li>、<h1> ~ <h6>、</h6> </h1> <form>、<header>、<hr>、<ol> ;、</ol> <ul>、<article>、<aside>、<dd>、<dl> <h2 data-id="heading-6"><strong>5. ブラウザでサポートされている最小のフォントを検出する方法サイズ？ </strong></h2> <p>JS を使用して DOM フォントを特定の値に設定し、それを取り出すことができます。値が正常に設定されていれば、そのフォントはサポートされています。 </p> <h2 data-id="heading-7"><strong>6. CSS の「flex:1;」は何を意味しますか? </strong></h2> <p>flex は、flex-grow、flex-shrink、および flex-basis の略です。 </p> <p>2 つのショートカット値 auto (1 1 auto) と none (0 0 auto) に加えて、次の設定方法もあります。が負ではない数値である場合、その数値は flex-grow 値です。flex-shrink は 1、flex-basis は 0% をとり、以下は同等です: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <ul>flex 値が 0 の場合、対応する 3 つの値はそれぞれ For 0 1 0%</ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.item {flex: 0;} .item { flex-grow: 0; flex-shrink: 1; flex-basis: 0%; }</pre><div class="contentsignin">ログイン後にコピー</div></div> </dl> <li> <li>その他の記述方法については、</li>MDN-flex</dd></aside></article> </ul> にアクセスしてご覧ください<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" textvalue="MDN-flex"></a> 7. CSSメディアクエリとは何ですか? </p> <h2 data-id="heading-8"><strong>メディアクエリは、CSS2 時代から存在していました。CSS3 の洗礼を受けて、より強力になりました。ブートストラップの応答機能はこれに由来します。</strong></h2>シンプル一般的に言えば、 , メディアクエリは、CSS が有効になるときに変更するために使用される構文です。<p></p> <p> メディアクエリの導入により、式を追加してメディアの環境を決定できるようになり、さまざまなスタイルシートを適用できるようになります。言い換えれば、コンテンツを変更せずに、さまざまなデバイスに正確に適応するようにページのレイアウトを変更できるようになります。</p> <h2 data-id="heading-9"><strong>8. スタイルをページにインポートする場合、link と @import の使用の違いは何ですか? </strong></h2> <ul> <li><p>リンクは HTML タグに属し、@import は css によって提供されます。</p></li> <li><p>ページが読み込まれると、リンクは同時にロードされ、@import によって参照される CSS は、ページがロードされるまで待ってからロードします。</p></li> <li> <p>link は XHTML タグであり、互換性の問題はありませんが、@import IE5 以降でのみ認識できます; </p> </li> <li><p>リンクスタイル style の重みは @import の重みよりも高くなります。 </p></li> </ul> <h2 data-id="heading-10"><strong>9. CSS が親セレクターをサポートしないのはなぜですか? </strong></h2> <p>この質問に対する答えは、「なぜ CSS 隣接兄弟セレクターは次の要素のみをサポートし、前の兄弟要素はサポートしないのですか?」と同じです。 </p> <p>ブラウザは HTML ドキュメントを前から後ろ、外側から内側に解析します。したがって、最初にページヘッダーが表示され、その後メインコンテンツが表示される読み込み状況がよく見られます。 </p> <p>ただし、CSS が親セレクターをサポートしている場合は、HTML ドキュメントをレンダリングする前にページのすべての子要素を読み込む必要があります。これは、いわゆる「親セレクター」とは、子孫要素が祖先要素に影響を与えることを意味するためです。子孫要素がまだロード処理を行わずに祖先要素のスタイルに影響を与えるにはどうすればよいですか?その結果、Web ページのレンダリング速度が大幅に低下し、ブラウザーのホワイトボードが長くなります。一般に、CSS と HTML 自体のレンダリングメカニズムによって決まります。 </p> <h2 data-id="heading-11"><strong>10.マージンとパディングはどのようなシナリオに適していますか? </strong></h2>#マージンを使用する場合: <p></p> <ul>境界線の外側に空白を追加する必要があります<li>#空白スペースには背景色は必要ありません</li> <li>上から下に接続されています 2 つのボックス間のスペースは相互にオフセットする必要があります。 </li> <li>#パディングを使用する場合: </li> </ul> <p>境界線の内側に空白スペースを追加する必要があります</p> <ul>空白スペースには背景色が必要です<li> 上下につながった 2 つのボックス 2 つのボックスの空白スペースは、2 つのボックスの合計であることが期待されます。 <li> <li>11. 表示の値は何ですか? </ul> <h2 data-id="heading-12"><strong>一般的なものは次のとおりです。</strong></h2> <p></p> <table>値<thead><tr class="firstRow">説明<th align="center"></th> <th align="center"></th> </tr></thead>none<tbody> <tr>この要素は表示されません<td align="center"></td> <td align="center"></td>block</tr> <tr>この要素はブロックレベルの要素として表示されます。この要素記号の前後に改行を入れます。 <td align="center"></td> <td align="center">#インライン</td> </tr>デフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。 <tr> <td align="center"></td> <td align="center">inline-block</td> </tr>インラインブロック要素。幅と高さを設定して並べて表示できます。 <tr> <td align="center"></td> <td align="center">inline-table</td> </tr>この要素は、表の前後に改行を入れずに、インライン表 (表と同様) として表示されます。 <tr> <td align="center"></td> <td align="center">table</td> </tr>この要素は、表の前後に改行が入ったブロックレベルの表 (表に似たもの) として表示されます。 <tr> <td align="center"></td> <td align="center">inherit</td> </tr>表示属性の値を親要素から継承することを指定します。 <tr> <td align="center"></td> <td align="center">grid</td> </tr>グリッドレイアウト (グリッド) は、最も強力な CSS レイアウトソリューションです。 Web ページをグリッドに分割し、異なるグリッドを任意に組み合わせてさまざまなレイアウトを作成できます。 <tr> <td align="center"></td> <td align="center">flex</td> </tr>フレキシブルレイアウトは、ボックスモデルに最大限の柔軟性を提供するために使用されます。 <tr> <td align="center"></td> <td align="center"> <p>其他的可以自行查阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" textvalue="MDN-display">MDN-display</a></p> <h2 data-id="heading-13"><strong>12. 两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？</strong></h2> <p>行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。</p> <p>解决方法：</p> <ul> <li>相邻元素代码代码全部写在一排</li> <li>浮动元素，float:left;</li> <li>在父级元素中用font-size:0;</li> </ul> <h2 data-id="heading-14"><strong>13. CSS 中，有哪些方式可以隐藏页面元素？有什么区别？</strong></h2> <p><strong>display:none</strong>：元素不可见，不占据空间，无法响应点击事件</p> <p><strong>visibility:hidden</strong>：元素不可见，占据页面空间，无法响应点击事件</p> <p><strong>opacity:0</strong>：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件</p> <p><strong>设置height、width属性为0</strong>：将元素的 margin，border，padding，height和width 等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素。特点：元素不可见，不占据页面空间，无法响应点击事件</p> <p><strong>position:absolute</strong>：将元素移出可视区域，元素不可见，不影响页面布局</p> <p><strong>clip-path</strong>：通过裁剪的形式，元素不可见，占据页面空间，无法响应点击事件</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>最常用的还是<code>display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们

#	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

14. フロントエンドプロジェクトで CSS スタイルを初期化する必要があるのはなぜですか?

ブラウザの互換性の問題により、ブラウザごとにタグのデフォルト値が異なるため、ブラウザのCSSが初期化されていない場合、同じページでもブラウザごとに表示が異なります。

15. 表示:なしと可視性:非表示の違いは何ですか?

パフォーマンス

display:none は完全に消えず、ドキュメントフロー内の場所を占めず、ブラウザは要素を解析しません。
visibility:hidden は視覚的に消えますが、これは透明度が 0 であることの影響として理解できます。これはドキュメントフロー内の場所を占め、ブラウザーは要素を解析します。

パフォーマンス

visibility:hidden を使用すると、display:none よりもパフォーマンスが向上します。display:none で表示を切り替えると、ページがリフローします (ページ内の一部の要素を変更する必要がある場合)サイズ、レイアウト、表示非表示など、ページが再構築され、これがリフローです。すべてのページは、初めて読み込まれるときにリフローを生成する必要があります)、表示/非表示が切り替わるときに、リフローを引き起こしません。

16. CSS3 の新機能は何ですか?

##セレクター: ユニバーサル兄弟セレクター、擬似クラスセレクター、擬似要素セレクター、ネガティブセレクター、状態擬似クラスセレクター

新しいスタイル: 境界線、ボックスシャドウ、背景、テキスト、色

境界線:
- box-shadow: 要素に影を追加します
- border-image: 画像を使用して境界線を描画します
Background: 背景に関するいくつかの新しい属性、つまり
background-clip、background-origin、background-size、background-break## が追加されました

: トランジション

トランジション

：トランスフォーム

アニメーション

：アニメーション

その他

：グラデーション、

フレックス柔軟なレイアウト、グリッドグリッドレイアウト、メディアクエリ、ブレンディングモードなど...17. ハードウェアアクセラレーションとは何ですか?

ハードウェアアクセラレーションは、組み込みの低速レンダラを使用する代わりに、ブラウザのレンダリングプロセスを GPU に引き渡すことです。これにより、

と
トランジションがよりスムーズになります。
CSS を使用してブラウザでハードウェアアクセラレーションを有効にし、GPU (グラフィックスプロセッシングユニット) が機能できるようにすることで、パフォーマンスを向上させることができます。
現在、ほとんどのコンピュータグラフィックスカードはハードウェアアクセラレーションをサポートしています。これを考慮すると、GPU のパワーを利用して、Web サイトやアプリケーションをよりスムーズに実行できます。

18. ::before と :after の二重コロンと単一コロンの違いは何ですか?彼らが何をしているのか説明してください。

#単一コロン (:) は CSS3 疑似クラスに使用され、通常はホバー、リンクなどの要素の特殊な状態に一致します。

二重コロン (::) は CSS3 擬似要素に使用され (擬似要素は二重コロンと擬似要素名で構成されます)、擬似要素は通常、後、前などの特別な位置に一致します。
新しい CSS3 で導入された擬似要素では、古い単一コロンをサポートできなくなりました。
挿入されたコンテンツを次のようにしたいと考えています。他のコンテンツの前に表示される場合は、::before を使用し、それ以外の場合は ::after を使用します。コード順序に関しては、::after によって生成されるコンテンツは、::before
によって生成されるコンテンツよりも後になります。
疑似クラス

19. CSS マッチングルールの順序は何ですか?

ほとんどの初心者は、CSS のマッチングは左から右に行われると考えていると思いますが、実際はその逆です。

CSS マッチングは、レンダーツリーの構築時に発生します (Chrome デベロッパーツールは、これをレイアウトプロセスに関連付けます)。この時点で、ブラウザは DOM を構築し、CSS スタイルを取得しています。このとき行う必要があるのは、スタイルと DOM 上のノードとの一致です。パフォーマンスを向上させるためにブラウザが行う必要があるのは、高速マッチングです。。

まず第一に、ブラウザが「可視」ノードに対応するルールを探していることを明確にする必要があります。これは jQuery セレクターとは異なります。後者はルールを使用して対応するノードを見つけます。したがって、左から右への方が速いかもしれません。ただし、前者の場合、CSS のサイズが大きいため、CSS ファイル内に数千のルールが存在する可能性があり、現在のノードではほとんどのルールが一致しません。右からマッチングを開始すると (右側からも開始し、より正確な位置から開始すると)、ほとんどの不適切なノードをより速く削除できます。左から開始すると、より深く進んだときにのみマッチングの失敗が見つかります。ほとんどのルールのレベルが深い場合、リソースの無駄になります。

上記に加えて、DOM の構築は「ステップバイステップ」であり、DOM はレンダーツリーの構築をブロックしません (CSSOM ブロックのみ) ことも前述しました。ページ上で以前にレンダリングされました。

次の状況を考えてみましょう。この時点で DOM の一部のみを構築し、CSSOM が完成している場合、ブラウザは Render Tree を構築します。

現時点では、各ノードで右から左に一致するルールが見つかった場合、ノードの親ノードがレイヤーごとに一致するかどうかを観察するだけでよく、その親ノードはすでに一致している必要があります。現時点では DOM 上にあります。

しかし、逆に、DOM 上にまだ存在しないノードと一致する可能性があり、このときの一致プロセスはリソースを無駄にします。

20. CSS のパフォーマンスを最適化および改善する方法は何ですか?

過剰な制約を避ける
子孫セレクターを避ける
チェーン選択を避ける
コンパクトな構文を使用する
不要な名前空間を避ける
不要な名前空間を避ける
の繰り返し
はセマンティック名を使用するのが最善です。適切なクラス名は、次のようなものではなく、それが何であるかを説明する必要があります。
#! important を避け、可能であれば他のセレクターを選択してください
ルールを合理化するには、異なるカテゴリで繰り返されたルールをマージできます

#21. スタイルタグが本文の前に書かれたか後ろに書かれた場合の違いは何ですか?

ページは上から下に読み込まれます。もちろん、スタイルが最初に読み込まれます。

はbodyタグの後ろに記述されており、ブラウザはHTML文書を一行ずつ解析するため、最後に書かれたスタイルシート(アウトラインやスタイルタグ内に記述されたもの)を解析すると、ブラウザはそれまでの描画を停止してしまいます。 . 、スタイルシートの読み込みと解析を待ってから、再レンダリングします。Windows の IE では FOUC 現象が発生することがあります (つまり、スタイルの失敗によるページのちらつきの問題)

22. 垂直方向のパーセンテージの設定要素はコンテナの高さに関連していますか?

要素の幅をパーセンテージで設定する場合、親コンテナの幅を基準にして計算されますが、padding-top、padding- などの垂直方向の距離を表す一部の属性では、 bottom 、 margin-top 、 margin-bottom など、パーセンテージで設定する場合、高さではなく親コンテナの幅にも基づきます。

23. トランジションとアニメーションの違いは何ですか?

transition はトランジション属性であり、強調されていますが、その実装ではイベント (マウスの移動、フォーカス、クリックなど) をトリガーする必要があります。 ) アニメーションを実行する前に。これはフラッシュトゥイーンアニメーションに似ており、開始キーフレームと終了キーフレームを設定します。
animation はアニメーション属性です。その実装にはイベントのトリガーは必要ありません。時間を設定した後、単独で実行でき、アニメーションをループさせることができます。これもフラッシュトゥイーンアニメーションに似ていますが、複数のキーフレーム (@keyframe で定義) を設定してアニメーションを完成させることができます。

24. ボックスモデルについてのあなたの理解を教えてください。

ドキュメントをレイアウトするとき、ブラウザのレンダリングエンジンはすべての要素を長方形のボックス (ボックス) として表します。

ボックスは 4 つの部分で構成されます: content, padding, border, margin

標準ボックスモデル: 標準ボックスモデル。デフォルトのボックスです。ブラウザのモデル

[編集と共有] フロントエンドインタビューのための CSS の 75 個の高頻度テストポイント

上の図からわかるように、:

ボックスの合計幅 = 幅パディング境界マージン;
ボックスの合計の高さ = 高さのパディング境界マージン

つまり、幅/高さはコンテンツの高さだけであり、パディング#は含まれません。 ## と border value

したがって、上記の質問では、

width は 200px に設定されていますが、padding が存在するため、幅はボックスは実際には 240px

IE 奇妙なボックスモデル

[編集と共有] フロントエンドインタビューのための CSS の 75 個の高頻度テストポイント

# 上から見るとわかるように:

ボックスの合計高さ = 高さマージン;

つまり、

幅 /高さ には、padding と border values

25 が含まれます。Atom CSS とは何ですか?メリットとデメリットは何ですか?

Atom CSS: アトミック CSS は、クラスが 1 つのことだけを実行することを意味します。

一般的に使用される BEM ルールとは異なり、アトミック CSS は分割を意味し、すべての CSS クラスには独自の CSS ルールがあります

利点

#CSS のサイズを削減し、CSS の再利用を改善します
名前付けの複雑さを軽減します

欠点

メモリコストの増加。 CSS をアトムに分割した後、記述する前にいくつかのクラスを覚えておく必要があります。tailwindcss が完全なツールチェーンを提供するとしても、背景を記述するときは、先頭が bg であることを覚えておく必要があります。
HTML 構造が複雑になります。 dom 全体にこのようなクラス名が付いていると、デバッグ時に問題が発生するのは避けられず、特定の CSS の問題を特定するのが困難になる場合があります。
你仍需要起class名。对于大部分属性而言，你可以只用到center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如left，top，这时候你还需要起一个class名

26. 脱离文档流有哪些方法？

float：使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
absolute：absolute 称为绝对定位，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
fixed: 固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）

27. CSSOM树和DOM树是同时解析的吗？

浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。

28. CSS Sprites 是什么，如何使用？

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

优点：

减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

缺点：

图片合成比较麻烦；
背景设置时，需要得到每一个背景单元的精确位置；
维护合成图片时，最好只是往下加图片，而不要更改已有图片。

29. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

30. canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别？

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度。
如果canvas的width和height没指定或值不正确，就被设置成默认值。

31. 相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

<input> <input>

ログイン後にコピー

[編集と共有] フロントエンドインタビューのための CSS の 75 個の高頻度テストポイント

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题

这种表现是符合规范的应该有的表现。

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，以下展示几种方法去掉

移除空格：元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了

使用margin负值

.space a { 
    display: inline-block; 
    margin-right: -3px; 
}

ログイン後にコピー

使用font-size:0

.space { font-size: 0; } 
.space a { font-size: 12px; }

ログイン後にコピー

使用letter-spacing

.space { letter-spacing: -3px; } 
.space a { letter-spacing: 0; }

ログイン後にコピー

使用word-spacing

.space { word-spacing: -6px; } 
.space a { word-spacing: 0; }

ログイン後にコピー

32. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

它们的优点？

结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

33. CSS3 新增伪类有哪些？

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中
...

34. CSS 动画和 JS 实现动画分别有哪些优缺点？

1. CSS动画

优点

浏览器可以对动画进行优化
代码相对简单,性能调优方向固定
对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点

运行过程控制较弱,无法附加事件绑定回调函数
代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

2. JS 动画

优点

控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点

代码的复杂度高于CSS动画
JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

35. 为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

什么是浮动：浮动（float）最初是为了让文字环绕图片排布，就想报纸上面的图文混排模式。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。

什么时候需要清除浮动：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

36. IconFont 的原理是什么？

IconFont 的使用原理来自于 css 的 @font-face 属性。

这个属性用来定义一个新的字体，基本用法如下：

@font-face { 
    font-family: <yourfontname>; 
    src: <url> [<format>],[<source> [<format>]], *; 
    [font-weight: <weight>]; 
    [font-style: <style>]; 
}</style></weight></format></source></format></url></yourfontname>

ログイン後にコピー

font-family：为载入的字体取名字。
src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
font-weight：定义加粗样式。
font-style：定义字体样式。

37. 分析比较 opacity:0、visibility:hidden、display:none 优势和使用场景

可以从以下三点进行分析

1. 结构

display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

2. 继承

display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。

3. 性能

display: none: 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0:修改元素会造成重绘，性能消耗较少

38. CSS 中有哪些定位方式？（position有哪些属性值？）

static: 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。

relative: 相对定位方式，相对于其原来的位置进行定位。会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

absolute: 绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。

fixed: 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。当父元素使用了transform的时候，会以父元素定位。

sticky: 粘性定位，可以简单理解为relative和fixed布局的混合。当粘性约束矩形在可视范围内为relative，反之，则为fixed粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的，它的定位效果完全受限于父级元素们。

39. flexbox(弹性盒布局模型)是什么，使用什么场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

[編集と共有] フロントエンドインタビューのための CSS の 75 個の高頻度テストポイント

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。每根轴都有起点和终点，这对于元素的对齐非常重要

关于flex常用的属性，我们可以划分为容器属性和容器成员属性

容器属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

容器成员属性有： order、flex-grow、flex-shrink、flex-basis、flex、align-self

更多属性写法可前往 MDN-flex 查看

40. z-index 属性はいつ無効になりますか?

通常、z-index は 2 つの重複するラベルがある場合に使用されますが、特定の状況下では、一方のラベルが他方の上または下に表示されるように制御できます。 z-index 値が大きいほど、値は高くなります。 z-index 要素の位置属性は、相対、絶対、または固定である必要があります。

z-index 属性は、次の状況では無効になります。

親要素の位置が相対的な場合、子要素の z-index は無効になる。解決策: 親要素の位置を絶対位置または静的位置に変更します。
要素は位置属性を非静的属性に設定しません。解決策: 要素の位置属性を相対、絶対、または固定のいずれかに設定します。
要素は、z-index を設定するときに float も設定します。解決策: float を削除し、次の表示に変更します: inline-block;

41. BFC をトリガーする方法と BFC のアプリケーションシナリオは何ですか?

クリックして次のページに移動します:フロントエンドレイアウトの BFC

42. CSS の読み込みによりブロックが発生しますか?

最初に結論を言います:

css の読み込みは DOM ツリーの解析をブロックしません
css の読み込みは DOM ツリーのレンダリングをブロックしますDOM ツリー
css の読み込みにより、後続の js ステートメントの実行がブロックされます

ユーザーに長い白い画面時間が表示されるのを避けるために、css の読み込み速度を可能な限り改善する必要があります。たとえば、次の方法を使用できます:

CDN を使用する (CDN はキャッシュされたコンテンツを持つ最も近いノードを選択し、ネットワークの状況に基づいてリソースを提供するため、読み込み時間を短縮できます)
css を圧縮します (webpack、gulp などの多くのパッケージ化ツールを使用することも、gzip 圧縮を有効にすることもできます)
キャッシュを合理的に使用する (キャッシュ制御、有効期限、および E タグを設定することは良いことですが、注意すべき点は、ファイルが更新された後はキャッシュの影響を回避する必要があるということです。解決策の 1 つは次のとおりです。ファイル名の後にバージョン番号を追加します。)
http リクエストの数を減らすか、複数の CSS ファイルをマージするか、単純にインラインスタイルを直接記述します (インラインスタイルの欠点の 1 つは、キャッシュできません)

43. ブラウザレンダリングのプロセスについて簡単に説明します

ブラウザレンダリングのプロセスは次のとおりです:

HTML 解析ファイル、DOM ツリーの生成、CSS ファイルを解析して CSSOM ツリーを生成
Dom ツリーと CSSOM ツリーを結合してレンダーツリーを生成
Render Tree に従ってレンダリングおよび描画し、ピクセルを画面にレンダリングします。

プロセスからわかること:

DOM 解析と CSS 解析は 2 つの並列プロセスであるため、CSS の読み込みが行われない理由もこれで説明されます。ブロック DOM 解析。
ただし、Render Tree は DOM Tree と CSSOM Tree に依存しているため、CSSOM Tree の構築、つまり CSS リソースの読み込みが完了するまで (または CSS リソースの読み込みが完了するまで) 待つ必要があります。失敗します) その後、レンダリングを開始できるようになります。したがって、CSS の読み込みにより Dom のレンダリングがブロックされます。
js は以前の Dom ノードと css スタイルで動作する可能性があるため、ブラウザーは html 内の css と js の順序を維持します。したがって、後続の js が実行される前に、スタイルシートが読み込まれて実行されます。したがって、css は後続の js の実行をブロックします。

44. js と css は DOM ツリーの構築にどのような影響を与えますか?

クリックして次のページに移動します:js と css は DOM ツリーの構築にどのような影響を与えますか?

45. リフローと再描画を理解するにはどうすればよいですか?どのような状況で発動するのでしょうか？

クリックして次のページに移動します:フロントエンドページの「リフロー再描画」

##46. レスポンシブデザインとは何ですか?レスポンシブデザインの基本原則は何ですか?どのように実装すればよいでしょうか?

とは: レスポンシブ Web デザインとは、Web ページのデザインレイアウトであり、ユーザーの行動やデバイス環境 (システムプラットフォーム)、画面に基づいてページの設計と開発を行う必要があります。

#レスポンシブインターフェイスを説明する最も有名な文は「コンテンツは水のようなもの」で、俗語は「画面をコンテナと見なすと、コンテンツは水のようなものです。」

レスポンシブ Web サイトの共通機能:

ハンドヘルドに近づくとタグナビゲーションが変更されます。端末デバイスクラシックドロワーナビゲーション
#Web サイトのレイアウトは、ビューポートに応じてモジュールのサイズと位置を調整します

基本原則: 基本原則レスポンシブデザインの特徴は、メディアクエリを通じてさまざまなデバイスの画面サイズを検出して処理することです。レスポンシブデザインの実装では、通常、次の側面が考慮されます:

弹性盒子（包括图片、表格、视频）和媒体查询等技术
使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
使用相对单位使得内容自适应调节
选择断点，针对不同断点实现不同布局和内容展示

总结：

响应式布局优点：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：

仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

47. 说说对 CSS 预编语言的理解，主流的有哪些？

理解： 预处理语言扩充了css语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易维护、方便。本质上，预处理是css的超集，包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 css 文件

有哪些： css预编译语言在前端里面有三大优秀的预编处理器，分别是：sass、less、stylus

48. CSS 中1像素问题是什么？有哪些解决方案？

1px边框问题由来：苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。

像这种像素比（像素比（即dpr）＝物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为二倍屏，目前市面上还有像素比更高的三倍屏、四倍屏。

而 CSS 中 1px 指的是物理像素，因此，设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度，这就导致了界面边框变粗的视觉体验。

解决方案：使用 transform 解决

通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放，这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景，而且修改灵活，唯一的缺陷是，对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下：

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

ログイン後にコピー

这样就可以得到 0.5px 的边框。

还可以结合媒体查询（@media）解决不同 dpr 值屏幕的边框问题，如下：

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

ログイン後にコピー

当然还有不少其他的解决方案：border-image、background-image、viewport + rem + js、box-shadow等，但都有各自的缺点，不进行推荐，此处也不做详细介绍。

49. overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：

-webkit-overflow-scrolling: touch;

ログイン後にコピー

是因为这行代码启用了硬件加速特性，所以滑动很流畅。

50. CSS 单位中 px、em 和 rem 的区别？

px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值
rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素

区别： IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

51. CSS を使用してページのパフォーマンスを向上させるにはどうすればよいですか?

クリックして次のページに移動します:CSS を使用してページのパフォーマンスを向上させるにはどうすればよいですか?

52. 文字間隔と単語間隔の違いは何ですか?

letter-spacing はすべての文字に機能しますが、word-spacing はスペース文字にのみ機能します。言い換えれば、単語間隔の役割は、スペースの隙間の幅を広げることです。

53. 依存関係のない絶対配置とは何ですか?

left/top/right/bottom 属性値を設定しない絶対配置を「依存関係のない絶対配置」と呼びます。依存関係のない絶対位置決めの位置は、position:absolute が設定されていない場合の位置に関連付けられます。

54. カスケードガイドライン?

(1) 大きい方が上位: 同じスタッキングコンテキストフィールド内に、有効な z-index 属性値などの明白なスタッキングレベル識別子がある場合、大きい方が優先されます。スタッキングレベル値の小さい方をカバーします。

(2) 後ろからのアプローチ: 要素の積み重ねレベルが一貫していて、積み重ね順序が同じ場合、DOM フロー内の後の要素が前の要素を上書きします。

55. フォントの太さの特徴は何ですか?

font-weight 属性値として数値を使用する場合、100 ～ 900 の整数である必要があります。ここでの数値は数値にしか見えないため、実際には特定の意味を持ったキーワードであり、ここでの数値キーワードと文字キーワードとの間には対応関係がある。

56. text-indent の特別な機能は何ですか?

(1) text-indent は、インラインボックスのコンテンツの最初の行に対してのみ有効です。

(2) 表示計算値がinlineの非置換要素以外のインライン要素に設定したテキストインデントの値は無効です。計算値がinline-block/inline-tableの場合に有効となります。。

（3）<input>ラベルボタンのテキストインデント値が無効です。

(4)<button></button>ラベルボタンのテキストインデント値は有効です。

(5) text-indent のパーセンテージ値は、現在の要素ではなく、現在の要素の「含むブロック」を基準にして計算されます。

57. rem レイアウトを使用する利点と欠点は何ですか?

利点: 画面解像度が大きく異なる時代では、rem が画面解像度に関連付けられている限り、ページ全体のスケーリングを実現できるため、端末の表示が統一されました。また、現在ではほとんどのブラウザが rem をサポートしており、互換性も非常に優れています。

欠点:

(1) 特殊な DPR デバイスではパフォーマンスがあまり良くありません。たとえば、Huawei の一部のハイエンドモデルでは、わかりにくい rem レイアウトが使用されます。

(2) iframe 参照の使用にも問題が発生します。

(3) rem は、複数の画面サイズに適応するという点で、現在の 2 つの主要なプラットフォームの設計理念と一致しません。それは、大型スクリーンの出現が、より大きく、より鮮明なものを見るためなのか、それともより多くのものを見るためなのかということです。質問。

58. 推奨される最小幅はどれくらいですか?

「推奨最小幅」とは、要素に最も適した最小幅を指します。東アジアの文字 (中国語など) の最小幅は、各漢字の幅です。欧文テキストの最小幅は、英語文字の特定の連続単位によって決まります。すべての英語文字が連続した単位を形成するわけではなく、通常はスペース (通常のスペース)、ダッシュ、疑問符、その他の英語以外の文字で終わります。

英語の文字を中国語と同じにして、各文字に最小幅単位を使用する場合は、CSS で word-break:break-all を使用してみてください。

59. height:100% が無効なのはなぜですか?

通常のドキュメントフローの要素の場合、高さのパーセンテージ値が機能するには、その親に有効な高さの値が必要です。

その理由は、含まれるブロックの高さが明示的に指定されておらず (つまり、高さがコンテンツによって決定される)、要素が絶対的に配置されていない場合、計算される値は auto であるためです。は自動として解釈されるため、計算に参加できません。

絶対配置を使用する要素には、祖先要素の高さが auto として計算されている場合でも、計算された値が含まれます。

60. min-width/max-width 属性と min-height/max-height 属性間のルールをオーバーライドしますか?

(1) width が行スタイルであるか、! important が設定されている場合でも、max-width は幅をオーバーライドします。

(2) min-width は max-width をオーバーライドします。このルールは、min-width と max-width が競合する場合に発生します。

61. インラインボックスモデルとは何ですか?

(1) コンテンツ領域。コンテンツ領域とは、テキストを囲む非表示のボックスを指します。そのサイズは文字自体の特性によってのみ制御されます。本質的には文字ボックスです。 (文字ボックス); ただし、画像などの置換要素などの一部の要素では、コンテンツは明らかにテキストではないため、文字ボックスなどというものはありません。要素、コンテンツ領域は要素そのものとみなすことができます。

（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

（3）行框盒子（line box），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

（4）包含块（containing box），由一行一行的“行框盒子”组成。

62. content 与替换元素的关系？

content属性生成的对象称为“匿名替换元素”。

（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

（2）content生成的内容不能左右:empty伪类。

（3）content动态生成值无法获取。

63. margin:auto 的填充规则？

margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。

（2）如果两侧均是auto，则平分剩余空间。

64. overflow 的特殊性？

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。

（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

代码篇

1. 下面代码中，p标签的背景色是什么？

<style>
     #parent p { background-color: red;  }
      div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;  
</style>
......
<div>
     <div>
         <p>xxxx</p>
     </div>
</div>

ログイン後にコピー

大家需要注意，权重是按优先级进行比较的，而不是相加规则。

答案：red。

2. 假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效？

body#god div.dad span.son {
    width: 200px;
}
body#god span#test {
    width: 250px;
}

ログイン後にコピー

本题考察css的样式优先级权重，大家需要记住：

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。所以本题的分析思路是：

先比较高权重位，即第一个样式的高权重为 #god = 100
第二个样式的高权重为 #god + #text = 200
100
所以最终计算结果是取 width: 250px;
若两个样式的高权重数量一样的话，则需要比较下一个高权重！

答案：width: 250px;

3. 第二个子元素的高度是多少？

<div>
    <div></div>
    <div></div>
</div>
<style>
    .container{
        display: flex;
    }
    .container > div {
        width: 100px;
    }
</style>

ログイン後にコピー

Flex 布局会默认：

把所有子项变成水平排列。
默认不自动换行。
让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。

答案：100px

手写篇

1. 如何从 html 元素继承 box-sizing

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

ログイン後にコピー

2. 如何使用css来实现禁止移动端页面的足有滑动手势？

最简单的方法：

html { 
    touch-action: none; 
    touch-action: pan-y; 
}

ログイン後にコピー

还可以直接指定对应元素的宽度和overflow：

html { 
    width: 100vw; 
    overflow-x: hidden; 
}

ログイン後にコピー

3. 如何使用 CSS 画一个三角形

.box {
   width: 0;
   height: 0;
   border-style:solid;
   border-width: 0 50px 50px;
   border-color: transparent transparent #d9534f;
}

ログイン後にコピー

4. 如何实现两栏布局，右侧自适应？三栏布局中间自适应？

两栏布局

浮动实现

  <style>
    .box{
       overflow: hidden; 
    }
    .left {
       float: left;
       width: 200px;
       background-color: gray;
       height: 400px;
    }
    .right {
       margin-left: 210px;
       background-color: lightgray;
       height: 200px;
    }
</style>
<div>
    <div>左边</div>
    <div>右边</div>
</div>

ログイン後にコピー

flex实现

  <style>
    .box{
       display: flex;
    }
    .left {
       width: 100px;
       background-color: skyblue;
       height: 400px;
    }
    .right {
       flex: 1;
       background-color: pink;
       height: 200px;
    }
  </style>
  <div>
    <div>左边</div>
    <div>右边</div>
  </div>

ログイン後にコピー

三栏布局

  <style>
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 500px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
  </style>
  <div>
    <div>左侧</div>
    <div>中间</div>
    <div>右侧</div>
  </div>

ログイン後にコピー

5. 单行文本如何实现两端对齐

方法一：添加一行

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

<style>
//scss
  .item {
      height: 32px;
      line-height: 32px;
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: justify;
          vertical-align: top;
          &::after {
              display: inline-block;
              width: 100%;
              content: &#39;&#39;;
              height: 0;
          }
      }
      .value {
          padding-right: 10px;
      }
  }
</style>
  <div>
    <span>哈哈哈</span>：
    <span>哈哈哈</span>
  </div>

ログイン後にコピー

方法二： text-align-last

text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

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

ログイン後にコピー

6. 使用 CSS 实现一个无限循环动画

  <style>
   .anima {
      width: 800px;
      height: 600px;
      animation-name: likes; 
      animation-direction: alternate; 
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-duration: 1s; 
    }

  @keyframes likes {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.9);
    }
    50%{
        transform: scale(0.85);
    }
    75%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
  }
  </style>
  <image></image>

ログイン後にコピー

7. 如何实现单行、多行文本溢出隐藏？

单行文本溢出隐藏

<style>
   div {
      width: 100px;
      height: 100px;
      /* 溢出隐藏 */
      overflow: hidden;           
      /* 溢出用省略号显示 */
      text-overflow: ellipsis;   
      /* 规定段落中的文本不进行换行   */
      white-space: nowrap;  
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

ログイン後にコピー

多行文本溢出隐藏

<style>
   div {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 作为弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 显示的行数 */
      -webkit-line-clamp: 3;
      /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
      -webkit-box-orient: vertical;
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

ログイン後にコピー

8. CSS 垂直居中有哪些实现方式？

我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。

下面为公共代码：

<style>
.box {
  width: 300px;
  height: 300px;
  background: #ddd;
}
.small {
  background: red;
}
</style>


    <div>
        <div>small</div>
    </div>

ログイン後にコピー

1. absolute + margin实现

方法一：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
  }

ログイン後にコピー

方法二：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
  }

ログイン後にコピー

2. absolute + calc 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
  }

ログイン後にコピー

3. absolute + transform 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100px;
    height: 100px;
  }

ログイン後にコピー

4. 转行内元素

  .box {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
  }
  .small {
    padding: 6px 10px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
  }

ログイン後にコピー

5. 使用flex

方法一：

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

ログイン後にコピー

方法二：

  .box {
    display: flex;
    justify-content: center;
  }
  .small {
    align-self: center;
  }

ログイン後にコピー

更多编程相关知识，请访问：编程视频！！

以上が[編集と共有] フロントエンドインタビューのための CSS の 75 個の高頻度テストポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

[編集と共有] フロントエンドインタビューのための CSS の 75 個の高頻度テストポイント

1. ボ​​ックス サイズ変更属性値の機能は何ですか?

2. 絶対 絶対位置は誰に対する相対的な位置ですか?

3. インライン要素とブロックレベル要素の違いは何ですか?

4. 一般的なインライン要素とブロック レベルの要素は何ですか?

14. フロントエンド プロジェクトで CSS スタイルを初期化する必要があるのはなぜですか?

15. 表示:なしと可視性:非表示の違いは何ですか?

16. CSS3 の新機能は何ですか?

ほとんどの初心者は、CSS のマッチングは左から右に行われると考えていると思いますが、実際はその逆です。

20. CSS のパフォーマンスを最適化および改善する方法は何ですか?

#21. スタイル タグが本文の前に書かれたか後ろに書かれた場合の違いは何ですか?

22. 垂直方向のパーセンテージの設定要素はコンテナの高さに関連していますか?

23. トランジションとアニメーションの違いは何ですか?

24. ボックス モデルについてのあなたの理解を教えてください。

25 が含まれます。Atom CSS とは何ですか?メリットとデメリットは何ですか?

26. 脱离文档流有哪些方法？

27. CSSOM树和DOM树是同时解析的吗？

28. CSS Sprites 是什么，如何使用？

29. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

30. canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别？

31. 相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？

32. Sass、Less 是什么？为什么要使用他们？

33. CSS3 新增伪类有哪些？

34. CSS 动画和 JS 实现动画分别有哪些优缺点？

35. 为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

36. IconFont 的原理是什么？

37. 分析比较 opacity:0、visibility:hidden、display:none 优势和使用场景

38. CSS 中有哪些定位方式？（position有哪些属性值？）

39. flexbox(弹性盒布局模型)是什么，使用什么场景？

40. z-index 属性はいつ無効になりますか?

41. BFC をトリガーする方法と BFC のアプリケーション シナリオは何ですか?

42. CSS の読み込みによりブロックが発生しますか?

43. ブラウザ レンダリングのプロセスについて簡単に説明します

44. js と css は DOM ツリーの構築にどのような影響を与えますか?

45. リフローと再描画を理解するにはどうすればよいですか?どのような状況で発動するのでしょうか？

##46. レスポンシブ デザインとは何ですか?レスポンシブデザインの基本原則は何ですか?どのように実装すればよいでしょうか?

47. 说说对 CSS 预编语言的理解，主流的有哪些？

48. CSS 中1像素问题是什么？有哪些解决方案？

49. overflow:scroll 时不能平滑滚动的问题怎么处理？

50. CSS 单位中 px、em 和 rem 的区别？

51. CSS を使用してページのパフォーマンスを向上させるにはどうすればよいですか?

52. 文字間隔と単語間隔の違いは何ですか?

53. 依存関係のない絶対配置とは何ですか?

54. カスケードガイドライン?

55. フォントの太さの特徴は何ですか?

56. text-indent の特別な機能は何ですか?

57. rem レイアウトを使用する利点と欠点は何ですか?

58. 推奨される最小幅はどれくらいですか?

59. height:100% が無効なのはなぜですか?

60. min-width/max-width 属性と min-height/max-height 属性間のルールをオーバーライドしますか?

61. インラインボックスモデルとは何ですか?

62. content 与替换元素的关系？

63. margin:auto 的填充规则？

64. overflow 的特殊性？

代码篇

1. 下面代码中，p标签的背景色是什么？

2. 假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效？

3. 第二个子元素的高度是多少？

手写篇

1. 如何从 html 元素继承 box-sizing

2. 如何使用css来实现禁止移动端页面的足有滑动手势？

3. 如何使用 CSS 画一个三角形

4. 如何实现两栏布局，右侧自适应？三栏布局中间自适应？

5. 单行文本如何实现两端对齐

6. 使用 CSS 实现一个无限循环动画

7. 如何实现单行、多行文本溢出隐藏？

8. CSS 垂直居中有哪些实现方式？

1. ボックスサイズ変更属性値の機能は何ですか?

2. 絶対絶対位置は誰に対する相対的な位置ですか?

4. 一般的なインライン要素とブロックレベルの要素は何ですか?

14. フロントエンドプロジェクトで CSS スタイルを初期化する必要があるのはなぜですか?

#21. スタイルタグが本文の前に書かれたか後ろに書かれた場合の違いは何ですか?

24. ボックスモデルについてのあなたの理解を教えてください。

41. BFC をトリガーする方法と BFC のアプリケーションシナリオは何ですか?

43. ブラウザレンダリングのプロセスについて簡単に説明します

##46. レスポンシブデザインとは何ですか?レスポンシブデザインの基本原則は何ですか?どのように実装すればよいでしょうか?