ホームページ  >  記事  >  ウェブフロントエンド  >  CSS: インライン要素とブロックレベル要素の違い (翻訳)_html/css_WEB-ITnose

CSS: インライン要素とブロックレベル要素の違い (翻訳)_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:53:091733ブラウズ

CSS ボックス モデルでは、HTML 要素はいくつかの異なるタイプに分類できます。これらのタイプの中で、最も一般的なタイプは、ブロックレベル要素とインライン要素の 2 つです。

バックエンド プログラマーとして、私はこれらの概念によく遭遇します。以前は、ブロックレベル要素とインライン要素の単純な違いしか知りませんでした。フロントエンドは現在の仕事と切り離せないものなので、ブロックレベルの要素とインライン要素の違いをより深く理解し、将来のフロントエンド学習の基礎を築きたいと考えています。

ブロックレベル要素

ブロックレベル要素には次の特性があります:

  • 幅が設定されていない場合、幅は自動的にその幅と一致します。親要素。
  • 高さが設定されていない場合、高さはデフォルトでその子要素の高さになります (子要素が float とposition に設定されていない場合)。
  • マージン/パディングを設定できます。
  • デフォルトでは、ブロックレベルの要素は 1 行を占めます。
  • vertical-align 属性は無視されます。

したがって、ブロックレベルの要素を親要素の幅に自動的に適応させたい場合は、ブロックレベルの要素の幅を設定したり、100% の幅を設定したりする必要はありません。維持するのが難しいでしょう。

HTML の一般的なブロックレベル要素: