BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. CSS/HTML

ポジションプロパティで進めるcssの簡単な説明

2022-01-19 20:11:42

1. 正常な流れ　　　　　　　　　

ノーマルフロー ノーマルフローはデフォルトの位置決め方法です。特に {position:absolute} または {position:fixed} 属性が指定されておらず、フローティングされていない要素は、デフォルトでこの属性を取得します。

この方法では、ブロックレベル要素はその内包するブロック内で縦に一つずつ伸び、インライン要素はその内包するブロック内で左から右へと水平に並べられます。

注目すべきは、通常のフローでは垂直方向の余白（バーティカル・マージン）が重なっていることである。つまり、上下のブロックレベルのボックスの間のマージンは、それらの合計ではなく、それらの中でより大きなマージンを持つ要素によって決定されるのです 

<style>
div
{
    width: 100px;
    height: 100px;
    border: 1px solid #00A4CC;
    background-color: #3e8f3e;
}
.div1
{
    margin:20px 0;
}
.div2
{
    margin:40px 0;
}
</style>
</head>

<body>
<div class="div1"></div>
<div class="div2"></div>
</body>

以下のように効果が表示されます。

div1とdiv2の垂直方向の距離は、大きなマージンによって決定され、2つの合計が60pxではなく、div2が40pxとなります。

次に、インライン要素が壊れており、幅が制約されると自動的に次の行に移動してしまうことです。これは、インラインブロックにボーダーがある場合、見苦しい効果をもたらすことがあります。次の効果をご覧ください。 

<head>
<style>
div
{
    width: 200px;
    height: 100px;
    border: 1px solid #00A4CC;
}

span
{
    border: 2px solid #00ff00;
}
</style>
</head>

<body>
<div>
    <span> I'll drop to the next line I'll drop to the next line I'll drop to the next line </span>
</div>
</body>

以下のように効果が表示されます。

2. 含有ブロック　　　　　　　　

含有するブロック。ビジュアルフォーマットモデルの重要な概念で、ボックスモデルと似ており、それが含む要素の基準となる矩形として理解でき、そのサイズと位置は多くの場合、要素の包含ブロックによって決定される。つまり、要素のボックスの位置とサイズは、要素の包含ブロックと呼ばれる特定の矩形との相対関係で計算されることがあります。

要素の包含ブロックは次のように定義される。

1. ユーザエージェント（ブラウザなど）は、ルート要素を包含ブロックとして選択する（初期包含ブロックと呼ぶ）。

2. その他の要素については、その要素が絶対位置を使用していない限り、包含ブロックは最も近いブロックレベルの祖先要素ボックスの内容境界から構成されます。

3. 要素に 'position:fixed' 属性がある場合、包含ブロックはビューポートから構築される。

4. 要素が 'position:absolute' 属性を持つ場合、包含ブロックは次のように位置が静止していない最も近い祖先から作成されます。

祖先がブロックレベル要素である場合，包含ブロックは祖先のパディングエッジから形成される。

祖先がインライン要素の場合、包含ブロックは祖先のdirection属性に依存する。

direction が ltr（左から右）の場合、祖先が生成する最初のボックスの top と left のコンテンツ境界は、containing block の上と左にあり、祖先の最後のボックスの bottom と right のコンテンツ境界は、containing block の下と右にあります。

directionがrtl（右から左）の場合、先祖が生成した最初のボックスの上と右のコンテンツ境界は、包含ブロックの上と右にあり、先祖の最後のボックスの下と左のコンテンツ境界は包含ブロックの下と左にあります。

5. 5. 先祖が存在しない場合、ルート要素ボックスの内容境界を包含ブロックと判断する。

用語の説明

ビューポート。文書を解析することで、連続メディア（例えば、画面は連続メディア、プリンターはページベースのメディア）は、ユーザーに対してビューポート（画面に表示されるウィンドウやその他の領域）を生成する。

ルート要素。ソース・ドキュメント内のすべての要素は親要素を持ちますが、1つの例外があり、それはルート要素です。

padding edge：下図参照。

栗を贈ること。 

<html>
   <head>
      <title>Illustration of containing blocks</title>
   </head>
   <body id="body">
      <div id="div1">
        <p id="p1">This is text in the first paragraph... </P>
          <p id="p2">This is text
            <em id="em1"> in the
              <strong id="strong1">second
              </strong> paragraph.
            </em>
          </p>
      </div>
   </body>
</html>

そして、位置を指定せずに、上記のコードのcontainerngブロックを次のように決定します。

div1 の位置を 

#div1 { position: absolute;}

この時点で、div1 の包含ブロックは body ではなくなり、最初の包含ブロックになります（ここに位置を持つ祖先のボックスがまだ存在しないため）。

3. BFC　　　　　　　　

BFC（Block Formatting Context）：W3CCSS2.1仕様の概念で、CSS3ではフロールートに修正された。フォーマッティングはその後、要素が初期化されるべき環境、すなわちこの環境下で要素がどのようにレイアウトされるべきか、等を示す。要素の BFFC が作成された場合、その内容がどのように配置されるか、また、他の要素とどのように関連付けられ、相互作用するかが決定されます。

共通の理解 まずBFCとは、レイアウト環境を分離した用語で、項目の配置が外界に影響されない箱（実際には見えない、目に見えない）と理解すればよい。BFCの理解に変換すると、BFC内の要素のレイアウトは外界の影響を受けないということになります(フローティング要素がフローティングでない兄弟やその子に与える影響をなくすために、この機能をよく使います)。そして、BFCでは、ブロックボックスとロウボックス（行内のすべてのインライン要素で構成される）は、親要素の境界線に沿って垂直に整列されます。

BFCを生成する要素は、その子要素を次のように整列させる。

  • BFCでは、ボックスは上から順に縦に並べられ、2つのボックス間の縦の間隔は、そのマージン値によって決定される。BFCでは、隣接する2つのブロックレベルのボックスの垂直方向の余白が潰される。つまり、BFCでは隣接するブロックレベル要素の垂直方向の余白は折りたたまれる。
  • BFCでは、各ボックスの左外側のマージン（margin-left）は、フロートがあっても（子要素の内容領域はフロートのために圧縮されるが）、その子要素もそれ自身がフロートである場合など、新しいBFCを作成しない限り、コンテナの左マージン（ボーダーレフト）（右から左のフォーマットの場合は右マージン）に接する。

用語の説明です。

余白の折りたたみ。CSSでは、隣接する2つのボックス（兄弟や祖先の場合もある）のマージンを1つのマージンに統合することができます。このマージンの結合は折りたたみと呼ばれ、結果として結合されたマージンは折りたたまれたマージンと呼ばれます。

折りたたみの結果。　

1. 隣接する2つの外縁がともに正の値である場合、折りたたんだ結果は2つの値のうち大きい方になります。

2. 隣接する2つの余白がともに負の場合、結果は両者の絶対値の大きい方となる。

3. 外側の2つの余白が正と負の一方であるとき、折りたたみの結果はその2つの合計となる。

折りたたむための条件：余白が連続していること、以下の条件を満たすことが必要です。

1. 通常のドキュメントフローにおけるブロックレベルのボックスであり（floatや絶対配置ではない）、同じBFC内であること。

2. ワイヤーボックスなし、クリアランスなし、パディングなし、ボーダーで区切るなし

3. すべて垂直方向に隣接する外側の余白に属し、以下のいずれかになります。

  • 要素の margin-top は、その最初の通常のドキュメントフローの子の margin-top 要素と同じです。
  • margin-bottom 通常文書ストリームの次の兄弟要素の margin-top 要素のマージンボトム
  • heightがautoである要素のmargin-bottomと、通常のドキュメントストリームの最後の子要素のmargin-bottom
  • 高さが0で最小の高さを持ち、通常のドキュメントフローの子要素を含まず、それ自身の新しいBFCを作成しない要素のmargin-topとmargin-bottom

では、BFCはどのようなときに作られるのでしょうか。　　

1. フローティング要素(float:left|right)

2. 絶対位置指定要素 (position:absolute|fixed)。

3. インラインブロック要素 (display:inline-block)

4. テーブルのセル (display:table-cells, TD, TH)

5. テーブルキャプション (display:table-captions, CAPTION)

6. 「オーバーフロー」機能が可視化されていない要素

7. anonymous box" で作成されたフォーム要素。

注目すべきは、"display:table" 自体は、"block formatting contexts" を生成しないことです。しかし、それは匿名ボックスを生成することができ、そこで、"display:table-cell"を含むボックスはブロックフォーマッティングコンテキストを生成することになる。

要約すると、"display:table" の要素については、ブロックフォーマットコンテキストを生成するのは匿名ボックスであり、"display:table" ではないということである。

最後に、ブロックフォーマットコンテキストを作成するのはこれらの要素であり、ブロックフォーマットコンテキストそのものではありません。

BFCの使い方：フロートとマルチカラムレイアウトを排除する。

1. 適応的な2カラムのレイアウト 

<style>
    body {
        position: relative;
    }

    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

その効果は次の通りです。

BFCのルールによると

各ボックスの左外側の縁（margin-left）がコンテナの左縁（border-left）に接する（右から左への書式の場合は右縁）。

そのため、フローティング要素のaslideがありますが、mainの左側は包含ブロックの左側に接したままとなります。

したがって、ベースとすることができます。

BFCの領域は、フロートボックスと重ならない。

をトリガーにしてBFCを生成し、適応的な2カラムレイアウトを実現する。 

.main {
     overflow: hidden;
}

メインがトリガーされてBFCが生成されると、この新しいBFCはフローティングの脇と重ならないようにする。そのため、包含するブロックの幅と、脇の幅に応じて自動的に狭められることになります。その効果は次のとおりです。

2. 内部フロートのクリア 

<head>
    <title>Clear float</title>
    <style>
        .container{
            margin: 30px auto;
            width:600px;
            height: 300px;
        }
        .wrapper{
            border:solid 3px #a33;
        }
        .main{
            width: 100px;
            height: 100px;
            background-color: #060;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="main"></div>
            <div class="main"></div>
            <div class="main"></div>
        </div>
    </div>
</body>

望ましい結果は

しかし、その結果は

この現象を解消するために、従来の擬似クラス方式以外では、親コンテナは浮遊する子要素を囲まない、通称「崩し」と呼ばれる方式を採用しています。によれば

BFCの高さを計算するとき、フローティング要素も計算に参加する

また、簡単なコードの修正で、親コンテナがBFCを形成してフロートをクリアするようにすることも可能です。 

<div class="wrapper" style="float:left;"> //add a float attribute to form a BFC
    <div class="main">1</div>
    <div class="main">2</div>
    <div class="main">3</div>
</div>

以下のような効果を得ることができます。

要約すると、BFCはページ上で孤立した独立したコンテナであり、コンテナ内の子要素は外の要素に影響を与えないということです。逆もまた真なりである。

BFCの中の要素と外の要素は絶対に影響し合わないので、BFCの外にフロートがあっても、BFCの中のBoxのレイアウトには影響しないはずで、BFCはフロートと重ならずに幅が狭くなることで狭くなっていきます。同様に、BFCの内側にフロートがある場合は、外部要素のレイアウトに影響を与えないように、フロートの高さをBFCの計算に含めます。マージンの重なりを避けることも良いアイデアです。

以上、position属性から派生するCSSの高度な議論について詳しく説明しました。position属性から派生するCSSの高度な議論については、スクリプトハウスの他の関連記事を参照してください!

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します