display:none; と Visibility:hidden;_html/css_WEB-ITnose の違い-htmlチュートリアル-php.cn

如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素，

但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。

visibility: 隐藏对应的元素但不挤占该元素原来的空间。 display: 隐藏对应的元素并且挤占该元素原来的空间。

来看看下面的这个例子：

XML/HTML代码

可視性と表示のいくつかのパラメータを見てみましょう

可視性は設定に使用されます。要素の表示状態。

構文:

visibility: 継承 | 表示 | 非表示

パラメータ:

inherit: 前の親オブジェクトの可視性を継承

hidden: オブジェクトを非表示

collapse:テーブルの行または列を非表示にします。非表示の行または列は、他のコンテンツで使用できます。テーブル外の他のオブジェクトの場合、その機能は非表示と同等です。 IE5.5 はまだこのプロパティをサポートしていません。

説明:

オブジェクトを表示するかどうかを設定または取得します。表示プロパティとは異なり、このプロパティは、非表示のオブジェクトが占める物理スペースを予約します。

オブジェクトを表示したい場合は、その親オブジェクトも表示する必要があります。

対応するスクリプト機能は可視性です。私が書いた他の本もご覧ください。

display は要素の表示状態を設定するために使用されます。

構文: ブロックなし | インライン テーブル項目 | テーブル列グループ | table-footer-

group | table-header-group | table-row-group

パラメータ:

block: CSS1 ブロック オブジェクトのデフォルト値。この値を使用してオブジェクトの後に新しい行を追加します

none : CSS1 オブジェクトを非表示にします。可視性属性の非表示値とは異なり、非表示オブジェクトの物理スペースは保持されません。

inline: CSS1 インライン オブジェクトのデフォルト値。オブジェクトから行を削除するには、この値を使用します

compact : CSS2 コンテンツに基づいてオブジェクトをブロック オブジェクトまたはインライン オブジェクトとして割り当てます

mark : CSS2 コンテンツがコンテナ オブジェクトの前または後にあることを指定します。このパラメータを使用するには、オブジェクトを:afterおよび:before疑似要素と一緒に使用する必要があります

inline-table : CSS2 改行なしでテーブルをインラインオブジェクトまたはインラインコンテナとして表示します

list-item : CSS1 を指定しますブロックオブジェクトをリスト項目として使用します。また、オプションのプロジェクト フラグを追加できます

run-in: CSS2 コンテンツに基づいてオブジェクトをブロック オブジェクトまたはインライン オブジェクトとして割り当てます

table: CSS2 オブジェクトをブロック要素レベルでテーブルとして表示します

table-caption : CSS2 オブジェクトを表のタイトルとして表示します

table-cell: CSS2 オブジェクトを表のセルとして表示します

table-column: CSS2 オブジェクトを表の列として表示します

table-column-group: CSS2 オブジェクトを表の列グループとして表示します

table -header-group: CSS2: オブジェクトをテーブルヘッダーグループとして表示します

table-footer-group: CSS2: オブジェクトをテーブルフッターグループとして表示します

table-row: CSS2: オブジェクトをテーブル行として表示します

table-row-group : CSS2 オブジェクトをテーブル行グループとして表示します

説明:

オブジェクトを表示するかどうか、およびどのように表示するかを設定または取得します。

現在、IE5.5 は上記の CSS1 パラメーターのみをサポートしています。

上記はCSSによる公式の説明です。これら 2 つの CSS 属性について、多くの人はこれら 2 つの属性、特に部分的に重複する機能を区別できず、定義からは要素の表示状態と要素の可視状態の違いが概念的には明らかではありません。

visibility属性とdisplay属性の両方に要素を非表示にする機能があります。

ただし、visibility 属性を使用しても、ブラウザが Web ページを開く速度は低下しません。つまり、visibility 属性で制御される要素はブラウザには表示されませんが、閲覧領域には存在し、表示されます。ブラウザが Web ページを開いたときにダウンロードされます。この要素を削除すると、表示されなくなります。

そして、この要素はブラウザで表示されるページ内で独自のサイズを占める必要があり、この位置は空白のみです。

display 属性が none に設定されている場合、この要素は非表示要素になり、ブラウザは Web ページを読み込むときにこの要素を無視し、display 属性が設定されていない場合よりも速くコンテンツをダウンロードしません。急いで先に進みます。

概要

CSSのdisplay:none属性を使用した後、HTML要素(オブジェクト)の幅、高さ、その他の属性値は「失われます」。 可視性を使用した後: hidden 属性では、HTML 要素 (オブジェクト) は単に視覚的に見えない (完全に透明) だけですが、それが占める空間的位置は残ります。

CSS display:none と Visibility:hidden の違い

visibility:hidden は非表示ですが、閲覧時に位置は保持されます。CSS display:none は存在しないものとみなされ、読み込まれません。 Overflow 属性値 {visible|hidden|scroll|auto} は、最初に DIV の幅 (width) と高さ (height) を制限する必要があります。どちらも HTML 要素を非表示にし、視覚効果に違いはありませんが、一部の DOM 操作では依然として異なります。

CSS display:none;

この属性を使用すると、HTML 要素 (オブジェクト) の幅、高さ、およびその他の属性値が「失われます」; visibility:hidden;

この属性を使用した後、HTML 要素 (オブジェクト) は視覚的に見えなくなる (完全に透明になる) だけですが、それが占める空間的位置はまだ存在します。つまり、高さや幅などの属性値はまだ保持されています。