検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >わかりやすく理解したい (1): CSS ビジュアル フォーマット モデルの配置スキーム | BFC_html/css_WEB-ITnose

わかりやすく理解したい (1): CSS ビジュアル フォーマット モデルの配置スキーム | BFC_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:18:071593ブラウズ

ビジュアル フォーマット モデル

ページ (ドキュメント ツリー) は 1 つずつボックスで構成されていると想像できます。ビジュアル フォーマット モデル (ビジュアル フォーマット モデル) は、これらのボックスをアクセスにレイアウトする一連のルールです。読者はそれを見ます。

これらのレイアウトを制御する要素

  1. ボックスのサイズとタイプ

  2. 配置スキーム (通常のフロー、フローティングおよび絶対配置)

  3. ドキュメントツリー内の要素間の関係

  4. 外部情報 (ビューポートのサイズ、画像の固有のサイズなど)

以下では、レイアウトに影響を与えるこれらの要素について、ターゲットを絞った方法で説明します。まず、いくつかの概念を説明します~

要素ボックス

CSS が前提としているもの。要素ボックスの中央にコンテンツ領域があり、コンテンツ領域の外側にパディング、ボーダー、マージンが含まれる処理に使用されるモデルです。これらのコンテンツ

包含ブロック

各要素は包含ブロックに対して相対的に配置されます。 

<body>    <div><p>p的包含块是div</p><div>    //div的包含块是body</body>

置換/非置換要素

置換要素は次のとおりです。要素のタグと属性に基づいてブラウザによって決定されます。

CSS content 属性を通じて挿入されたオブジェクトは、匿名の置換可能要素と呼ばれます

要素のコンテンツがドキュメントに含まれている場合、それは非置換要素です

非置換要素のすべてのルールは、置換された要素にも適用されます例外が 1 つだけあり、幅が auto の場合、要素の高さと幅はコンテンツの固有の高さと幅になります。たとえば、img は画像の元のサイズです。 a1f02c36ba31691bcfe87b2722de723b タグの src 属性の値に基づいて情報が表示されますが、HTML コードを見ると、画像の実際の内容は d5fd7aea971a85678ba271703566ebfd タグの type 属性によって決まります。入力ボックスやラジオボタンなどを表示します。 HTML の a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd、4750256ae76b6b9d804861d8f69e79d3、221f08282418e2996498697df914ce4e、273238ce9338fbb04bee6997e5552b95 はすべて置換要素です。

これらの要素には実際のコンテンツが含まれていないことがよくあります。つまり、空の要素です。例: 
<img src=”cat.jpg” /><input type="submit" name="Submit" value="提交" />

ブラウザは、要素のタグ タイプと属性に従ってこれらの要素を表示します。置換可能な要素も表示内にボックスを生成します。

CSS ボックス (ボックス モデル/ボックス モデル)

CSS ボックス モデル (ボックス モデル) は、要素ボックスが要素のコンテンツ、パディング、境界線、余白を処理する方法を指定します

ブロック ボックス

(画像は「 css 権威ガイド」より) ") 

display ： block 、 list-item 以及 table 会让一个元素成为块级元素。正常流中，包含块的宽度 = 其父元素的width = margin + padding+ border+自身width

ブロックボックスでは、水平方向と垂直方向にフォーマットされます

ラインボックス

各行はラインボックスと呼ばれ、この行内の多くのインラインボックスで構成されます。高さは行によって直接決定できます。 -height 行ボックスの高さは垂直方向に積み重ねられ、含まれるボックスの高さになります。これが、div タグまたは p タグの高さになります。 

<div style="width:100px;height:10px"></div>//这个div调整line-height不会发生变化，因为里面没有文字<span style="line-height:10px;border：1px solid green"></span> //span的高度会随着line-height的变化而变化

inline-block

オブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングします。後続のインライン オブジェクトは同じ行に配置されます。たとえば、リンク (要素) に inline-block 属性値を与えると、リンクがブロックの幅と高さの特性と、インラインのピア特性の両方を持つようになります。

この記事では書ききれないと思うので、詳しい理解は次の記事に譲りますd794365cf77a67f06dff77f9149b2d65

コンテキストのフォーマット

各要素、または各Boxは、レンダリング方法を選択するための設定値に従って表示されます。異なるディスプレイには異なるレベルがあります。ブロック レベル ボックス (ブロック レベル)、インライン レベル ボックス (ライン レベル)、ランイン ボックス (CSS3 挿入)、異なるレベルが表示されます。レンダリングする環境 (フォーマット コンテキスト) に参加します

上記の環境は、BFC や IFC など、レンダリング ルールが異なるレンダリング領域です。

BFC

BFCとは

ブロックフォーマットコンテキスト、ブロックフォーマットコンテキスト（略してBFC）は、ブロックレベルのボックスのレンダリングレイアウト方法を規定しており、ボックスの高さの計算、マージン値の計算などが他とは異なります。環境。

BFCの特徴は何ですか

内部ボックスは垂直方向に配置されます

同じBFC内の要素はマージン崩壊を起こす可能性があります

  1. BFCは、上で分離された独立したコンテナです。ページの内側と外側は相互に影響しません

  2. BFC の高さを計算するとき、BFC に含まれるすべての要素が考慮されます。浮動要素も計算に含まれます。 BFC には重畳されません

  3. 什么元素会触发产生一个新的BFC

    1. 根元素 100db36a723c770d327fc0aef2ce13b1

    2. float属性不为none

    3. position为absolute或fixed

    4. display为inline-block, table-cell, table-caption, flex, inline-flex

    5. overflow不为visible

    再认真理解下这张图

    <style>html{background-color: #009a61}.a{  width: 100%;  height: 80px;  background-color: #f3f3f3;  margin-bottom: 30px;}.b{  width: 100%;  background-color: #f3f3f3;  height:40px;  margin-bottom: 80px;}.c{  float: left;  width: 80%;  height: 80px;  background-color: #333333;}.d{  margin-top: 80px;  width: 100%;  background-color: #f3f3f3;  overflow: hidden;}</style><body >    <div class="a"></div>    <div class="b">        <div class="c"> </div>    </div>  <div class="d">      <div class="c"></div>  </div></body>

    我们可以用BFC来干嘛

    1. 清除浮动

    2. 阻止边距折叠

    3. 用于布局，什么两栏自适应高度之类的

    BFC兼容性

    IE6-7不支持BFC，而是使用私有属性hasLayout。表现上来看hasLayout和BFC相似，触发hasLayout条件与BFC相似，另外需要为元素设置IE特有的CSS属性zoom:1; zoom用于设置或检索元素的缩放比例，值为1即使用元素实际尺寸，使用zoom既可以触发hasLayout又不会对元素产生其他影响，相对来说更加方便

    CSS定位方案

    css布局宏观上来说是受定位方案影响，定位方案包括普通流，浮动，定位

    普通流

    元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述只要不是float和绝对定位方式布局的，都在普通流里面。

    浮动

    浮动框不在文档的普通流中，浮动的流会漂浮在普通的流上面。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    定位

    1. 相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置

    2. 绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。

    3. 固定定位，相对于浏览器窗口定位，脱离普通流，不占据空间

      剩下的下篇见！！！(*￣3￣)╭

    参考资料

    1. caopen.net

    2. CSS三种基本定位机制

    3. css之BFC详解

    4. inline-boxd的前世今生

    5. 《 CSS.The.Definitive.Guide 》

    6. CSS float浮动的深入研究、详解及拓展

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS の高さプロパティは element_html/css_WEB-ITnose の高さを設定します次の記事：CSS の高さプロパティは element_html/css_WEB-ITnose の高さを設定します

関連記事

続きを見る