css: ブロック、インライン、およびインラインブロックの使用法と違い

全体の概念

1. ブロックとインラインの 2 つの概念は略語であり、完全かつ正確な用語はブロックレベル要素 (ブロックレベル要素) とインライン要素 (インライン要素) です。通常、ブロック要素は独立したブロックとして実現され、別の行に変更されます。インライン要素は前後で改行されず、行がいっぱいになるまで一連のインライン要素が 1 行に表示されます。

2. 一般に、HTML 要素には独自のレイアウト レベル (ブロック要素またはインライン要素) があります。

• 一般的なブロックレベル要素には、 DIV、FORM、TABLE、P、PRE、H1~H6、DL 、OL が含まれます。 、ＵＬら。

• 一般的なインライン要素には、SPAN、A、STRONG、EM、LABEL、INPUT、SELECT、TEXTAREA、IMG、BR などが含まれます。

block 要素には block 要素と inline 要素を含めることができますが、inline 要素には inline 要素のみを含めることができます。これは一般的な記述であり、各特定の要素に含めることができる要素も特定であるため、この規則は個々の要素には適用されないことに注意してください。たとえば、P 要素にはインライン要素のみを含めることができますが、ブロック要素は含めることができません。

一般的に、display:inline と display:block の設定を通じて要素のレイアウト レベルを変更できます。

block、inline、inlinke-blockの詳細の比較

追加説明

• 通常、要素のレイアウトレベルを調整するには、display:block、display:inline、またはdisplay:inline-blockを使用します。実際、表示パラメータはこれら 3 つよりもはるかに多くあり、より一般的に使用されるだけです。

• IE (IE の下位バージョン) は元々 inline-block をサポートしていないため、IE のインライン要素には display:inline-block を使用します。理論上、IE は認識しませんが、display:inline-block を使用すると、レイアウトは IE でトリガーされるため、インライン要素は display:inline-block 属性のようになります。

• display:inline-block

• display:inline

• display:block

1. は単にオブジェクトをインラインオブジェクトでレンダリングすることを意味します。ただし、オブジェクトの内容は提示されますブロックオブジェクトとして。後続のインライン オブジェクトは同じ行に配置されます。たとえば、リンク (要素) に inline-block 属性値を与えると、リンクがブロックの幅と高さの特性と、インラインのピア特性の両方を持つようになります。

2. 
   

3. インライン要素は単独で行を占有することはなく、1 行に収まらないまでは新しい行が追加されます。要素。

4. インライン要素の幅と高さの属性の設定は無効です。

5. インライン要素の margin 属性と padding 属性、水平方向の padding-left、padding-right、margin-left、および margin-right はすべてマージン効果を生成しますが、垂直方向の padding-top、padding-bottom、margin -top はマージン効果を生成します。 、 margin-bottom はマージン効果を生成しません。

1. 
   

2. ブロック要素は独自の行を占有し、複数のブロック要素はそれぞれ新しい行を持ちます。デフォルトでは、ブロック要素の幅がその親要素の幅に自動的に収まります。

3. block要素は幅と高さの属性を設定できます。ブロックレベル要素の幅が設定されている場合でも、依然として排他的な行を占有します。

4. block要素はmarginとpadding属性を設定できます。

1. 
   

以上がcss: ブロック、インライン、およびインラインブロックの使用法と違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。