So verbergen Sie Inhalte in CSS

So verbergen Sie Inhalte in CSS: 1. Verwenden Sie „text-indent:-9999px;“; 2. Verwenden Sie „line-height:0;“; 3. Durch „display:none“; " ;5. Inhalte durch „position“ ausblenden.

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

6 Möglichkeiten, Textinhalte in CSS auszublenden

Als Web-Front-End-Entwickler, um HTML zu semantisieren , Es ist oft notwendig, Inhaltsmodule hinzuzufügen Fügen Sie einige Titel hinzu, um die Seite aussagekräftiger zu machen, und natürlich unsere Bildschaltflächen, die Seiteninformationen problemlos aufnehmen können, ohne ohne CSS herumzulaufen. Um bessere visuelle Effekte zu erzielen, ersetzen wir sie häufig Sie wurden mit Bildern versehen, und frühere Frontend-Entwicklungen haben den Inhalt oft nicht direkt im HTML-Code bereitgestellt (oder sogar leer), sodass es unmöglich ist, den Inhalt dieses Blocks zu kennen, wenn dies nicht der Fall ist In das CSS geladen

Beginnen Sie mit dem Thema, normalerweise wird die Schriftart wie folgt verschoben:

1. Verwenden Sie text-indent:-9999px

Es gibt jedoch eine Einschränkung. Dies gilt nur für den Block auf Blockebene. und wir möchten oft die Schriftart „a“ versetzen, sodass das Problem auftritt, dass text-indent:-9999px zwar bequemer zu verwenden ist, aber wenn „a“ in einen Block konvertiert wird, werden die Elemente dahinter oft auf den nächsten verschoben Wenn auf dieses a ein a-Button folgt, müssen Sie float verwenden, damit die Menge dahinter erscheint. 2. Verwenden Sie line-height: 0;

Der Code lautet wie folgt:

font-size:0;
overflow:hidden;

kann Ihren Hintergrund perfekt „verstecken“. Die oben genannten Schriftarten

wurden auf IE6.0, 7.0, 8.0 und Firefox 3.010 getestet und bestanden

Drittens ist es am bequemsten, sie hinzuzufügen eine Spanne und dann display: none, und auf diese Weise treten keine Fehler auf.

Leider gibt es ein weiteres Tag, wenn es in einer Schleife verwendet wird. Es wird empfohlen, es auf diese Weise für eine einzelne Schaltfläche zu verwenden.

Die Methode zum Ausblenden des Eingabewerts ist etwas schwierig

Daher können wir Block und Texteinzug nur zum „Offset“ verwenden, um das Ausblenden zu simulieren

display:block;
font-size:0;
line-height:0;
text-indent:-9999px;

Nach dem Test von IE6.0, 7.0, Firefox 3.010, bestanden

4 . display:none: Es kann alles, einschließlich des Containers selbst, verschwinden lassen. Es ist einfach und effektiv, weist jedoch zwei bekannte Mängel auf: Es ist nicht suchmaschinenfreundlich und wird von Bildschirmleseprogrammen ignoriert.

5. overflow:hidden:

Dies ist eine vernünftigere und meine Lieblingsmethode. Der spezifische Code lautet wie folgt:

Das Folgende ist der zitierte Inhalt:

Der Code lautet wie folgt:

.texthidden{
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:0;
height:0;
}

6. Position :absolut:

Verwenden Sie die absolute Positionierung, um es aus dem sichtbaren Bereich zu verdrängen. Obwohl die Sichtbarkeit nicht vorhanden ist, nimmt es dennoch physischen Raum ein, was dem Zweck des Versteckens von Text widerspricht.

Das Folgende ist der zitierte Inhalt :

Der Code lautet wie folgt:

.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}

Hinweis: später Obwohl die drei Methoden auch den Effekt des versteckten Textes erzielen können, werden sie nicht empfohlen.

Empfohlenes Lernen: „

CSS-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Inhalte in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!