CSSで要素を非表示にする方法は何ですか

方法: 1. "display:none" ステートメントを設定します。 2. "visibility:hidden" ステートメントを設定します。 3. "opacity:0" ステートメントを設定します。 4. ボックス モデル属性を 0 に設定します。 ; 5. 「position:absolute;top:-9999px;」ステートメントを使用します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css で要素を非表示にする方法

display:none

要素の表示を none に設定するのが最も効果的です。一般的に使用される隠し要素メソッド。

.hide {
    display:none;
}

要素を display:none に設定すると、その要素はページ上で完全に消え、その要素が元々占めていたスペースは他の要素によって占められます。つまり、ブラウザがリフローし、描き直します。

visibility:hidden

要素の可視性を非表示に設定することも、要素を非表示にする一般的に使用される方法です。display:none との違いは、要素がページから消えた後、占有しているスペースは残ります。保持されるため、ブラウザは再描画されるだけで、リフローは行われません。

.hidden{
   visibility:hidden
}

visibility:hidden は、要素が非表示になった後にページ レイアウトを変更したくないシナリオに適しています

opacity:0

opacity 属性は誰もが信じていることです。は要素の透明度を表すことを知っており、要素の透明度を 0 に設定すると、その要素はユーザーの目にも表示されなくなります。これは要素を非表示にする方法です。

.transparent {
     opacity:0;
}

このメソッドと Visibility:hidden の共通点の 1 つは、要素が非表示になった後もスペースを占有していることですが、透明度を 0 に設定した後は要素が非表示になるだけで、依然として表示されることは誰もが知っています。ページ上に存在します。

ボックスモデルの高さ、幅などの属性を0に設定する

これは私がまとめたちょっと変わったテクニックですが、簡単に言うとマージン、ボーダー、パディング、高さ、幅を設定するというものです。要素のボックス モデルに影響する属性は 0 に設定されます。要素内にサブ要素またはコンテンツがある場合は、そのサブ要素を非表示にするために overflow: hidden も設定する必要があります。これはトリックです。

.hiddenBox {
    margin:0;
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

この方法は実用的ではなく、問題が発生する可能性があります。ただし、要素の overflow:hidden を設定し、タイマーを通じて要素の高さと margin-top を継続的に設定する jquery の slideUp アニメーションなど、私たちが通常使用する一部のページ効果は、この方法で完成する場合があります。 bottom、border-top、border-bottom、padding-top、padding-bottom は 0 であるため、slideUp 効果が実現されます。

位置: 絶対、要素を非表示に設定します。

span{
	position: absolute;
	top: -9999px;
   	left: -9999px;
}

位置: 絶対、要素を非表示に設定する主な原則は、要素の上部と左を設定することです。要素を十分に大きな負の数に変更して、画面上で非表示にします。

推奨学習: 「css ビデオ チュートリアル 」

以上がCSSで要素を非表示にする方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。