CSS に関する面接での質問-CSSチュートリアル-php.cn

CSS に関する面接での質問

この記事は主に CSS に関するインタビューの質問を共有するものであり、非常に参考になるものです。編集者をフォローして見てみましょう。

1 上下のマージンの重なりの問題

重なり合う要素の周囲にコンテナをラップし、コンテナをトリガーして 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属性。
        }

ログイン後にコピー

トピックの推奨事項: 2020年CSS面接質問まとめ(最新)

2 要素をfloatに設定した後、要素の表示値は何ですか?

は自動的にdisplay:blockに変更されます

3 モバイルレイアウトにメディアクエリを使用したことがありますか?

メディアクエリを通じて、異なるサイズや寸法のメディアに異なるCSSを定義して、対応するデバイスのディスプレイに適応させることができます。

Inside
CSS : @media のみの画面と (max-device-width:480px) {/css スタイル/}

4 CSS プリプロセッサを使用しますか?

Less Sass

5 CSS を最適化し、パフォーマンスを向上させる方法は何ですか?

過度の制約を避ける
子孫セレクターを避ける
チェーンセレクターを避ける
コンパクトな構文を使用する
不必要な名前空間を避ける
不必要な重複を避けます
セマンティクスを表す名前を使用するのが最善です。適切なクラス名は、クラスの外観ではなく、それが何であるかを説明する必要があります
避けてください!重要なことは、他のセレクターを選択することもできます
ルールをできるだけ合理化するために、異なるカテゴリで繰り返されるルールをマージすることもできます

6 ブラウザは CSS セレクターをどのように解析しますか?

CSS セレクターは右から左に解析されます。左から右へのマッチングがルールと矛盾していることが判明した場合は、バックトラッキングが必要となり、パフォーマンスが大幅に低下します。右から左に一致する場合は、まず各ノードの右端のノードをすべて検索し、ルート要素または条件を満たす一致ルールが見つかるまでその親ノードを上方向に検索します。その後、このブランチのトラバースが終了します。 2 つのマッチングルールのパフォーマンスは大きく異なります。これは、右から左へのマッチングでは、最初のステップの条件を満たさない多数の右端のノード (葉ノード) がフィルターで除外されるのに対し、左から左へのマッチングのパフォーマンスは大きく異なります。右一致ルール失敗した検索ではすべてが無駄になります。
CSS が解析された後、解析結果を DOM ツリーの内容とともに分析して、最終的に描画に使用されるレンダーツリーを構築する必要があります。レンダーツリー (WebKit の「添付」プロセス) を作成するとき、ブラウザーは CSS 解析結果 (スタイルルール) に基づいて、DOM ツリー内の各要素に対してどのような種類のレンダーツリーを生成するかを決定する必要があります。

7 Web ページでは奇数のフォントを使用する必要がありますか? 偶数のフォントを使用する必要がありますか?なぜ？

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

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

何时使用margin：

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

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

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

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

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

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

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

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

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

ログイン後にコピー

12 视差滚动效果？

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

CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
jQuery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高
插件实现方式
例如：parallax-scrolling，兼容性十分好

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

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

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

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

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

多行文本垂直居中：需要设置display属性为inline-block。

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

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

ログイン後にコピー

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

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

17 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"
/>

ログイン後にコピー

18 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

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

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

可以将
代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

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

有空格时候会有间隙解决：移除空格
マージンが正の場合の解決策: margin に負の値を使用します
font-size を使用する場合の解決策: font-size:0、letter-spacing、word-spacing

21 はい高さ適応型の p 。内部に 2 つの ps があり、1 つは高さ 100px で、もう 1 つは残りの高さを埋めることが期待されます

外側の p は、position:relative を使用し、適応高さの要件を持つ p は、position:absolute を使用します。 ; 上: 100px; 下: 0; 左: 0

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

png は、可逆データ圧縮ビットマップファイル形式であるポータブルネットワークグラフィックスであり、その利点は、高い圧縮率と優れた色です。ほとんどの場所でご利用いただけます。
jpg は、写真に使用される歪み圧縮方法で、トーンと色の滑らかな変化に優れた効果を発揮します。 www で写真を保存および送信するために使用される形式。
gif は、8 ビットカラーの True Color 画像を再現するビットマップファイル形式です。アニメーション効果を実現できます
webp 形式は、2010 年に Google によって開始された画像形式です。圧縮率は jpg のわずか 2/3 で、サイズは png より 45% 小さくなります。デメリットとしては、圧縮に時間がかかることと、現時点ではGoogleとOperaが対応していることです。

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

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

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

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

25 CSS スプライトについて説明します

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