Einige Interviewfragen zu CSS

Dieser Artikel teilt hauptsächlich eine Interviewfrage zu CSS mit Ihnen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

1 Das Problem überlappender oberer und unterer Ränder

Wickeln Sie eine Schicht Container um die überlappenden Elemente und lösen Sie sie aus die Generierung des Containers A BFC.
Beispiel:

<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属性。
        }

Themenempfehlung: Zusammenfassung der CSS-Interviewfragen 2020 (aktuell)

2 Wie hoch ist der Anzeigewert des Elements, nachdem das Element auf Float gesetzt wurde?

wechselt automatisch zu display:block

3 Haben Sie schon einmal Medienabfragen für das mobile Layout verwendet?

Durch Medienabfragen können Sie unterschiedliche CSS für Medien unterschiedlicher Größe und Abmessungen definieren, um sie an die Anzeige des entsprechenden Geräts anzupassen.

1. inside

2. CSS: @media nur Bildschirm und (max-device-width:480px) {/CSS-Stil/}

4 Benutzen Sie CSS-Präprozessoren?

Weniger Frechheit

5 Welche Möglichkeiten gibt es, CSS zu optimieren und die Leistung zu verbessern?

1. Übermäßige Einschränkungen vermeiden

2. Nachkommenselektoren vermeiden

3. Kettenselektoren vermeiden

4. Kompakte Syntax verwenden

5. Vermeiden Sie unnötige Namespaces

6. Vermeiden Sie unnötige Duplikate

7. Es ist am besten semantische Namen verwenden. Ein guter Klassenname sollte beschreiben, was es ist, und nicht so etwas wie

8. Vermeiden! Wichtig: Sie können andere Selektoren auswählen

9. Um die Regeln so weit wie möglich zu optimieren, können Sie wiederholte Regeln in verschiedenen Kategorien zusammenfassen

6 Wie analysiert der Browser CSS-Selektoren?

CSS-Selektoren werden von rechts nach links analysiert. Wenn sich herausstellt, dass die Zuordnung von links nach rechts nicht mit den Regeln übereinstimmt, ist eine Rückverfolgung erforderlich, was zu erheblichen Leistungseinbußen führt. Wenn Sie von rechts nach links übereinstimmen, suchen Sie zunächst alle Knoten ganz rechts. Suchen Sie für jeden Knoten nach oben nach seinem übergeordneten Knoten, bis das Wurzelelement oder eine Übereinstimmungsregel gefunden wird, die die Bedingungen erfüllt. Anschließend endet die Durchquerung dieses Zweigs. Die Leistung der beiden Matching-Regeln ist sehr unterschiedlich, da der Rechts-nach-Links-Matching eine große Anzahl von Knoten ganz rechts (Blattknoten) herausfiltert, die die Bedingungen im ersten Schritt nicht erfüllen, während die Leistung des Links-nach-Links-Matchings sehr unterschiedlich ist. Richtige Übereinstimmungsregel Alles wird durch fehlgeschlagene Suchvorgänge verschwendet.
Nachdem das CSS analysiert wurde, müssen die analysierten Ergebnisse zusammen mit den Inhalten des DOM-Baums analysiert werden, um einen Render-Baum zu erstellen, der letztendlich zum Zeichnen verwendet wird. Beim Erstellen eines Render-Baums (dem „Anhang“-Prozess in WebKit) muss der Browser anhand der CSS-Analyseergebnisse (Stilregeln) bestimmen, welche Art von Render-Baum für jedes Element im DOM-Baum generiert werden soll.

7 Sollten Sie auf Webseiten eine ungerade oder gerade Anzahl von Schriftarten verwenden? Warum?

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

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

何时使用margin：

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

2. 空白处不需要背景色

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

何时使用padding：

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

2. 空白处需要背景颜色

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

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

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

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

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

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

2. 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效果。

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

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

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

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

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

2. ::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，就没有空格了。
解决方法：

1. 可以将

2. 代码全部写在一排

3. 浮动li中float：left

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

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

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

2. Lösung, wenn der Rand positiv ist: Negativen Wert für den Rand verwenden

3. Lösung, wenn Schriftgröße verwendet wird: Schriftart - Größe: 0, Buchstabenabstand, Wortabstand

21 Es gibt ein höhenadaptives p mit zwei ps darin, eines mit a Höhe von 100px, in der Hoffnung, dass ein anderes die verbleibende Höhe ausfüllt

Das äußere p verwendet position: relative; das p, das adaptive Höhe erfordert, verwendet position: absolute; 100px; unten: 0; links: 0

22 Erklären Sie diese Bildformate PNG, JPG und GIF und wann Sie sie verwenden sollten. Haben Sie jemals etwas über WebP gelernt?

1. png ist ein tragbares Netzwerkgrafikformat (Portable Network Graphics), ein verlustfreies Datenkomprimierungs-Bitmap-Dateiformat. Die Vorteile sind: hohe Komprimierungsrate, Farbe Gut. An den meisten Orten verfügbar.

2. jpg ist eine Verzerrungskomprimierungsmethode für Fotos. Es handelt sich um eine destruktive Komprimierung, die bei sanften Ton- und Farbänderungen gute Arbeit leistet. Ein Format zum Speichern und Übertragen von Fotos auf www.

3. gif ist ein Bitmap-Dateiformat, das Echtfarbenbilder mit 8-Bit-Farbe reproduziert. Es können Animationseffekte erzielt werden.

4. Das WebP-Format ist ein 2010 von Google eingeführtes Bildformat. Die Komprimierungsrate beträgt nur 2/3 von JPG, und das Die Größe ist 45 % kleiner als PNG. Die Nachteile sind, dass die Komprimierung länger dauert und die Kompatibilität nicht gut ist. Derzeit wird sie von Google und Opera unterstützt.

23 Was ist der Unterschied zwischen dem Schreiben des Style-Tags nach dem Körper und vor dem Körper?

Die Seite wird von oben nach unten geladen. Natürlich wird zuerst der Stil geladen.
wird nach dem Body-Tag geschrieben. Da der Browser das HTML-Dokument Zeile für Zeile analysiert, führt das Parsen des am Ende geschriebenen Stylesheets (Umriss oder im Style-Tag geschrieben) dazu, dass der Browser das vorherige Rendern stoppt und wartet Laden. Und wenn das Stylesheet nach Abschluss der Analyse erneut gerendert wird, kann unter IE in Windows das FOUC-Phänomen auftreten (d. h. das durch Stilfehler verursachte Seitenflackerproblem)

24 CSS-Attribut-Überlaufattributdefinition Wie wird der Inhalt des Überlaufelement-Inhaltsbereichs behandelt

Wenn der Parameter Scroll ist, wird eine Bildlaufleiste angezeigt.
Wenn der Parameter „Auto“ lautet, wird eine Bildlaufleiste angezeigt, wenn der Inhalt des untergeordneten Elements größer als der des übergeordneten Elements ist.
Wenn der Parameter sichtbar ist, erscheint der Überlaufinhalt außerhalb des übergeordneten Elements.
Wenn der Parameter ausgeblendet ist, wird der Überlauf ausgeblendet.

25 Erklären Sie CSS-Sprites

Fügen Sie alle an einer Seite beteiligten Bilder in ein großes Bild ein. Gehen Sie und verwenden Sie es dann die Kombination aus CSS-Hintergrundbild, Hintergrundwiederholung und Hintergrundposition, um den Hintergrund zu positionieren. Durch die Verwendung von CSS-Sprites können die HTTP-Anfragen von Webseiten erheblich reduziert werden, wodurch die Leistung der Seite erheblich verbessert wird. CSS-Sprites können die Anzahl der Bildbytes reduzieren.

Verwandte Tutorial-Empfehlungen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEinige Interviewfragen zu CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!