CSSコアコンテンツ:標準フロー、ボックスモデル、フローティング、ポジショニング

目次

1.標準ストリーム

ブロック要素

行内元素

HTML要素との違い

第二に、ボックスモデル

三、フロート(フロート)

第四に、ポジショニング(ポジション)


1.標準ストリーム

標準フローとは、要素のレイアウトプロセスを指します。レイアウト要素は、デフォルトで左から右、トップダウンのフロー配置になります。そして最後に、フォームは上から下に行に分割され、要素は各行で左から右に順番に配置されます。

ブロック要素

  • 行を占有し、他の要素と並べることはできません
  • 幅と高さを設定できます

行内元素

  • 他の要素と並置され、
  • 幅と高さを参照することはできません。デフォルトの幅はテキストの幅です

HTML要素との違い

標準ストリームには特に多くの制限があります。標準ストリームではウェブページを作成できません。幅と高さは並べて表示できるため、変更できません。したがって、標準ストリームから逸脱する必要があります。

cssには、標準のドキュメントフローから要素を作成するための、フローティングと絶対位置、および固定位置の3つの方法があります。

第二に、ボックスモデル

CSSボックスモデルは、基本的に、マージン、境界線、パディング、実際のコンテンツなど、周囲のHTML要素をカプセル化するボックスです。

ボックスモデルを使用すると、他の要素と周囲の要素の境界との間のスペースに要素を配置できます。

説明する写真:

  • マージン -境界の外側の領域をクリアします。マージンは透明です。
  • 境界線- 内側の余白の周りとコンテンツの外側の境界線
  • パディング -コンテンツの周囲の領域をクリアします。パディングは透明です。
  • コンテンツ- ボックスのコンテンツ、テキストと画像の表示

三、フロート(フロート)

Float of CSSは要素を左また​​は右に移動し、周囲の要素も再配置されます

img{
    float:right;  //左浮动
    float:left;  //右浮动
    clear:boty;  //清除浮动
}

第四に、ポジショニング(ポジション)

position属性は、要素の配置タイプを指定します。

positionプロパティの5つの値:

  • static:デフォルト値。つまり、ポジショニングはなく、通常の標準ストリームオブジェクトに従います。
  • 相対:要素に対する相対位置
  • 修正済み:要素の位置は、ブラウザウィンドウに対して固定されています。
  • 絶対:絶対位置の要素の位置は、最も近い位置の親要素を基準にしています。要素に位置の親要素がない場合、その位置は<html>を基準にしています。
  • スティッキー:ユーザーのスクロール位置に基づく位置付け。スティッキーポジショニング要素は、ユーザーのスクロールに依存し、 位置:相対位置 と 位置:固定 位置を切り替えます。

これまでのところ、div + cssのコアコンテンツは終了しています。このブログがお役に立てば、メッセージを残してください+いいね!

おすすめ

転載: blog.csdn.net/promsing/article/details/108689885