CSS 面接での 7 つの重要な質問-CSSチュートリアル-php.cn

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃目次＃＃＃＃＃＃＃＃＃＃＃ #1. CSS3のボックスモデル

2. display:noneとvisibility:hiddenの違い 4.位置の属性値は何ですか?

5.PNG、GIF、JPG、WEBP の違いと選び方は何ですか? CSS 面接での 7 つの重要な質問

6. CSS セレクターとは何ですか?優先度？

7. フローティング関連

(2) フロートをクリアするにはどうすればよいですか?
特別な推奨事項
2020 CSS 面接の質問の概要 (最新)

##1. CSS3 のボックスモデル

#標準ボックスモデルと IE ボックスモデルの違いは次のとおりです。標準ボックスモデルの幅と高さはコンテンツの幅と高さを指しますが、コンテンツの幅と高さはコンテンツの幅と高さを指します。 IE ボックスモデルは、パディングとボーダーの合計であるコンテンツを参照します。

CSS3 では、box-sizing:border-box を使用して、通常のボックスモデルを IE ボックスモデルに変換できます。ボックスの幅と高さを設定することがありますが、
border

を変更してボックスのサイズを変更したい場合は、変更せずに IE ボックスモデルに変換できます。毎回、ボックスの中身のサイズを計算します。

ボックスモデル内

CSS 面接での 7 つの重要な質問
box-sizing:content-box

標準のボックスモデルを表します (デフォルト値)

box-sizing:border-box
IE ボックスモデル (つまり、奇妙なボックスモデル) を表します
さらに、 :Flex Flexible Box Model
##2. display:none と Visibility:hidden
- 違い:
- (1)レンダリングツリー内で

を作成します。要素はレンダリングツリーから完全に消え、レンダリング時にスペースを占有しません。

visibility:hidden

によって要素がレンダリングツリーから消えることはなく、レンダリングされた要素はそのまま残ります。対応するスペースを占有します。スペースはありますが、コンテンツは表示されません

CSS 面接での 7 つの重要な質問

(2) 継承

display:none

は非継承属性ですとなり、その子孫ノードは親ノードに従います。レンダリングツリーから消えてしまい、子孫ノードのプロパティを変更しても表示できなくなります。

visibility:hidden

は継承された属性です。子孫ノードは

hidden

visibility:visible を設定すると、子孫ノードは消えます。表示できます。
(3) 通常のドキュメントフロー内の要素の display を変更すると、通常、ドキュメントが再配置されますが、

属性を変更すると、要素が再描画されるようにするだけです

(4) スクリーンリーダーが使用されている場合、

に設定されたコンテンツは読み取られず、visibility に設定されたコンテンツは読み取られません。 :hidden が読み取られます。
3. CSS スプライトについて話しましょう コンセプト:

スプライトは、複数の小さな画像をつなぎ合わせたものです使用する際は、

background-position要素のサイズで表示する背景パターンを調整してください。 利点:

HTTP リクエストの数を減らし、ページの読み込み速度をある程度向上させますサイズを削減します各画像にはヘッダー情報があるため、複数の画像をまとめると、同じヘッダー情報が共有され、画像のバイト数が減ります。スタイルを変更すると便利です。画像を 1 つまたは複数追加するだけで、画像の色やスタイルを変更することで、Web ページ全体のスタイルを変更できます。

画像に名前を付ける手間が軽減され、1 つまたは複数の画像に名前を付けるだけです。

欠点:

メンテナンスが面倒です。ページの背景が少し変わると、結合した画像全体を修正する必要があります。
結合が面倒です。複数の画像を順番に 1 つの画像に結合する必要があります。不必要な背景を防ぐために、一定量のスペースも確保する必要があります。
ワイドスクリーンまたは高解像度の画面下のアダプティブページでは、画像の幅が十分でない場合、背景が壊れる可能性があります

4. 位置の属性値とは何ですか?

#属性値概要##absoluterelativefixedstatic#inheritposition 属性の値が親要素から継承されることを指定します#5.PNG、GIF、JPG、WEBP の違いと選び方は何ですか?


絶対的に生成配置された要素は、静的配置以外の親要素に対して相対的に配置されます。
元の位置を基準にして相対的に配置された要素を生成します
ブラウザウィンドウを基準にして絶対配置された要素を生成します
デフォルト値、配置なし、要素通常のドキュメントフローに表示されます

(1)GIF

GIF 画像は 8 ビットインデックスのみを保存し、最大 256 色をサポートします。

透明でシンプルなアニメーションをサポート
次の用途に適しています:シンプルな色のロゴ、アイコン、ワイヤーフレーム、シンプルなアニメーション

(2)JPG

非可逆圧縮を使用すると、圧縮の品質を制御できます

直接色、豊富な色を使用します

透明度はサポートしません
# #適用対象
: カラフルな画像、グラデーション画像

(3) PNG

png-8 は可逆圧縮を使用し、8 ビットのインデックスに基づくビットマップ形式です。 GIF は、同じ品質で透明性と小さいサイズのサポートが優れていますが、アニメーションはサポートしていません。アイコン、背景、ボタンに適しています。

png-24 は、可逆圧縮を採用した直接カラーベースのビットマップ形式で、上記に比べサイズは大きくなりますが、画質が高く、ソースファイルや画像形式を必要とするファイルの保存に適しています。二次編集。

(4)WEBP
Google が開発、サイズは小さい

非可逆圧縮と可逆圧縮をサポート

適用先

形式##利点

欠点該当するシナリオ256 色のみをサポートロゴ、アイコン、アニメーション用のシンプルな色カラフルな画像/グラデーション画像#アニメーションはサポートされていません。カラフルな画像はサイズが大きくなります。#webp #webp 形式のアプリと Web ビューをサポート6. CSS セレクターとは何ですか?優先度？ ##タグセレクター

		gif	ファイルサイズが小さい、アニメーション、透明性をサポート、互換性なし問題
	jpg	豊富な色、ファイルは小さい	非可逆圧縮、画像の保存を繰り返すと明らかに品質が低下します
	png	可逆圧縮、透明性のサポート、単純な画像はサイズが小さいです。	#ロゴ/アイコン/透明画像
小さなファイル、非可逆圧縮と可逆圧縮をサポート、アニメーションと透明性をサポート	ブラウザの互換性は良くありません
	#セレクター	形式

p

##クラスセレクター##id セレクター#myid隣接兄弟セレクターh1 p子セレクターul>li子孫セレクターli aワイルドカードセレクター*属性セレクターa [ref="eee"]疑似クラスセレクターli:last-child

別の要素の直後にある要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接する兄弟セレクターを使用できます。たとえば、 h1 要素の場合、次のように記述できます:

h1 + p {margin-top:50px;}

ログイン後にコピー

セレクターの 優先度については :

要素セレクター: 1
クラスセレクター: 10
id セレクター: 100
要素タグ: 1000

次の点に注意してください:

!重要な宣言されたスタイル最も高い優先順位
優先順位が同じ場合、最後に表示されたスタイルが有効になります
継承されたスタイルの優先順位が最も低くなります

属性の継承:

継承可能な属性: font-size、font-family、color
継承できないスタイル: border、padding、margin、width、height

7.フローティング関連の

要素をフロートに設定すると、表示は自動的にブロックになります。

(1) フロートをクリアする必要があるのはいつですか?

フローティングによって引き起こされる問題は次のとおりです:

親要素の高さを拡張できないため、親と同じレベルの要素に影響します
フローティング要素と同じレベルの非レベル要素フローティング要素がそれに続きます
要素がフローティングの場合、その前の要素もフローティングにする必要があります。そうしないと、ページの構造に影響します

(2) フロートをクリアするにはどうすればよいですか?

フロートをクリアする方法は次のとおりです。

親 p の height 属性を定義します。
フロートの後に空の p を追加します。最後のフローティング要素タグを追加し、clear:both style
フローティング要素を含む親タグに overflow:hidden または overflow:auto を追加します。＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃目次＃＃＃＃＃＃＃＃＃＃＃＃

2. display:noneとvisibility:hiddenの違い

5.PNG、GIF、JPG、WEBP の違いと選び方は何ですか?

6. CSS セレクターとは何ですか?優先度？

7. フローティング関連

#1. CSS3 のボックスモデル
CSS3 のボックスモデルには、標準ボックスモデルと IE ボックスモデルの 2 種類があります

標準ボックスモデルと IE ボックスモデルの違いは次のとおりです。標準ボックスモデルの幅と高さについては、コンテンツの幅と高さ: IE ボックスモデルの幅と高さは、コンテンツ、パディング、境界線の合計を指します。

box-sizing:border-box

を使用して、通常のボックスモデルを IE ボックスモデルに変換できます。ボックスの幅と高さを設定することがありますが、

border

を変更してボックスのサイズを変更したい場合は、変更せずに IE ボックスモデルに変換できます。毎回、ボックスの中身のサイズを計算します。

CSS 面接での 7 つの重要な質問
ボックスモデル内

box-sizing:content-box
標準のボックスモデルを表します (デフォルト値)
box-sizing:border-box
IE ボックスモデル (つまり、奇妙なボックスモデル) を表します
さらに、 :
- ##2. display:none と Visibility:hidden の違いは、これら 2 つの属性により、要素を非表示にします
- 違い:
(1)レンダリングツリー内で

display:none を作成します。要素はレンダリングツリーから完全に消え、レンダリング時にスペースを占有しません。

CSS 面接での 7 つの重要な質問 visibility:hidden

(2) 継承

display:none

は継承された属性です。子孫ノードは hidden を継承するため消えます。
を設定すると、子孫ノードは消えます。表示できます。

display

を変更すると、通常、ドキュメントが再配置されますが、

visibility

(4) スクリーンリーダーが使用されている場合、display:none
visibility に設定されたコンテンツは読み取られません。 :hidden が読み取られます。 visibility:hidden3. CSS スプライトについて話しましょう

コンセプト:

<p>精灵图就是将多个小图片拼接在一个图片中，使用的时候通过<code>background-position元素尺寸调节需要显示的背景图案。

优点：

减少HTTP请求数，在一定程度上提高了页面的加载速度
减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
减少了图片命名的困扰，只要给一张或几张图片命名即可

缺点：

メンテナンスが面倒です。ページの背景が少し変わると、結合した画像全体を修正する必要があります。
結合が面倒です。複数の画像を順番に 1 つの画像に結合する必要があります。不必要な背景を防ぐために、一定量のスペースも確保する必要があります。
ワイドスクリーンまたは高解像度の画面下のアダプティブページでは、画像の幅が十分でない場合、背景が壊れる可能性があります