CSS 面接での基本的な 20 の質問

この記事では主に基本的な CSS 面接の質問を共有します。これは参考価値があり、皆様のお役に立てれば幸いです。編集者をフォローして見てみましょう。

1 標準 CSS ボックス モデルを紹介しますか? IE の下位バージョンのボックス モデルとの違いは何ですか?

標準ボックスモデル: 幅 = コンテンツの幅 (コンテンツ) + ボーダー + パディング + マージン
低バージョン IE ボックス モデル: 幅 = コンテンツの幅 (コンテンツ + ボーダー + パディング) + マージン

特別な推奨事項 : 2020年のCSS面接の質問まとめ(最新)

要素のボックスモデルを制御するために使用される解析モード、デフォルトはcontent-boxです
context-box: W3Cの標準ボックスモデル、高さ/幅を設定します要素の属性は、コンテンツ部分の高さ/幅を参照します
border-box: IE の従来のボックス モデル。要素の高さ/幅属性の設定は、ボーダー + パディング + コンテンツ部分の高さ/幅を指します

3 CSS セレクターとは何ですか?どのようなプロパティを継承できますか?

CSS セレクター: ID セレクター (#myid)、クラス セレクター (.myclassname)、タグ セレクター (p、h1、p)、隣接セレクター (h1 + p)、サブセレクター (ul > li)、子孫セレクター (li a)、ワイルドカード セレクター (*)、属性セレクター (a[rel="external"])、疑似クラス セレクター (a:hover、li:nth-child)

継承可能なプロパティ: font-サイズ、フォントファミリー、色

非継承スタイル: ボーダー、パディング、マージン、幅、高さ

優先順位 (近接原則): !重要 >gt; クラス > important はインライン優先度よりも高いです

4 CSS 優先度アルゴリズムはどのように計算されますか?

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

1. ! 競合がある場合は、重要で宣言されたスタイルが最優先されます。再度計算しました。

2. 優先順位が同じ場合は、最後に表示されたスタイルが選択されます。

3. 継承されたスタイルの優先順位が最も低くなります。

5 CSS3 の新しい疑似クラスとは何ですか?

p:first-of-type は、その親要素に属する最初の要素を選択します

p:last-of-type は、親に属する要素 p:only-of-type の最後の要素は、親要素に属する唯一の要素を選択します
p:only-child は、親要素に属する唯一の子要素を選択します
p:nth- child(2) は、その親に属する 番目の要素を選択します。 2 つのサブ要素
:enabled :disabled フォーム コントロールの無効な状態。
:checked ラジオボタンまたはチェックボックスがチェックされています。

6 pを中央に配置するにはどうすればよいですか?浮動要素を中央に配置するにはどうすればよいですか?絶対的に配置された p を中央に配置するにはどうすればよいですか?

p:

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

フローティング要素の上下左右の中央揃え:

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

絶対位置の左右の中央揃え:

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

还有更加优雅的居中方式就是用flexbox，以后会做整理。

7 display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

8 position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

9 CSS3有哪些新特性？

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（对长的不可分割单词换行）word-wrap：break-word

4. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

5. font-face属性：定义自己的字体

6. 圆角（边框半径）：border-radius 属性用于创建圆角

7. 边框图片：border-image: url(border.png) 30 30 round

8. 盒阴影：box-shadow: 10px 10px 5px #888888

9. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11 用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12 一个满屏品字布局如何设计?

第一种真正的品字：

1. 三块高宽是确定的；

2. 上面那块用margin: 0 auto;居中；

3. 下面两块用float或者inline-block不换行；

4. 用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的p设置成100%，下面的p分别宽50%，然后使用float或者inline使其不换行。

13 常见的兼容性问题？

1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

3. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

4. {
   background-color:#f1ee18;/*所有识别*/
   .background-color:#00deff\9; /*IE6、7、8识别*/
   +background-color:#a200ff;/*IE6、7识别*/
   _background-color:#1e0bd1;/*IE6识别*/
   }

5. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

6. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

8. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

15 absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

1. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

2. 否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

2. absolute: 向上找最近的定位为absolute/relative的元素

3. fixed: 它的containing block一律为根元素(html/body)

16 CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

1. chrome中，使用collapse值和使用hidden没有区别。

2. Firefox、Opera、IEでは、collapse valueの使用とdisplay:noneの使用に違いはありません。

17 表示:なしと可視性:非表示の違いは何ですか?

display: none は、対応する要素を表示せず、ドキュメント レイアウトにスペースを割り当てません (リフロー + 再描画)
visibility: hidden は、対応する要素を非表示にし、ドキュメント レイアウト内の元のスペースを保持します (再描画)

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

display 属性は要素が生成するボックスのタイプを指定し、position 属性は要素の配置タイプを指定し、float 属性は要素がどの方向にフローティングするかを定義するレイアウト メソッドです。
優先順位のメカニズムと同様に、position:Absolute/fixed が最も高い優先順位を持ちます。これらが存在する場合、float は機能せず、表示値を調整する必要があります。 float または ABS によって配置される要素は、ブロック要素またはテーブルのみです。

19 BFC 仕様 (ブロック フォーマット コンテキスト) を理解していますか?

BFC は、内部ブロック ボックスのレイアウト方法を規定します。
配置スキーム:

1. 内部ボックスは垂直方向に次々に配置されます。

2. Box の垂直方向の距離は、同じ BFC に属する 2 つの隣接する Box の余白によって決まります。

3. 各要素のマージンボックスの左側は、それを含むブロック境界ボックスの左側に接しています。

4. BFC エリアはフロート ボックスと重なりません。

5. BFC はページ上で分離された独立したコンテナーであり、コンテナー内の子要素は外部の要素に影響を与えません。

6. BFC の高さを計算するとき、浮動要素も計算に参加します。

BFCは、次の条件のいずれかが満たされた場合にトリガーできます

1. root要素、つまり、html

2. floatの値が none (デフォルト) ではない場合

3. オーバーフロー値 非表示(デフォルト)

4. displayの値はinline-block、table-cell、table-captionです

5. positionの値は絶対または固定です

20 フロートが表示されるのはなぜですか?いつクリアする必要がありますか?フロートをクリアする方法は？

フローティング要素は、それを含む境界線またはフローティング要素の境界線に当たるとそのままになります。フローティング要素はドキュメント フロー内にないため、ドキュメント フロー ブロック ボックスはフローティング ボックスが存在しないかのように動作します。フローティング要素は、ドキュメント フロー内のブロック ボックスの上にフローティングされます。
フローティングによって引き起こされる問題:

1. 親要素の高さを拡張できず、親要素と同じレベルの要素に影響を与える

2. 同じレベルの非フローティング要素(インライン要素)フローティング要素としてその後に続きます

3. 最初の要素がフローティングでない場合、その前の要素もフローティングにする必要があります。そうしないと、ページ表示の構造に影響します。

フロートをクリアする方法:

1. 親pは高さを定義します

2. 最後のフローティング要素の後に空のpタグを追加し、スタイルclear:bothを追加します。

3. フローティング要素を含む親タグにスタイルのオーバーフローを非表示または自動に追加します。

4. 親pがzoomを定義します

関連チュートリアルの推奨事項: CSS ビデオチュートリアル

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