Ich erinnere mich an eine Frage, die der Interviewer während des vorherigen Vorstellungsgesprächs gestellt hat: Was sind die Elemente in der Branche und was ist der Unterschied zwischen ihnen und Elementen auf Blockebene? Dies ist eine sehr grundlegende Interviewfrage, aber viele Anfänger konzentrieren sich in der Regel nur auf die Semantik der Etiketten und ignorieren die Eigenschaften von Etiketten innerhalb und Blockebene. Daher ist es sehr wahrscheinlich, dass die obigen Fragen nicht unvollständig beantwortet oder beantwortet werden können.
Gemeinsame Inline-Elemente in HTML sind:<span>, <a>, <img>, <eingabe>, <textarea>, <Select>, <Label>
Es enthält auch einige Textelemente wie: <br>, <b>, <strong>, <sup>, <sub>, <i>, <em>, <Del>, <u> usw.
Wenn Sie nur <span> und <img> antworten, wäre es unangemessen.
Häufige Elemente auf Blockebene in HTML sind:<div>, <table>, <form>, <p>, <ul>,
<h1> ...... <h6>, <hr>, <pre>, <adresse>, <center>, <marquee>, <blockquote> usw.
Wenn Sie nur <div> antworten, wäre es unangemessen.
Was ist der Unterschied zwischen ihnen?Elemente auf Blockebene
1. Beginnen Sie immer mit einer neuen Zeile, dh jedes Element auf Blockebene nimmt eine Zeile ein und ist standardmäßig vertikal nach unten angeordnet.
2. Höhe, Breite, Rand und Polsterung sind kontrollierbar, mit effektiven Einstellungen und Randeffekten.
3. Wenn die Breite nicht festgelegt ist, beträgt der Standard 100%;
4. Elemente auf Blockebene können Elemente auf Blockebene und Inline-Elemente enthalten.
· Inline-Elemente
1. Es befindet sich in der gleichen Zeile wie andere Elemente, dh die Elemente in der Linie und andere Elemente in der Linie werden auf einer horizontalen Linie angeordnet.
2. Die Höhe und Breite sind unkontrollierbar und die Einstellungen sind ungültig und durch den Inhalt bestimmt.
Das Einstellen von Rand links und rechts ist mit Randeffekt effektiv.
Durch das Einstellen von Rand wird Space auf und ab unterstützt, erzeugt keine Randeffekte (dh Margen-Top/Bottom hat Werte auf dem Box-Modell, aber es gibt keinen Randeffekt auf der Seite).
Das Einstellen von Polster nach links und rechts ist wirksam. Durch das Aufstellen von Auf und Ab wird der Raum größer, erzeugt jedoch keinen Randeffekt (wie oben).
Der Padding -Effekt wird wie folgt dargestellt:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> </head><style>span{border:1px solid red;padding:10px;}div{border:1px solid blue;}</style> <body> <div>Block level element</div> <span> In-line element</span> <span> In-line element</span> <div>Block level Element </div> </body> </html>3. Nach dem Konzept der Label-Semantik ist es am besten, nur Inline-Elemente und keine Elemente auf Blockebene aufzunehmen.
KonvertierenNatürlich können die Eigenschaften zwischen Elementen auf Blockebene und Inline-Elementen zueinander umgewandelt werden. HTML kann Elemente in drei Typen unterteilen: In-Reiselemente, Blockelemente und In-Row-Blockelemente.
Verwenden Sie das Anzeigeattribut, um die drei in willkürliche Konvertierung umzuwandeln:
(1) Anzeige: Inline; in Linienelemente konvertieren;
(2) Anzeige: Block; in Blockelemente konvertieren;
(3) Anzeige: Inline-Block; Konvertieren Sie in Inline -Blockelemente.
Die Inline-Blockelemente kombinieren die Eigenschaften der Inline-Elemente und die Inline-Elemente:(1) Wenn die Linienverpackung nicht automatisch eingewickelt ist, wird er mit anderen Linienelementen auf einer horizontalen Linie angeordnet.
(2) Höhe, Breite, Margin und Polsterung sind kontrollierbar, mit effektiven Einstellungen und Randeffekten.
(3) Die Standardvereinbarung erfolgt von links nach rechts.
Dies ist das Ende dieses Artikels über die Details der Unterschiede zwischen HTML-Elementen und Elementen auf Blockebene. Weitere verwandte HTML-Elemente und Block-Level-Elemente suchen Sie bitte nach früheren Artikeln von Wulin.com oder stöbern Sie weiter unten in den folgenden Artikeln. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!