CSS のよくある面接の質問

CSS の紹介

1. インライン スタイル、2. 内部スタイル テーブル, 3. 外部スタイル シート

link @import

a. link は HTML タグであり、@import は CSS によって提供され、CSS

b のみを読み込むことができます。このページはロードされた場合、リンクは同時にロードされ、 @import によって参照される CSS は、ページがロードされるまで待ってからロードします。

c. import は IE5 以降でのみ認識でき、リンクはHTML タグ、互換性の問題はありません

d. リンク モード スタイルの重みは @import

e の重みよりも高いです. Javascript を使用して DOM を制御してスタイルを変更する場合@import は CSS のみを参照するため、リンク モードのみを使用できます。これは DOM ではなく、

CSS 基本セレクターを制御できます:

1. タグ セレクター要素
2. クラス セレクター (複数)クラス名セレクター).
3.id セレクター four
#4. ワイルドカード セレクター*

##特別な推奨事項

:2020 年の CSS インタビューの質問の概要 (最新)

CSS 複合セレクター:

子孫セレクター E>F

子要素セレクター
Intersection セレクター
Union セレクター、
Link 疑似クラス セレクターlvha
単一コロン (:) は CSS3 疑似クラスに使用され、二重コロン (::) は CSS3 疑似要素に使用されます

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2): を示しますul

li の下の 2 番目の li 要素 :nth-child(2): それが li 要素であり、かつ ul の下の 2 番目の要素であることを示します (見つかりません)。

通常は、問題が発生する可能性が低い nth-of-type を使用することをお勧めします。
CSS の 3 つの主要な機能: CSS カスケード、CSS 継承、CSS の優先順位
CSS レイアウトについての理解について話す

ボックス モデル

フローティングの方法を明確にする:

1. 追加タグメソッド

<p style="clear:both"></p>

2. 親にオーバーフロー属性を追加するメソッド

3. 疑似要素の後に使用して float をクリアします

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4. ダブル疑似要素を使用してClear float

配置モードとエッジ オフセット:

要素の表示と非表示:

display:none;

overflow:hidden

マウス スタイル カーソル

デフォルト Xiaobai デフォルト、ポインタ、移動、テキスト、許可されていない禁止

vertical-align 垂直配置

オーバーフロー テキスト省略記号表示

1.white-space:nowrap テキストを強制的に 1 行にします

2.overflow に表示: hidden は部分を越えて非表示になります
3.text-overflow: 省略記号はオブジェクト内のテキストがオーバーフローした場合に省略記号を表示します

共通のレイアウト方法:

固定レイアウト,

フロー (%) レイアウト、
エラスティック (フレックス) レイアウト、
rem レイアウト
フローティング レイアウト、クリア フロート
位置決めレイアウト、
マージンとパディング

ブロック レベル要素が垂直方向に中央に配置されます

p を上下左右に中央に配置する方法

1.
left:50%; top:50%
transform:transform(-50%,-50 %)
2 .
left:0; top: 0;bottom: 0; right: 0; margin: auto
3.px
CSS の 3 つの主要な機能: カスケード継承優先度
継承可能なプロパティ
テキスト関連: font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、color
# リスト関連: list-style-image, list-style-position, list-style-type, list-style

CSS3 新機能

角丸(border-radius)、影(box-shadow)、テキストに特殊効果を追加 (text-shadow)、線形グラデーション (gradient)、変換 (transform)

CSS セレクターをさらに追加 multi-background rgba、CSS3 で導入された唯一の疑似要素は ::selection、mediaクエリ、複数列レイアウト

link @import

a. リンクは HTML タグに属しますが、@import は CSS によって提供され、CSS

b のみを読み込むことができます。ページが読み込まれると、リンクは@import 参照 CSS はページがロードされるまで待機してからロードします

c.インポートは IE5 以降でのみ認識でき、リンクは HTML タグであるため、互換性の問題はありません

d. リンク スタイル スタイルの重みが高い @import

e. Javascript を使用して DOM を制御してスタイルを変更する場合、リンクのみを使用できます

#CSS の基本セレクター:

1. タグ セレクター要素

2. クラス セレクター (複数のクラス名セレクター).

3. ID セレクター 4

#4. ワイルドカード セレクター*

CSS複合セレクター:
子孫セレクターE>F
子要素セレクター
交差セレクター
ユニオンセレクター,
リンク擬似クラスセレクターlvha
単一コロン(:)を使用CSS3 疑似クラスの場合、CSS3 疑似要素には二重コロン (::) が使用されます。

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2): ul
li の 2 番目の li 要素を表します。 nth-child(2): li 要素と ul の下の 2 番目の要素の両方であることを示します (見つかりません)。
通常は、問題が発生する可能性が低い nth-of-type を使用することをお勧めします。
CSS の 3 つの主要な機能: CSS カスケード、CSS 継承、CSS の優先順位
CSS レイアウトについての理解について話す

ボックス モデル

フローティングの方法を明確にする:
1. 追加タグメソッド

<p style="clear:both"></p>

2. 親にオーバーフロー属性を追加するメソッド
3. 疑似要素の後に使用して float をクリアします

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4. ダブル疑似要素を使用してClear float

配置モードとエッジ オフセット:

要素の表示と非表示:
display:none;
overflow:hidden

マウス スタイル カーソル
デフォルト Xiaobai デフォルト、ポインタ、移動、テキスト、許可されていない禁止
vertical-align 垂直配置

オーバーフロー テキスト省略記号表示
1.white-space:nowrap テキストを強制的に 1 行にします
2.overflow に表示: hidden は部分を越えて非表示になります
3.text-overflow: 省略記号はオブジェクト内のテキストがオーバーフローした場合に省略記号を表示します

共通のレイアウト方法:
固定レイアウト,
フロー (%) レイアウト、
エラスティック (フレックス) レイアウト、
rem レイアウト
フローティング レイアウト、クリア フロート
位置決めレイアウト、
マージンとパディング

ブロック レベル要素が垂直方向に中央に配置されます
p を上下左右に中央に配置する方法
1.
left:50%; top:50%
transform:transform(-50%,-50 %)
2 .
left:0; top: 0;bottom: 0; right: 0; margin: auto
3.px
CSS の 3 つの主要な機能: カスケード継承優先度
継承可能なプロパティ
テキスト関連: font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、color

# リスト関連: list-style-image, list-style-position, list-style-type, list-style

CSS3 新機能

角丸(border-radius)、影(box-shadow)、テキストに特殊効果を追加 (text-shadow)、線形グラデーション (gradient)、変換 (transform)

CSS セレクターをさらに追加 multi-background rgba、CSS3 で導入された唯一の疑似要素は ::selection、mediaクエリ、複数列レイアウト

関連チュートリアルの推奨事項:

CSS ビデオ チュートリアル

以上がCSS のよくある面接の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。