CSSのインラインブロックとはどういう意味ですか?

CSS では、インライン ブロックは「インライン ブロック要素」を指します。インライン ブロック要素は、インライン要素とブロック要素の両方の特性を持ちます。インライン ブロック要素は、他の要素と同じ行に配置できます。要素の高さ、幅、行の高さ、上下の余白をすべて設定できます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

block

ブロックレベル要素の機能:

1. 各ブロックレベル要素は新しい行で始まり、後続の要素も同様に始まります。新しい行で 行を開始します。 (本当に大げさですが、ブロックレベルの要素が 1 行を占めます)

2. 要素の高さ、幅、行の高さ、上下のマージンを設定できます。

3. 要素の幅が設定されていない場合、幅が設定されていない限り、その幅は親コンテナの 100% (親要素の幅と同じ) になります。

、

、

、

、

、
• はブロック要素の例です。

inline

インライン要素の特徴:

1. 他の要素と同じ行に;

2. 要素高さ、幅、上下の余白は設定できません。

3. 要素の幅は、要素に含まれるテキストまたは画像の幅であり、変更できません。

、、、、、、 はインライン要素の例です。

inline-block

インライン ブロック要素 (inline-block) は、インライン要素とブロック要素の両方の特性を持ちます。

inline-block 要素の特徴:

1. 他の要素と同じ行にあります;

2. 高さ、幅、行の高さ、上下の余白要素のすべてを設定できます。

注:

すべてのブラウザがこの属性をサポートしているわけではありません。現在サポートされているブラウザは次のとおりです: Opera と Safari。IE でインライン要素の表示を使用します。インライン ブロックは認識されませんIE では表示されますが、display:inline-block を使用すると、IE でレイアウトがトリガーされるため、inline 要素には display:inline-block 属性が設定されます。上記の分析から、IE ではブロック要素に display:inline-block 属性を設定しても inline-block の効果が得られない理由を理解するのは難しくありません。現時点では、ブロック要素のレイアウトは、display:inline-block によってのみトリガーされ、元々は行レイアウトであるため、トリガー後もブロック要素は行レイアウトのままであり、インラインとしてレンダリングされません。 Opera のブロック要素のようなオブジェクト。

IEdisplay:inline-block の効果を下部のブロック要素で実現するにはどうすればよいですか?

2 つの方法があります:
1. まず、display:inline-block 属性を使用してブロック要素をトリガーし、次に、display:inline を定義してブロック要素をインライン オブジェクトとしてレンダリングします ( 2 つのディスプレイ 効果を発揮するには、2 つの CSS ステートメントに順番に配置する必要があります。これは IE の古典的なバグです。display:inline-block が最初に定義されてから、ディスプレイがインラインまたはブロックに戻されると、レイアウトは消えません）。コードは次のとおりです (...他の属性は省略されています):

div {display:inline-block;...} 
div {display:inline;}

2. インライン オブジェクトとしてレンダリングされるブロック要素を直接設定し (display:inline 属性を設定)、レイアウトをトリガーします。ブロック要素の値 (zoom:1 など)。コードは次のとおりです:

div {display:inline; zoom:1;}

全体の概念

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

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

一般的なブロック レベルの要素には、p、FORM、TABLE、P、PRE、H1 ～ H6、 DL、OL、ULなど
一般的なインライン要素には、SPAN、A、STRONG、EM、LABEL、INPUT、SELECT、TEXTAREA、IMG、BR などが含まれます。

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

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

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がCSSのインラインブロックとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。