CSSに隠されているコマンドとは

CSS には 3 種類の非表示コマンドがあります: 1. 位置を占有せずにすべてのコンテンツを非表示にするには、「display:none」を使用します。 2. 位置を占有せずにコンテンツを非表示にするには、「visibility:hidden」を使用します。位置; 3. オーバーフローコンテンツを非表示にするには、「overflow:hidden」を使用します。

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

CSS でコンテンツを非表示にする 3 つの方法と属性値

Web ページを作成する場合、コンテンツを非表示にすることも比較的一般的な方法であり、その機能は一般的に次のとおりです。テキスト/画像、リンクの非表示、範囲外のコンテンツの非表示、ポップアップ レイヤーの非表示、スクロール バーの非表示、位置ずれとフローティングのクリアなど。 CSS を使用して、上記のコンテンツを非表示にすることができます。コンテンツを非表示にするいくつかの方法:

1. すべてのコンテンツを非表示にするには、display:none を使用します

display:コード、テキスト、リンク、画像、P レイヤーなど、Web ページ内のすべてのコンテンツの表示を妨げる​​ことはできません。コンテンツを非表示にする場合には、これが推奨される方法です。

<p style="display:none;">我不占地儿，你看不见我；</p>

#インラインデフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。 run-inこの要素は、コンテキストに応じて、ブロック レベルの要素またはインライン要素として表示されます。 inherit表示属性の値を親要素から継承することを指定します。

Value	Description
none	この要素はありません示される。
block	この要素は、この要素の前後に改行を入れて、ブロック レベルの要素として表示されます。

2. コンテンツを非表示にするには、visibility:hidden を使用します。

visibility:hidden と display:none はコンテンツを非表示にできません。ほぼ同じですが、唯一の違いは、コンテンツを非表示にしますが、非表示にしたコンテンツがスペースを占有していることです。コンテンツが非表示になってもスペースが残っている位置は、Web ページ上で空白として表示されます。

<p style="visibility:hidden;">我占了地儿，你也看不见我；</p>

ValueDescriptionvisibleデフォルト値。要素が表示されます。 #hiddencollapseinherit

要素は非表示です。
テーブル要素でこの値を使用すると、行または列が削除されますが、テーブルのレイアウトには影響しません。行または列が占めていたスペースは、他のコンテンツのために解放されます。この値が別の要素で使用される場合、その値は「非表示」として表示されます。
可視性属性の値を親要素から継承することを指定します。

3. オーバーフロー コンテンツを非表示にするには、overflow:hidden を使用します。

overflow:hidden このメソッドは、固定領域を非表示にできます。外部コンテンツは、表示領域を効果的に制御できます。ただし、これを使用するときは、幅と高さを定義する必要があることに注意してください。定義しないと無効になります。

<p style="width:120px; height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</p>

オーバーフローの使用法には、overflow-x:hidden と というブランチがあります。 overflow-y:hidden、x は水平範囲、y は垂直範囲です。これら 2 つのプロパティは、スクロール バーを非表示にする必要がある場合によく使用されます。

#値説明visibleデフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。 hiddenコンテンツはトリミングされ、残りのコンテンツは非表示になります。 scrollコンテンツはトリミングされますが、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。 autoコンテンツがトリミングされると、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。 inheritオーバーフロー属性の値を親要素から継承することを指定します。 [推奨: 「css ビデオ チュートリアル 」]

以上がCSSに隠されているコマンドとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。