コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSSを非表示にする4つの方法

CSSを非表示にする4つの方法

WBOY
リリース： 2016-06-16 08:39:28
オリジナル
1026 人が閲覧しました

1.opacity:0 は要素を非表示にするだけですが、依然としてレイアウトを占有しているため、レイアウトに影響します


snda:opacity:0 は要素を非表示にするだけですが、それでもレイアウトを占有するため、依然としてレイアウトに影響します

ppskdkad

.div1{
不透明度: 0;
幅:200px;
高さ:200px;
ボーダー:1px 赤一色;
}

2.visibility: hidden は要素を非表示にするだけですが、レイアウトを占有します


これは 2 番目の div の可視性です:hidden は要素を非表示にするだけですが、レイアウトを占有します

.div2{
可視性: 非表示;
幅:200px;
高さ:200px;
境界線:1px 赤一色;
}

3.display:none はレイアウトに影響しません


これは 3 番目の DIV 表示です。どれもレイアウトに影響しません。

そうでない場合は確認してください。信じてください

.div3{
表示: なし;
幅:200px;
高さ:200px;
ボーダー:1px 赤一色;
}

4.position:absolute はレイアウトには影響しません


これは 4 番目の div です。レイアウトには影響しないと思いますが、一緒に見てみましょう。レイアウトのいずれか

Look

.div4{
位置: 絶対;
上:-9999px;
左:-9999px;
幅:200px;
高さ:200px;
境界:1px 実線赤;
}

関連ラベル：
css的四种隐藏方式
ソース：php.cn
前の記事：CSS を使用して垂直方向の中央揃えを実現するいくつかの方法 次の記事：レイヤドリフトを設定する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
表セルのコンテナが親セルの高さ全体を占めるようにしてください。 Flexboxを使用せずにコンテンツを垂直方向に整列させようとしています。このユースケースにはいくつかの問題があるため、垂直方向に整列されたテーブルでそれを行おうとしていますが、問...
から 2024-04-04 16:03:18
0
1
404
React を使用して 3 つのページを構築しています。各ページには独自の CSS ファイルがあり、各ページに CSS ファイルは 1 つだけあります。 私はこれら 3 つのページに取り組んでいます。App.js には 2 つのボタンがあり、最初のボタンをクリックすると「/quotes」ページに移動し、2 番目のボタンをクリックする...
から 2024-04-04 10:07:16
0
1
394
Vanilla JS setTimeout(): 間違った動作の特定 ハンバーガー メニューのアニメーションを HTML、CSS、およびバニラ JavaScript で作成しました。期待される結果 ハンバーガー メニュー ボタンをクリックすると、次の...
から 2024-04-02 20:44:40
0
1
284
インナーチャイルドの過渡期の火 これは再現可能な最小限の例です。 「トグル」ホバーの遷移端が起動し（これは望ましくありません）、途中で「a」が非表示になります。変換後に再度表示するには、「切り替え」をクリックしま...
から 2024-04-02 14:38:29
0
1
262
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート