フロントエンド CSS の面接でよくある質問-CSSチュートリアル-php.cn

フロントエンド CSS の面接でよくある質問

感染症の状況が改善傾向にあるため、さまざまな場所で徐々に仕事が再開され始めていますが、私たちにとっては、いわゆる「金、三、銀、四の転職シーズン」です。始まろうとしています。ここでは、過去を振り返り、新しいことを学ぶために、フロントエンド分野で私が蓄積した経験の一部を共有したいと思います。

フロントエンドに関しては、幅広い知識と内容が必要になりますが、主に html(5)、css(less、scss、sass、styus、css3) を中心に内容は変わりません。、js (es5、es6)、およびいくつかの一般的な人気フレームワーク vue、react などです。これ以上の話はせずに、すぐに本題に入りましょう。

#特別な推奨事項:2020 CSS 面接の質問の概要 (最新)

##1. 名前を付けてくださいhtml5 のいくつかの新機能回答: html5 によって追加された新機能は具体的には次のとおりです:

1. 新しいセマンティック/構造化タグ (フッター、記事、メインなど) 、ナビなど;

2. 新しい入力タイプのタイプと属性 (電子メール、電話番号、番号など);

3. HTML5 独自の API 地理的位置ローカルストレージキャッシュなど
4 . 新しいグラフィックタグ svg Canvas と
5 の違い. 新しいマルチメディアタグビデオオーディオソース
6. いくつかの放棄された要素タグ (font
7. カスタム要素タグ
8)。 DOCTYPE および文字エンコーディング charset 宣言

2. z-index の使用回答: z-index はラベルの設定に使用されます。階層関係, Z インデックスを使用する場合、ラベルの位置属性 (相対、絶対、固定など) を同時に設定する必要があります。ラベルのデフォルトの Z インデックスは 0 で、負の数を設定できます

3. 位置属性と使用法答え: Position は位置決め属性です。これには主に次のさまざまな属性値が含まれます。詳細は次のとおりです。

absolute

絶対配置要素を生成し、静的配置以外の最初の親要素を基準にして配置します。

要素の位置は、「left」、「top」、「right」、および「bottom」属性によって指定されます。

fixed

ブラウザウィンドウを基準にして絶対配置された要素を生成します。

要素の位置は、「left」、「top」、「right」、および「bottom」属性によって指定されます。

relative

通常の位置を基準にして、相対的に配置された要素を生成します。

つまり、「left:20」は要素の左位置に 20 ピクセルを追加します。

static

デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。

inherit

position 属性の値を親要素から継承することを指定します。

4. float の使用回答: 属性は、要素が浮動する方向を定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロックレベルのボックスを作成します。詳細は次のとおりです。

float による効果により、要素自体が inline-block と同様の要素になり、それをラップする要素がその高さを無視します。つまり、親要素には高さがありません。例: 子要素のボックスを height:100px に設定する; このときの親要素の高さも 100px です。 float float の効果により、要素は、その外縁が含まれているボックスまたは別の浮動境界線に当たるまで、ドキュメントフローから指定された方向に移動します。フローティングはその後ろの要素にのみ影響します。上の要素がフローティングでない場合は、フローティング要素も浮き上がりません。親要素が狭すぎてすべてのフローティング要素を収容できない場合は、収容できないフローティング要素は新しい行に表示されます。行折り返し要素を基準にすると、行折り返し要素よりも高い高さの浮動要素がある場合、行折り返し要素が壊れると、より高い要素によって「スタック」されます。フローティングの影響をクリアするには

回答 : フロートはドキュメントフローに損傷を与えるため、フローティングの影響を排除する必要がある場合は、通常、いくつかの解決策があります。要素: フローティング子要素の後に要素を追加し、クリアを追加: どちらの属性も正常に表示できます。欠点は、空の要素が任意に追加されることであり、コードの仕様に準拠していません。親要素の場合: add親要素の後に隣接する空の要素がある場合、clear 属性を設定しますが、後続の要素は通常どおり表示されるだけであり、親要素の高さは拡張されません。親要素の場合: 親要素の高さを設定します。正常に表示されますが、通常は内部のコンテンツによって高さが拡張されるため、スケーラビリティは良くありません親要素の場合：親要素の表示を設定：inline-block、正常に表示できますが、margin:auto親要素の「overflow:hidden」を親要素に設定すると正常に表示されますが、親要素と一致させる必要があります。 width. 、それ以外の場合は、デフォルトで 1 行を占めます。 6.CSS アニメーションプロパティ (CSS を使用して回転三角形にブレーキをかけるなど)

回答: 三角形を作成するには、境界線属性を直接使用できます。具体的には、ボックスの高さと幅を 0px に設定し、幅に対応するさまざまな境界線の色属性を設定します。対応するベース三角形のは特定の三角形の色に設定されます。対応するものは設定しないでください。または幅 0 に設定する必要はありません。他の 2 つの斜辺は透明に設定されます。

回転アニメーションには CSS の 2 つのプロパティが関係します。 :

1) トランジション: アニメーションプロパティには、対応するアニメーションの属性名、またはアニメーションが完了する時間 (単位は s または ms)、アニメーションのすべてを直接設定する 4 つの値を記述することができます。アニメーションのカーブの変更、およびアニメーションの開始時刻

2) 変換: 回転主な属性には、回転 (ラジカル回転には、rotate3d、rotateX、rotateY、rotateZ も含まれます)、translate (同じ理由)、スケール (同じ理由で 4 つあります)

7. フォーマルボックスモデルとインフォーマルボックスモデル

答え:ボックスモデルは、主にラベルの幅または高さを一貫して計算しません。標準のボックスモデルには、マージン、ボーダー、パディング、およびコンテンツの幅が含まれます。つまり、ボックスの実際の幅 = コンテンツの左右のマージン、左右の境界線、左右のパディング、コンテンツの実際の幅、CSS3 で導入された box-sizing 属性は、標準ボックスモデルの計算方法を変更できます (具体的には set box-sizing: border)。 -box, ボックスの実際の幅 = コンテンツの左右のマージンの実際の幅もちろん、box-sizing: content-box を直接設定して、通常の標準ボックスモデルを復元することもできます。

8.flex elastic レイアウト

回答: 1. ボックスの表示属性を flex または line-flex に設定します。これは 6 つの CSS 属性に対応します。 :

1) flex-direction: 子要素の配置を設定します (row、column、row-reverse、column-reverse)

2) flex-warp: 子要素がラップ (nowarp、warp、warp-reverse)

3) flex-flow: flex-direction と flex-warp の省略形、デフォルトは row nowarp

4) justify-content: を設定します。子要素の水平方向の配置モード (flex-start、flex-end、center、span-around、span-between)

5) align-items: 子要素の垂直方向のモードを設定します (flex-start、flex) -end、center、stretch、baseline)

6) align-content: 複数の軸の配置を設定します (flex-start、flex-end、center、spand-around、spand-between、stretch)

2 . 対応するサブ要素項目には、独自の 6 つの CSS 属性もあり、次のとおりです:

1) order: 要素の配置の重みを、値が大きいほど後ろに設定します

2) flex-grow: 要素の拡大率を設定します。

3) flex-shrink: 要素の縮小率を設定します。

4) flex-basis: 設定します。余剰スペースの主軸が占める比例スペース item

5 ) flex: flex-grow、flex-shrink、および flex-basis の省略形は、デフォルトで 0 1 auto

6) align-self: 子要素の垂直方向の配置を設定します。デフォルトはボックスの align-items です。値

:warning:: フレックスレイアウトを設定した後、float、clear、vertical-align が設定されます。子要素のうちのは無効です

9.grid グリッドレイアウト

答え: 1. ボックスのグリッドレイアウトを設定するには、次のものが必要です。表示をグリッドまたはライングリッドに設定します。これは次の属性に対応します:

1) グリッドテンプレート列: 定義各列の幅

2) グリッドテンプレート列rows: 各行の高さを定義します

3)grid-row-gap:行間のギャップを定義します

4)grid-column-gap:列間のギャップを定義します

5) グリッドギャップ: 行と列の間のギャップの略語を定義します。

6) グリッド-チームプレートエリア: エリアを定義します。エリアは複数のセルで構成されます。

7) グリッド自動-flow: コンテナの配置順序を定義します

#8) justify-items: サブ要素のコンテンツの水平方向の配置順序を定義します

9) align-items: コンテナの垂直方向の順序を定義します子要素の内容

10) place-items: 子要素の内容の水平および垂直順序の省略形を定義します

11) justify-content : の水平方向の配置順序を定義しますコンテナ(グリッド)

12) align-content: コンテナ(グリッド)の垂直方向の配置順序を定義します

13) place-content: 水平方向と垂直方向の配置順序の略称を定義します

2. 子要素の属性には以下が含まれます:

1) Grid-column-start: 列の開始位置

2) Grid-column- end:列の終了位置

3) Grid-row-start: 行の開始位置

#4) Grid-row-end: 行の終了位置

5) グリッド列: 列の開始位置と終了位置

6) グリッド行: 行の開始位置と終了位置

7) グリッドエリア: 要素が配置される領域を定義します

8) justify-self: 要素自体の水平方向の配置を定義します

9) align-self: 要素自体の垂直方向の配置を定義します

10) place-self:要素自体の水平方向の配置と垂直方向の配置

:警告:: グリッドレイアウトに設定すると、子要素の float、inline-block、table-cell、column-* 属性はすべて無効になります

10. 一般的な中央揃えソリューション答え:

1. インライン要素を水平方向に中央揃え: text-align: center

# を直接使用します。 ##2. インライン要素は垂直方向に中央揃えになります:vertical-align: middle で、親要素の行の高さを親要素の高さに設定します

3. 固定幅要素は次を使用して水平方向に中央揃えになります: magin: 0 自動

4. フレックスエラスティックレイアウト: justify-content: 水平方向の中央から中央へ配置、align-items: 垂直方向の中央揃えを設定します

5. パディング属性を通じて垂直方向の中央揃えを実行します

6. 親要素を設定します対象: display: table-cell、vertical-align: middle

7. 疑似要素を使用して垂直方向のセンタリングを設定する: 親要素を疑似要素に設定し、それを inline-block に設定し、vertical-align を設定します。整列: 中央

8. 高さが決まっている場合: 垂直中央に絶対位置マージン

9. 高さが不明な場合: 絶対位置変換、具体的には、変換する必要のある要素を設定します。垂直方向の中央揃え:位置:絶対、上部:50%、変換:translateY(-50%)

10. flex-duration:column:display:flex、flex-duration:column、justify-を介して垂直方向の中央揃えcontent: center

水平方向および垂直方向のセンタリング方法:

1. 親要素の高さは既知であり、親要素の高さと幅はわかっています。子要素は固定されています (高さは固定されていない可能性があります): text-align : center, line-height: 親の高さ

2. 絶対位置マージンにより垂直方向と水平方向の中央揃えが実現されます。子要素の幅

3. 絶対配置変換は垂直方向と水平方向のセンタリングを実現します。子要素の高さと幅を知っている必要はありません: 位置: 絶対; 上: 50%; 左: 50 %;transform:translate (-50%, -50%)

4. 表示をテーブルとして使用し、子要素を表示として使用します: table-cell;vertical-align:center;text-align:center サブ要素は、vertical-align:center

5 に設定されます。垂直方向のセンタリングには親要素の擬似要素を使用します (親要素は高さを知っている必要があります)。擬似要素の高さを 100% に設定します。そして、vertical-align: middle, display: inline-block を設定します; サブ要素は、vertical-align: center; display: inline-block を設定します (サブ要素は、text-align: center または margin: 0 auto を使用して水平方向に中央揃えにすることができます) )

6. 子要素は margin: auto;position:Absolute;top:0;left:0;right:0;bottom:0;

## に設定されます。 #11. 疑似要素の使用

#回答:

一般的な疑似クラス——:hover,:link,:active,:target,:not() 、：集中。一般的な疑似要素 - ::first-letter、::first-line、::before、::after、::selection

::before および ::after 固有のコンテンツ。CSS で使用されます。レンダリング中の要素の論理的な先頭または末尾。

これらの追加は DOM には表示されず、ドキュメントの内容も変更されず、コピーすることもできません。これらは CSS レンダリングレイヤーにのみ追加されます。

したがって、意味のあるコンテンツを表示するために :before または :after を使用するのではなく、アイコンなどの装飾的なコンテンツを表示するために使用するようにしてください。

12.css selector

答え: ワイルドカードセレクター、ラベルセレクター、クラスセレクター、ID セレクター、属性セレクター、スペースセレクターはセレクターのプラス記号セレクターより大きいです

13 .pパディングを 100% に設定する式

回答: 標準モードでもボックスサイズ変更モードでも、パディングは要素の合計幅の一部です。したがって、現時点では、 p は p

14 に対応する色です。em、rem、px

答え:

em の使用法は次のとおりです。相対的な長さの単位。現在のオブジェクト内のテキストに対する相対的なフォントサイズ。インラインテキストの現在のフォントサイズが手動で設定されていない場合は、ブラウザのデフォルトのフォントサイズを基準とします。 Rem は、px ピクセル (Pixel) を計算するために、HTML ルート要素のフォントサイズにのみ相対します。相対的な長さの単位。ピクセル px はモニター画面の解像度を基準としています。 15. margin の使い方と注意点

回答: margin を使用すると、隣接する 2 つのラベル間の余白がマージされ、上下のラベルの margin-top と margin-bottom が設定されます。の場合、自動的にマージされ、最大の属性値は 2 つの実際の間隔になります

16. いくつかの一般的な CSS3 属性と用途をリストします

回答: 一般的なものには、border-radius: ラベルの丸い角の設定、box-shadow: 影の設定、box-sizing: ボックスモデルの変更などが含まれます。

#17.less と sass の比較答え:

違いは、Less 環境は Sass よりもシンプルであることです

インストールSass は Ruby 環境のインストールが必要ですが、Less は Javascript をベースにしています。コードを処理してブラウザに CSS を出力するには Less.js を導入する必要があります。開発プロセスで Less を使用し、それを CSS ファイルにコンパイルすることもできますそれをプロジェクトに直接配置します。

Less は Sass よりも使いやすいです

Less は CSS の元の機能をカスタマイズするのではなく、既存の CSS 構文に基づいて手続き型言語機能を CSS に追加します。

Sass には Less よりも強力な関数があります

1. Sass には変数とスコープがあります

2. Sass には関数の概念があります

3. プロセス制御: 条件、ループトラバーサル、継承、参照

4. データ構造: 配列、マップ

Less と Sass の処理メカニズムは異なります

前者はクライアントを介して処理されます。後者はサーバーを介して処理されるため、前者は後者に比べて若干遅くなります。

Less と Sass の変数の唯一の違いは、Less は @ を使用し、Sass は $ を使用することです。類似点

Less と Sass には、次のような共通の構文があります:

1. ミックスイン - クラス内クラス;