CSS表示:インライン、ブロック、インラインブロックとの間の差

CSS、

表示:ブロック要素は、ブロックレベル要素として表示されます。

  • 常に新しい行に開始します。
  • 高さ、行の高さと上下の余白を制御することができます。
  • デフォルトは、設定された幅を除いて、容器の幅の100%です。
  • <DIV>、<P>、<H1>、<FORM>、<UL>と<LI>要素ブロックの一例です。

表示:インライン要素は、インライン要素として表示されます。

  • その要素は、1本のライン上にあります。
  • 行の高さと上下のマージンを変更することはできません。
  • その幅は、テキストや画像の幅で変更することはできません。
  • <スパン> A、<ラベル>、<入力>、<IMG>、<強い>と<em>のインライン要素の一例です。

表示:インラインブロックは、インラインオブジェクトとして描画オブジェクト:

       ブロックオブジェクトが提示されるようインラインオブジェクトへのオブジェクトが、オブジェクトのコンテンツを提示します。インラインオブジェクトの隣にスペースをできるように、同じ行に表示されます。具体的には、本出願の特徴要素は、要素の周りにインラインオブジェクトが同一線上に残るが、幅と高さのプロパティロット要素を設定することができる提示されます

例えば:

<ul>
  <li>问答</li>
  <li>头条</li>
  <li>专栏</li>
  <li>讲堂</li>
  <li>发现</li>
</ul>

 

そのようなシート効果のリストブラウザディスプレイ以下、ブロックレベル要素のLi、デフォルト表示:ブロック、すなわち、各ラップ意志のLi:

私はこのリストは水平に表示することができますしたい、あなたがディスプレイを使用する必要があり、この時間:インラインは、変換のli要素は、インライン要素です。

<style>

ul li{
  display: inline;
}

</style>

<ul>
  <li>问答</li>
  <li>头条</li>
  <li>专栏</li>
  <li>讲堂</li>
  <li>发现</li>
</ul>

次のようにこの時点で効果を閲覧します:

今、良い十分ではないのです、要素間のギャップは、各リチウムの幅を設定したい場合、あなたはセット幅に必要な、小さすぎる:は50px、質問は、インラインであるため、インライン要素として有効になりませんか全体の設定に関係なく、いいえ、幅、高さ、およびその他の属性、どのように?必要ディスプレイこの時間:li要素を維持することが依然として水平に配置されているインラインブロックが出現は、プロパティは、幅の問題を解決するように設定することができません。

<style>

ul li{
  display: inline-block;
  width: 50px;
}

</style>

<ul>
  <li>问答</li>
  <li>头条</li>
  <li>专栏</li>
  <li>讲堂</li>
  <li>发现</li>
</ul>

以下に示すように検索結果:

まとめ:

  • 表示:ブロック要素、いわゆるブロックレベル要素
  • 表示:インライン要素として知られているインラインエレメント
  • 表示:インラインブロック列のブロックレベル要素は、CSS特性(例えば、幅、高さ)を有し、一方の要素が残っては、要素をレイアウトするように
公開された39元の記事 ウォンの賞賛8 ビュー9177

おすすめ

転載: blog.csdn.net/cxd3341/article/details/102543514