CSS
Das CSS-Box-Modell vorstellen?
(1) Es gibt zwei Typen: IE-Box-Modell und Standard-W3C-Box-Modell; der Inhaltsteil von IE umfasst Rahmen und Auffüllung;
(2) Box-Modell: Inhalt, Polsterung, Rand, Rand.
Was sind die CSS-Selektoren? Welche Eigenschaften können vererbt werden? Wie wird der Prioritätsalgorithmus berechnet? Was sind die neuen Pseudoklassen in CSS3?
* 1. ID-Selektor (# myid)
2. Klassenselektor (.myclassname)
3. Tag-Selektor (div, h1, p)
4. Angrenzender Selektor (h1 + p)
5. Untergeordneter Selektor (ul < ; li)
6. Nachkommenselektor (li a)
7. Platzhalterselektor (*)
8. Attributselektor (a[rel = "external"])
9. Pseudoklassenauswahl Container (a: hover, li: nth - child)
* Vererbbare Stile: Schriftgröße, Schriftfamilienfarbe, UL LI DL DD DT;
* Nicht vererbbare Stile: Randpolsterung, Randbreite, Höhe;
* Prioritätsprinzip, die nächstgelegene Stildefinition hat Vorrang unter dem gleichen Gewicht;
* Der Ladestil unterliegt der zuletzt geladenen Positionierung.
-Element aus, das zum ersten
-Element gehört.
p:last-of-type wählt jedes
-Element aus, das das letzte
-Element ist.
p:only-of-type wählt jedes
-Element aus, das das einzige
-Element ist.
p:only-child Wählt jedes
-Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist.
p:nth-child(2) Wählt jedes
-Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist.
:enabled :disabled steuert den deaktivierten Status des Formularsteuerelements.:aktiviert Das Optionsfeld oder Kontrollkästchen ist aktiviert.
Wie zentriere ich ein Div? Wie zentriere ich ein schwebendes Element?
Legen Sie eine Breite für das Div fest und fügen Sie dann das Attribut „margin:0 auto“ hinzu
div{
width:200px;
margin:0 auto;
Bestimmen Sie die Ebene mit der Breite 500 und der Höhe 300 des Containers.
Legen Sie den äußeren Rand der Ebene fest. .div {
Breite: 500 Pixel; Höhe: 300 Pixel. // Die Höhe kann weggelassen werden. 250px;
position :relative; Relative Positionierung
background-color:pink;//Der Effekt ist leicht zu erkennen
left:50%;
top:50%;
}
Listen Sie die Anzeigewerte auf und erklären Sie sie Funktionen. Welchen Wert haben Position, relativer und absoluter Positionierungsursprung?
Block wird wie ein Blocktypelement angezeigt.
kein Standardwert. Erscheint wie ein Inline-Elementtyp.Inline-Block wird wie ein Inline-Element angezeigt, sein Inhalt wird jedoch wie ein Blocktypelement angezeigt.
Listenelement wird wie ein Blocktypelement angezeigt und fügt Stillisten-Markup hinzu.
2.
*absolut
Erzeugen Sie ein absolut positioniertes Element, das relativ zum ersten übergeordneten Element positioniert ist, anders als die statische Positionierung.
*behoben (alter IE unterstützt nicht)
Erzeuge absolut positionierte Elemente, positioniert relativ zum Browserfenster.
*relative
Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist.
* statischer Standardwert. Ohne Positionierung erscheinen Elemente im normalen Fluss
* (Z-Index-Deklarationen oben, unten, links, rechts werden ignoriert).
* inherit gibt an, den Wert des Positionsattributs vom übergeordneten Element zu erben.
Was sind die neuen Funktionen von CSS3?
Spezialeffekte zum Text hinzufügen (Text-Shadow), linearen Farbverlauf (Gradient), Drehung (Transformation)
Transformieren: Drehen ( 9deg) scale(0.85,0.90) translator(0px,-30px) skew(-9deg,0deg);//Rotation, Skalierung, Positionierung, NeigungWeitere CSS-Selektoren hinzugefügt Multi-Hintergrund-RGBA
Eine vollständige Anleitung Entwerfen Sie das Bildschirmwortlayout?
- Aufgrund von Browserkompatibilitätsproblemen haben verschiedene Browser unterschiedliche Standardwerte für einige Tags. Wenn CSS nicht initialisiert ist, kommt es häufig zu Unterschieden bei der Seitenanzeige zwischen den Browsern.
- Natürlich wird der Initialisierungsstil einen gewissen Einfluss auf SEO haben, aber Sie können nicht Ihren Kuchen haben und ihn auch essen, sondern versuchen, ihn mit der geringsten Auswirkung zu initialisieren.
*Die einfachste Initialisierungsmethode ist: * {padding: 0; margin: 0;} (nicht empfohlen)
Initialisierung im Taobao-Stil:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote , dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select , textarea { Schriftart: 12px/1,5 Tahoma, Arial, 5b8b4f53; ; }
code, kbd, samp { font-family:couriernew, courier, monospace; :none; }
a:hover { text-decoration:underline }
sup { Vertical-align:text-bottom; }
legend { color:#000 }
fieldset, img { border:0; }
button, input, select, textarea { border-collapse:collapse; Unterscheidet sich die Berechnungsmethode für den enthaltenen Block von der für den normalen Durchfluss?
Was passiert, wenn die Funktionen Position, Anzeige, Margenkollaps, Überlauf und Float einander überlagern?
Verständnis der BFC-Spezifikationen?
(Ein Konzept in der W3C CSS 2.1-Spezifikation, das bestimmt, wie ein Element seinen Inhalt sowie seine Beziehung und Interaktion mit anderen Elementen positioniert.)
Durch CSS definierte Gewichtung
Im Folgenden sind die Regeln für die Gewichtung aufgeführt: Tags Das Gewicht beträgt 1, das Gewicht der Klasse beträgt 10 und das Gewicht der ID beträgt 100. Die folgenden Beispiele veranschaulichen die Gewichtungswerte verschiedener Definitionen:
/*Das Gewicht beträgt 1*/
div{}
/ *Das Gewicht beträgt 10*/.class1{
}
#id1{
}/*Das Gewicht beträgt 100+1=101*/
#id1 div{
}
/ *Das Gewicht beträgt 10+1=11* /
.class1 div{
}
/*Das Gewicht beträgt 10+10+1=21*/
.class1 .class2 div{
}
Wenn die Gewichte gleich sind , der zuletzt definierte Stil wird funktionieren, aber das sollte vermieden werden. Diese Situation entsteht
Erklären Sie Float und sein Funktionsprinzip? Tipps zum Löschen von Floats
Haben Sie jemals Medienabfragen für das mobile Layout verwendet?
CSS-Präprozessor verwenden? Wie das Eine?
SASS
面试不怕不怕啦