基本的な CSS 面接の質問の概要

この記事では主に、CSS の面接での基本的な質問 50 個を紹介し、お役に立てれば幸いです。

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

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

2ボックスサイズ属性？

要素のボックスモデルの解析モードを制御するために使用され、デフォルトはcontent-boxです
context-box: W3Cの標準ボックスモデル、要素の高さ/幅属性の設定は、コンテンツ部分の高さ/幅を参照します
ボーダーボックス: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-size、font-ファミリー、カラー

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

優先順位 (近接性の原則): ! important > [ id > class > ]
! important は inline よりも優先されます

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

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

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

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;

フレックスボックスを使用して中央揃えするよりエレガントな方法もあります。それは将来的には出ます。

7 表示の値は何ですか?それぞれの役割を説明してください

inline (デフォルト) - インライン
none - 非表示
block - ブロック表示
table - テーブル表示
list-item - 項目リスト
inline-block

8 位置の値?

静的 (デフォルト): 通常のドキュメント フローに従って配置します。
相対的 (相対位置決め): ドキュメント フローから離脱せず、上、下、左、右の位置決めに独自の静的位置を参照します。絶対 (絶対配置): 参照距離 静的ではない最新の親要素は、上、下、左、右を通して配置されます。
固定 (固定配置): 固定参照オブジェクトは視覚ウィンドウです。

9 CSS3 の新機能は何ですか?

1. RGBAと透明度

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

3. word-wrap (長い単語の場合は分割不可)ラップ: ブレークワード

4. text-shadow: text-shadow: 5px 5px 5px #FF0000; (水平方向の影、垂直方向の影、ぼかし距離、影の色)

5. font-face プロパティ: 定義 独自のフォント

6. 丸い角 (境界線の半径): 丸い角を作成するには、border-radius プロパティが使用されます

7. border-image: border-image: url(border.png) 30 30round

8. box-shadow: box-シャドウ: 10px 10px 5px #888888

9. メディアクエリ: ブラウザのサイズが変わると異なる属性を使用する 2 つの CSS セットを定義します

10 CSS3 の flexbox (フレキシブル ボックス レイアウト モデル) について説明してください)、適用可能なシナリオは?

このレイアウト モデルの目的は、コンテナ内のアイテムのスペースをレイアウト、配置、割り当てするためのより効率的な方法を提供することです。従来のレイアウト方法では、ブロック レイアウトはブロックを上から下に垂直方向に配置しますが、インライン レイアウトはブロックを水平方向に配置します。 Flexbox レイアウトには、そのような固有の方向制限がなく、開発者は自由に操作できます。

トライアルシナリオ: 柔軟なレイアウトはモバイルフロントエンド開発に適しており、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. 3 つのブロックの高さと幅が決定されます

2. 上のブロックはマージンを使用します。 0 自動

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已经独立识别。

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

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

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

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

7. 超链接访问过后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值和使用display：none没有什么区别。

17 display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

18 position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

19 对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC规定了内部的Block Box如何布局。
定位方案：

1. 内部的Box会在垂直方向上一个接一个放置。

2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

3. 每个元素的margin box 的左边，与包含块border box的左边相接触。

4. BFC的区域不会与float box重叠。

5. BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

6. 计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

1. 根元素，即html

2. float的值不为none（默认）

3. overflow的值不为visible（默认）

4. display的值为inline-block、table-cell、table-caption

5. position的值为absolute或fixed

20 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素

2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后

3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1. 父级p定义height

2. 最后一个浮动元素后加空p标签 并添加样式clear:both。

3. 包含浮动元素的父标签添加样式overflow为hidden或auto。

4. 父级p定义zoom

21 上下margin重合的问题

在重合元素外包裹一层容器，并触发该容器生成一个BFC。
例子：

<p class="aside"></p>
<p class="text">
    <p class="main"></p>
</p>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个p，通过改变此p的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

22设置元素浮动后，该元素的display值是多少？

自动变成display:block

23 移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

1. 里边

2. CSS : @media only screen and (max-device-width:480px) {/css样式/}

24 使用 CSS 预处理器吗？
Less sass

25 CSS优化、提高性能的方法有哪些？

1. 避免过度约束

2. 避免后代选择符

3. 避免链式选择符

4. 使用紧凑的语法

5. 避免不必要的命名空间

6. 避免不必要的重复

7. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

8. 避免！important，可以选择其他选择器

9. 尽可能的精简规则，你可以合并不同类里的重复规则

26 浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

27 在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

28 margin和padding分别适合什么场景使用？

何时使用margin：

1. 需要在border外侧添加空白

2. 空白处不需要背景色

3. 上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

1. 需要在border内侧添加空白

2. 空白处需要背景颜色

3. 上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

29 元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

30 全屏滚动的原理是什么？用到了CSS的哪些属性？

1. 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

2. overflow：hidden；transition：all 1000ms ease；

31 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

32 视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

1. CSS3实现
   优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器

2. jQuery实现
   通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
   优点：能兼容到各个版本的，效果可控性好
   缺点：开发起来对制作者要求高

3. 插件实现方式
   例如：parallax-scrolling，兼容性十分好

33 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

1. 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

2. ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before  ::after

34 你对line-height是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。

35 怎么让Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

36 让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

37 position:fixed;在android下无效怎么处理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

38 如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

39 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：

1. 可以将

2. 代码全部写在一排

3. 浮动li中float：left

4. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

40 display:inline-block 什么时候会显示间隙？

1. 有空格时候会有间隙 解决：移除空格

2. margin正值的时候 解决：margin使用负值

3. 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

41 高さ適応型の p があり、1 つは高さ 100px で、もう 1 つは高さの位置を埋めるようにします。 adaptive p は、position:Absolute、top:100px、bottom:0、left:0 を使用します

42 これらの画像形式と、それらを使用する場合について説明します。 WebP について学んだことがありますか?

png は、可逆データ圧縮ビットマップ ファイル形式であるポータブル ネットワーク グラフィックスであり、その利点は、高い圧縮率と優れた色です。 ほとんどの場所でご利用いただけます。

1. jpg は写真に使用される歪み圧縮方法で、トーンと色の滑らかな変化に優れた効果を発揮します。 www で写真を保存および送信するために使用される形式。

2. gif は、8 ビット カラーの True Color 画像を再現するビットマップ ファイル形式です。アニメーション効果を実現できます

3. webp 形式は、2010 年に Google が発表した画像形式です。圧縮率は jpg の 2/3 で、サイズは png より 45% 小さくなります。欠点は、圧縮に時間がかかることと互換性が良くないことです。現在、Google と Opera がサポートしています。

4. 43 ボディの後に書かれるスタイルタグとボディの前に書かれるスタイルタグの違いは何ですか？

ページの読み込みは上から下に行われます。もちろん、スタイルが最初に読み込まれます。 body タグの後に記述されます。ブラウザは HTML ドキュメントを 1 行ずつ解析するため、最後に記述されたスタイル シート (アウトラインまたはスタイル タグ内に記述されたもの) を解析すると、ブラウザは前のレンダリングを停止し、読み込みと解析を待機します。スタイルシートが再レンダリングされた後、Windows IE で FOUC が発生する可能性があります (つまり、スタイルの失敗によって引き起こされるページのちらつきの問題)

44 CSS 属性のオーバーフロー属性は、オーバーフロー要素のコンテンツ領域のコンテンツを処理する方法を定義します。 ?

パラメータ スクロールすると、スクロールバーが表示されます。 パラメータがautoの場合、子要素の内容が親要素より大きい場合にスクロールバーが表示されます。 パラメータが表示されると、オーバーフローコンテンツが親要素の外側に表示されます。

パラメータを非表示にすると、オーバーフローも非表示になります。

45 CSS スプライトについて説明しましょう

ページに含まれるすべての画像を 1 つの大きな画像に含め、CSS の背景画像、背景繰り返し、背景位置の組み合わせを背景の配置に使用します。 CSS スプライトを使用すると、Web ページの http リクエストが大幅に削減され、ページのパフォーマンスが大幅に向上し、画像のバイト数が削減されます。 関連する推奨事項:

JavaScript の 2 次元配列の面接の質問

HTML5 の面接の質問 PC とモバイルの違い

頻繁に使用される HTML5 の面接の質問 10 個

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