CSS-Layouteigenschaften steuern das Ausblenden und Anzeigen von Elementen

Dieser Artikel vermittelt Ihnen relevantes Wissen über css. Er stellt hauptsächlich Probleme im Zusammenhang mit der Anzeige, Sichtbarkeit, Überlauf und Deckkraft vor . Hilfreich.

(Teilen von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

CSS bietet einige Attribute, mit denen Elemente ein- und ausgeblendet werden können, nämlich Anzeige, Sichtbarkeit, Überlauf und Deckkraft.

1.Anzeigeattribut

Das Anzeigeattribut wird verwendet, um festzulegen, wie ein Element angezeigt wird.

          display: none; Hidden object

            display: block; es bedeutet auch, Elemente anzuzeigen.

display nimmt nicht mehr die ursprüngliche Position ein, nachdem das Element ausgeblendet wurde

Beispiele sind wie folgt:

Das Anzeigeattribut wird verwendet, um festzulegen, wie ein Element angezeigt werden soll.

display: none 隐藏对象
 
display：block 除了转换为块级元素之外，同时还有显示元素的意思。

Eigenschaften: Nach dem Ausblenden des Anzeigeelements nimmt nicht mehr seine ursprüngliche Position ein. (Wenn die Leute weg sind, ist das Geld weg)

Die letztere Anwendung ist extrem umfangreich und kann mit JS verwendet werden, um viele Spezialeffekte für Webseiten zu erstellen.

Beispiel:

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        .peppa {
            /* display: none; */
            display: block;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .george {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>


    <div>佩奇</div>
    <div>乔治</div>

2.Sichtbarkeit Sichtbarkeit

Eigenschaften: Sichtbarkeit Nachdem ein Element ausgeblendet wurde, nimmt es weiterhin seine ursprüngliche Position ein.

Wenn das ausgeblendete Element nicht seine ursprüngliche Position haben möchte, verwenden Sie „visibility:hidden“.

Wenn das ausgeblendete Element nicht seine ursprüngliche Position haben möchte, verwenden Sie „display:none“.

Mit dem Attribut „visibility“ wird angegeben, ob ein Element sichtbar sein soll oder nicht versteckt.

• Sichtbarkeit: sichtbar; Element ist sichtbar

• Sichtbarkeit: ausgeblendet; Element ist ausgeblendet

Sichtbarkeit Nach dem Ausblenden des Elements verbleibt es weiterhin in seiner ursprünglichen Position

3.overflow Überlauf

Das Überlaufattribut gibt an, was passiert, wenn Inhalt über den Begrenzungsrahmen eines Elements hinausgeht (über die angegebene Höhe und Breite hinaus).

• Überlauf: sichtbar; Inhalt nicht ausschneiden oder Bildlaufleisten hinzufügen

• Überlauf: ausgeblendet; Inhalte, die die Objektgröße überschreiten, nicht anzeigen und den überschüssigen Teil ausblenden.

• Überlauf: Unabhängig davon, ob der Inhalt überschritten wird oder nicht, wird die Bildlaufleiste immer angezeigt.

• Überlauf: automatisch; die Bildlaufleiste wird über den angegebenen Grenzwert hinaus angezeigt, und die Bildlaufleiste wird nicht angezeigt, wenn sie den angegebenen Grenzwert nicht überschreitet.

Unter normalen Umständen dürfen überlaufende Inhalte nicht angezeigt werden, da der ausgehende Teil das Layout beeinträchtigt.

Wenn positionierte Felder vorhanden sind, verwenden Sie overflow:hidden bitte mit Vorsicht, da dadurch die überflüssigen Teile ausgeblendet werden.

wird wie folgt zusammengefasst:

AttributwertBeschreibungSchneidet keine Inhalte aus und fügt keine Bildlaufleisten hinzuNicht anzeigen mehr als Objekte Für den Inhalt der Größe wird der überschüssige Teil ausgeblendet Die Bildlaufleiste wird automatisch angezeigt, wenn der Inhalt überschritten wird, und die Bildlaufleiste wird nicht angezeigt, wenn der Inhalt überschritten wird

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
• 但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。

示例：

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        .peppa{
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条，不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto溢出的时候才显示滚动条，不溢出不显示滚动条 */
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>


    <div>
        《小猪佩奇》（Peppa Pig）是英国动画公司Astley Baker Davies与Entertainment One制作的原创欧洲儿童系列电视动画 [11]  [13]  ，由内维尔·阿斯特利、马克·贝克、菲尔·霍尔与乔里斯·范胡尔岑执导 [14]  ，于2004年5月31日在英国电视五台首播 [15]  ，2015年6月，《小猪佩奇》引进中国大陆，并在中央电视台少儿频道首播 [17]  
    </div>

4.opacity 元素整体透明度

opacity属性让其元素整体（包括内容）一起透明。

用法：opacity：属性值；

属性值取值：0~1之间的数字， 1表示完全不透明，0表示完全透明。

  

opacity会让元素整体透明（包括内容、文字、子元素）

5. 元素的显示与隐藏小结

sichtbar
versteckt

属性	区别	用途
display 显示 （重点）	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 可见性 （了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

（学习视频分享：css视频教程、html视频教程）

Das obige ist der detaillierte Inhalt vonCSS-Layouteigenschaften steuern das Ausblenden und Anzeigen von Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!