Eine kurze Diskussion zum Anzeigemodus von CSS-Elementen-CSS-Tutorial-php.cn

Eine kurze Diskussion zum Anzeigemodus von CSS-Elementen

青灯夜游

Freigeben： 2020-12-29 09:28:24

nach vorne

1798 Leute haben es durchsucht

Eine kurze Diskussion zum Anzeigemodus von CSS-Elementen

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>

Nach dem Login kopieren

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS元素的显示模式</title> </head> <body> <span>我是span</span> <div> 我是father <div>我是son</div> </div> </body> </html>
Nach dem Login kopieren

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>

Nach dem Login kopieren

<!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>

Nach dem Login kopieren

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!