CSS 表示 (ブロック インラインなし) の共通プロパティと使用法のチュートリアル

display 属性は、要素が生成するボックスのタイプを指定します。

この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメント タイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため危険です。 XML の場合、XML にはこの種の階層が組み込まれていないため、すべての表示が絶対に必要です。

1.display属性の詳細な紹介

1.CSSのDisplay属性の可能な値の説明

次のエディターは、可能な値に関する記事をお届けします。 CSS の Display 属性の。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう。 None この要素は表示されません。
block この要素はブロックレベルの要素として表示され、この要素の前後に改行が入ります。

2. CSSのdisplay属性の詳細な紹介

すべての主要なブラウザはdisplay属性をサポートしています。

注: Internet Explorer 8 (以降) は、!DOCTYPE が指定されている場合、属性値「inline-table」、「run-in」、「table」、「table-caption」、「table-cell」をサポートします。 「テーブル列」、「テーブル列グループ」、「テーブル行」、「テーブル行グループ」、および「継承」。

3. 表示と可視性の違いを詳しく説明します

可視性の非表示オブジェクトは、表示時にオブジェクトが占有する物理空間も保持しますが、表示は保持しません。

可視性: 非表示 (非表示)、可視 (表示) style="vislbility:hidden"

表示: なし (非表示)、ブロック (表示) style="display:none"

4. 、位置)

display は要素の表示モードを設定するために使用されます

display : block none inline

inline: オブジェクトを inline 要素として指定します

block: オブジェクトをブロック要素として指定します

none : 非表示オブジェクト

2. displayblock 属性の詳細な紹介

1.

Chrome で displayblock または inlineblock 要素が表示されない場合はどうすればよいですか?

display: inline-block または display: block 要素が Chrome で正常に表示されない場合はどうすればよいですか?

DEMO ページには入力ボックスが 1 つしかありませんが、入力ボックスにフォーカスがあると、高さが大きくなり、文字数表示と返信ボタンが表示されます。
現在の問題は、Chrome が最初の更新後にのみ入力ボックスをクリックすると高さが増加し、単語数の表示と返信ボタンの要素が表示されることです。ただし、入力ボックスを 2 回目にクリックすると、高さだけが増加します。増加しますが、文字数は表示されません。 表示と返信ボタン要素 (Firefox は通常です)

2.

div の表示と非表示の作り方

display 属性は、要素の表示モードを設定します。対応するスクリプト機能は表示で、オプションの値は none、block、inline です。各値の説明は次のとおりです:

none は要素を非表示にし、要素が表示されるときにスペースを保持しません。
ブロックモードで要素を表示します。
inline は要素をインラインで表示します。

3.

IE11でli inside-blockの改行が無効になる理由

最近Webページのタグのリストを作っていたのですが、最初は改行が不要なほうが楽だろうと思っていました。で、数分でコードの作成が完了し、Firefox と Chrome ブラウザではテストに合格しましたが、IE11 で確認すると、予想外に li inside-block が機能しませんでした。 IE11では！まだラインを変えています！

3.display:inline属性の詳しい紹介

1.

CSSのdisplay:flex||inline-flex属性の詳しい説明

FlexとはFlexible Boxの略で、「」を意味します。弾力性のある「レイアウト」により、ボックスモデルに最大限の柔軟性を提供します。任意のコンテナを Flex レイアウトとして指定できます。

flex: オブジェクトをフレキシブルボックスとして表示します

inline-flex: オブジェクトをインラインブロックレベルのエラスティックボックスとして表示します

2. CSSレイアウトのdisplay:inline-blockによって生じるギャップを解決する方法の詳細な説明

H5 カードを水平方向にスライドさせるときに、display:inline-block; を使用しましたが、同じ水平線上の要素の間に隙間があることがわかり、これは明らかに望んでいた効果ではないことがわかり、左フローティングに変更しました。ギャップ 問題は解決されましたが、左右の水平スクロールを実現するには親要素の幅を設定する必要があり、カードの数が固定されていないため、コード量が増加します。リアルタイムに設定するにはjsを使用する必要があるため、コードの量が増えても、それは最良の選択ではありません。最善の解決策は、display:inline-block; を使用することであると思われるため、ギャップの問題が発生します

4. display:none 属性の詳細な紹介

1.display:none と可視性の違いは何ですか。 between:hidden

当時の私の答えは、両方とも要素を非表示にすることができますが、要素をdisplay:noneに設定すると、要素によって以前に占められていたドキュメントフロースペースは同時にキャンセルされますが、可視性は次のとおりです。 hidden; 要素が表示されていない場合でもスペースを占有します。

電話インタビューでしたが、私が質問に答えた後、相手はディスプレイ関連の知識について質問を続けませんでした。

今思うと、ディスプレイ関連の知識を聞かれたら本当にラッキーです。絶対に戦えなくなるよ。

2.

CSSでページ要素を非表示にする5つの方法を解説

CSSでページ要素を非表示にする方法はたくさんあります。不透明度を 0、可視性を非表示、表示をなし、または位置を絶対に設定し、位置を非表示領域に設定できます。

要素を非表示にするテクニックはたくさんあるのに、それらはすべて同じ効果をもたらすように見えるのはなぜか疑問に思ったことはありますか?実際には、各方法には他の方法と微妙な違いがあり、これらの違いによって特定の状況でどの方法が使用されるかが決まります。このチュートリアルでは、覚えておく必要がある小さな違いについて説明し、さまざまな状況に応じて要素を非表示にするために上記の方法の中から適切な方法を選択できるようにします

3

css3 を使用して div を表示および非表示にするチュートリアルの例

show と以下は、純粋な CSS3 を使用してそれを実装する方法の紹介です。興味のある方は、関連する質問と回答

1. display:block; }JS の display との違いはありますか?
2. li と ul の両方が必要ですか?

3.

css - flexレイアウト、display:flex、display:-webkit-boxの違い

【関連する推奨事項】

1. CSSボックスのタイプと表示属性の詳細な説明

2.

CSS3のdisplay:boxボックスモデル属性の詳細説明

3.

以上がCSS 表示 (ブロック インラインなし) の共通プロパティと使用法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。