Web-Front-End-CSS-Kapitel für schriftliche Testfragenbank

Im vorherigen Artikel „Datenbank für geschriebene Web-Front-End-Testfragen – HTML“ haben wir einige Front-End-Interviewfragen zu HTML geteilt. Der folgende Artikel folgt dem vorherigen und teilt die schriftlichen Testfragen (mit Antworten) für den CSS-Teil. Mal sehen, wie viele davon Sie richtig beantworten können!

1. Ist bei CSS-Eigenschaften die Groß-/Kleinschreibung beachtet?

 ```
 ul {
     MaRGin: 10px;
 }
 ```

A: Keine Unterscheidung. Bei HTML und CSS wird die Groß-/Kleinschreibung nicht beachtet, aber für eine bessere Lesbarkeit und Zusammenarbeit im Team werden sie im Allgemeinen in Kleinbuchstaben geschrieben. In XHTML müssen Elementnamen und Attribute kleingeschrieben werden.

2. Funktioniert das Festlegen von Rand oben und Rand unten bei Inline-Elementen?

A: Funktioniert nicht. (Die Antwort ist, dass es funktioniert, aber ich persönlich denke, dass es falsch ist.) Die Elemente in

html sind in ersetzte Elemente und nicht ersetzte Elemente unterteilt.

• Ein Ersatzelement ist ein Element, das als Platzhalter für andere Inhalte verwendet wird. Das typischste ist img, das lediglich auf eine Bilddatei verweist. Und auch die meisten Formularelemente werden ersetzt, wie z. B. Eingaben usw.

• Nicht ersetzte Elemente sind Elemente, deren Inhalt im Dokument enthalten ist. Beispielsweise ist ein Absatz ein nicht ersetztes Element, wenn sein Textinhalt innerhalb des Elements selbst platziert ist.

Um zu besprechen, ob „Margin-Top“ und „Margin-Bottom“ bei Inline-Elementen funktionieren, müssen wir Inline-Ersetzungselemente und Inline-Nicht-Ersetzungselemente separat besprechen.

Zunächst sollten wir klarstellen, dass Ränder auf Inline-Elemente angewendet werden können. Dies ist in der Spezifikation zulässig. Da Ränder jedoch auf ein nicht ersetztes Inline-Element angewendet werden, hat dies keinen Einfluss auf die Zeilenhöhe . Da die Ränder tatsächlich transparent sind. Es gibt also keinen visuellen Effekt auf die Angabe von Rand oben und Rand unten. Der Grund dafür ist, dass die Ränder nicht ersetzter Inline-Elemente die Zeilenhöhe eines Elements nicht ändern. Dies ist für den linken und rechten Rand nicht ersetzter Inline-Elemente nicht der Fall, was Auswirkungen hat.

Die für das ersetzte Element festgelegten Ränder wirken sich auf die Zeilenhöhe aus, die je nach Wert des oberen und unteren Rands die Zeilenhöhe erhöhen oder verringern kann. Der linke und rechte Rand eines inline ersetzten Elements haben die gleiche Wirkung wie der linke und rechte Rand eines nicht ersetzten Elements. Werfen wir einen Blick auf die Demo:

http://codepen.io/paddingme/pen/JwCDF

3 F: Erhöht die Einstellung von padding-top und padding-bottom die Höhe eines Inline-Elements?

(Die ursprüngliche Frage lautet: Fügt das Festlegen von padding-top und padding-bot auf einem Inline-Element dessen Abmessungen hinzu?)

A: Die Antwort lautet Nein. Ich bin etwas verwirrt über die gleiche Frage. Ich verstehe nicht ganz, was die Abmessungen hier bedeuten. Legen Sie es beiseite und lassen Sie es uns analysieren. Legen Sie für Inline-Elemente den linken und rechten Abstand fest. Der linke und rechte Abstand ist dann sichtbar. Beim Festlegen des oberen und unteren Abstands können Sie sehen, dass sich der Abstandsbereich nach dem Festlegen der Hintergrundfarbe vergrößert. Bei nicht ersetzten Inline-Elementen wird die Zeilenhöhe nicht beeinflusst und das übergeordnete Element wird nicht gestreckt. Bei ersetzten Elementen wird das übergeordnete Element erweitert. Schauen Sie sich zum besseren Verständnis die Demo an:

http://codepen.io/paddingme/pen/CnFpa

4. F: Stellen Sie die Schriftgröße von p: 10rem ein, wenn der Benutzer den Browser zurücksetzt oder zieht window , ändert sich auch die Textgröße?

A: Nein.

rem ist eine relative Maßeinheit, die auf der Größe der Schriftgröße im HTML-Stammelement basiert. Die Größe des Texts ändert sich nicht, wenn sich die Größe des Fensters ändert.

5. F: Pseudoklassenselektor: Aktiviert wirkt sich auf den Eingabetyp des Radios oder Kontrollkästchens aus, nicht jedoch auf die Option.

A: Nein.

Die Definition des überprüften Pseudoklassenselektors ist offensichtlich:

Der :checked CSS-Pseudoklassenselektor repräsentiert jedes Radio (d11dad02a1f3abd212da65221b2dc681), Kontrollkästchen (ec5f55af7cf18aa2c2e2ef8d79893e18in einem 221f08282418e2996498697df914ce4e), das aktiviert oder in den Ein-Zustand versetzt wird. Der Benutzer kann diesen Zustand ändern, indem er auf das Element klickt oder einen anderen Wert auswählt : Die überprüfte Pseudoklasse gilt nicht mehr für dieses Element, wohl aber für das entsprechende Element.

6. F: In HTML-Text zeigt Pseudoklasse: root immer auf das HTML-Element?

A: Nein (ja ==|| steht in der Antwort). Das Folgende ist ein Auszug aus Zhihu: Verweisen root und html auf dasselbe Element in CSS3? Die Antwort:

Ein einzelner Finger schafft die Wurzel. Dieses Stammverzeichnis darf nicht html sein. Wenn es sich um ein Fragment-HTML handelt und kein Stammverzeichnis erstellt wird, ist es das Stammverzeichnis des Fragments. Geben Sie die URL unten in einen Browser ein, der Daten-URLs unterstützt (Firefox, Chrome, Safari, Opera) und Sie sehen:

data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>

7. Kann die Translate()-Methode die Position eines Elements auf der Z-Achse verschieben? ?

A: Nein. Die Methode translator() kann nur die Verschiebung auf der x-Achse und der y-Achse ändern.

8. F: Welche Farbe hat der Text „Wurst“ im folgenden Code?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul {color:red;}
li {color:blue;}

A: blau.

9. F: Welche Farbe hat der Text „Wurst“ im folgenden Code?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul {color:red;}
#must-buy {color:blue;}

A: blau.

10. F: Welche Farbe hat der Text „Wurst“ im folgenden Code?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}

A: blau.

11、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

A: blue。

12、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}

A: blue。

13、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}

A: blue。

14、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}

A: blue。

15、Q:#example位置如何变化：

<p id="example">Hello</p>

#example {margin-bottom: -5px;}

A: 向上移动5px。

16、Q: #example位置如何变化：

<p id="example">Hello</p>

#example {margin-left: -5px;}

A: 向左移动5px。

17、#i-am-useless 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#i-am-useless {background-image: url('mypic.jpg');}

A: 不会

18、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#test2 {
    background-image: url('mypic.jpg');
    display: none;
}

A: 会被下载。

19、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

A: 不会被下载。

20、Q: only 选择器的作用是？

@media only screen and (max-width: 1024px) {argin: 0;}

A：停止旧版本浏览器解析选择器的其余部分。

only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。

21、Q:overfloa:hidden 是否形成新的块级格式化上下文？

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>

div {overflow: hidden;}
p {float: left;}

A：会形成。

会触发BFC的条件有：

• float的值不为none。

• overflow的值不为visible。

• display的值为table-cell, table-caption, inline-block 中的任何一个。

• position的值不为relative 和static。

22、Q: screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？

@media only screen and (max-width: 1024px) {margin: 0;}

A: 浏览器视窗

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonWeb-Front-End-CSS-Kapitel für schriftliche Testfragenbank. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!