Web-Front-End-CSS-Kapitel für schriftliche Testfragenbank
WBOY
Freigeben： 2022-04-21 14:39:25
nach vorne
3531 Leute haben es durchsucht
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;
}
```
Nach dem Login kopieren
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 (), Kontrollkästchen (in einem
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>
Nach dem Login kopieren
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?
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!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
