コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

css_html/css_WEB-ITnose を非表示にする 4 つの方法

WBOY
リリース： 2016-06-24 11:15:31
オリジナル
1038 人が閲覧しました

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


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

ppskdkad

.div1{
opacity: 0;
width:200px;
height:200px;
border :1px 赤一色;
}

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


これは 2 番目の div Visibility:hidden Still ただ要素を非表示にしますが、レイアウトは引き続き占有します

効果を見てください

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

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


これは 3 番目の DIV です。display:none はレイアウトに影響しません
< /div>

信じられないなら見てください

.div3{
表示: なし;
幅:200px;
高さ:200px;
境界線:1px 赤一色;
}

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


これは 4 番目の div ですが、レイアウトには影響しないと思います。案の定、これはレイアウトには影響しません

見てください

.div4{
位置:絶対;
上:-9999px;
左: -9999px;
幅:200px;
高さ:200px;
ボーダー:1px赤一色;
}

関連ラベル：
css的四种隐藏方式
ソース：php.cn
前の記事：jsp_html/css_WEB-ITnose を使用してデータベースにデータを追加する際の問題 次の記事：異なる解像度でフォント表示が調整されて見えるようにする方法_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート