フロントエンド CSS の面接での質問 (1)

ボックスを垂直方向と水平方向の中央に配置する方法

text-align:center +vertical-align: 中央の水平方向と垂直方向の中央揃えのレイアウト

 <div> text-align:center + vertical-align: middle水平垂直居中布局</div>
    <div class="text-align-outter">
      <div class="text-align-center"></div>
    </div>
.text-align-outter {
    
    
  background-color: plum;
  text-align: center;
  vertical-align: middle;
  /** 要配合table-cell一起使用 */
  display: table-cell;
  width: 300px;
  height: 300px;
}

.text-align-center {
    
    
  display: inline-block;
  background-color: pink;
  width: 50%;
  height: 50%;
}

位置+マージンの水平方向と垂直方向の中央揃えのレイアウト

利点は互換性が高いことですが、欠点はサブコンポーネントの幅と高さを知っておく必要があることです。

 <div>position + margin水平垂直居中</div>
    <div class="position-outter">
        <div class="position-center"></div>
    </div>
.position-outter {
    
    
  position: relative;
  width: 300px;
  height: 300px;
  background-color: plum;
}

.position-center {
    
    
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: pink;
}

もちろん、他にも方法はあります。私は以前、一般的に使用される CSS レイアウトに関する記事を書きましたhttps://dengxi.blog.csdn.net/article/details/114955202で、水平方向のセンタリング、垂直方向の水平方向のセンタリング、およびホーリーなどのレイアウト方法について詳しく説明しています。聖杯。

グリッドレイアウトとその互換性

コンテナ (グリッド コンテナ): display:grid; 属性を通じて要素をグリッド コンテナとして設定します。
アイテム (グリッド アイテム): グリッド コンテナー内の要素はグリッド アイテムと呼ばれ、グリッド内の要素の位置は、grid-column や Grid-row などの属性によって定義できます。
グリッド行とグリッド列: グリッドは行と列に分割されており、グリッド線の位置を設定することで行と列の数とサイズを定義できます。
グリッド線: 水平線と垂直線でグリッドを分割し、グリッド線の位置を設定することで行と列のサイズを調整できます。

CSS Grid の互換性はあまり良くありませんが、最近の主流のブラウザはすでに CSS Grid をサポートしています。CSS グリッドに対する一般的なブラウザのサポートを次に示します。
Chrome: Chrome 57 以降、CSS グリッドがサポートされます。
Firefox: CSS グリッドは Firefox 52 以降でサポートされます。
Safari: CSS グリッドは Safari 10.1 以降でサポートされます。
Edge: CSS グリッドは Edge 16 以降でサポートされます。
Opera: CSS グリッドは Opera 44 以降でサポートされます。

ただし、それ以下のバージョンのブラウザや IE ブラウザではサポートされていません。

グリッド レイアウトの詳細: https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

BFCの紹介

BFC (ブロック フォーマット コンテキスト) は、CSS レイアウトにおける重要な概念です。BFC は、要素の配置、配置、および他の要素との相互作用に影響を与える独立したレンダリング領域を形成します。

BFC をトリガーする条件は次のとおりです。

float プロパティは none ではありません。
位置属性は絶対または固定です。
表示属性は、inline-block、table-cell、table-caption、flex、および inline-flex のいずれかです。
オーバーフロー属性は表示されません。

一般的な用途には次のようなものがあります。

親要素の高さが崩れるのを防ぐために、フロートをクリアします。
隣接するブロックレベル要素のマージンが崩れるのを防ぎます。
アダプティブな 2 列レイアウトを作成します。
フローティング要素のレイアウトとサイズを制御します。

書かれたアニメーション効果

これは私自身のプロジェクト状況に基づいて、主にアニメーションの実装方法とその違いを検討するために紹介します。
以前にアニメーションを実装するいくつかの方法をまとめました。https: //dengxi.blog.csdn.net/article/details/116102127を参照してください。

オーバーフローにはどのような性質があるのでしょうか?

見える：

デフォルトでは、オーバーフロー コンテンツはコンテナの外側に表示され、切り詰められません。
コンテンツが他の要素の上にオーバーフローする可能性があります。

隠れた：

オーバーフローしたコンテンツは非表示になり、コンテナーの外には表示されません。
切り取られたコンテンツは表示されません。

スクロール：

スクロールが必要かどうかに関係なく、垂直スクロール バーと水平スクロール バーを表示します。
コンテンツがオーバーフローしない場合でも、スクロールバーの位置は表示されますが、スクロールは無効になりません。

自動：

コンテンツがオーバーフローすると、スクロール バーが自動的に表示されます。
コンテンツがオーバーフローしない場合、スクロール バーは表示されません。

かぶせる：

auto と同様に、コンテンツがオーバーフローした場合、スクロール バーが自動的に表示されます。
ただし、スクロールバーは、占有スペースが少なくなるようにコンテンツの上に表示されます。

ボックス内にスクロールバーを表示させる方法

Y 軸スクロール バーの場合、ボックスの高さを固定する必要があるため、スクロール バーがこの高さを超えて表示される場合があります。
したがって、これはインラインブロックまたはブロックボックスである必要があり、最後にオーバーフロー属性が使用されます。

.block-scroll {
    
    
	display: block;
	height: 200px;
	overflow: auto;
}

同様に、スクロール バーを X 軸に表示したい場合は、ボックスの幅を固定し、最後に改行を許可しないようにする必要があります。

.block-scroll {
    
    
	display: block;
	width: 200px;
	overflow: auto;
}

ボックス モデルにボーダー ボックスとコンテンツ ボックスが導入されました

コンテンツボックスボックスモデル:

要素の幅と高さにはコンテンツ領域の寸法のみが含まれ、パディングや境界線は含まれません。
たとえば、要素の幅を 200 ピクセルに設定し、10 ピクセルのパディングと 2 ピクセルの境界がある場合、実際に占有される幅は、200 ピクセル (コンテンツ) + 20 ピクセル (パディング) + 4 ピクセル (境界) となり、合計になります。 224ピクセル。

ボーダーボックスボックスモデル:

要素の幅と高さには、コンテンツ領域、パディング、境界線の寸法が含まれます。
これは、設定した幅と高さが、内部スペースを含む要素が占める実際の寸法であることを意味します。
ボーダー ボックスを使用すると、特にレイアウトを設計する場合に、要素の全体的なサイズを制御しやすくなります。

ボックスモデルの設定

このうち、content-box はブラウザの標準的なボックス モデルであり、開発者は自分の開発習慣やプロジェクトの要件に応じて統一してボックス モデルを使用できます。

* {
    
    
	box-sizing：content-box;
	// box-sizing：border-box;
}

flex はどのようなプロパティを表し、その用途は何ですか?

フレックスグロー:

残りのスペースが割り当てられたときに、フレックス コンテナ内の項目が拡張する割合を決定します。
デフォルトは 0 で、プロジェクトは拡張されず、残りのスペースが他の拡張プロジェクトに均等に分配されることを意味します。
値が大きいほど、プロジェクトがより拡大することを意味します。

フレックスシュリンク:

スペースが不十分な場合に、フレックス コンテナー内の項目がどの程度縮小するかを決定します。
デフォルトは 1 で、スペースの不足に合わせてプロジェクトが比例的に縮小することを意味します。
0 はアイテムが縮まないことを意味します。

フレックスベース:

プロジェクトの初期寸法を定義します。
特定の長さの値またはパーセンテージに設定できます。
デフォルトは auto で、プロジェクトの内容に基づいてサイズが自動的に決定されます。

flex: flex-grow flex-shrink flex-basis;

rem、em、px、vh、vw 単位の違い

1rem = ドキュメント ルート ノードの html タグに設定されたフォント サイズ パラメータ
。例: 1rem = 16px

<html style="font-size: 16px;">
...
</html>

1em = 親ノードによって設定されたフォント サイズ パラメーター。
たとえば、p タグの場合、1em = 16px

<html>
	<div style="font-size: 16px;">
		<p style="margin: 1em;"></p>
	</div>
</html>

1px はピクセル座標であり、画面の解像度を参照することもできます

1vh はブラウザの全画面の高さの 1 パーセント、
1vw はブラウザの全画面の幅の 1 パーセントです。

ポジションにはどのような属性があり、どのような違いがあるのでしょうか?

静的：

デフォルトでは、要素は通常のドキュメント フローに従ってレイアウトされます。
top、right、bottom、left のプロパティは無視されます。

相対的：

要素は、通常の位置を基準にして配置されます。
他の要素は通常のドキュメント フローに従ってレイアウトされますが、その位置は、top、right、bottom、left プロパティを使用して微調整できます。
要素は元の位置のスペースを占有しており、他の要素のレイアウトには影響しません。

絶対：

要素は通常のドキュメント フローから切り離され、最も近い位置にある (非静的) 祖先要素を基準にして配置されます。
配置された祖先要素がない場合、要素はその要素を基準にして配置されます。
要素は元の位置のスペースを占有せず、他の要素の上に浮かんでいます。

修理済み：

要素はビューポートを基準にして配置され、ページがスクロールしても移動しません。
一般的に、固定ナビゲーション バーまたはフローティング要素を作成するために使用されます。

粘着性:

要素は、スクロールが特定のしきい値に達するまでは通常のドキュメント フローに従って配置され、別のしきい値に達するまで固定配置になり、その後通常の配置に戻ります。
要素は、しきい値内にある間はビューポート内に表示されたままになります。

0.5pxを達成

スタイルに直接0.5pxを書くと基本的には無理ですが、ボックスを縮小することで救国できます。
たとえば、長さ10ピクセル、高さ0.5ピクセルの線を実装したいとします。

div {
    
    
	width: 20px;
	height: 1px;
	background: #000;
	transform: scale(0.5);
}

これを実現するもう 1 つの方法は、スタイルのグラデーション カラーを使用して、半分を透明に設定し、半分を目的の色に設定することです。

もちろん、上記の方法は視覚的に 0.5px を達成するだけであり、本当の意味での 0.5px を達成するわけではありません。

インラインブロック時にボックスに隙間ができることがありますが、どうすれば解決できますか?

属性の行を追加します。

font-size: 0

インラインブロックとブロックとインラインの違い

ブロック要素:

スペースの行全体を占めると、親コンテナーの幅が自動的に埋められます。
幅、高さ、マージン、パディングを設定できます。
デフォルトでは、ブロックレベル要素はその前後に新しい行を作成し、その内容が新しい行から始まるようにします。

インライン要素:

含まれるコンテンツのスペースを占有するだけであり、改行は強制されません。
幅、高さの設定はできず、外マージンは上下無効（左右有効）、内マージンは上下左右有効となります。
単一行に表示され、他の要素とテキストを同じ行に配置できます。

インラインブロック要素:

インライン要素と似ていますが、幅、高さ、マージン、パディングを設定できます。
改行は強制されず、サイズと間隔を制御しながら他の要素と行を共有できます。

主な違い:

1. レイアウト: ブロック要素は 1 行を占め、インライン要素は 1 行で表示され、インラインブロック要素も 1 行で表示されますが、サイズは設定できます。
2. サイズ設定: ブロック要素とインラインブロック要素は幅と高さを設定できますが、インライン要素は設定できません。
3. マージンとパディング: ブロック要素とインラインブロック要素の両方でマージンとパディングを設定できますが、インライン要素の上下のマージンはレイアウトに影響しません。
4. 改行動作: ブロック要素は改行を強制し、各ブロックレベル要素は新しい行で始まります。インライン要素は改行を強制せず、インラインブロック要素は改行を強制しません。また、複数の要素を 1 つの画面上に表示できます。同じ行。

インラインボックスに上下の余白や左右の余白を設定することはできますか?

左右のマージンを設定できますが、上下のマージンを設定しても有効になりません。

css3 のどの機能をよく使用しますか?

主なテストは CSS3 に精通しているかどうかです。一般的に、一般的に使用される CSS3 属性は次のとおりです。

border-radius: 要素の丸い境界線を作成するために使用されます。

box-shadow: 要素の影効果を追加します。水平オフセット、垂直オフセット、ぼかし半径、色を設定できます。

text-shadow: 水平オフセット、垂直オフセット、ぼかし半径、色のプロパティを使用して、テキストにシャドウ効果を追加します。

背景サイズ: 背景画像のサイズを制御します。キーワード (カバーや含むなど) または特定のサイズを使用できます。

不透明度: 要素の透明度を設定します。要素の可視性は 0 ～ 1 の値で調整できます。

トランジション: 状態が変化するときにトランジション効果を追加するために使用され、属性の変化時間、タイプ、遅延を制御できます。

変換: 回転、スケーリング、移動、その他の効果を含む、要素の 2D または 3D 変換。

アニメーション: 要素のアニメーション効果を作成し、キーフレーム、継続時間、遅延などの属性を定義できます。

@keyframes: アニメーション属性で使用するアニメーションのキーフレームを定義します。

box-sizing: ボックス モデルの計算方法を制御します。content-box (デフォルト) または border-box を選択できます。

Flexbox: 柔軟なレイアウトを構築するために使用され、display: flex によって有効になります。flex-direction、justify-content、align-items およびその他の属性を使用してレイアウトを制御できます。

Grid: 複雑なグリッド レイアウトを作成するために使用されます。display: Grid によって有効になります。grid-template-columns、grid-template-rows、grid-gap およびその他の属性を使用してグリッド構造を定義できます。

@media: さまざまなメディア クエリ (画面サイズ、解像度など) に基づいてさまざまなスタイルを適用するために使用されます。

nth-child および nth-of-type: 要素のグループ内の特定の位置にある要素を選択するために使用され、奇数-偶数の行スタイルなどの効果を実現するために使用できます。

flex-grow および flex-shrink: さまざまなスペースに適応する柔軟なレイアウトで項目のスケーラビリティを制御するために使用されます。

gradient: グラデーションの背景を作成します。これは、線形グラデーションまたは放射状グラデーションにすることができます。

フィルタ: ぼかし、コントラスト調整などの要素に画像フィルタ効果を適用します。

user-select: ユーザーがテキスト コンテンツを選択できるかどうかを制御します。

列数と列ギャップ: 複数列レイアウトの列数と列間のギャップを制御します。

アウトライン: 境界線に似ていますが、スペースを占有しません。要素がフォーカスを受け取ったときにスタイルを設定するためによく使用されます。

フレックスレイアウト

フレックス レイアウトには多くのテスト ポイントがあり、一般的に使用される属性、レイアウト メソッド、および互換性の問題には全員が注意を払う必要があります。Flex レイアウトのチュートリアル: 文法
を確認してください。 著者: Ruan Yifeng

ここではまず CSS 試験の一般質問を紹介し、CSS の一般面接質問の第 2 段階をできるだけ早く整理する予定です。