フロントエンドインタビューの質問と回答--- CSS記事

コードワードは簡単ではありません。役立つ学生は、私のWeChatパブリックアカウントに注意を払うことを望んでいます。コードプログラムの生活、ありがとう！コードはあなた自身の使用のために使用されます

CSS疑似クラスと疑似要素の違い

疑似クラス

• コアは、DOMツリーの外部の情報、通常のセレクターでは選択できないドキュメントの外部の要素を選択して、セレクターの特殊効果を追加するために使用されます。

• 比如：ホバー：アクティブ：訪問済み：リンク：訪問済み：最初の子：フォーカス：lang等。

• 状態変化は非静的であるため、要素が特定の状態に達すると、疑似クラススタイルを取得する場合があります。状態が変化すると、このスタイルは失われます。

• その機能はクラスに似ていますが、ドキュメント外の抽象化に基づいているため、疑似クラスと呼ばれます。

疑似要素

• DOMツリーに定義された仮想要素はありません。

• 核となるのは、通常はドキュメントに存在しない要素を作成する必要があることです。

• 例:: before :: after要素の指定されたコンテンツを選択します。これは、選択された要素のコンテンツの前または後のコンテンツを意味します。

• コンテンツと疑似要素によって制御される要素に違いはありませんが、要素に基づく抽象化であり、ドキュメントには存在しないため、疑似要素と呼ばれます。特定のセレクターに特殊効果を追加するために使用されます。

疑似クラスと疑似要素の
表現方法の違い：

• CSS2の疑似クラスと疑似要素はcolon：means以上のものです。

• CSS2.1以降、疑似クラスは単一のコロンで表され、疑似要素は二重のコロン::で表されることが規定されています。

• ブラウザは、CSS2時代に存在した疑似要素の単一コロン表記（：before、：after、：first \ ufffeline、：first-letterなど）も受け入れます。

• CSS2の後のすべての新しい疑似要素（:: selectionなど）は、二重コロンで記述する必要があります。

• CSS3では、疑似クラスと疑似要素の構文も異なり、疑似要素は::で始まるように変更されます。ブラウザは、次で始まる疑似要素も引き続きサポートしますが、推奨される記述方法は次のとおりです。

  さまざまな定義：

• 疑似クラスは偽のクラスです。効果を実現するためにクラスを追加できます。

• 疑似要素は偽の要素です。効果を得るには要素を追加する必要があります

総括する：

• 疑似クラスと疑似要素の両方が、ドキュメントツリーの外側の「要素」を表すために使用されます。

• 疑似クラスと疑似要素は、それぞれシングルコロン：とダブルコロン::で表されます。

• 疑似要素と疑似要素の違いの要点は、疑似要素（または疑似要素）がないかどうかです。効果を実現するために要素を追加する必要がありますか？ある場合は、疑似要素です。それ以外の場合は、疑似要素です。

類似点

疑似クラスも疑似要素も、ソースファイルとDOMツリーに表示されません。つまり、疑似クラスと疑似要素はhtmlソースファイルには表示されません。

違い

• 疑似クラスは、実際には通常のDOM要素に基づく異なる状態であり、DOM要素の特性です。
• 疑似要素は、DOMツリーに存在しない抽象オブジェクトを作成でき、これらの抽象オブジェクトにアクセスできます。

ボックスモデルの原則に基づいてcssボックスモデルを描画し、相対ポジショニング、絶対ポジショニング、およびフローティング実装スタイルがどのように実装されるかを説明してください

CSSボックスモデル：

ページ上のどの要素もボックスと見なすことができます。ボックスは特定のスペースと位置を占め、相互に制限し、Webページのレイアウトを形成します。
W3Cのボックスモデルの構成：コンテンツ、境界線、パディング、マージン

IEボックスモデルと標準ボックスモデル

IEモデルと標準モデルの唯一の違いは、コンテンツの計算方法です。

• IEボックスモデル、width = content + padding
  
• 標準ボックスモデル、width = content
  

異なるポジショニング：

1.相対ポジショニング

相対（相対配置）オブジェクトは積み重ねることができず、ドキュメントフローから逸脱することもありません。静的位置を基準にして上、下、左、右に配置でき、z-indexによって階層的に等級付けできます。

2.絶対ポジショニング

絶対（絶対配置）は、ドキュメントフローから分離され、上、下、左、および右に配置されます。絶対測位の測位設定で最も近い親オブジェクトを選択します。オブジェクトの親が測位属性を設定していない場合、絶対要素はボディ座標の原点に配置されます。これは、z-indexで階層的に分類できます。

3.フローティング

ドキュメントフローを離れる、つまり、通常のレイアウトと植字から要素を削除します。他のボックスを配置すると、ドキュメントフローから逸脱する要素が存在しないかのように配置されます。

リストにcssセレクターのカテゴリーをリストし、少なくとも3つのcssセレクターの違い、該当するシナリオを記述します。

CSSセレクター

最も基本的なセレクターは、ラベルセレクター、クラスセレクター、IDセレクターです。

その他のセレクター：

• 隣接するセレクター（h1 + p）
• 子セレクター（ul> li）
• 子孫セレクター（li a）
• ワイルドカードセレクター（*）
• 属性セレクター（a [rel = "external"]）
• 疑似クラスセレクター（a：hover、li：nth-​​child）

いくつかの一般的なセレクター：

• アスタリスク

アスタリスクは、ページ上のすべての要素を選択します。多くの開発者は、マージンとパディングをクリアするためにそれを使用します。もちろん、練習するときにこれを使用してもかまいませんが、実稼働環境で使用することはお勧めしません。それはブラウザに多くの不必要なものを追加します。*要素のすべての子要素を選択するためにも使用できます。

#container * {
    
    
    border：1px solid black；

}

• IDセレクター

セレクターで＃を使用して、idを持つ要素を見つけます。人々は通常それをこのように使用します、そしてそれからそれを使用するとき誰もがそれを非常に注意しなければなりません。自問する必要があります：この要素を見つけるために、この要素にIDを割り当てる必要がありますか？

IDセレクターは非常に厳密であり、再利用することはできません。可能であれば、最初にタグ名、HTML5の新しい要素、または疑似クラスを使用してみてください。

• クラスセレクター

クラスセレクター。複数の要素を見つけることができるという点でidセレクターとは異なります。複数の要素をスタイリングする場合は、クラスを使用できます。idを使用して特定の要素を変更する場合。

• 子孫セレクターxy

li a {
    
    
    color:red;

}

要素をより具体的に見つけたい場合は、それを使用できます。たとえば、すべての要素を見つける必要はありません。liタグの下にあるタグだけを見つける必要がありますか？このとき、子孫セレクターを使用する必要があります。

セレクターがXYZAB.errorのようなものである場合、あなたは間違っています。本当にたくさんの要素を変更する必要があるかどうかを常に思い出します。

• ラベルセレクター

a {
    
     color: red; }
ul {
    
     margin-left: 0; }

IDやクラスではなく、ページ上の特定のタグをすべて検索する場合は、簡単です。タイプセレクターを直接使用してください。

• X：訪問済みおよびX：リンク

/* :link这个伪类来定位所有还没有被访问过的链接 */

a:link {
    
     color:red; }

/* :visited来定位所有已经被访问过的链接 */
a:visited {
    
     color: purple; }

• x + y

ul + p {
    
    
    color: red;
}

隣接するセレクター。これは、指定された要素の直後の後続要素の選択を指示します。上記の例は、すべてのulタグの後の最初の段落を選択し、それらの色を赤に設定することです。

• x> y

div#container > ul {
    
    
    border: 1px solid black;
}

XYとX> Yの違いは、後者の司令官が直接の子を選択することです。

• x〜y

ul ~ p {
    
    
    color : red;
}

兄弟ノードの組み合わせセレクターはX + Yと非常に似ていますが、それほど厳密ではありません。ul + pセレクターは、指定された要素の隣にある要素のみを選択します。そして、このセレクターは、ターゲット要素に続くすべての一致する要素を選択します。

• X [タイトル]

a[title] {
    
    
    color : green;
}

上記の例では、属性セレクターは、title属性を持つ要素のみが選択されます。この属性を持たないアンカータグは、このコードで装飾されません。

• X：チェック済み

input[type=radio]:checked {
    
    
    border: 1px solid black;

}

上記の疑似カテゴリは、選択された単一選択ボックスと複数選択ボックスを見つけることができます。

• X：後

前後のこれら2つの疑似クラス。毎日誰もがそれらを使用する創造的な方法を見つけることができるようです。選択したラベルの周りにいくつかのコンテンツを生成します。

• X：n番目の子（n）

li :nth-child(3) {
    
    
    color : red;
}

n番目の子は整数パラメーターを受け取り、0から開始しないことに注意してください。2番目の要素を取得する場合、渡す値はli：nth-​​child（2）です。

---

WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246

以下のWeChatパブリックアカウントをフォローすると、WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトソースコードはできるだけ早くWeChatに公開されます番号、ご注意ください、ありがとうございます

公式アカウントに注意を払った後、フロントエンドの面接の質問に返信し、フロントエンドの面接の質問の要約pdfデータを多数受け取ります