表示属性の深い理解と応用 (1)

表示は正式に次のように定義されています: 要素が生成するボックスのタイプを指定します。この記事では、一般的に使用される 6 つの値 (none、block、inline、inline-block、inherit、および flex) のみに焦点を当てます。他のテーブル、リスト項目などは推奨されなくなりました。

一、なし

この要素は表示されません。主に可視性属性が非表示の場合と区別されます。

1) 要素が none の場合、js はこの要素を取得できますが、この要素のビジュアル属性の値を取得/設定することはできません (ただし、カスタム属性の値は設定できます)。たとえば、CSS 属性の値などです。これは、要素が none の場合、その要素がブラウザによってレンダリングされないことも意味します。

2) 要素の可視性の値が非表示の場合、要素は表示されませんが、CSS 関連の属性を含む要素の任意の値を取得/設定できます。これは、この時点で要素がブラウザーによってレンダリングされている (ドキュメント フロー内の位置を占めている) が、非表示の状態にあることも示しています。

3) サンプルコードは次のとおりです:

CSSコード:

リーリー

Js/htmlコード:

リーリー

2.ブロック

要素をブロックレベル要素として設定し、ボックスモデル関連の属性を適用します。デフォルトの幅は 100% で、高さは適応型になります。マージンとパディングは両方とも有効です。幅または高さを占める子要素が存在しない場合、高さはゼロになります。

コードは次のとおりです:

リーリー

エフェクトのスクリーンショット:

3、インライン

インライン要素、または display:inline を通じてインライン要素として変更された要素は、インライン要素の動作を持ちます。

1) 複数のインライン要素が一列に並び、複数のインライン要素の間には約 8 ピクセルのギャップが生じます。8 ピクセルのギャップの解決策は次のとおりです。

a) 次のコードに示すように、HTML テキストは意識的に 1 行に配置されています。

リーリー

b). marginq に負の値である margin-left:-8px を使用します。また、外側のレイヤーの文字間隔と単語間隔に負の値を使用することもできます (このようなテスト要素では、設定された属性をリセットする必要があります)。 )

リーリー

リーリー

c) を実現するには、インライン要素をラップする外側の要素に font-size:0px と -webkit-text-size-adjust:none を追加します。

リーリー

リーリー

2) Inline要素の幅と高さが無効です

3) Inline要素のpadding

は全て有効

ですが、左右のマージンは有効、

上下は無効です。 4) インライン要素はインライン要素をラップし、外側の要素の幅と高さは内側の要素によって引き伸ばされます

リーリー

リーリー

5) ブロック/インラインブロック要素は、デフォルトでは、幅が幅を超え、高さが拡張されると、自動的に折り返されます。

a) 強制的に改行しないようにするには、white-space:nowrap を使用します。このとき、オーバーフローが表示され、overflow:hidden と text-overflow:ellipsis の組み合わせによって表示を省略できます。

リーリー

リーリー