web-dev-qa-db-ja.com

表示なしと表示ブロックの違い

コントロールのスタイルの設定の違いは何ですかdisplay: noneおよびdisplay: block

7
iJade

Displayプロパティは、特定のHTML要素の表示方法を定義します。 Display blockおよびnoneは、html要素を表示または非表示にするために使用されます。表示プロパティと利用可能なオプションの詳細については、ここを参照してください。

  • none:要素はまったく表示されません。

  • block:ブロックレベルの要素として表示される要素(段落やヘッダーなど)

12
Adil

Display:none;-要素はDOMにありますが、表示されず、spaceとは異なり、visibility:hidden

Display:block;-ブロック要素はfull width使用可能で、他の要素をそれらの横に配置することはできません。例:div

9
Cdeez

これら2つのスタイルプロパティは、2つの異なることを行います。

display:none要素をドキュメントから完全に削除します。 HTMLがソースコードに含まれている場合でも、領域を占有しません。 (要素はボックスをまったく生成しません)

display:block要素は、使用可能なスペースの全幅に広がります。 (要素の前後の改行)

3

表示する別のニュアンスがあります:なし; divを子として動的に親div --に動的に挿入し、子の可視性プロパティを明示的に設定した場合 「可視」にするには、親の可視性プロパティは親を可視/不可視にするだけです。親の表示設定に関係なく、子は表示されたままになります。

このような場合(親/子の可視性は異なるスタイルルールで設定されます)、親のdisplay:none設定will親/子が個別にスタイル設定されている場合でも、すべての子を非表示にします。強調されたテキスト

1

display:noneは、要素がまったく表示されないことを意味します(したがって、例にも表示されません)。

display:blockは、段落とヘッダーが常に表示されているため、要素がブロックとして表示されることを意味します。ブロックには上下に空白があり、別の順序で並べ替えられている場合を除いて、ブロックの横にHTML要素はありません。

1
ravi gupta

あなたは私が思うCSSプロパティについて尋ねています。これは、DOM要素の表示/非表示に使用されます

CSSプロパティはdisplayで、値は「none」、「block」などです。

参照元:CSS Displayhttp://w3fools.com/ の推奨

ブロック

オブジェクトはブロック要素としてレンダリングされます。

なし

要素はレンダリングされません。要素(レイアウトには影響しません);すべての子要素の表示もオフになります。ドキュメントは、要素が存在しないかのようにレンダリングされます。

インライン

デフォルト。オブジェクトは、コンテンツのサイズに合わせたサイズのインライン要素としてレンダリングされます。

list-item

Internet Explorer 6以降。オブジェクトはブロック要素としてレンダリングされ、リスト項目マーカーが追加されます。

table-header-group

オブジェクトはtHeadとしてレンダリングされます。テーブルヘッダーは常に、他のすべての行と行グループの前、およびトップキャプションの後に表示されます。ヘッダーは、表にまたがる各ドキュメントに表示されます。

table-footer-group

オブジェクトはtFootとしてレンダリングされます。テーブルフッターは常に、他のすべての行と行グループの後で、下のキャプションの前に表示されます。フッターは、表にまたがる各ドキュメントに表示されます。

インラインブロック

オブジェクトはインラインでレンダリングされますが、オブジェクトのコンテンツはブロック要素としてレンダリングされます。隣接するインライン要素は、スペースが許す限り同じ行にレンダリングされます。

0

表示なし:コントロールを非表示にします。 element = "display:none"要素のプロパティを設定すると、Webページにレンダリングされず、実行されません。

ブロックの表示:Webページの要素をブロックレベルで表示します

0
Sohail Hameed

何も表示しないとコンテナーが非表示になります。divに適用すると、divの幅と高さも非表示になります。表示ブロックは包含を表示します。

0
Sky5005e

Display:none;は、要素が表示されないことを意味し、Display:block;は、要素がブロックレベルの要素(段落やヘッダーなど)として表示されることを意味します。

0
coder