Dieser Artikel reicht für CSS aus. Es handelt sich um eine umfassende Sammlung von CSS-Grundlagen, mit denen sich Wissen schnell überprüfen lässt und die erste Wahl für Vorstellungsgespräche ist.

Language 2024-02-10 13:47:11 views: null

1 Einführung in CSS

CSS ist die Abkürzung für Cascading Style Sheets.
CSS ist auch eine Auszeichnungssprache, die hauptsächlich zum Festlegen des Textinhalts (Schriftart, Größe, Ausrichtung usw.), der Bildform (Breite und Höhe, Rahmenstil,
Ränder usw.) in HTML-Seiten sowie des Layouts und des Layouts verwendet wird Erscheinungsbild Anzeigestil der Seite. .

Weitere CSS-Inhalte finden Sie unter MDN: Klicken Sie zum Senden

1.1 CSS-Syntaxspezifikationen

Alle Stile sind enthalten

<head>
 <style>
 h4 {
      
      
 color: blue;
 font-size: 100px;
 }
 </style>
</head>

1.2 Drei Hauptfunktionen von CSS

CSS weist drei sehr wichtige Merkmale auf: Kaskadierung, Vererbung und Priorität.

1.2.1 Stapelbarkeit

Wenn derselbe Selektor denselben Stil festlegt, überschreibt (kaskadiert) ein Stil den anderen widersprüchlichen Stil. Die Kaskadierung löst hauptsächlich
das Problem des Stilkonflikts
. Prinzip der Kaskadierung:

  • Stilkonflikte folgen dem Prinzip der Nähe: Es wird derjenige Stil ausgeführt, der näher an der Struktur liegt.
  • Stile stehen nicht in Konflikt oder überschneiden sich

1.2.2 Vererbung

Vererbung in CSS: Untergeordnete Tags erben einige Stile des übergeordneten Tags, z. B. Textfarbe und Schriftgröße.
Durch die richtige Verwendung der Vererbung kann der Code vereinfacht und die Komplexität von CSS-Stilen verringert werden.
Untergeordnete Elemente können die Stile der übergeordneten Elemente erben (Text-, Schriftart- und Linienelemente am Anfang dieser Elemente sowie das Farbattribut können geerbt werden). )

  • Vererbung der Zeilenhöhe
body {
 font:12px/1.5 Microsoft YaHei；
}
  1. Die Reihenhöhe kann der Einheit folgen oder auch nicht.
  2. Wenn das untergeordnete Element keine Zeilenhöhe festlegt, erbt es die Zeilenhöhe des übergeordneten Elements, die 1,5 beträgt.
  3. Zu diesem Zeitpunkt beträgt die Zeilenhöhe des untergeordneten Elements: Textgröße des aktuellen untergeordneten Elements * 1,5
  4. Körperzeilenhöhe 1,5 Der größte Vorteil dieser Schreibweise besteht darin, dass die darin enthaltenen Unterelemente die Zeilenhöhe automatisch an ihre eigene Textgröße anpassen können.

1.2.3 Priorität

Wenn mehrere Selektoren für dasselbe Element angegeben werden, wird eine Priorität generiert.
Wenn die Selektoren gleich sind, wird eine Kaskadierung durchgeführt. Wenn die Selektoren unterschiedlich sind, werden die Selektoren basierend auf der Gewichtung des Selektors ausgeführt.
Fügen Sie hier eine Bildbeschreibung ein

  1. Das Gewicht besteht aus 4 Zahlengruppen, es wird jedoch kein Übertrag erfolgen.
  2. Es versteht sich, dass der Klassenselektor immer größer als der Elementselektor ist, der ID-Selektor immer größer als der Klassenselektor ist und so weiter ...
  3. Die Ebenenbeurteilung erfolgt von links nach rechts. Wenn der Wert einer bestimmten Ziffer gleich ist, wird der Wert der nächsten Ziffer beurteilt.
  4. Eine einfache Mnemonik: Wildcard- und Vererbungsgewicht ist 0, Tag-Selektor ist 1, Klassen-(Pseudoklassen-)Selektor ist 10, ID-Selektor ist 100, Inline-Stylesheet ist 1000
    , !important ist unendlich.
  5. Die geerbte Gewichtung ist 0. Wenn das Element nicht direkt ausgewählt wird, erhält das untergeordnete Element unabhängig von der Gewichtung des übergeordneten Elements eine Gewichtung von 0.

Gewichtsüberlappung: Wenn es sich um einen zusammengesetzten Selektor handelt, überlappt sich das Gewicht und das Gewicht muss berechnet werden.

  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • a:hover -----—> 0,0,1,1
  • .nav a ------> 0,0,1,1

2 CSS-Selektoren

Selektoren sind in zwei Hauptkategorien unterteilt 基础选择器: und复合选择器

2.1 Grundlegende Selektoren

Der Basisselektor besteht aus einem einzigen Selektor, einschließlich: Etikettenselektor, Klassenselektor, ID-Selektor und Platzhalterselektor

2.1.1 Tag-Auswahl

Unter Tag-Selektor (Element-Selektor) versteht man die Verwendung von HTML-Tag-Namen als Selektor, deren Klassifizierung nach Tag-Namen und die Angabe eines
einheitlichen CSS-Stils für einen bestimmten Tag-Typ auf der Seite.

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 ...
}

Der Tag-Selektor kann alle Tags eines bestimmten Typs auswählen, z. B. alle <div>Tags und alle <span>Tags.
Vorteile: Es kann schnell und einheitlich Stile für Beschriftungen desselben Typs auf der Seite festlegen.
Nachteile: Sie können keine differenzierten Stile entwerfen, sondern nur alle aktuellen Tags auswählen.

2.1.2 Klassenauswahl

Wenn Sie verschiedene Tags differenziell auswählen oder ein oder mehrere Tags einzeln auswählen möchten, können Sie einen Klassenselektor verwenden. Der Klassenselektor wird in HTML durch das Klassenattribut dargestellt. In CSS wird der Klassenselektor mit einem Punkt „.“ angezeigt.

.类名 {
 属性1: 属性值1; 
 ...
}

In das Label-Klassenattribut können mehrere Klassennamen geschrieben werden, und mehrere Klassennamen müssen durch Leerzeichen getrennt werden.

2.1.3 ID-Selektor

Der ID-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind.
Das HTML-Element verwendet das id-Attribut, um den id-Selektor festzulegen, und der id-Selektor wird in CSS mit „#“ definiert.

#id名 {
 属性1: 属性值1; 
 ...
}

Hinweis: Das id-Attribut kann in jedem HTML-Dokument nur einmal vorkommen.

2.1.4 Wildcard-Selektor

In CSS wird der Wildcard-Selektor mit „*“ definiert, was bedeutet, dass alle Elemente (Tags) auf der Seite ausgewählt werden.

* {
 属性1: 属性值1; 
 ...
}

2.1.5 Zusammenfassung der grundlegenden Selektoren

Fügen Sie hier eine Bildbeschreibung ein

2.2 Composite-Selektor

Zu den häufig verwendeten zusammengesetzten Selektoren gehören: Nachkommenselektoren, Unterselektoren, Vereinigungsselektoren, Pseudoklassenselektoren usw.

2.2.1 Nachkommenselektoren

Der untergeordnete Selektor, auch als enthaltender Selektor bezeichnet, kann untergeordnete Elemente innerhalb des übergeordneten Elements auswählen. Die Schreibweise besteht darin, das äußere Etikett vorne und das innere Etikett hinten zu schreiben
, getrennt durch Leerzeichen. Wenn Tags verschachtelt sind, wird das innere Tag zum Nachkommen des äußeren Tags.

元素1 元素2 { 样式声明 }
  1. Element 1 und Element 2 werden durch ein Leerzeichen getrennt.
  2. Element 1 ist das übergeordnete Element, Element 2 ist das untergeordnete Element und Element 2 wird letztendlich ausgewählt.
  3. Element 2 kann ein Sohn, Enkel usw. sein, solange es ein Nachkomme von Element 1 ist
  4. Element 1 und Element 2 können beliebige Basisselektoren sein

2.2.2 Unterselektor

Untergeordnete Elementselektoren (untergeordnete Selektoren) können nur Elemente auswählen, die das jüngste untergeordnete Element eines Elements sind. Das einfache Verständnis besteht darin, das Sohnelement zu wählen.

元素1 > 元素2 { 样式声明 }
  1. Element 1 und Element 2 werden durch ein Größer-als-Zeichen getrennt.
  2. Element 1 ist das übergeordnete Element, Element 2 ist das untergeordnete Element und Element 2 wird letztendlich ausgewählt.
  3. Element 2 muss ein leiblicher Sohn sein, und seine Enkel und Urenkel stehen nicht unter seiner Kontrolle. Er kann auch als Selektor für leibliche Söhne bezeichnet werden.

2.2.3 Union-Selektor

Der Union-Selektor besteht aus Selektoren, die durch englische Kommas (,) verbunden sind. Jede Form von Selektor kann als Teil des Union-Selektors verwendet werden.

元素1,元素2 { 样式声明 }

2.2.4 Pseudoklassenselektor

Pseudoklassenselektoren werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen, z. B. das Hinzufügen von Spezialeffekten zu Links oder die Auswahl des ersten oder n-ten Elements.
Das größte Merkmal beim Schreiben von Pseudoklassenselektoren besteht darin, dass sie durch Doppelpunkte (:) ausgedrückt werden, wie z. B. :hover und :first-child.

2.2.4.1 Link-Pseudoklassenselektor
  1. Um die Wirksamkeit sicherzustellen, deklarieren Sie bitte: link-:visited-:hover-:active im Auftrag von LVHA.
  2. Da ein Link im Browser einen Standardstil hat, müssen wir in der tatsächlichen Arbeit einen separaten Stil für den Link angeben.
 /* a 是标签选择器 所有的链接 */ 
 a { 
 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
 color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
 }
2.2.4.2: Fokus-Pseudoklassenselektor

Der Pseudoklassenselektor :focus wird verwendet, um das fokussierte Formularelement auszuwählen.
Der Fokus liegt auf dem Cursor, der im Allgemeinen <input>durch Formularelemente erreicht werden kann, daher ist dieser Selektor hauptsächlich auf Formularelemente ausgerichtet.

input:focus { 
 background-color:yellow;
}

2.2.5 Zusammenfassung der Verbindungsselektoren

Fügen Sie hier eine Bildbeschreibung ein

3 CSS-Schriftarteigenschaften

CSS-Schriftarteneigenschaften werden verwendet, um Schriftfamilie, -größe, -stärke und Textstil (z. B. Kursivschrift) zu definieren.

3.1 Schriftfamilie

CSS verwendet die Eigenschaft „font-family“, um die Schriftfamilie von Text zu definieren.

p { font-family:"微软雅黑";} 
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

Die gebräuchlichsten Schriftarten: body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

3.2 Schriftgröße

CSS verwendet die Eigenschaft „font-size“, um die Schriftgröße zu definieren.

p { 
 font-size: 20px; 
}

Verschiedene Browser zeigen möglicherweise standardmäßig unterschiedliche Schriftgrößen an. Die Standardtextgröße von Google Chrome beträgt 16 Pixel.

3.3 Schriftstärke

CSS verwendet die Eigenschaft „font-weight“, um die Stärke von Textschriftarten festzulegen.

p { 
 font-weight: bold;
}

Fügen Sie hier eine Bildbeschreibung ein

3.4 Textstil

CSS verwendet die Eigenschaft „font-style“, um Text zu formatieren.

p { 
 font-style: normal;
}

Fügen Sie hier eine Bildbeschreibung ein

3.5 Eigenschaften der Schriftartzusammensetzung

body { 
 font: font-style font-weight font-size/line-height font-family;
}

Bei Verwendung des Schriftartattributs muss es in der Reihenfolge im oben genannten Syntaxformat geschrieben werden. Die Reihenfolge kann nicht geändert werden, und jedes Attribut wird durch ein Leerzeichen getrennt.
Die Attribute, die nicht festgelegt werden müssen, können weggelassen werden (übernehmen Sie die Standardeinstellung). value), aber „font-size“ und „font-family“ müssen beibehalten werden. Attribut, andernfalls hat das Attribut „font“ keine Auswirkung

3.6 Zusammenfassung der Schriftartattribute

Fügen Sie hier eine Bildbeschreibung ein

4 Textattribute

Die CSS-Texteigenschaft definiert das Erscheinungsbild von Text, z. B. Textfarbe, Textausrichtung, Textdekoration, Texteinzug, Zeilenabstand usw.

4.1 Textfarbe

Das Farbattribut wird verwendet, um die Farbe des Textes zu definieren.

div { 
 color: red;
}

Fügen Sie hier eine Bildbeschreibung ein

4.2 Text ausrichten

Das text-align-Attribut wird verwendet, um die horizontale Ausrichtung des Textinhalts innerhalb eines Elements festzulegen.

div { 
 text-align: center;
}

Fügen Sie hier eine Bildbeschreibung ein

4.3 Text verzieren

Das text-decoration-Attribut gibt die dem Text hinzugefügten Dekorationen an. Sie können dem Text Unterstreichungen, Durchstreichungen, Überstreichungen usw. hinzufügen.

div { 
 text-decoration：underline；
}

Fügen Sie hier eine Bildbeschreibung ein

4.4 Texteinrückung

Das text-indent-Attribut wird verwendet, um den Einzug der ersten Textzeile anzugeben, normalerweise der ersten Zeile eines Absatzes.

div { 
 text-indent: 10px;
}

p { 
 text-indent: 2em;
}

em ist eine relative Einheit, die der Größe eines Textes des aktuellen Elements entspricht (Schriftgröße). Wenn das aktuelle Element keine Größe festlegt, wird es
eine Textgröße des übergeordneten Elements sein.

4.5 Zeilenabstand

Mit der Eigenschaft line-height wird der Abstand zwischen Zeilen (Linienhöhe) festgelegt. Sie können den Abstand zwischen Textzeilen steuern.

p { 
 line-height: 26px;
}

4.6 Zusammenfassung der Textattribute

Fügen Sie hier eine Bildbeschreibung ein

5 CSS-Einführungsmethoden

Je nachdem, wo CSS-Stile geschrieben werden (oder wie sie eingeführt werden), können CSS-Stylesheets in drei Hauptkategorien unterteilt werden:

  1. Inline-Stylesheets (Inline)
  2. Internes Stylesheet (eingebettet)
  3. Externes Stylesheet (verlinkt)
引入外部样式表：
<link rel="stylesheet" href="css文件路径">

Fügen Sie hier eine Bildbeschreibung ein

6 Anzeigemodi für CSS-Elemente

Dadurch kann die Webseite besser gestaltet werden. Der Elementanzeigemodus ist die Art und Weise, wie die Elemente (Beschriftungen) angezeigt werden. Sie <div>belegen beispielsweise eine Zeile für sich, und beispielsweise können mehrere Elemente in einer Zeile platziert werden <span>.
HTML-Elemente werden im Allgemeinen in zwei Typen unterteilt: Blockelemente und Inline-Elemente.

6.1 Blockelemente

Zu den üblichen Blockelementen gehören <h1>~<h6>, <p>, <div>, <ul>, usw., wobei <ol>das Tag das typischste Blockelement ist. Eigenschaften von Elementen auf Blockebene: ① Eine Zeile belegen. ② Höhe, Breite, Ränder und Abstand können alle gesteuert werden. ③ Die Breite beträgt standardmäßig 100 % des Containers (übergeordnete Breite). ④ Es handelt sich um einen Container und eine Box, die Elemente auf Zeilen- oder Blockebene enthalten können. Beachten :<li><div>





  • Elemente auf Blockebene können nicht in Elementen vom Typ Text verwendet werden.
  • <p>Tags werden hauptsächlich zum Speichern von Text verwendet, daher <p>können insbesondere keine Elemente auf Blockebene darin platziert werden<div>
  • Auf die gleiche Weise <h1>~<h6>usw. sind alle Text-Tags auf Blockebene, und andere Elemente auf Blockebene können nicht darin platziert werden.

6.2 Inline-Elemente

Zu den gängigen Inline-Elementen gehören <a>, <strong>, <b>, <em>, <i>, <del>, <s>, usw. Unter diesen ist das Tag <ins>das typischste Inline-Element. An manchen Stellen werden Inline-Elemente auch als Inline-Elemente bezeichnet. Eigenschaften von Inline-Elementen: ① Benachbarte Inline-Elemente befinden sich in einer Zeile und es können mehrere in einer Zeile angezeigt werden. ② Die direkte Einstellung von Höhe und Breite ist ungültig. ③ Die Standardbreite ist die Breite des eigenen Inhalts. ④ Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen. Beachten:<u><span>
<span>





  • Innerhalb des Links können keine weiteren Links platziert werden
  • Elemente auf Blockebene können in speziellen Links platziert werden <a>. <a>Am sichersten ist es jedoch, sie in den Blockebenenmodus zu konvertieren.

6.3 Inline-Blockelemente

In Inline-Elementen gibt es mehrere spezielle Tags – <img />, <input />, <td>, die sowohl die Eigenschaften von Blockelementen als auch von Inline-Elementen aufweisen.
Einige Quellen nennen sie Inline-Blockelemente.
Eigenschaften von Inline-Blockelementen:
① Auf derselben Zeile wie benachbarte Inline-Elemente (Inline-Blöcke), aber zwischen ihnen befindet sich eine leere Lücke. Eine Zeile kann mehrere Elemente anzeigen (Eigenschaften von Inline-Elementen).
② Die Standardbreite ist die Breite des eigenen Inhalts (Eigenschaften von Inline-Elementen).
③ Höhe, Zeilenhöhe, Ränder und Abstand können alle gesteuert werden (Elementeigenschaften auf Blockebene).

6.4 Zusammenfassung der Elementanzeigemodi

Fügen Sie hier eine Bildbeschreibung ein

6.5 Konvertierung des Elementanzeigemodus

In besonderen Fällen ist eine Konvertierung des Elementmodus erforderlich. Einfaches Verständnis: Elemente eines Modus benötigen die Eigenschaften eines anderen Modus , z. B. wenn der Triggerbereich einer Verbindung
vergrößert werden soll .<a>

  • In Blockelement konvertieren: display:block;
  • In Inline-Element konvertieren: display:inline;
  • In Inline-Block konvertieren: display: inline-block;

7 CSS-Hintergrund

Die Hintergrundeigenschaften können die Hintergrundfarbe, das Hintergrundbild, die Hintergrundkachelung, die Position des Hintergrundbilds, die Fixierung des Hintergrundbilds usw. festlegen.

7.1 Hintergrundfarbe

Die Eigenschaft „Hintergrundfarbe“ definiert die Hintergrundfarbe des Elements.

background-color:颜色值;

Im Allgemeinen ist der Standardwert der Hintergrundfarbe eines Elements transparent. Sie können die Hintergrundfarbe auch manuell als transparent festlegen.

background-color:transparent;

7.2 Hintergrundbild

Das Attribut „Hintergrundbild“ beschreibt das Hintergrundbild des Elements. In der tatsächlichen Entwicklung werden häufig Logos oder einige kleine dekorative Bilder oder übergroße
Hintergrundbilder verwendet. Der Vorteil besteht darin, dass die Position sehr einfach gesteuert werden kann. (Sprites sind auch ein Anwendungsszenario.)

background-image : none | url (url)

Fügen Sie hier eine Bildbeschreibung ein
Hinweis : Vergessen Sie nicht, die URL zur Adresse hinter dem Hintergrundbild hinzuzufügen, und fügen Sie dem darin enthaltenen Pfad keine Anführungszeichen hinzu.

7.3 Hintergrundkacheln

Wenn Sie das Hintergrundbild auf der HTML-Seite kacheln müssen, können Sie das Attribut „background-repeat“ verwenden.

background-repeat: repeat | no-repeat | repeat-x | repeat-y

Fügen Sie hier eine Bildbeschreibung ein

7.4 Speicherort des Hintergrundbilds

Verwenden Sie die Eigenschaft „background-position“, um die Position des Bildes im Hintergrund zu ändern.

background-position: x y;

Fügen Sie hier eine Bildbeschreibung ein

  1. Der Parameter ist ein Richtungsnomen.
    Wenn die beiden angegebenen Werte beide Richtungsnomen sind, hat die Reihenfolge der beiden Werte nichts damit zu tun. Beispielsweise haben „links oben“ und „oben links“ den gleichen Effekt
    . Wenn nur einer Wird ein Richtungssubstantiv angegeben und der andere Wert weggelassen, wird der zweite Wert als Standardwert verwendet. Mittelausrichtung
  2. Der Parameter ist eine exakte Einheit.
    Wenn der Parameterwert eine exakte Koordinate ist, muss der erste die x-Koordinate und der zweite die y-Koordinate sein
    . Wenn nur ein Wert angegeben ist, muss der Wert die x-Koordinate sein Koordinate, und die andere ist standardmäßig vertikal zentriert.
  3. Der Parameter ist eine gemischte Einheit.
    Wenn die beiden angegebenen Werte eine Mischung aus präzisen Einheiten und azimutalen Substantiven sind, ist der erste Wert die x-Koordinate und der zweite Wert die y-Koordinate.

7.5 Hintergrundbildfixierung (Hintergrundanhang)

Die Eigenschaft „background-attachment“ legt fest, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.
Der Hintergrundanhang kann später einen Parallaxen-Scrolling-Effekt erzeugen.

background-attachment : scroll | fixed

Fügen Sie hier eine Bildbeschreibung ein

7.6 Hintergrund der zusammengesetzten Schreibmethode

Um den Code des Hintergrundattributs zu vereinfachen, können wir diese Attribute in demselben Attributhintergrund zusammenführen. Dies spart Codemenge.
Bei der Verwendung abgekürzter Attribute gibt es keine bestimmte Schreibreihenfolge. Die allgemein vereinbarte Reihenfolge ist:
Hintergrund: Hintergrundfarbe, Hintergrundbild, Adresse, Hintergrundkachel, Hintergrundbild, Bildlaufposition des Hintergrundbilds;

background: transparent url(image.jpg) repeat-y fixed top ;

7.7 Hintergrundfarbe transluzent

CSS3 bietet einen durchscheinenden Hintergrundfarbeffekt.

background: rgba(0, 0, 0, 0.3);
  1. Der letzte Parameter ist Alpha-Transparenz, der Wertebereich liegt zwischen 0 und 1
  2. Wir sind es gewohnt, die 0 in 0.3 wegzulassen und sie als Hintergrund zu schreiben: rgba(0, 0, 0, .3);
  3. Hinweis: Hintergrundtransparenz bedeutet, dass der Hintergrund der Box durchscheinend ist und der Inhalt in der Box nicht beeinträchtigt wird.
  4. Neue CSS3-Attribute werden nur von IE9+-Browsern unterstützt

7.8 Hintergrundzusammenfassung

Fügen Sie hier eine Bildbeschreibung ein

8-Box-Modell

Webseiten-Layout-Prozess:

  1. Bereiten Sie zunächst die relevanten Webseitenelemente vor, bei denen es sich im Grunde um Boxen handelt.
  2. Legen Sie mit CSS den Boxstil fest und platzieren Sie ihn dann an der entsprechenden Position.
  3. Füllen Sie die Kiste mit Inhalt.

Der Kern des Webseitenlayouts besteht darin, CSS zum Platzieren von Boxen zu verwenden.
Das sogenannte Box-Modell: Das Layoutelement in der HTML-Seite wird als rechteckige Box betrachtet, die einen Container zur Aufnahme von Inhalten darstellt.
Das CSS-Box-Modell ist im Wesentlichen eine Box, die umgebende HTML-Elemente kapselt, einschließlich: Rahmen, Rand, Innenabstand und tatsächlicher Inhalt.
Fügen Sie hier eine Bildbeschreibung ein

8.1 Grenze

border kann den Rand eines Elements festlegen. Der Rand besteht aus drei Teilen: Randbreite (Dicke), Randstil und Randfarbe.

border : border-width || border-style || border-color

Fügen Sie hier eine Bildbeschreibung ein
Der Rahmenstil border-style kann auf die folgenden Werte eingestellt werden:

  • none: kein Rand, d. h. die Breite aller Ränder wird ignoriert (Standardwert)
  • durchgezogen: Der Rand ist eine einzelne durchgezogene Linie (die am häufigsten verwendete)
  • gestrichelt: Der Rand ist gepunktet
  • gepunktet: Der Rand ist eine gepunktete Linie

Grenzabkürzung:

border: 1px solid red; 没有顺序

So schreiben Sie separate Ränder:

border-top: 1px solid red; /* 只设定上边框， 其余同理 */

8.1.1 Dünne Linienränder für Tabellen

Die Eigenschaft border-collapse steuert, wie der Browser Tabellenränder zeichnet. Es steuert die Grenzen benachbarter Zellen.

border-collapse: collapse;
  • Zusammenbruch: Das Wort bedeutet verschmelzen
  • border-collapse: Collapse; bedeutet, dass benachbarte Grenzen miteinander verschmelzen

Der Rand vergrößert die tatsächliche Größe der Box zusätzlich. Daher gibt es zwei Lösungen:

  1. Wenn Sie die Größe der Box messen, messen Sie nicht den Rand.
  2. Wenn die Messung einen Rand umfasst, müssen Sie die Breite des Randes von der Breite/Höhe abziehen.

8.1.2 Abgerundeter Rand

In CSS3 wurde ein neuer abgerundeter Rahmenstil hinzugefügt und das Attribut „border-radius“ wird verwendet, um die abgerundeten Ecken des äußeren Rahmens eines Elements festzulegen.

border-radius:length;
  • Parameterwerte können in Form von Zahlen oder Prozentsätzen vorliegen
  • Wenn es sich um ein Quadrat handelt und Sie es in einen Kreis umwandeln möchten, ändern Sie einfach den Wert auf die halbe Höhe oder Breite oder geben Sie ihn direkt als 50 % ein.
  • Bei diesem Attribut handelt es sich um ein Abkürzungsattribut, dem vier Werte folgen können, die jeweils die obere linke Ecke, die obere rechte Ecke, die untere rechte Ecke und die untere linke Ecke darstellen.
  • Schreiben Sie separat: Rand-Radius oben links, Rand-Radius oben rechts, Rand-Radius unten rechts und
    Rand-Radius unten links
  • Kompatibilität: IE9+-Browserunterstützung, hat jedoch keinen Einfluss auf das Seitenlayout, Sie können es bedenkenlos verwenden.

8.2 Polsterung

Mit der padding-Eigenschaft wird der Abstand festgelegt, also der Abstand zwischen dem Rand und dem Inhalt.
Fügen Sie hier eine Bildbeschreibung ein
Fügen Sie hier eine Bildbeschreibung ein
Nachdem dem Feld der Füllwert zugewiesen wurde, passieren zwei Dinge:

  1. Zwischen dem Inhalt und dem Rand besteht ein Abstand, und es wird eine Polsterung hinzugefügt.
  2. Die Polsterung beeinflusst die tatsächliche Größe der Box.

Mit anderen Worten: Wenn das Feld bereits über eine Breite und Höhe verfügt und zu diesem Zeitpunkt ein innerer Rand angegeben wird, wird das Feld vergrößert.
Lösung:
Wenn Sie sicherstellen, dass die Größe der Box mit der Darstellung übereinstimmt, subtrahieren Sie einfach die zusätzliche Polsterung von der Breite/Höhe.

8.3 Ränder

Mit der Margin-Eigenschaft wird der Rand festgelegt, der den Abstand zwischen der Box und der Box steuert.
Fügen Sie hier eine Bildbeschreibung ein
Die Abkürzung „margin“ bedeutet genau dasselbe wie „padding“.

Ränder können Boxen auf Blockebene horizontal zentrieren, es müssen jedoch zwei Bedingungen erfüllt sein:
① Die Box muss eine Breite (Breite) angeben.
② Stellen Sie den linken und rechten Rand des Felds auf „Automatisch“ ein.

.header{ width:960px; margin:0 auto;}

Zu den gängigen Schreibmethoden gehören die folgenden drei Methoden:

  • margin-left: auto; Rand rechts: auto;
  • Rand: Auto;
  • Rand: 0 automatisch;

Hinweis: Die obige Methode besteht darin, Elemente auf Blockebene horizontal zu zentrieren und Inline-Elemente oder Inline-Blockelemente zu ihren übergeordneten Elementen hinzuzufügen text-align:center.

Wenn Sie den Rand verwenden, um vertikale Ränder für Blockelemente zu definieren, kann es zu einer Randverschmelzung kommen.
Es gibt zwei Hauptsituationen:

  1. Vertikale Ränder benachbarter Blockelemente zusammenführen
  2. Zusammenbruch der vertikalen Ränder verschachtelter Blockelemente

8.3.1 Vertikale Ränder benachbarter Blockelemente zusammenführen

Wenn zwei benachbarte Blockelemente (Geschwister) aufeinandertreffen und das obere Element einen unteren Rand unten und das untere Element einen
oberen Rand oben hat, ist der vertikale Abstand zwischen ihnen nicht der Abstand unten. Die Summe von Rand oben. Das Phänomen , den größeren der beiden Werte anzunehmen,
wird als Verschmelzung der vertikalen Ränder benachbarter Blockelemente bezeichnet.
Lösung:
Versuchen Sie, den Randwert nur zu einem Feld hinzuzufügen.
Fügen Sie hier eine Bildbeschreibung ein

8.3.2 Kollaps vertikaler Ränder an verschachtelten Blockelementen

Bei zwei Blockelementen mit einer verschachtelten Beziehung (Eltern-Kind-Beziehung) hat das übergeordnete Element einen oberen Rand und das untergeordnete Element ebenfalls einen oberen Rand. Zu diesem Zeitpunkt wird das übergeordnete Element mit einem größeren Randwert reduziert.
Lösung:
① Sie können einen oberen Rand für das übergeordnete Element definieren.
② Sie können die obere Polsterung für das übergeordnete Element definieren.
③ Sie können overflow:hidden zum übergeordneten Element hinzufügen.
④ Es gibt andere Methoden, z. B. schwebende, feste und absolut positionierte Boxen, bei denen es keine Kollapsprobleme gibt.
Fügen Sie hier eine Bildbeschreibung ein

8.4 Klare interne und externe Ränder

Viele Webseitenelemente verfügen über standardmäßige interne und externe Ränder und die Standardeinstellungen sind in allen Browsern inkonsistent. Daher müssen wir vor dem Layout zunächst
die inneren und äußeren Ränder der Webseitenelemente löschen.

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }

Hinweis: Um die Kompatibilität zu gewährleisten, sollten Inline-Elemente nur den linken und rechten Innen- und Außenrand festlegen und nicht den oberen und unteren Innen- und Außenrand. Aber die Konvertierung in Block-Level- und Inline
-Block-Elemente funktioniert einwandfrei

9 Schatten

9.1 Kastenschatten

Box Shadow ist neu in CSS3 und Sie können die Box-Shadow-Eigenschaft verwenden, um der Box einen Schatten hinzuzufügen.

box-shadow: h-shadow v-shadow blur spread color inset;

Fügen Sie hier eine Bildbeschreibung ein
Beachten:

  1. Der Standardwert ist äußerer Schatten (Anfang), Sie können dieses Wort jedoch nicht schreiben, da sonst der Schatten ungültig wird.
  2. Kastenschatten nehmen keinen Platz ein und haben keinen Einfluss auf andere Kastenanordnungen.

9.2 Textschatten

In CSS3 können Sie mit der Eigenschaft text-shadow einen Schatten auf Text anwenden

text-shadow: h-shadow v-shadow blur color;

Fügen Sie hier eine Bildbeschreibung ein

10 Layoutmethoden

CSS bietet drei traditionelle Layoutmethoden (einfach ausgedrückt, wie Boxen angeordnet sind): normaler Fluss (Standardfluss), schwebend und positionierend.

10.1 Standard-Stream (normaler Stream/Dokument-Stream)

Der sogenannte Standardfluss: Beschriftungen werden in einer vorgeschriebenen Standardweise angeordnet. Der Standardfluss ist die grundlegendste Layoutmethode.

  1. Elemente auf Blockebene belegen ihre eigene Zeile und sind in der Reihenfolge von oben nach unten angeordnet.
    Häufig verwendete Elemente: div, hr, p, h1~h6, ul, ol, dl, form, table
  2. Inline-Elemente werden in der Reihenfolge von links nach rechts angeordnet und automatisch umbrochen, wenn sie die Kante des übergeordneten Elements berühren.
    Gemeinsame Elemente: span, a, i, em usw.

10.2 Float

Mit der Eigenschaft „float“ wird eine schwebende Box erstellt und zur Seite verschoben, bis der linke oder rechte Rand die Kante des enthaltenden Blocks oder einer anderen schwebenden Box berührt.

选择器 { float: 属性值; }

Fügen Sie hier eine Bildbeschreibung ein
Nach dem Hinzufügen von Floats weisen Elemente viele Eigenschaften auf:

  1. Schwebende Elemente werden aus dem Standardfluss ausbrechen (aus dem Standard)
  2. Schwebende Elemente werden in einer Zeile angezeigt und der obere Rand des Elements wird ausgerichtet
  3. Schwebende Elemente weisen die Eigenschaften von Inline-Blockelementen auf.
    Fügen Sie hier eine Bildbeschreibung ein
    Fügen Sie hier eine Bildbeschreibung ein
    Hinweis : Schwebende Elemente liegen nahe beieinander (es entstehen keine Lücken). Wenn die übergeordnete Breite diese schwebenden Kästchen nicht aufnehmen kann,
    werden die zusätzlichen Kästchen auf einer anderen Zeile ausgerichtet. .

Schwebende Elemente verfügen über Inline-Blockelementeigenschaften

  • Jedes Element kann schwebend sein. Unabhängig vom ursprünglichen Modus des Elements hat das Hinzufügen von Float ähnliche Eigenschaften wie Inline-Blockelemente.
  • Wenn für die Box auf Blockebene keine Breite festgelegt ist, ist die Standardbreite dieselbe wie die der übergeordneten Box, aber nach dem Hinzufügen eines Floats wird ihre Größe basierend auf dem Inhalt bestimmt.

Floating-Elemente werden häufig in Verbindung mit dem übergeordneten Standardfluss verwendet. Zuerst wird das übergeordnete Element des Standardflusses verwendet, um die obere und untere Position anzuordnen, und dann werden die internen untergeordneten Elemente schwebend verwendet, um die linke und rechte Position anzuordnen.
Fügen Sie hier eine Bildbeschreibung ein

Was Sie beim Floating-Layout beachten sollten

  1. Floats werden mit übergeordneten Boxen von Standard-Streams abgeglichen.
    Verwenden Sie zunächst das übergeordnete Element des Standardflusses, um die obere und untere Position anzuordnen, und verwenden Sie dann die schwebende Anordnung der internen untergeordneten Elemente an der linken und rechten Position.
  2. Wenn ein Element schwebend ist, sollten theoretisch auch die anderen Geschwisterelemente schwebend sein.
    In einer Box gibt es mehrere Unterboxen. Wenn eine der Boxen schwimmt, sollten auch die anderen Brüder schwimmen, um Probleme zu vermeiden.
    Der Schwebekasten beeinflusst nur den Standardfluss hinter dem Schwebekasten, nicht jedoch den Standardfluss davor.

10.2.1 Schwimmer löschen

In vielen Fällen ist es unpraktisch, der übergeordneten Box eine Höhe zuzuweisen, aber die untergeordnete Box schwebt und nimmt keine Position ein. Wenn schließlich die Höhe der übergeordneten Box 0 ist, wirkt sich dies auf
die Standard-Flow-Box unten aus.
Da das schwebende Element nicht mehr die Position des ursprünglichen Dokumentflusses einnimmt, wirkt es sich auf das Layout nachfolgender Elemente aus.

Klare Float-Essenz:

  • Das Wesentliche beim Löschen von Floats ist die Auswirkung des Löschens von Floating-Elementen
  • Wenn die übergeordnete Box selbst eine Höhe hat, muss der Schwimmer nicht gelöscht werden
  • Nach dem Löschen des Floats erkennt das übergeordnete Element automatisch die Höhe anhand des schwebenden untergeordneten Felds. Wenn das übergeordnete Element eine Höhe hat, hat dies keinen Einfluss auf den Standardfluss unten.
选择器{clear:属性值;}

Fügen Sie hier eine Bildbeschreibung ein
Die Strategie zum Löschen von Floats lautet: Schließen Sie den Float

Float-Methode löschen:

  1. Die zusätzliche Kennzeichnungsmethode, auch Partitionsmethode genannt, ist eine vom W3C empfohlene Vorgehensweise.
  2. Überlaufattribut zum übergeordneten Element hinzufügen
  3. Nach dem Pseudoelement zum übergeordneten Element hinzufügen
  4. Fügen Sie dem übergeordneten Element ein doppeltes Pseudoelement hinzu
10.2.1.1 Zusätzliche Kennzeichnungsmethode

Die zusätzliche Kennzeichnungsmethode, auch Partitionsmethode genannt, ist eine vom W3C empfohlene Vorgehensweise.
Die Extra-Tag-Methode fügt am Ende des schwebenden Elements ein leeres Tag hinzu. Zum Beispiel <div style=”clear:both”></div>oder andere Tags
(wie <br />usw.)
Nachteile: Hinzufügen vieler bedeutungsloser Tags, schlechte Struktur
Hinweis: Es ist erforderlich, dass dieses neue leere Tag ein Element auf Blockebene sein muss.

10.2.1.2 Überlauf zum übergeordneten Element hinzufügen

Sie können dem übergeordneten Attribut ein Überlaufattribut hinzufügen und dessen Attributwert auf ausgeblendet, automatisch oder scrollen festlegen.
Nachteile: Überlaufteile können nicht angezeigt werden

10.2.1.3 :after Pseudoelement-Methode

Die :after-Methode ist eine aktualisierte Version der zusätzlichen Tag-Methode. Wird auch dem übergeordneten Element hinzugefügt

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 *zoom: 1;
}

Nachteile: Pflege von Browsern niedrigerer Versionen

10.2.1.4 Doppelter Pseudoelement-Clear-Float
.clearfix:before,.clearfix:after {
 content:"";
 display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
}

Nachteile: Pflege von Browsern niedrigerer Versionen

10.2.2 Klare schwebende Zusammenfassung

Fügen Sie hier eine Bildbeschreibung ein

10.2 Positionierung

Durch die Positionierung kann sich die Box innerhalb einer Box frei bewegen oder eine bestimmte Position auf dem Bildschirm festlegen und andere Boxen unterdrücken.
Positionierung: Positionieren Sie die Box an einer bestimmten Position. Beim Positionieren wird also auch die Box platziert und entsprechend der Positionierungsmethode verschoben.

10.2.1 Komponenten positionieren

Positionierung = Positionierungsmodus + Kantenversatz.
Der Positionierungsmodus wird verwendet, um anzugeben, wie ein Element im Dokument positioniert wird. Der Kantenversatz bestimmt die endgültige Position des Elements.

10.2.1.1 Positionierungsmodus

Der Positionierungsmodus bestimmt die Positionierungsmethode des Elements. Er wird über das Positionsattribut von CSS festgelegt. Sein Wert kann in vier Bereiche unterteilt werden:
Fügen Sie hier eine Bildbeschreibung ein

10.2.1.2 Kantenversatz

Beim Kantenversatz wird das positionierte Feld an seine endgültige Position verschoben. Es gibt 4 Attribute: oben, unten, links und rechts.
Fügen Sie hier eine Bildbeschreibung ein

10.2.2 Statische Positionierung statisch

Die statische Positionierung ist die Standardpositionierungsmethode für Elemente und hat keine Bedeutung für die Positionierung.

选择器 { position: static; }

Durch die statische Positionierung werden Positionen entsprechend den Standardflusseigenschaften platziert. Es gibt keinen Kantenversatz. Statische Positionierung wird im Layout selten verwendet.

10.2.3 Relative Positionierung relativ

Relative Positionierung bedeutet, dass ein Element, wenn es sich bewegt, relativ zu seiner ursprünglichen Position ist.

选择器 { position: relative; }

Merkmale der relativen Positionierung:

  1. Es bewegt sich relativ zu seiner ursprünglichen Position (beim Verschieben der Position ist der Referenzpunkt seine ursprüngliche Position).
  2. Die ursprüngliche Position im Standard-Stream bleibt weiterhin belegt und wird von nachfolgenden Boxen weiterhin als Standard-Stream behandelt.

Daher ist die relative Positionierung nicht vom Standard abweichend. Die typischste Anwendung ist die absolute Positionierung. . .

10.2.4 Absolute Positionierung absolut

Absolute Positionierung bedeutet, dass ein Element, wenn es sich bewegt, relativ zu seinen Vorgängerelementen ist.

选择器 { position: absolute; }

Merkmale der absoluten Positionierung:

  1. Wenn kein Vorgängerelement vorhanden ist oder das Vorgängerelement nicht positioniert ist, hat die Positionierung des Browsers Vorrang (Dokumentdokument).
  2. Wenn das Vorgängerelement über eine Positionierung verfügt (relative, absolute, feste Positionierung), wird die Position unter Verwendung des nächstgelegenen positionierten Vorgängerelements als Referenzpunkt verschoben.
  3. Die absolute Positionierung nimmt nicht mehr ihre ursprüngliche Position ein. (Abweichend)
    Die absolute Positionierung liegt also außerhalb des Standardflusses.

Wenn das untergeordnete Element absolut positioniert ist, muss das übergeordnete Element die relative Positionierung verwenden.
① Das Kind ist absolut positioniert und nimmt keine Position ein. Es kann an einer beliebigen Stelle in der übergeordneten Box platziert werden, ohne dass dies Auswirkungen auf andere Geschwisterboxen hat.
② Die übergeordnete Box muss so positioniert werden, dass die untergeordnete Box nicht innerhalb der übergeordneten Box angezeigt wird.
③ Wenn das übergeordnete Feld ausgelegt ist, muss es eine Position einnehmen, sodass das übergeordnete Feld nur relativ positioniert werden kann.

10.2.5 Feste Positionierung behoben

Bei der festen Positionierung wird ein Element im sichtbaren Bereich des Browsers fixiert. Hauptverwendungsszenarien: Die Position des Elements ändert sich nicht, wenn auf der Browserseite gescrollt wird.

选择器 { position: fixed; }

Merkmale der festen Positionierung:

  1. Verschieben Sie Elemente mithilfe des Ansichtsfensters des Browsers als Referenzpunkt. Es hat nichts mit dem übergeordneten Element zu tun und scrollt nicht mit der Bildlaufleiste.
  2. Die feste Positionierung nimmt nicht mehr die ursprüngliche Position ein.

Die feste Positionierung ist ebenfalls Off-Label. Tatsächlich kann die feste Positionierung auch als eine besondere Art der absoluten Positionierung angesehen werden.

10.2.5 Sticky Positionierung Sticky

Die Sticky-Positionierung kann als eine Mischung aus relativer Positionierung und fester Positionierung betrachtet werden.

选择器 { position: sticky; top: 10px; }

Merkmale der Klebepositionierung:

  1. Verschieben Sie Elemente mithilfe des visuellen Fensters des Browsers als Referenzpunkt (Funktion zur festen Positionierung).
  2. Die Sticky-Positionierung nimmt die ursprüngliche Position ein (relative Positionierungseigenschaften).
  3. Um gültig zu sein, muss entweder „oben“, „links“, „rechts“ oder „unten“ hinzugefügt werden.

Wird in Verbindung mit dem Scrollen von Seiten verwendet. Schlechte Kompatibilität und wird vom IE nicht unterstützt.

10.2.6 Zusammenfassung der Positionierung

Positionierungsmodus Ist es nicht dem Standard entsprechend? Ort verschieben
statische statische Positionierung NEIN Kantenversatz kann nicht verwendet werden
relative relative Positionierung Nein (Position besetzen) Relativ zur eigenen Position bewegen
bewegen
absolute Positionierung Ja (besetzt keine Position) Positioniertes übergeordnetes Element
feste feste Positionierung Ja (besetzt keine Position) Sichtbarer Bereich im Browser
klebrige klebrige Positionierung Nein (Position besetzen) Sichtbarer Bereich im Browser

10.2.7 Positionierung des Z-Index der Stapelreihenfolge

Bei Verwendung des Positionierungslayouts können sich die Felder überlappen. Zu diesem Zeitpunkt können Sie den Z-Index verwenden, um die Reihenfolge der Felder (Z-Achse) zu steuern.

选择器 { z-index: 1; }
  • Der Wert kann eine positive Ganzzahl, eine negative Ganzzahl oder 0 sein. Der Standardwert ist „Auto“. Je größer der Wert, desto höher ist das Feld.
  • Wenn die Attributwerte gleich sind, wird die Schreibreihenfolge eingehalten, wobei der letzte zuerst kommt.
  • Nach der Nummer kann keine Einheit hinzugefügt werden
  • Nur positionierte Boxen verfügen über das Z-Index-Attribut

10.2.8 Erweiterung der Positionierung

10.2.8.1 Zentrieren einer absolut positionierten Box

Eine Box mit absoluter Positionierung kann nicht durch margin:0 auto horizontal zentriert werden, sie kann jedoch durch die folgenden Berechnungsmethoden horizontal und vertikal zentriert werden.
① links: 50 %;: Verschieben Sie die linke Seite des Felds in die horizontale Mittelposition des übergeordneten Elements.
② margin-left: -100px;: Lassen Sie die Box um die Hälfte ihrer Breite nach links wandern.

10.2.8.2 Auffinden besonderer Merkmale

Absolute Positionierung und feste Positionierung ähneln ebenfalls dem Floating.

  1. Fügen Sie Inline-Elementen eine absolute oder feste Positionierung hinzu und Sie können Höhe und Breite direkt festlegen.
  2. Elemente auf Blockebene fügen eine absolute oder feste Positionierung hinzu. Wenn keine Breite oder Höhe angegeben ist, ist die Standardgröße die Größe des Inhalts.
10.2.8.3 Off-Label-Boxen lösen keinen Margenkollaps aus

Schwebende Elemente und absolut positionierte (fest positionierte) Elemente lösen nicht das Problem der Randverschmelzung aus.

10.2.8.4 Durch die absolute Positionierung (feste Positionierung) wird die Box vollständig gedrückt

Das schwebende Element ist anders. Es unterdrückt nur die Standard-Flowbox darunter, nicht jedoch den Text (Bild) in der Standard-Flowbox darunter. Bei der
absoluten Positionierung (feste Positionierung) wird jedoch der gesamte Inhalt der Norm unterdrückt unten fließen.
Der Grund dafür, dass Floating den Text nicht unterdrückt, liegt darin, dass der Zweck des Floatings ursprünglich darin besteht, einen Textumbrucheffekt zu erzeugen. Der Text wird um das schwebende Element herum umbrochen

10.3 Zusammenfassung des Webseitenlayouts

Eine komplette Webseite wird mit Standardfluss, Floating und Positionierung gestaltet, von denen jede ihre eigene spezielle Verwendung hat.

  1. Mit dem Standardfluss
    können Boxen nach oben und unten oder links und rechts angeordnet werden. Vertikale Boxen auf Blockebene werden im Standardflusslayout angezeigt.
  2. Mit der Schwebefunktion
    können mehrere Elemente auf Blockebene in einer Zeile angezeigt oder Felder links und rechts ausgerichtet werden. Verwenden Sie das schwebende Layout, um mehrere Felder auf Blockebene horizontal anzuzeigen.

  3. Positionierung Das größte Merkmal der Positionierung ist das Konzept des Stapelns, was bedeutet, dass mehrere Boxen nacheinander angezeigt werden können .
    Verwenden Sie das Positionierungslayout , wenn sich das Element innerhalb einer Box frei bewegen kann .

11 Schreibreihenfolge für CSS-Eigenschaften

Es wird empfohlen, die folgende Reihenfolge einzuhalten:

  1. Layout-Positionierungsattribute: Anzeige / Position / Float / Clear / Sichtbarkeit / Überlauf (es wird empfohlen, zuerst die Anzeige zu schreiben, da sie schließlich mit dem Modus zusammenhängt)
  2. Selbstattribute: Breite / Höhe / Rand / Polsterung / Rand / Hintergrund
  3. Texteigenschaften: Farbe/Schriftart/Textdekoration/Textausrichtung/vertikale Ausrichtung/Leerzeichen/Wortumbruch
  4. Andere Eigenschaften (CSS3): content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

12 Elemente ein- und ausblenden

Ähnlich wie Website-Werbung verschwinden sie, wenn wir darauf klicken, um sie zu schließen, aber sie werden wieder angezeigt, wenn wir die Seite aktualisieren!
Essenz: Lassen Sie ein Element auf der Seite ausblenden oder anzeigen.

  1. Das Display wird ausgeblendet angezeigt, behält aber seine Position nicht bei
  2. Sichtbarkeit zeigt ausgeblendet an, behält aber die ursprüngliche Position bei
  3. Überlauf zeigt den Überlauf an und verbirgt ihn, verarbeitet den Überlauf jedoch nur teilweise.

12.1 Anzeigeattribut

Mit dem Anzeigeattribut wird festgelegt, wie ein Element angezeigt werden soll.

  • Anzeige: keine; Objekte ausblenden
  • display: block; Neben der Konvertierung in Elemente auf Blockebene bedeutet dies auch die Anzeige von Elementen.

Nachdem die Anzeige das Element ausgeblendet hat, nimmt es nicht mehr seine ursprüngliche Position ein.

12.2 Sichtbarkeit Sichtbarkeit

Mit dem Sichtbarkeitsattribut wird angegeben, ob ein Element sichtbar oder ausgeblendet sein soll.

  • Sichtbarkeit: sichtbar; Element ist sichtbar
  • Sichtbarkeit:versteckt; Element ausgeblendet

Nachdem die Sichtbarkeit das Element ausgeblendet hat, nimmt es weiterhin seine ursprüngliche Position ein.
Wenn das ausgeblendete Element nicht seine ursprüngliche Position haben möchte, verwenden Sie „visibility:hidden“.
Wenn das ausgeblendete Element nicht seine ursprüngliche Position haben möchte, verwenden Sie „display:none“ (stärkere Betonung der Nützlichkeit).

12.3 Überlauf Überlauf

Das Überlaufattribut gibt an, was passiert, wenn der Inhalt über die Box eines Elements hinausläuft (über die angegebene Höhe und Breite hinaus).
Fügen Sie hier eine Bildbeschreibung ein

13 erweiterte CSS-Tipps

13.1 Sprites

Viele kleine Hintergrundbilder werden häufig als Dekoration auf einer Webseite verwendet. Wenn die Webseite zu viele Bilder enthält, empfängt und sendet der Server häufig
Anforderungsbilder, was zu einem übermäßigen Anforderungsdruck auf dem Server führt, der die Ladegeschwindigkeit erheblich verringert der Seite.

Um die Häufigkeit, mit der der Server Anfragen empfängt und sendet, effektiv zu reduzieren und die Ladegeschwindigkeit der Seite zu verbessern, wurde daher die CSS-Sprite-Technologie (auch bekannt als CSS Sprites, CSS Sprite) entwickelt
.

Kernprinzip: Integrieren Sie einige kleine Hintergrundbilder auf der Webseite in ein großes Bild, sodass der Server nur eine Anfrage benötigt.

Verwendung des Sprite-Kerns:

  1. Die Sprite-Technologie wird hauptsächlich für Hintergrundbilder verwendet. Es geht darum, mehrere kleine Hintergrundbilder in ein großes Bild zu integrieren.
  2. Dieses große Bild wird auch Sprites oder Sprites genannt.
  3. Um die Position des Hintergrundbilds zu verschieben, können Sie „background-position“ verwenden.
  4. Die zurückgelegte Distanz entspricht den X- und Y-Koordinaten des Zielbilds. Beachten Sie, dass die Koordinaten auf der Webseite unterschiedlich sind
  5. Da es sich normalerweise nach oben und links bewegt, ist der Wert negativ.
  6. Wenn Sie Sprites verwenden, müssen Sie die Größe und Position jedes kleinen Hintergrundbilds genau messen.

13.2 Schriftartensymbole

Verwendungsszenarien für Schriftartsymbole: Wird hauptsächlich zum Anzeigen einiger häufiger und häufig verwendeter kleiner Symbole auf Webseiten verwendet.
Sprite-Diagramme haben viele Vorteile, ihre Mängel liegen jedoch auf der Hand.

  1. Die Bilddatei ist immer noch relativ groß.
  2. Das Bild selbst wird beim Vergrößern und Verkleinern verzerrt.
  3. Es ist sehr kompliziert, das Bild zu ersetzen, sobald es erstellt wurde.

Derzeit gibt es eine Technologie, die die oben genannten Probleme sehr gut lösen kann, nämlich Iconfont.
Schriftsymbole können Front-End-Ingenieuren eine bequeme und effiziente Möglichkeit zur Verwendung von Symbolen bieten. Sie zeigen Symbole an, bei denen es sich im Wesentlichen um Schriftarten handelt.

13.2.1 Vorteile von Schriftsymbolen:

  • Leicht: Eine Symbolschriftart ist kleiner als eine Reihe von Bildern. Sobald die Schriftart geladen ist, wird das Symbol sofort gerendert, wodurch Serveranfragen reduziert werden.
  • Flexibilität: Das Wesentliche ist eigentlich Text, der nach Belieben die Farbe ändern, Schatten, Transparenzeffekte, Drehungen usw. erzeugen kann.
  • Kompatibilität: Unterstützt fast alle Browser, Sie können es gerne verwenden

Hinweis: Schriftsymbole können die Elf-Technologie nicht ersetzen, sondern lediglich einen Teil der eingesetzten Symboltechnologie verbessern und optimieren.

13.2.2 Zusammenfassung

  1. Wenn Sie auf kleine Symbole mit relativ einfacher Struktur und Stil stoßen, verwenden Sie Schriftartensymbole.
  2. Wenn Sie auf kleine Bilder mit einer komplexeren Struktur und einem komplexeren Stil stoßen, verwenden Sie Sprites.

13.2.3 Website zum Herunterladen von Schriftartsymbolen

Empfohlene Download-Website:

  • icomoon-Schriftart http://icomoon.io Empfehlungsindex ★★★★★
    IcoMoon wurde 2011 gegründet und brachte den ersten benutzerdefinierten Symbolschriftgenerator auf den Markt, mit dem Benutzer die benötigten Symbole auswählen und in
    einer einzigen Schriftart zusammenfassen können. Die Schriftart enthält eine große Vielfalt an Inhalten und ist sehr umfangreich. Das einzige Bedauern ist, dass der Server im Ausland eine langsame Netzwerkgeschwindigkeit hat.
  • Alibaba-Iconfont-Schriftartbibliothek http://www.iconfont.cn/ Empfehlungsindex ★★★★★
    Dies ist eine Iconfont-Schriftart-Icon-Bibliothek von Alibaba M2UX, einschließlich der Taobao-Icon-Bibliothek und der Alimama-Icon-Bibliothek. Sie können KI verwenden
    , um Symbole zu erstellen und diese zur Generierung hochzuladen. Der Punkt ist: Es ist kostenlos!

13.2.4 Einführung von Schriftsymbolen

  1. Legen Sie den Schriftartenordner im Download-Paket im Stammverzeichnis der Seite ab
    Fügen Sie hier eine Bildbeschreibung ein
  2. Schriftarten global in CSS-Stilen deklarieren: Erfahren Sie einfach, wie Sie diese Schriftartdateien über CSS in unsere Seite einbinden.
    Achten Sie unbedingt auf den Pfad der Schriftartdatei.
@font-face {
 font-family: 'icomoon';
 src: url('fonts/icomoon.eot?7kkyc2');
 src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
 url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
 url('fonts/icomoon.woff?7kkyc2') format('woff'),
 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
  1. Fügen Sie kleine Symbole in HTML-Tags ein.
    Fügen Sie hier eine Bildbeschreibung ein
  2. Definieren Sie die Schriftart für das Etikett.
span {
 font-family: "icomoon";
}

Hinweis: Stellen Sie sicher, dass diese Schriftart mit der Schriftart in @font-face oben übereinstimmt
Fügen Sie hier eine Bildbeschreibung ein

13.2.4.1 Schriftartdateiformat

Die von verschiedenen Browsern unterstützten Schriftformate sind unterschiedlich. Der Grund für die Kompatibilität von Schriftsymbolen liegt darin, dass sie Schriftdateien enthalten, die von gängigen Browsern unterstützt werden.

  1. Die Schriftart .ttf im TrueType-Format (.ttf) ist die am häufigsten verwendete Schriftart für Windows und Mac. Zu den Browsern, die diese Schriftart unterstützen, gehören IE9+, Firefox3.5+,
    Chrome4+, Safari3+, Opera10+, iOS Mobile, Safari4.2+;
  2. Web Open Font Format (.woff) Format Woff-Schriftart. Zu den Browsern, die diese Schriftart unterstützen, gehören IE9+, Firefox3.5+, Chrome6+,
    Safari3.6+, Opera11.1+;
  3. Die Schriftart „Embedded Open Type“ (.eot) ist eine spezielle Schriftart für IE. Die Browser, die diese Schriftart unterstützen, sind IE4+;
  4. SVG-Format (.svg). SVG-Schriftart ist ein Format, das auf der Darstellung von SVG-Schriftarten basiert. Zu den Browsern, die diese Schriftart unterstützen, gehören Chrome4+, Safari3.1+,
    Opera10.0+ und iOS Mobile Safari3.2+;

13.3 CSS-Dreieck

Dreiecke kommen auf Webseiten häufig vor und können direkt mit CSS gezeichnet werden. Es ist nicht erforderlich, sie in Bilder oder Schriftsymbole umzuwandeln.
Fügen Sie hier eine Bildbeschreibung ein

div {
 width: 0;
 height: 0;
 border-top: 10px solid pink;
 border-right: 10px solid red;
 border-bottom: 10px solid blue;
 border-left: 10px solid green;
}

13.4 CSS-Benutzeroberflächenstile

Der sogenannte Schnittstellenstil besteht darin, einige Benutzerbetriebsstile zu ändern, um eine bessere Benutzererfahrung zu verbessern.

  • Ändern Sie den Mausstil des Benutzers
  • Formumriss
  • Verhindern Sie das Ziehen von Formularfeldern

13.4.1 Mauszeiger

li {cursor: pointer; }

Legt die systemdefinierte Cursorform fest oder ruft sie ab, die der Mauszeiger beim Bewegen über das Objekt annimmt.
Fügen Sie hier eine Bildbeschreibung ein

13.4.2 Konturlinie

Nachdem Sie dem Formular den Stil „outline: 0;“ oder „outline: none;“ hinzugefügt haben, können Sie den standardmäßigen blauen Rahmen entfernen.

input {outline: none; }

13.4.3 Verhindern Sie, dass die Größe von Textfeldern beim Ziehen geändert wird

In der tatsächlichen Entwicklung kann die untere rechte Ecke unseres Textfelds nicht gezogen werden.

textarea{ resize: none;}

13.5 Vertical-Align-Attributanwendung

Verwendungsszenarien des CSS-Attributs „Vertical-Align“: Wird häufig zum Festlegen der vertikalen Ausrichtung von Bildern oder Formularen (Inline-Blockelementen) und Text verwendet.
Offizielle Erklärung: Wird zum Festlegen der vertikalen Ausrichtung eines Elements verwendet, ist jedoch nur für Inline-Elemente oder Inline-Blockelemente wirksam.

vertical-align : baseline | top | middle | bottom

Fügen Sie hier eine Bildbeschreibung ein
Fügen Sie hier eine Bildbeschreibung ein

13.5.1 Ausrichtung von Bildern, Formularen und Texten

Bilder und Formulare sind alle Inline-Blockelemente und die standardmäßige vertikale Ausrichtung ist die Grundlinienausrichtung.
Zu diesem Zeitpunkt können Sie das Vertical-Align-Attribut von Inline-Blockelementen wie Bildern und Formularen auf „Mitte“ setzen, um den Text und die Bilder vertikal und zentriert auszurichten
.

13.5.2 Lösen Sie das Problem der standardmäßigen leeren Lücke am unteren Rand des Bildes

Fehler: Am unteren Rand des Bildes entsteht eine Leerraumlücke, da das Inline-Blockelement an der Grundlinie des Texts ausgerichtet wird.
Es gibt zwei Hauptlösungen:

  1. Fügen Sie dem Bild Vertical-Align:Middle | Top| Bottom usw. hinzu. (Es wird empfohlen, es zu verwenden)
  2. Konvertieren Sie das Bild in eine Elementanzeige auf Blockebene: block;

13.6 Anzeige überlaufender Textellipsen

13.6.1 Einzeiliger Textüberlauf zeigt Ellipsen an

Drei Bedingungen müssen erfüllt sein

/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

13.6.2 Mehrzeiliger Textüberlauf zeigt Ellipsen an

Mehrzeiliger Text läuft über und zeigt Ellipsen an, was große Kompatibilitätsprobleme mit sich bringt und für WebKit-Browser oder mobile Endgeräte geeignet ist (die meisten mobilen Endgeräte sind Webkit-Kernel
) .

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

Supongo que te gusta

Origin blog.csdn.net/a2868221132/article/details/129462602
Recomendado
Clasificación
Diario
Más
2024-04-30(33)
2024-04-29(5)
2024-04-28(9)
2024-04-27(28)
2024-04-26(22)
2024-04-25(34)
2024-04-24(31)
2024-04-23(29)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com