フロントエンドの面接の質問 -- CSS

CSSボックスモデルについて話す

ボックスモデルには、一般的に使用される標準ボックスモデルと、あまり使用されないIEボックスモデルの2種類があり、標準ボックスモデルには
コンテンツ(幅、高さ)、パディング、マージン、ボーダーが含まれます。
ここに画像の説明を挿入

IE ボックスモデル、コンテンツ {width(padding,border);height;} マージン。IE ボックスモデルの幅には、パディングとボーダーが含まれます。
ここに画像の説明を挿入
box-sizing プロパティは css3 で導入され、値が content-box の場合の標準モデルです。値 border-box は IE ボックスモデルです

0.5pxの線を描きます

最初は画面のスケーリングを使用します

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这中方式之在移动端生效，viewport之咋移动端生效，其原理就是让屏幕缩小一半  1px就变成了0.5px

2 番目の方法:
CSS のズーム機能を使用します。

transform: scale(0.5,0.5);

リンクタグとインポートタグの違い

リソース問題
リンクの読み込みでは、css を読み込むだけでなく、rss および rel 接続属性を定義することもできます。@import は CSS
互換性の問題のみを読み込むことができます
。リンクは HTML タグであり、互換性の問題はありません。@import2.1 の IE5 以下との非互換性
読み込みシーケンスの問題
ページ読み込み時にリンクも一緒に読み込まれる
この問題は @import がページ読み込み後に自宅の js で
制御します。

トランジションとアニメーションの違い

同じ点は、時間の変化に応じて属性値を変更できますが、
違いは、トランジションが属性の変更をアクティブに開始し、アニメーションと同じ効果を得るために戻る必要があることです。(遷移) フレーム数で言えば2フレームだけです形を
アニメーション化することをアニメーションと呼びます属性値を自分から始めなくても変更できますフレーム数はフレームごとに変更できます

フレックスレイアウト

flex は Flexible Box で、伸縮自在なレイアウトを意味します。Webkit ブラウザには -webkit という接頭辞を付ける必要があります

.box{
    
    
  display: -webkit-flex; /* Safari */
  display: flex;
}

レイアウト属性:
flex-direction: 主軸の方向を決定します。flex-
wrap: 行の折り返しの方向、または行を折り返すかどうかを決定します。
flex-flow: は上記 2 つの flex-direction || 整列方法の略です。(上揃え、下揃え、センタリング、上下ストレッチ揃え、水平揃え) align-content: 複数の軸の揃えを定義する属性です。項目に軸が 1 つしかない場合、このプロパティは効果がありません。（上揃え、下揃え、センタリング、上下ストレッチ揃え、水平揃え）

フレックスレイアウトのチュートリアル

BFC (ブロックレベルの書式設定コンテキスト、フローティングのクリア、マージンの重なりの防止などに使用されます)

触发条件：
根元素：html
float属性不为none，
overfloat不为visible，
display不为table-cell、table-caption 和inlink-block
position；不为 resolve和fixed

BFC は独立した領域、隔離されたコンテナであり、子要素は外部要素の影響を受けません。
1. 要素が浮動要素によって覆われないようにすることができます。
2. 浮動要素を含めることができます
。 3. 同じ BFC に属する要素

マージンが重なるため、子要素に異なる BFC を設定すると問題が解決する可能性があります。

垂直センタリングの方法

マージン: 自動

<style>
	.div{
      
      
		position:absolute;
		width:100px;
		height:100px;
		top:0;
		left:0;
		right:0;
		bottom:0
		margin:auto
	}
</style>
<div class="div"></div>

マイナスマージン

<style>
	.div{
      
      
		width:100px;
		height:100px;
		position:absolute;
		top:50%;
		left:50%;
		margin-left:-50px;
		margin-top:-50px;
	}
</style>
<div class="div"></div>

複数行要素のテキスト省略記号

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

フロートクリア

1. 新しい空のタグを追加して、フローティング要素の後に属性 Clear:both を設定します

	<style>
		.clear{
      
      
			clear:both
		}
	</style>
	<div class="clear"></div>

欠点は、意味のないラベルが追加されることです
。 2. オーバーフローを使用してフローティング要素の親要素に追加します。overflow
:hidden または overflow:auto のどちらでも、その値が表示されない限りフローティングをクリアできます。その本質は、親要素の高さをサポートする効果を達成するために BFC を構築することです。 3. 親要素をサポートするように親要素の高さを設定します。 4. 親要素の疑似クラス要素を設定し
ます
。

.div:afert{
    
    
	content:'';
	height:0;
	line-height:0;
	display:block;
	visibility:hidden;
	clear:both
}

親要素に:after疑似要素を追加し、疑似要素のフローティングを解除することで親要素の高さになります。

計算属性

これは CSS の計算された属性です。任意の長さの値を計算できますが、演算子の前後にはスペースが必要であることに注意してください。

	.div{
    
    
		width: calc(100% - 10px);
	}

CSSセレクターの優先順位

!import が最も優先されます。
インラインスタイルのスタイル
IDセレクター
クラスセレクター
ラベルセレクター
ワイルドカードセレクター
ブラウザによってカスタマイズまたは継承され、
対応するウェイト
スタイルは 1000、
ID は 100、
カテゴリは 10、
ラベルは 1 です。