ホームページ > 記事 > ウェブフロントエンド > CSS 学習ノート -- ボックス モデル、ブロックレベル要素とインライン要素の違い_html/css_WEB-ITnose
CSS 学習ノート -- ボックス モデル、ブロックレベル要素とインライン要素の違い_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:30:181491ブラウズ
今日は当初、自分の計画に従ってフロントエンドの自動化を学ぶ予定でしたが、残念ながら午前中にタスク要件を受け取り、新しいページを追加する必要がありました。仕事でフロントエンドに切り替えて以来、私の主な焦点はほぼ完全に 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.
- 共通のブロックレベル要素は次のとおりです: div
a、span 要素に幅と高さを設定できるようにしたい場合インラインで表示するには、表示値を inline-block に設定します。
3 番目の質問: CSS の主な位置決めメカニズムは何ですか?
1. 標準のドキュメント フロー フォーム (上から下、左から右)
2. フロート (主にブロック レベルの要素に設定)
3.
別の問題はありますか？ 。 。フロートとは何ですか?絶対位置決めとは何ですか?人生は本当に質問と答えの連続です！これら 2 つの問題は明日解決されます。
2016年1月8日小さな一歩を踏み出さなければ、1,000マイルに到達することはできません
追記：私がチェックした情報のほとんどはインターネットから得たものです。侵害がある場合は、削除するために私に連絡してください。