CSS -Dokument, Block -Level -Elemente (Block), Inline -Elemente (Inline). Ich habe viele Bücher gelesen und viele Artikel gelesen. Reillys <CSS Autoritativer Leitfaden> In dem Konzept des Dokuments, das darin erwähnt wurde, hat mich sehr sensibel gemacht Dieses Konzept ist wirklich wichtig. Wenn es einen Fehler gibt, ist es rein normal. Der Dokumentfluss unterteilt die Form von oben nach unten in Zeilen und entlädt Elemente in jeder Zeile in der Reihenfolge links nach rechts, was der Dokumentfluss ist. Es gibt noch ein paar Fragen, die ich nicht verstehe 1. Was ist der Hauptunterschied zwischen IT und Elementen auf Blockebene, eines der drei Grundelemente, eines der drei grundlegenden Elemente? Was bedeutet Inline -Elemente? Was ist ein Blockebene -Element. Der chinesische Text des "CSS Autoritativen Handbuchs" zeigt, dass jedes sichtbare Element, das kein Element auf Blockebene ist, ein Inline-Element ist. Das Merkmal seines Ausdrucks ist die Form von "Zeilenlayout". Wenn wir beispielsweise ein Inline-Element-Borderboden einstellen: 1PX Solid #000; es wird in jeder Zeile wiederholt, und unter jeder Zeile befindet sich eine dünne schwarze Linie. Wenn es sich um ein Element auf Blockebene handelt, werden die angezeigten schwarzen Zeilen nur unter dem Block angezeigt. Lassen Sie mich Ihnen ein einfaches praktisches Beispiel geben: Zum Beispiel <Div> Ich liebe CSS - 52css.com </div> Inline -Elemente basieren im Allgemeinen auf semantischen Grundelementen. Inline -Elemente können nur Text oder andere Inline -Elemente und das gemeinsame Inline -Element "a" aufnehmen. Blockelement Inline -Element Das variable Element Variable Element ist ein Blockelement oder ein Inline -Element basierend auf dem Kontext.
Jedes nicht schwebende Element auf Blockebene nimmt eine Zeile ein, und das schwimmende Element schwebt nach den Vorschriften an einem Ende der Zeile.
Inline-Elemente belegen auch keine einzelne Zeile.
Es gibt drei Situationen, die das Element aus dem Dokumentstrom existieren, nämlich schwimmende, absolute Positionierung und feste Positionierung. .
Das schwimmende Element belegt keinen normalen Dokumentenflussraum, und die Positionierung des schwimmenden Elements basiert auf dem normalen Dokumentfluss und extrahiert dann aus dem Dokumentfluss und bewegt sich so weit wie möglich nach links oder rechts. Der Textinhalt wird das schwimmende Element umgeben. Wenn ein Element aus dem normalen Dokumentstrom extrahiert wird, ignorieren andere Elemente im Dokumentstrom das Element und füllen seinen ursprünglichen Speicherplatz aus.
Die Hauptursache für schwimmende Konzepte ist die Interpretation der Theorie durch den Browser. Ich kann nur sagen, dass viele Leute IE als Standard verwenden, aber nicht.
Basierend auf dem Dokumentenfluss können wir die folgenden Positionierungsmuster leicht verstehen:
Die relative Positionierung, dh im Vergleich zur Position des Elements im Dokumentstrom.
Absolute Positionierung bedeutet, dass sie vollständig vom Dokumentstrom abgelöst werden und die Positionierung im Verhältnis zum nächsten übergeordneten Element des Positionsattributs nicht statischer Wert, dh vollständig vom Dokumentstrom abgetrennt, und relativ zum Ansichtsfenster ausgeglichen wird.
2. Wie man versteht, wenn das klare Attribut den richtigen Wert nimmt?
Elemente wie P, H1 oder Div werden oft als Block-Ebene-Ebene bezeichnet, und diese Elemente werden als Inhaltsstück angezeigt. Das heißt, "Inline-Box". (Sie können display = block verwenden, um Elemente in der Zeile in Blockelemente umzuwandeln. Display = Keine bedeutet, dass das generierte Element überhaupt kein Feld enthält und weder Elemente anzeigt noch Platz im Dokument einnimmt.)
A: Die Linie ist ein Element in einer Linie und kann nur in der Linie platziert werden.
B: Um es unverblümt auszudrücken, ist das Element in der Zeile wie ein Wort;
C: Allgemeine Elemente auf Blockebene wie Absatz <p>, Titel <h1> <h2>…, Liste, <ul> <ol> <li>, Tabelle <tabelle>, Form <form>, div <div> und Körperelemente wie <body>. Inline -Elemente sind wie: Formularelemente <eingabe>, Hyperlinks <a>, Bild <Meeng>, <span> .....
D: Das charakteristische Merkmal der Unsichtbarkeit auf Blockebene besteht darin, dass jedes Element auf Blockebene aus einer neuen Zeile angezeigt wird und die anschließende Unsichtbarkeit auch aus einer anderen Zeile angezeigt werden muss.
E: <span> gehört zu einem Inline-Element in der CSS-Definition, während <div> ein Element auf Blockebene ist.
Für diejenigen, die CSS studiert haben, können Sie es zunächst verstehen. Aber es ist für Anfänger nicht einfach zu verstehen, daher erkläre ich es den Anfängern hauptsächlich vertrauter!
Durch die Verwendung des Wortes wird es leichter, ihre Existenz und ihren Zweck zu verstehen. kleiner Behälter. <span> ist ein kleiner Behälter. Aber was soll ich tun, wenn ich etwas Tinte hineinlegen möchte? Es ist sehr einfach.
Ich möchte CSS verwenden, um den Buchstabenstil C zu definieren, damit wir <span> verwenden können.
<div> Ich liebe CSS - <span> 52css.com </span> W3c Standard </div>
Blockelement ist im Allgemeinen ein Container anderer Elemente. . Es kann nur verwendet werden, um andere Blockelemente zu halten.
Ohne die Wirkung von CSS werden die Blockelemente jedes Mal in einer Reihe in einer Reihe angeordnet. Mit CSS können wir den Standard -Layout -Modus dieser HTML ändern und die Blockelemente in die gewünschte Position platzieren. Anstatt jedes Mal eine dumm eine andere Linie zu starten. Es sollte darauf hingewiesen werden, dass das Tabellen -Tag auch eine Art Blockelement ist. Geschwindigkeit. Wenn ein gewöhnlicher Benutzer jedoch versehentlich auf die Schaltfläche "Seitenquelle" klickt, ist der Unterschied zwischen beiden sehr groß. Der Quellcode der CSS -Layout -Seite, die basierend auf dem Konzept einer guten Rekonstruktion entwickelt wurde, kann es zumindest gewöhnlichen Benutzern ermöglichen, den Inhalt schnell zu verstehen. Aus dieser Perspektive sollte der CSS -Layoutcode eine bessere ästhetische Erfahrung haben.
Sie können sich das Block Container-Element-Div als Kästchen vorstellen oder wenn Sie mit Clip-On-Artikeln gespielt haben, ist es einfacher zu verstehen. Wir haben zuerst die Artikel aus verschiedenen Zeitungen und Zeitschriften ausgestattet. Jeder Stück Schnitt ist ein Block. Dann stischen wir diese Papierstücke nach unseren eigenen Layout-Absichten auf ein leeres neues Stück Papier. Dies bildet Ihre eigenen einzigartigen Digest News. Als Erweiterung der Technologie folgt das Web -Layout -Design dem gleichen Muster. .
Blockelemente und Inline -Elemente sind Konzepte in der HTML -Spezifikation. Der grundlegende Unterschied zwischen Blockelementen und Inline -Elementen besteht darin, dass Blockelemente im Allgemeinen mit neuen Linien beginnen. Wenn jedoch die CSS -Steuerung hinzugefügt wird, wird der Attributunterschied zwischen Blockelementen und Inline -Elementen kein Unterschied. Zum Beispiel können wir ein Inline -Element zum Blockattribut Anzeige: Block hinzufügen, damit es auch Attribute haben, die jedes Mal aus einer neuen Zeile beginnen.
Das grundlegende Konzept eines variablen Elements ist, dass es feststellen muss, ob das Element ein Blockelement oder ein Inline -Element basierend auf der kontextuellen Beziehung ist. Variable Elemente gehören weiterhin zu den beiden Kategorien der beiden Elemente. Siehe den vollständigen Text für die allgemeine Elementklassifizierung.
In Bezug auf den chinesischen Namen des Inline-Elements gibt es viele Inline-Elemente, eingebettete Elemente, Inline-Elemente und Direkteingänge. Es gibt im Grunde keine einheitliche Übersetzung. Nennen Sie sie einfach, was Sie möchten. Wenn es um Inline -Elemente geht, werden wir der Meinung sein, dass es ein Display -Attribut gibt, das angezeigt wird: Inline;
* Adresse - Adresse * Blockquote - Blockreferenz * Mitte - Ausrichten von Blöcken in der Hebung * DIR - Verzeichnisliste * Div - häufig verwendetes Blockebene ist einfach und ist auch das Haupt -Tag des CSS -Layouts * DL - Definitionsliste * Fieldset - Formularsteuerung Gruppe* Form - Wechselwirkungsform* H1 - großer Titel* H2 - Untertitel* H3 - Stufe 3 Titel* H4 - Level 4 Title* H5 - Level 5 Title* H6 - Stufe 6 Titel* HR - Horizontal Divider* ISIDEX - Eingabeaufforderung Eingabeaufforderung
* Menü - Menüliste * NoFrames - Frames optionale Inhalt (Anmelde diesen Blockinhalt für Browser, die Frame nicht unterstützen
* OL - Sortieren Form * P - Absatz * Pre -Formattext * Tabelle - Tabelle * UL - Nicht -sortierte Liste
* a - Ankerpunkt * ABBR - Abkürzung * Akronym - Erstes Wort * B - BOLD (nicht empfohlen)
* bdo - bidi überschreiben
* BIG - Large Schrift * Br - Zeilenunterbrechung * Zitieren - Zitat * Code - Computercode (erforderlich beim Angeben von Quellcode)
* DFN - Felder definieren * EM - Betonung * Schriftart - Schrifteinstellungen (nicht empfohlen)
* I - ITALIC * IMG - Bild * Eingabe - Eingangsfeld * KBD - Tastaturtext definieren * Beschriftung - Tabelle Beschriftung * Q - Kurzreferenz * S - Medium Mark (nicht empfohlen)
* Samp - Beispiel für Computercode definieren * SELECT - Projektauswahl * Klein - kleiner Schriftstext * Spann TextArea - Multi -Line -Texteingangsfeld * TT - TeleText * u - Unterstrich * var - Variablen definieren
* Applet - Java Applet
* Schaltfläche - Schaltfläche - * delete Text löschen * iframe - Inline -Frame
* INS - Eingefügter Text* Karte - Bildblock (Karte)
* Objekt - Objekt Objekt* Skript - Client -Skript