Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Diskussion zum Anzeigemodus von CSS-Elementen

Eine kurze Diskussion zum Anzeigemodus von CSS-Elementen

青灯夜游
青灯夜游nach vorne
2020-12-29 09:28:241753Durchsuche

Eine kurze Diskussion zum Anzeigemodus von CSS-Elementen

Empfohlen: CSS-Video-Tutorial

  In CSS werden verschiedene Element-Tags je nach Elementanzeigemodus in zwei Kategorien unterteilt: Inline-Elemente (Inline-Ebene) und Elemente auf Blockebene (Block-Ebene) .

1. Lassen Sie uns zunächst vorstellen, was Inline-Elemente und was Block-Level-Elemente sind.

 1.1. Inline-Elemente sind Elemente, die keine eigene Zeile belegen, wie zum Beispiel: span buis strong em ins del usw.;

 1.2. Elemente auf Blockebene, die selbst eine Zeile belegen. wie zum Beispiel: p p h ul ol dl li dt dd Warten.

2. Was sind die Unterschiede zwischen Inline-Elementen und Block-Level-Elementen?

 2.1, Inline-Elemente belegen nicht eine Zeile, aber Elemente auf Blockebene belegen eine Zeile;

 2.2, Inline-Elemente können keine Breite und Höhe festlegen und ihre Breite und Höhe ändern sich, wenn sich der Text ändert. Elemente auf Blockebene können die Breite und Höhe festlegen.

  Wenn Breite und Höhe nicht festgelegt sind, haben sie standardmäßig die gleiche Breite wie das übergeordnete Element Geben Sie dem Inline-Element

span

und dem Block-Level-Element p an. Legen Sie Stile fest, um den Unterschied zwischen Inline-Elementen und Block-Level-Elementen anzuzeigen:

<style>
        span{
            height: 200px;
            width: 300px;
            background-color: red;
            font-size: 40px;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: green;
            margin: 100px auto;
        }
        .son{
            background-color: blue;
        }
    </style>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS元素的显示模式</title>
</head>
<body>
    <span>我是span</span>
    <div>
        我是father
        <div>我是son</div>
    </div>
</body>
</html>


3, denn manchmal müssen wir nicht nur die Breite und Höhe festlegen des Elements, aber hoffen Sie auch, dass das Element keine Zeile einnimmt, dann werden häufig Inline-Blockelemente wie // angezeigt.

4. Wie konvertiere ich den Anzeigemodus von CSS-Elementen? inline -block

(Inline-Blockebene)

4.3, das folgende Beispiel besteht darin, den Anzeigemodus von

span in Blockebene zu konvertieren, das Anzeigeattribut von p

in Inline-Blockebene zu konvertieren und den Anzeigemodus von

zu konvertieren img zur Blockstufe

<style>
        /*将span转换为块级元素--*/
        *{
            margin: 0;
            padding: 0;
        }
        span{
            display: block;
            background-color: red;
            width: 400px;
            height: 400px;
        }
        /*将div转换为行内块级元素*/
        div{
            display: inline-block;
            background-color: green;
            width: 300px;
            height: 300px;
        }
        /*将img转换为块级元素*/
        img{
            display: block;
            width: 200px;
        }
    </style>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS元素的显示模式</title>
</head>
<body>
    <span>我是span</span>
    <div>我是div</div>
    <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg">

</body>
</html>
Weitere Programmierkenntnisse finden Sie unter: Programmierunterricht! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zum Anzeigemodus von CSS-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen