Heim > Artikel > Web-Frontend > Was ist der versteckte Code in CSS3?
Was ist der versteckte Code in CSS3?
- WBOYOriginal
- 2021-12-16 11:44:592354Durchsuche
Code: 1. „display:none“, das das Element ausblenden kann, ohne die ursprüngliche Position einzunehmen; 2. „visibility:hidden“, das das Element ausblenden kann, indem es die ursprüngliche Position einnimmt; 3. „overflow:hidden“, Wenn es die Elementbox überschreitet, kann „opacity:0“ das Element transparent und ausgeblendet machen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was ist der CSS3-Code zum Ausblenden von Elementen?
In CSS gibt es vier Methoden, um den Effekt zum Ausblenden von Elementen festzulegen.
1. Das Anzeigeattribut kann so eingestellt werden, dass das Element ausgeblendet wird, ohne seine ursprüngliche Position einzunehmen.
Das Anzeigeattribut gibt den Typ des Felds an, das das Element generieren soll. Dieses Element wird nicht angezeigt, wenn der Attributwert „none“ ist.
Das Beispiel lautet wie folgt:
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而 div 元素不会显示出来！</p>
<div>div 元素的内容不会显示出来！</div>
</body>
</html>Ausgabeergebnis:
2. Das Sichtbarkeitsattribut kann das Element so einstellen, dass es seine ursprüngliche Position einnimmt und es ausblendet. Diese Eigenschaft gibt an, ob die von einem Element generierte Elementbox angezeigt werden soll. Das bedeutet, dass das Element weiterhin seinen ursprünglichen Platz einnimmt, aber völlig unsichtbar sein kann. Die Wertereduzierung wird in Tabellen verwendet, um Spalten oder Zeilen aus dem Tabellenlayout zu entfernen.
Das Beispiel sieht wie folgt aus:<html>
<head>
<style type="text/css">
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}
</style>
</head>
<body>
<h1 class="visible">这是可见的标题</h1>
<h1 class="invisible">这是不可见的标题</h1>
</body>
</html>Ausgabeergebnis:
3. Das Überlaufattribut kann so eingestellt werden, dass es sich hinter der Elementbox versteckt.
Das Überlaufattribut gibt an, was passiert, wenn der Inhalt die Elementbox überläuft . Wenn der Attributwert ausgeblendet ist, wird der Inhalt gekürzt und der verbleibende Inhalt ist unsichtbar.
Das Beispiel sieht wie folgt aus:<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden;
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>Ausgabeergebnis:
4. Das Opazitätsattribut kann festlegen, dass das Element transparent ausgeblendet wird. Das Opazitätsattribut legt den Deckkraftgrad des Elements fest.
Das Beispiel sieht wie folgt aus: <html>
<head>
<style>
.div1{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}
.div2{
opacity:0;
}
</style>
</head>
<body>
<div class="div1">本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>
<div class="div2">本元素的不透明度是 0。请注意，文本和背景色都受到不透明级别的影响。</div>
</body>
</html>Ausgabeergebnis:
CSS-Video-Tutorial
)Das obige ist der detaillierte Inhalt vonWas ist der versteckte Code in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!