CSS について (パート 1)_html/css_WEB-ITnose

追伸：これは私が勉強中にまとめた知識です、何か間違っている場合はご容赦ください。ありがとう。

CSS スタイル: インライン スタイル、内部スタイル、外部スタイル、それらの優先順位は次のとおりです: インライン、内部、外部、近接性の原則に従います。

1. HTML+CSS レイアウトは 3 つの主要なカテゴリに分類され、1 つは流動レイアウト、もう 1 つはフローティング レイアウト、3 つ目は絶対配置レイアウトです。

1. フローレイアウト

フローレイアウトは、水がさまざまなチャネルを通過し、さまざまな方法を示すようなものです。流動的なレイアウトについても同様です。リキッドレイアウト（「流体」とも呼ばれます）の特徴は、ページ要素の幅が画面に合わせて調整されることです。主な問題は、画面サイズのスパンが大きすぎると、画面サイズに比べて小さすぎたり、大きすぎたりすることです。本来のデザインでは大きな画面では正しく表示できません。

2. フローティング レイアウト

Web ページ上に要素を並べて配置し、列を作成するには、float 属性を使用します。このプロパティを使用すると、写真の周囲を囲むなどのラップ効果を作成できますが、このプロパティを

タグに適用すると、float は強力な Web レイアウト ツールになります。 float 属性は、Web ページ要素を Web ページ (または他の包含ブロック) の横に移動します。フロート要素の下に表示される HTML はすべて、Web ページ内で上に移動され、フロートの周囲にラップされます。

3. 絶対配置レイアウト

position属性の設定により実現されるレイアウトは、CSSで指定される3番目の配置機構であり、水平方向の複数列レイアウトやより複雑な配置を実現できます。位置属性: (1) 静的配置 (2) 相対配置 (3) 絶対配置
4 つの属性値を設定できます: static (静的配置)、相対 (相対配置)、固定 (固定配置)。

2. W3C 標準

図に示すように:

3. CSS で指定された配置メカニズム

1. 標準ドキュメント フロー:

標準ドキュメント フロー: 上から下、左から右、出力文書の内容。これは、ブロックレベルの要素と行レベルの要素で構成されます。

ブロックレベルの要素: ページを左から右に埋め、1 行を占め、ページの端に触れると自動的に折り返されます。

、

、
• 、

  、

  など...

  行レベルの要素: 同じ行に表示できます。 、いいえ、HTML ドキュメントの構造が変更されるため、幅と高さを設定することはできません。 などの display: block または inline-block を追加する必要があります。 ;img> とほとんどのフォーム要素。

  ブロックレベルの要素と行レベルの要素は両方ともボックスモデルに属します。

  ボックスモデル = Web ページレイアウトの要であり、次の 4 つの部分から構成されます:
  1. ボーダー
  2. マージン
  3. パディング
  4. ボックス内のコンテンツ

  int Him in box モデルサイズ：border+padding+margin +ボックス内のミディアムサイズ。