CSS 学習ノート -- ボックスモデル、ブロックレベル要素とインライン要素の違い_html/css

CSS 学習ノート -- ボックスモデル、ブロックレベル要素とインライン要素の違い_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:30:18

オリジナル

1518 人が閲覧しました

今日は当初、自分の計画に従ってフロントエンドの自動化を学ぶ予定でしたが、残念ながら午前中にタスク要件を受け取り、新しいページを追加する必要がありました。仕事でフロントエンドに切り替えて以来、私の主な焦点はほぼ完全に JavaScript でしたが、実際には CSS と HTML の基礎が非常に不十分でした。今日ページを書いていたとき、フロート、内部マージン、外部マージンに行き詰まっていました。などなど、かなりの時間を無駄にしてしまいました。

反省した結果、私にはこれらの基本的な側面に多くの欠陥があるため、今後の学習ノートは主に仕事で遭遇したいくつかの問題とその解決策について書く予定です。その中にはJS、CSS、HTMLの側面もあるかもしれませんが、基礎を固めるために日々学んだことを記録していきます。

今日のコーディングプロセス中にいくつかの質問を記録しましたが、これらの質問には自分では答えることができませんでした。

1. ボックスモデルとは何ですか?それは決して単純な div ではありません...

2. インライン要素とブロックレベル要素の違いとその特徴は何ですか?

3. CSS の主な位置決めメカニズムは何ですか?

最初の質問: ボックスモデルとは正確には何ですか? (以下は、情報を確認し本を読んだ後の私自身の要約です)

ボックスモデルは、CSS でページレイアウトを実装するためのアイデアです。ページのすべての要素をギフトボックスに似たボックスとして考えます。ギフトボックスには多くのレイヤーがあり、ページ要素はコンテンツ、境界線、内側と外側の余白などにも対応します。ここで特に注意していただきたいのは、ボックスモデルは要素を 3 次元として扱うということです。これについては後で詳しく説明します。

ボックスモデルの概念が理解できたところで、ボックスモデルの種類に注目してみましょう

現在、標準ボックスモデルと IE ボックスモデル 2 種類のボックスモデルがあります。それぞれは次のようになります:

上の図に従って違いがわかります:

標準ボックスモデル: 要素の幅と高さ = コンテンツ

IE ボックスモデル: 幅と要素の高さ =( content+border+padding )

このような違いがあるため、クロスブラウザの要件を満たすのはさらに困難になります。もちろん、この 2 つの方法では、標準のボックスモデルの方が明らかに優れています。これは、ブラウザーをまたいだ解決策です:

Web ページの先頭に DOCTYPE ステートメントを追加します:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ログイン後にコピー

これにより、すべてのブラウザーがページを解析します。 W3C 標準ボックスモデル要素によれば、クロスブラウザ要件を満たしています。

ボックスモデルにはスペースがあることも上で述べましたが、これは主にボックスを構成するさまざまなパーツのさまざまなレベルに反映されます。上から下への順序は

border----->content、padding----->background-image----->background-color----->margin

したがって、ページ要素のスタイルを扱うときは、これに注意する必要があります。

2 番目の質問: インライン要素とブロックレベル要素の違いとその特性は何ですか?要約は次のとおりです:

ブロックレベルの要素は排他的な行を占有します。デフォルトでは、その幅は親要素の幅を自動的に埋めます。

インライン要素は排他的な行を占有しません。 1 行に収まらないまでは折り返されません。また、

ブロックレベルの要素は幅と高さの属性を設定できます。
インライン要素の幅と高さの属性の設定は無効であり、その長さは主にコンテンツによって決まります
幅が設定されていても、ブロックレベルの要素は依然として排他的な行を占有します。ブロックレベルの要素は、マージンとパディングの属性を設定できます。
インライン要素のマージンとパディングの属性、水平方向のパディング左、パディング右、マージン左、およびマージン右はすべてマージン効果を生成します。ただし、垂直方向のpadding-top、padding-bottom、margin-top、およびmargin-bottomはマージン効果を生成しません。
ブロックレベルの要素はdisplay:blockに対応します。
インライン要素はに対応します。 display:inline.
共通のブロックレベル要素は次のとおりです: