Verwenden einiger Elemente von CSS

CSS-Stil Vorrang

!important
内联样式
内部样式
外部样式
浏览器默认样式

                                                                           Hohe -----------------> Niedrige

CSS-Attribut content

und in der Regel der Inhalt Attribut: vor und: Nach dem Pseudoelement-Selektoren in Verbindung mit, zum Einsetzen des erzeugten Inhalt

Immobilien Bedeutung
:Vor Legen Sie die Front
:nach Wird eingefügt

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>Web技术社区</title>
    <style>
        h1:before{
            content: "Hello";
         }
        h2:after{
            content: url("https://www.w3school.com.cn/i/html5_new_note.png");
        }

    </style>

</head>
<body>
     <h1>World</h1>
     <h2>HTML</h2>
</body>
</html>

Ergebnis
Hier hat Bild einfügen Beschreibung

Verwendung Überlaufeigenschaft

Wert Bedeutung
sichtbar Standardwert
Auto Wenn der Inhalt getrimmt wird automatisch Bildlaufleisten hinzufügen
versteckt Es wird automatisch aus dem überschüssigen Inhalt abgeschnitten und der abgeschnittene Inhalt nicht sichtbar ist
scrollen Wurde eingerichtet, um eine Bildlaufleiste angezeigt werden
     <p class="abc" style="width:200px;height:50px ;overflow:visible">
         较高级复杂的劳动,<br>是这样一种劳动力的表现,这种劳动力比较普通。。。。。。
     </p>
     <br>
     <hr>
     <p class="abc" style="width:200px;height:50px ;overflow:auto">
         较高级复杂的劳动,<br>是这样一种劳动力的表现,这种劳动力比较普通。。。。。。
     </p>
     <br>
     <hr>
     <p class="abc" style="width:200px;height:50px ;overflow:hidden">
         较高级复杂的劳动,<br>是这样一种劳动力的表现,这种劳动力比较普通。。。。。。
     </p>
     <br>
     <hr>

     <p class="abc" style="width:200px;height:50px ;overflow:scroll">
         较高级复杂的劳动,<br>是这样一种劳动力的表现,这种劳动力比较普通。。。。。。
     </p>
     <hr>

Ergebnisse:

Hier hat Bild einfügen Beschreibung

Anzeigeeigenschaften

Wie man Anzeigeelement wird auf Set-Anzeige verwendet

  1. Dieser Wert wird verwendet, keine zu verstecken Elemente zu machen, in der Regel für vorgefertigte, dynamische Anzeige verwendet
  2. Dieser Wert wird als Block-Block-Element dargestellt, das Element vor und nach dem Zeilenumbruch wird ,, seine Breite und Höhe kann auf der unteren rechten und linken inneren und dem äußeren Rand versehen sein,
  3. Dieser Wert wird inline Inline-Element angezeigt wird, keinen Zeilenumbruch vor und nach dem Elemente nicht Satz hoch, und die inneren und äußeren Ränder sein kann Breite
  4. Der Inline-Blockreihe Wert wird als innerhalb des Blockelementes sein, die sowohl den Wert des Blockwertes, Breite und Höhe Attribute haben können Eigenschaften festlegen, während die Charakteristik aufrechterhalten ist keine Inline-Vorschubwert Leitung
  5. inherit erben das übergeordnete Element der Anzeigeeinstellungen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>Web技术社区</title>
    <style>
        span.inline_box{
            border: solid 1px #1fa8b4;
            display: inline-block;
            width: 100px;
            text-align: center;
        }
        .inline{
            display: inline;
        }
    </style>

</head>
<body>
     <p style="display: none" id="demo">大家好。。。。。</p>
     <button onclick="document.getElementById('demo').style.display=''">显示</button>
     <button onclick="document.getElementById('demo').style.display='none'">隐藏</button>
     <p><span style="display: block">hello</span> word</p>
     <div class="inline">hello </div>
     <div class="inline">world</div>
     <br>
     <span class="inline_box"> HTML</span>
     <span class="inline_box"> CSS</span>
     <span class="inline_box"> JQuery</span>
</body>
</html>

Ergebnisse:

Hier hat Bild einfügen Beschreibung

Veröffentlicht 39 Originalarbeiten · erntete Lob 13 · Ansichten 2323

Ich denke du magst

Origin blog.csdn.net/qq_43205282/article/details/103411680
Empfohlen
Rangfolge