Wichtige und schwierige Probleme in HTML und CSS

Dieser Artikel vermittelt Ihnen hauptsächlich die wichtigsten und schwierigsten Probleme von HTML und CSS und hofft, allen zu helfen.

1. Wie zentriere ich ein P mit variabler Breite und Höhe vertikal und horizontal?

Verwenden Sie Flex

Fügen Sie einfach „Parent“ hinzu Box-Einstellungen: display: flex; justify-content: center;align-items: center;
CSS3-Transformation verwenden

Übergeordnete Box-Einstellungen: display:relative
p-Einstellungen: transform: Translate(- 50 %, -50 %); Position: absolut; links: 50 %;
Einstellungen für übergeordnetes Feld: display:table-cell; :center;vertikal-align:middle;

p-Einstellungen: display:inline-block;vertical-align:middle;

2.position Die Rolle mehrerer Attribute
Die vier gemeinsamen Attributwerte der Position: relativ, absolut, fest, statisch. Wird im Allgemeinen in Verbindung mit den Attributen „links“, „oben“, „rechts“ und „unten“ verwendet.

statisch: Standardspeicherort.

Unter normalen Umständen müssen wir es nicht speziell deklarieren. Wenn wir jedoch auf Vererbung stoßen, möchten wir nicht, dass sich die vom Element geerbten Attribute auf sich selbst auswirken. Daher können wir Position: static verwenden, um die Vererbung abzubrechen ist, wiederherstellen Der Standardwert für die Elementpositionierung. Ein auf „statisch“ gesetztes Element befindet sich immer an der durch den Seitenfluss angegebenen Position (statische Elemente ignorieren alle Top-, Bottom-, Left- oder Right-Deklarationen). Im Allgemeinen nicht häufig verwendet. relativ: relative Positionierung.
Die relative Positionierung erfolgt relativ zur Standardposition des Elements. Die Werte für den Versatz oben, rechts, unten und links basieren alle auf der ursprünglichen Position, unabhängig davon, was mit anderen Elementen geschieht. Beachten Sie, dass das relativ verschobene Element immer noch Platz an seiner ursprünglichen Position einnimmt. absolut: absolute Positionierung.
Ein Element, das auf „absolut“ gesetzt ist. Wenn in seinem übergeordneten Container das Positionsattribut festgelegt ist und der Positionsattributwert absolut oder relativ ist, wird es entsprechend dem übergeordneten Container versetzt. Wenn der übergeordnete Container die Positionseigenschaft nicht festlegt, basiert der Offset auf dem Körper. Beachten Sie, dass Elemente mit dem absoluten Attributsatz keine Position im Standardfluss belegen. fixed: Feste Positionierung.
Elemente, deren Position auf „Fest“ eingestellt ist, können an angegebenen Koordinaten relativ zum Browserfenster positioniert werden. Das Element bleibt an dieser Position, unabhängig davon, ob das Fenster gescrollt wird oder nicht. Es basiert immer auf dem Körper. Beachten Sie, dass Elemente mit dem festen Attributsatz keine Position im Standardfluss belegen. 3. Floating und Clearing Floating
3.1 Floating-bezogenes Wissen

Wert des Float-Attributs:

left: Das Element schwebt nach links .

rechts: Das Element schwebt nach rechts.

keine: Standardwert. Das Element ist nicht schwebend und erscheint dort, wo es im Text erscheint.
Eigenschaften von Floating:

Floating-Elemente werden vom normalen Dokumentenfluss getrennt, aber Floating-Elemente wirken sich nicht nur auf sich selbst aus, sondern auch auf die Ausrichtung und die umgebenden Elemente der umgebenden Elemente.

Unabhängig davon, ob es sich bei einem Element um ein Inline-Element oder ein Element auf Blockebene handelt, generiert das schwebende Element eine Box auf Blockebene, und seine Breite und Höhe können festgelegt werden Daher ist Float Wird häufig zum Erstellen horizontal angeordneter Menüs verwendet. Legen Sie die Größe fest und richten Sie sie horizontal aus.

Für die Anzeige von schwebenden Elementen gelten unter verschiedenen Umständen unterschiedliche Regeln:

Wenn ein schwebendes Element schwebend ist, überschreitet sein Rand nicht den Abstand des enthaltenden Blocks. PS: Wenn Sie möchten, dass die Elemente größer werden, können Sie das Margin-Attribut festlegen.

Wenn eines der beiden Elemente nach links und das andere nach rechts schwebt, grenzt das marginRight des linken schwebenden Elements nicht an das marginLeft vom rechten schwebenden Element.

Wenn mehrere schwebende Elemente vorhanden sind, werden die schwebenden Elemente der Reihe nach ohne Überlappung angeordnet.
Wenn mehrere schwebende Elemente vorhanden sind, überschreitet die Höhe des folgenden Elements nicht die Höhe des vorherigen Elements und überschreitet nicht die Höhe des enthaltenden Blocks.
Wenn nicht schwebende Elemente und schwebende Elemente gleichzeitig vorhanden sind und die nicht schwebenden Elemente vorne liegen, sind die schwebenden Elemente nicht höher als die nicht schwebenden Elemente.
Die schwebenden Elemente werden ausgerichtet so weit wie möglich nach oben, links oder rechts
Überlappungsproblem

Wenn ein Inline-Element ein schwebendes Element überlappt, werden sein Rand, Hintergrund und Inhalt über dem schwebenden Element angezeigt

Wann Ein Element auf Blockebene überlappt ein schwebendes Element. Der Rand und der Hintergrund werden angezeigt. Unter dem schwebenden Element wird der Inhalt über dem schwebenden Element angezeigt.

Attribut löschen
Attribut löschen: Stellen Sie sicher, dass keine schwebenden Elemente vorhanden sind die linke und rechte Seite des aktuellen Elements. clear wirkt sich nur auf das Layout des Elements selbst aus.
Werte: links, rechts, beide

3.2 Problem der Höhenkollaps des übergeordneten Elements

Warum sollten wir Floats und Höhenkollaps des übergeordneten Elements löschen?

Lösen Sie das Problem der Höhenkollaps des übergeordneten Elements: a Block Wenn die Höhe eines Ebenenelements nicht festgelegt ist, wird seine Höhe durch seine untergeordneten Elemente erweitert. Nach der Verwendung von Float für das untergeordnete Element wird das untergeordnete Element vom Standarddokumentfluss getrennt. Das heißt, es gibt keinen Inhalt im übergeordneten Element, um seine Höhe zu erweitern, sodass die Höhe des übergeordneten Elements ignoriert wird ist der sogenannte Höhenkollaps.

3.3 Methode zum Löschen von Floats

Methode 1: Definieren Sie die Höhe des übergeordneten p

Prinzip: Das Definieren einer festen Höhe (Höhe) für das übergeordnete p kann das Problem des übergeordneten p lösen p kann die Höhe nicht ermitteln. Es liegt ein Problem vor.

Vorteile: Der Code ist prägnant.
Nachteile: Die Höhe ist fest, sodass er für Module mit festem Inhalt geeignet ist. (Nicht empfohlen)

Methode 2: Verwenden Sie leere Elemente wie

(.clear{clear:both})
Prinzip: Fügen Sie ein Paar leerer p-Tags hinzu und verwenden Sie css Das Attribut „clear:both“ löscht den Float, sodass das übergeordnete p die Höhe erhalten kann.
Vorteile: Gute Browserunterstützung
Nachteile: Es gibt viele leere p-Tags. Wenn die Seite viele schwebende Module enthält, gibt es viele leere p-Tags, was nicht sehr zufriedenstellend erscheint. (Nicht empfohlen)

Methode 3: Lassen Sie das übergeordnete p auch floaten
Dies kann zunächst das aktuelle Floating-Problem lösen. Es führt jedoch auch dazu, dass das übergeordnete Element schwebt, was zu neuen Schwebeproblemen führt. Es wird nicht empfohlen,

Methode 4: Anzeige der übergeordneten p-Definition: Tabelle
Prinzip: Erzwingen Sie das p-Attribut in einer Tabelle
Vorteile: Rätselhaft
Nachteile: Es treten neue unbekannte Probleme auf. (Nicht empfohlen)

Methode 5: Überlauf der übergeordneten Elementeinstellung: versteckt, automatisch
Prinzip: Der Schlüssel zu dieser Methode besteht darin, BFC auszulösen. In IE6 muss auch hasLayout (Zoom: 1) ausgelöst werden
Vorteile: Codeeinführung, keine strukturellen und semantischen Probleme
Nachteile: Elemente, die überlaufen müssen, können nicht angezeigt werden (nicht empfohlen)

Methode 6: Parent p definiert Pseudoklassen: after und zoom

.clearfix:after{
Inhalt:’.’;
display:block;
Höhe:0;
klar:beides;
Sichtbarkeit: versteckt;
}
.clearfix {zoom:1;}
Prinzip: Nur IE8 und höher und Nicht-IE-Browser unterstützen: nachher. Das Prinzip ähnelt etwas der Methode 2, Zoom (IE-Übertragung). hat Attribute) Kann das Floating-Problem von ie6 und ie7 lösen
Vorteile: Die Struktur und Semantik sind völlig korrekt, die Codemenge ist moderat und es ist wiederverwendbar (es wird empfohlen, öffentliche Klassen zu definieren)
Nachteile: Der Code ist nicht sehr prägnant (sehr zu empfehlen)

Jingyiqiujing-Schreibmethode

.clearfix:after {
Inhalt: „200B“; display:block;
Höhe:0;
klar:beides;
}
.clearfix { *zoom:1 } Kümmere dich um IE6, IE7 ist in Ordnung
Ausführliche Informationen zum Floating finden Sie in diesem Artikel:
http://luopq.com/2015/11/08/C…

4. BFC-bezogenes Wissen

Definition: BFC (Blockformatierungskontext) wird wörtlich übersetzt als „Formatierungskontext auf Blockebene“. Es handelt sich um einen unabhängigen Rendering-Bereich, an dem nur Boxen auf Blockebene beteiligt sind. Er gibt an, wie die internen Boxen auf Blockebene angeordnet sind, und hat nichts mit der Außenseite dieses Bereichs zu tun.

BFC-Layoutregeln

BFC ist ein isolierter unabhängiger Container auf der Seite. Die Unterelemente im Container haben keinen Einfluss auf die Elemente außerhalb. Und umgekehrt.

Die vertikalen Ränder des BFC-Elements überlappen sich. Der vertikale Abstand wird durch den Rand bestimmt und der Maximalwert wird verwendet.

Der Bereich des BFC überlappt sich nicht mit dem schwebenden Feld Floating-Prinzip).
Bei der Berechnung der BFC-Höhe sind auch schwebende Elemente an der Berechnung beteiligt.
Welche Elemente generieren BFC?

Stammelement

Float-Attribut ist nicht „none“
Position ist absolut oder fest
Anzeige ist „Inline-Block“, „Table-Cell“, „Table-Caption“, „Flex“. , Inline-Flex
Überlauf ist nicht sichtbar

5. Was ist Box-Sizing?

Stellen Sie das CSS-Box-Modell auf das Standardmodell oder IE-Modell ein. Die Breite des Standardmodells umfasst nur den Inhalt, und das zweite IE-Modell umfasst Rahmen und Auffüllung. Das Attribut

box-sizing kann einer von drei Werten sein:

content-box Der Standardwert wird nur berechnet die Breite des Inhalts. Rand und Polsterung werden nicht in die Breite eingerechnet

Padding-Box, Polsterung wird in die Breite eingerechnet
Rahmen-Box, Rand und Polsterung werden in die Breite eingerechnet

6 . Der Unterschied zwischen px, em, rem

px Pixel (Pixel). Absolute Einheit. Pixel px ist relativ zur Bildschirmauflösung. Es handelt sich um eine virtuelle Längeneinheit und die digitale Bildlängeneinheit des Computersystems. Wenn px in physische Länge umgewandelt werden soll, muss die Genauigkeit DPI angegeben werden.

em ist eine relative Längeneinheit, relativ zur Schriftgröße des Textes im aktuellen Objekt. Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers. Es erbt die Schriftgröße des übergeordneten Elements, es handelt sich also nicht um einen festen Wert.
rem ist eine neue relative Einheit (root em) in CSS3. Wenn Sie rem zum Festlegen der Schriftgröße für ein Element verwenden, handelt es sich immer noch um eine relative Größe, jedoch nur relativ zum HTML-Stammelement.

7. Welche Möglichkeiten gibt es, CSS einzuführen?

Es gibt vier Typen: Inline (Stilattribut) ), Inline Embed (Style-Tag), externer Link (Link), Import (@import) Der Unterschied zwischen

link und @import:

link ist ein XHTML-Tag. Zusätzlich zum Laden von CSS kann auch andere Transaktionen wie RSS definieren; @import gehört zur CSS-Kategorie und kann nur CSS laden.

Wenn der Link auf CSS verweist, wird er gleichzeitig mit dem Laden der Seite geladen; @import erfordert, dass die Seite vor dem Laden vollständig geladen wird.
Link ist ein XHTML-Tag und weist keine Kompatibilitätsprobleme auf. @import wurde in CSS2.1 vorgeschlagen und wird von Browsern niedrigerer Versionen nicht unterstützt.
Link unterstützt die Verwendung von Javascript zur Steuerung des DOM zum Ändern des Stils; @import unterstützt dies nicht.

8. Der Unterschied zwischen flüssigem Layout und responsivem Layout

Flow-Layout
verwendet nicht feste Pixel, um den Webseiteninhalt zu definieren, d ist nicht durch feste Pixel begrenzt. Der Inhalt wird auf beiden Seiten aufgefüllt.

Responsive Entwicklung

Verwenden Sie Media Query in CSS3, um das Webseitenlayout eines bestimmten Breitenbereichs anzugeben, indem Sie die Breite des Bildschirms abfragen.

Ultrakleiner Bildschirm (mobiles Gerät) 768px oder weniger

Kleines Bildschirmgerät 768px-992px
Mittlerer Bildschirm 992px-1200px
Breitbildgerät 1200px oder höher
Weil reaktionsfähige Entwicklung mehr ist umständlich. Im Allgemeinen werden reaktionsfähige Frameworks von Drittanbietern verwendet, z. B. Bootstrap, um einen Teil der Arbeit abzuschließen. Natürlich können Sie auch selbst reaktionsfähige Frameworks schreiben.

Unterschiede

• Ablauflayout Responsive Entwicklung

  Entwicklungsmethode Mobile Web-Entwicklung + PC-Entwicklung Responsive Entwicklung
  Anwendungsszenarien In der Regel, wenn bei der Entwicklung bereits ein PC vorhanden ist Für eine mobile Website müssen Sie nur das mobile Endgerät separat entwickeln. Bei einigen neu erstellten Websites ist nun eine Anpassung an das mobile Endgerät erforderlich, sodass eine Reihe von Seiten mit verschiedenen Endgeräten kompatibel sind.
  Die Entwicklung ist stark ausgerichtet und hoch Entwicklungseffizienz und ist mit verschiedenen Terminals kompatibel, geringe Effizienz
  Anpassung Nur für mobile Geräte geeignet, die Erfahrung auf dem Pad ist relativ schlecht Kann an verschiedene Terminals angepasst werden
  Effizienz Der Code ist einfach und schnell zu laden . Der Code ist relativ komplex und langsam zu laden im Arbeitsablauf, der durch diesen Unterschied verursacht wird
  
  Die Graceful-Degradation-Perspektive geht davon aus, dass Websites für die fortschrittlichsten und vollständigsten Browser entworfen werden sollten. Der Standpunkt der progressiven Verbesserung geht davon aus, dass wir uns auf den Inhalt selbst konzentrieren und niedrigeren Versionen Vorrang einräumen sollten. 10. Verschiedene Möglichkeiten und Unterschiede zum Ausblenden von Elementen in CSS

display:none

Das Element verschwindet vollständig auf der Seite und der ursprünglich vom Element belegte Platz wird durch belegt andere Elemente. Das heißt, es führt dazu, dass der Browser neu fließt und neu gezeichnet wird.

löst sein Klickereignis nicht aus

visibility:hidden

Der Unterschied zwischen display:none besteht darin, dass nach dem Verschwinden des Elements von der Seite der von ihm belegte Platz weiterhin erhalten bleibt, also nur Durchsuchen verursachen Der Renderer wird ohne Reflow neu gezeichnet.

Das Klickereignis kann nicht ausgelöst werden.

Geeignet für Szenarien, in denen nicht erwartet wird, dass sich das Seitenlayout ändert, nachdem das Element ausgeblendet wird.

Opazität:0

Nachdem die Transparenz des Elements auf 0 gesetzt wurde , nach unserem Benutzer In den Augen sind die Elemente auch ausgeblendet, was eine Möglichkeit darstellt, die Elemente auszublenden. Eine Sache, die
und Visibility:hidden gemeinsam haben, ist, dass das Element nach dem Ausblenden immer noch Platz einnimmt. Wir alle wissen jedoch, dass das Element nach dem Setzen der Transparenz auf 0 einfach unsichtbar ist und immer noch auf der Seite vorhanden ist.

Kann Klickereignisse auslösen

Setzen Sie die Boxmodellattribute wie Höhe und Breite auf 0

Einfach ausgedrückt: Legen Sie den Rand, den Rand, den Abstand, die Höhe und Breite des Elements und andere Attribute fest, die sich darauf auswirken das Element-Box-Modell auf 0. Wenn das Element Unterelemente oder Inhalte enthält, sollten Sie auch dessen Overflow:hidden festlegen, um seine Unterelemente auszublenden.
Wenn der Rand, der Abstand und andere Attribute des Elements auf ungleich 0 gesetzt sind, ist das Element offensichtlich immer noch auf der Seite sichtbar und es gibt kein Problem beim Auslösen des Klickereignisses des Elements. Wenn alle Attribute auf 0 gesetzt sind, ist es offensichtlich, dass dieses Element verschwindet, dh das Klickereignis kann nicht ausgelöst werden.

Diese Methode ist nicht praktikabel und kann einige Probleme verursachen. Einige Seiteneffekte, die wir normalerweise verwenden, können jedoch auf diese Weise vervollständigt werden, z. B. die slideUp-Animation von jquery, die den Überlauf des Elements festlegt und dann die Höhe und den Rand oben des Elements kontinuierlich über einen Timer festlegt. Bottom, Border-Top, Border-Bottom, Padding-Top und Padding-Bottom sind 0, wodurch der SlideUp-Effekt erzielt wird.

Andere kreative Methoden

Legen Sie die Position des Elements sowie links, oben, unten, rechts usw. fest und verschieben Sie das Element aus dem Bildschirm
Legen Sie die Position und den Z-Index des Elements fest und legen Sie fest den Z-Index in die kleinstmögliche negative Zahl umwandeln.

Das obige ist der detaillierte Inhalt vonWichtige und schwierige Probleme in HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!