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.
p:last-of-type w?hlt jedes <p>-Element aus, das das letzte <p>-Element ist.
p:only-of-type w?hlt jedes <p>-Element aus, das das einzige <p>-Element ist.
p:only-child W?hlt jedes <p>-Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist.
p:nth-child(2) W?hlt jedes <p>-Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist.
: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, Neigung Weitere 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
1
0
0
歡迎選擇我的課程，讓我們一起見證您的進步~~
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
