ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでdivを非表示にする方法
CSSでdivを非表示にする方法
- 藏色散人オリジナル
- 2021-04-25 09:30:5010605ブラウズ
div を非表示にする Css メソッド: 1. div を非表示にするには "display:none" を使用します; 2. div を非表示にするには "visibility: hidden;" を使用します; 3. div を非表示にするには "opacity: 0" を使用します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
普段Webサイトをレイアウトする際にpを非表示にしたいのですが、cssを使ってpの表示・非表示を制御する方法がわからない人も多いのではないでしょうか？ cssでpを非表示にする方法を解説します。
1.display:none を使用して div を非表示にします
display:none 属性を使用して、テキストや画像を含むすべての情報を非表示にできます。構文は次のとおりです。 # #
dc6dce4a544fdca2df29d5ac0ea9906b这里你是看不到的16b28748ea4df4d9c2150843fecfba68p で CSS スタイルを使用する場合、display:none 属性を使用してコンテンツを非表示にすることができ、ブラウザーには表示されません。同時に、非表示のコンテンツはスペースを占有せず、は非表示です。後続のコンテンツは検索エンジンによって読み取られません。通常、表示されているアイコンを非表示にするために js 統計コードを使用します。
2. div を非表示にするには、visibility: hidden; を使用します。
visibility 属性は、要素が表示されるかどうかを指定します。 この属性は、要素によって生成される要素ボックスを表示するかどうかを指定します。これは、要素がまだ元のスペースを占めていますが、完全に非表示になる可能性があることを意味します。値の折りたたみは、テーブル レイアウトから列または行を削除するためにテーブルで使用されます。 属性値:- 表示されるデフォルト値。要素が表示されます。 #隠し要素は表示されません。
- collapse テーブル要素内で使用すると、この値は行または列を削除しますが、テーブルのレイアウトには影響しません。行または列が占めていたスペースは、他のコンテンツのために解放されます。この値が別の要素で使用される場合、その値は「非表示」として表示されます。
opacity 属性は、要素の透明度を設定することを意味します。要素の境界ボックスを変更するようには設計されていません。
これは、不透明度を 0 に設定すると、要素が視覚的に非表示になるだけであることを意味します。要素自体は引き続き独自の位置を占め、Web ページのレイアウトに貢献します。これは、上記の「visibility: hidden」に似ています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
div{
height: 20px;
}
.demo{
width: 800px;
height: 60px;
margin: 50px auto;
border: 1px solid red;
}
.hide,span{
opacity: 0;
}
</style>
</head>
<body>
<div>
<div sty>元素隐藏1--opacity: 0</div>
<div>元素隐藏2--opacity: 0</div>
<div>元素隐藏3--opacity: 0</div>
</div>
<div>
<div>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</div>
<div>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</div>
</div>
</body>
</html>レンダリング:
[推奨学習:
以上がCSSでdivを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。