Quel est le code caché dans CSS3-tutoriel CSS-php.cn

Quel est le code caché dans CSS3

WBOY

Libérer： 2021-12-16 11:45:42

original

2311 Les gens l'ont consulté

Code : 1. "display:none", qui peut masquer l'élément sans occuper la position d'origine ; 2. "visibility:hidden", qui peut masquer l'élément en occupant la position d'origine ; 3. "overflow:hidden", masquer lorsqu'il dépasse la zone de l'élément ;4. "opacity:0" peut rendre l'élément transparent et masqué.

Quel est le code caché dans CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Quel est le code de l'effet show-hide CSS3 ?

En CSS, il existe quatre méthodes pour définir l'effet de masquage de l'élément.

1. L'attribut display peut être défini pour masquer l'élément sans occuper sa position d'origine.

L'attribut display spécifie le type de boîte que l'élément doit générer. Cet élément ne sera pas affiché lorsque la valeur de l'attribut est aucune.

L'exemple est le suivant :

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

Copier après la connexion

Résultat de sortie :

Quel est le code caché dans CSS3

2. L'attribut de visibilité peut définir l'élément pour qu'il occupe sa position d'origine et le masquer

L'attribut de visibilité spécifie si l'élément est visible. Cette propriété spécifie s'il faut afficher la boîte d'élément générée par un élément. Cela signifie que l’élément occupe toujours son espace d’origine, mais peut être totalement invisible. L'effondrement des valeurs est utilisé dans les tableaux pour supprimer des colonnes ou des lignes de la disposition du tableau.

L'exemple est le suivant :

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

Copier après la connexion

Résultat de sortie :

Quel est le code caché dans CSS3

3. L'attribut overflow peut être défini pour se cacher au-delà de la zone d'élément

L'attribut overflow spécifie ce qui se passe lorsque le contenu déborde de la zone d'élément. . Lorsque la valeur de l'attribut est masquée, le contenu est coupé et le contenu restant est invisible.

L'exemple est le suivant :

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

Copier après la connexion

Résultat de sortie :

Quel est le code caché dans CSS3

4. L'attribut opacité peut définir l'élément pour qu'il soit masqué de manière transparente

L'attribut opacité définit le niveau d'opacité de l'élément.

L'exemple est le suivant :

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

Copier après la connexion

Résultat de sortie :

Quel est le code caché dans CSS3