Heim > Artikel > Web-Frontend > Die Lösung für das Problem, dass die Breite beim Festlegen des display:block-Attributs des img-Tags nicht auf 100 % eingestellt werden kann

Die Lösung für das Problem, dass die Breite beim Festlegen des display:block-Attributs des img-Tags nicht auf 100 % eingestellt werden kann

不言Original: 2018-08-15 13:55:484492Durchsuche

In diesem Artikel geht es um die Lösung des Problems, dass die Breite des IMG-Tags beim Festlegen des display:block-Attributs nicht auf 100 % festgelegt werden kann. Die Methode ist sehr detailliert und hat einen bestimmten Referenzwert beziehen Sie sich darauf. Ich hoffe, es wird Ihnen helfen.

Phänomene

Der folgende Code, das img-Tag wird mit display:block festgelegt, die Größenbreite kann nicht auf 100 % eingestellt werden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签设置display:block，宽度无法100%</title>
</head>
<body>
    <p>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;">
    </p>
</body>
</html>

Ursache

Ersetzungselemente und Nicht-Ersetzungselemente

Elemente bilden die Grundlage der Dokumentstruktur. In CSS generiert jedes Element eine Box (Box, auch übersetzt als „Box“), die den Inhalt des Elements enthält. Verschiedene Elemente werden jedoch unterschiedlich angezeigt, z. B. p unterscheidet sich von span und strong unterscheidet sich von p. In der Dokumenttypdefinition (DTD) werden für verschiedene Elemente unterschiedliche Typen angegeben. Dies ist einer der Gründe, warum DTD für Dokumente wichtig ist. Entsprechend den Eigenschaften des Elements selbst kann es in ersetzte Elemente (ersetzt) unterteilt werden Element) und Nicht-Ersatz-Elemente, Nicht-Ersatz-Elemente sind im W3C nicht klar definiert, aber wir können Ersatzelemente haben, die Nicht-Ersatz-Elementen entsprechen, sodass es verständlich ist, dass die anderen außer Ersatzelementen Nicht-Ersatz-Elemente sind Elemente

Element ersetzen: Der Browser bestimmt den spezifischen Anzeigeinhalt des Elements anhand seines Tags und seiner Attribute. Ersatzelemente sind Elemente, deren Inhalt nicht durch das visuelle CSS-Formatierungsmodell gesteuert wird, wie z. B. IMG-Tags, eingebettete Dokumente (Iframes usw.) oder Applets. Diese werden als Ersatzelemente bezeichnet. Beispielsweise liest das img-Element Bildinformationen und zeigt sie über den Wert des src-Attributs an. Wenn Sie jedoch den (x)html-Code anzeigen, können Sie den tatsächlichen Inhalt des Bildes nicht sehen, der Inhalt des img-Elements jedoch wird normalerweise durch das durch das src-Attribut angegebene Bild ersetzt. Das Typattribut des Eingabeelements bestimmt beispielsweise, ob ein Eingabefeld, ein Optionsfeld usw. angezeigt wird. (x) img, input, textarea, select, object in html sind alles Ersatzelemente. Diese Elemente haben keinen tatsächlichen Inhalt, das heißt, sie sind leere Elemente.

Nicht-Ersatzelemente: (X) Die meisten Elemente von HTML sind Nicht-Ersatzelemente. Sie teilen dem Browser direkt den Inhalt und die Anzeige mit it

Das img-Tag ist ein Ersatzelement. Eines der Merkmale des Ersatzelements ist, dass die Größe durch das interne Element bestimmt wird, unabhängig davon, ob sein Anzeigeattributwert Inline oder Block ist. Diese Funktion ist sehr interessant, wenn der Anzeigeattributwert Block ist. Die Breite wird durch die äußere Größe bestimmt, die Breite des ersetzten Elements wird jedoch nicht durch die Anzeigeebene beeinflusst , die Anzeigeebene kann die Größe des

-Containers nicht ändern. Die Lösung besteht darin, die Breitengröße von auf 100 % zu setzen

Verwandte Empfehlungen:

Sie können die Breite nach der Verwendung von {display:block} immer noch nicht festlegen? _html/css_WEB-ITnose

display:table, display:block Usage Difference

css hover: display:block; pseudo class Bei Anwendungen in Dropdown-Menüs muss auf die Verwendung von z-index_html/css_WEB-ITnose

geachtet werden

Das obige ist der detaillierte Inhalt vonDie Lösung für das Problem, dass die Breite beim Festlegen des display:block-Attributs des img-Tags nicht auf 100 % eingestellt werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erzielen Sie mit reinem CSS einen Animationseffekt ohne DOM-ElementeNächster Artikel：So erzielen Sie mit reinem CSS einen Animationseffekt ohne DOM-Elemente

In Verbindung stehende Artikel

Mehr sehen