【フロントエンド就活必読】フロントエンド開発面接一問一答

CSS

CSS ボックスモデルを導入しますか?

(1) IE ボックスモデルと標準 W3C ボックスモデルの 2 種類あり、IE のコンテンツ部分にはボーダーとパディングが含まれます;

(2) ボックスモデル: コンテンツ (コンテンツ)、 fill (パディング)、border (マージン)、border (境界線)。

CSS セレクターとは何ですか?どのようなプロパティを継承できますか?優先アルゴリズムはどのように計算されますか? CSS3 の新しい疑似クラスとは何ですか?

* 1. ID セレクター (# myid)
2. クラスセレクター (.myclassname)
3. タグセレクター (div, h1, p)
4. 隣接セレクター (h1 p) )
5. 子セレクター (ul < li)
6. 子孫セレクター (li a)
7. ワイルドカードセレクター (*)
8. 属性選択セレクター (a[rel = "external "])
9. 疑似クラスセレクター (a: hover、li: nth - child)

* 継承可能なスタイル: font-size font-family color 、UL LI DL DD DT;

* 継承できないスタイル: ボーダーパディングマージン幅高さ ;

* 優先順位の原則、同じ重み付けでは最も近いスタイル定義が優先されます;

* 読み込みスタイルは、最後にロードされた位置;

優先度は次のとおりです:

! important > id > class > tag

important はインライン
よりも高い優先度を持ちます

CSS3 の新しい疑似クラスの例:

p:first-of-type は、その親要素に属する最初の

要素の各

要素を選択します。
p:last-of-type 親要素の最後の

要素である各

要素を選択します。
p:only-of-type 親要素の唯一の

要素である各

要素を選択します。
p:only-child 親要素の唯一の子要素である各

要素を選択します。
p:nth-child(2) 親要素の 2 番目の子である各

要素を選択します。
:enabled :disabled は、フォームコントロールの無効状態を制御します。
:checked ラジオボタンまたはチェックボックスが選択されています。

div を中央に配置するにはどうすればよいですか?浮動要素を中央に配置するにはどうすればよいですか?

div の幅を設定し、margin:0 auto 属性を追加します。

div{
width:200px;
margin:0 auto;
}

フローティング要素を中央に配置する

コンテナの幅、高さ、幅 500 および高さ 300 のレイヤーを決定します
レイヤーの余白を設定します

.div {
width:500px; height:300px;//高さ未設定のままにすることもできます
マージン: -150px 0 0 -250px;
Position:relative; 相対位置決め
background-color:pink;//効果が分かりやすい
left:50%;
top:50%;
}

表示値を列挙し、その機能を説明します。位置、相対および絶対位置決め原点の値は何ですか?

1.
ブロックはブロック型要素と同様に表示されます。
なしデフォルト値。インライン要素タイプのように表示されます。
inline-block はインライン要素のように表示されますが、その内容はブロック型要素のように表示されます。
list-item はブロック型要素のように表示され、スタイルリストマークアップを追加します。

2.
*absolute
静的配置以外に、最初の親要素を基準にして配置される絶対配置要素を生成します。

*修正済み (古い IE はサポートしていません)
ブラウザウィンドウに対して相対的に配置される、絶対位置の要素を生成します。

*relative
通常の位置を基準にして相対的に配置された要素を生成します。

* 静的なデフォルト値。位置決めを行わない場合、要素は通常のフロー
* (上、下、左、右の Z-index 宣言を無視します) に表示されます。

*inherit は、position 属性の値が親要素から継承されることを指定します。

CSS3 の新機能は何ですか?

CSS3 は、角丸 (border-radius: 8px)、シャドウ (box-shadow: 10px)、
テキストに特殊効果を追加 (text-shadow,)、線形グラデーション (gradient)、回転 ( transform) )
transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//回転、スケーリング、位置決め、チルト
CSS オプションを追加しましたデバイスマルチバックグラウンド rgba

全画面文字レイアウトをデザインするには?

よく見かける CSS の互換性は何ですか?原因と解決策は？

CSS スタイルを初期化する理由。

- ブラウザの互換性の問題により、ブラウザごとに一部のタグのデフォルト値が異なるため、CSSが初期化されていない場合、ブラウザ間でページの表示に差異が発生することがよくあります。

- もちろん、初期化スタイルは SEO に一定の影響を与えますが、ケーキを持って食べることはできませんが、影響を最小限に抑えて初期化するようにしてください。

*最も単純な初期化方法は次のとおりです: * {padding: 0; margin: 0;} (推奨されません)

淘宝網スタイルの初期化:
body, h1, h2, h3 , h4 、h5、h6、hr、p、blockquote、dl、dt、dd、ul、ol、li、pre、form、fieldset、legend、button、input、textarea、th、td { margin:0; padding:0 ; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100 %; }
address、cite、dfn、em、var { font-style:normal; }
code、kbd、pre、samp { font-family:couriernew、courier、monospace; }
small{ font- size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button 、input、select、textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

absolute contains ブロックはどうなっているのか通常の流れと計算方法が違う？

位置、表示、余白潰れ、オーバーフロー、フロートの機能を重ねるとどうなるでしょうか?

BFC の仕様について理解していますか?

(要素がコンテンツをどのように配置するか、また要素と他の要素との関係や相互作用を決定する W3C CSS 2.1 仕様の概念。)

css Weight# で定義

##重みのルールは次のとおりです。ラベルの重みは 1、クラスの重みは 10、ID の重みは 100 です。次の例は、さまざまな定義の重み値を示しています。

/* 重みは 1*/

div{
}
/*重みは 10*/
.class1{
}
/*重みは 100 */
#id1{
}
/*重みは 100 1=101*/
#id1 div{
}
/*重みは 10 1=11* /
.class1 div{
}
/*重みは 10 10 1=21*/
.class1 .class2 div{
}

重みが同様に、最後に定義されたスタイルは機能しますが、この状況を回避するには

フロートとその仕組みを説明してください。フロートをクリアするためのヒント