CSS ボックス モデルと配置の概要

ボックスモデルの一般的な関連属性と属性値

/*基本属性*/padding: padding-left/right/top/bottom
border: border-left/right/top/bottom  border-radiusmargin: margin-left/right/top/bottom/*定位*/position                //把一个元素放在静态的static、相对的relative、绝对的absolute、固定的fixed位置中left right top bottom   //元素距原位置的左右上下的偏移量overflow                //设置元素溢出其区域发生的事情clip                    //设置元素显示的形状vertical-align          //设置元素垂直对齐的方式z-index                 //设置元素的堆叠次序/*浮动*/float    //浮动 left right none inheritclear    //去掉浮动 left right both inherit 123456789101112131415161718

CSSフローティング

まず第一に、divはページ内の排他的な行を占有し、から配置されるブロックレベルの要素であることを知っておく必要があります。上から下へ、これが伝説の流れです。下の図

に示すように、div1 の幅が非常に小さい場合でも、ページ上の 1 行で div1 と div2 を収容でき、div 要素が占有しているため div2 が div1 の後ろにランクされることはないことがわかります。独自のライン。
上記の理論は標準フローの div を参照していることに注意してください。レイアウトがどんなに複雑でも、基本的な出発点は「複数の div 要素を 1 行に表示する方法」です。
明らかに、標準ストリームでは需要を満たすことができないため、フロートを使用する必要があります。 フローティングは、div 要素を標準フローから切り離し、標準フローと同じレベルではない標準フロー上にフロートさせると理解できます。たとえば、上図の div2 が浮いたとすると、標準フローから外れますが、div1、div3、div4 はまだ標準フロー内にあるため、div3 が自動的に上に移動して div2 の位置を占め、再編成されます。流れ。図に示すように: 让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图：

从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。

这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列

図からわかるように、div2 が float に設定されているため、標準フローには属しなくなりました。div3 は自動的に上に移動して、div2 の位置を置き換えます。div1 、div3、div4を順に並べてNewストリームとします。また、float は標準フローの上に浮いているため、div2 が div3 の一部をブロックし、div3 が「短く」見えるようになります。

ここで div2 は left float (float:left;) を使用しています。これは float で左に配置されていると理解できます、そして right float (float:right;) は当然右に配置されます。 。ここでの左右とは、ページの左端と右端を指します。

div2 を右にフローティングすると、効果は次のようになります:

この時点で、div2 はページの右端に配置され、div3 はブロックされなくなります。前述の div1 と div3 、つまり div4 で構成されるストリームを見てください。

これまでは 1 つの div 要素 (div2) だけをフロートさせてきました。複数の div をフロート化したらどうなるでしょうか?

次に、div2 と div3 の両方に left float を追加します。効果は次のとおりです。

同様に、div2 と div3 は標準フローに属さないため、div4 は自動的に上に移動すると、div1 が「新しい」標準フローを形成し、float が標準フローの上に浮くため、div2 が div4 をブロックします。

div2 と div3 が同時に float に設定されている場合、div3 は div2 に追従します。これまでの例では div2 が float ですが、div1 には追従しません。したがって、重要な結論を導き出すことができます:

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。1

読者の理解を助けるために、さらにいくつかの例を挙げましょう。

div2、div3、および div4 を左浮動に設定すると、効果は次のようになります:

上記の結論によると、div4 の分析から開始し、上位要素 div3 が浮動であることがわかりました。したがって、 div4 は div3 の後に続きます。 div3 は、上の要素 div2 も浮動していることを検出するため、 div3 は div2 に従います。また、 div2 は、上の要素 div1 が標準フロー内の要素であることを検出するため、 div2 の相対的な垂直位置は変わりません。上部には div1 要素が下部に配置されたままです。フローティングのままなので、左側がページの端に近いので左側が前になるので、div2は一番左になります。

div2、div3、div4 がすべて右フローティングに設定されている場合、効果は次のようになります:

原理は基本的に左フローティングと同じですが、対応関係に注意する必要があります。前後。右に浮かせているので、右側がページの端に近いので、右側が前になるので、div2 は一番右になります。 🎜 div2 と div4 を左にフローティングするだけの場合、効果は次のようになります: 🎜🎜🎜🎜🎜🎜

依然是根据结论，div2、div4浮动，脱离了标准流，因此div3将会自动上移，与div1组成标准流。div2发现上一个元素div1是标准流中的元素，因此div2相对垂直位置不变，与div1底部对齐。div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。

至此，恭喜读者已经掌握了添加浮动，但还有清除浮动，有上边的基础清除浮动非常容易理解。

经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列，清除浮动可以理解为打破横向排列。

清除浮动：

语法： clear : none | left | right | both 

none : 默认值，允许两边都可以有浮动对象 
left : 不允许左边有浮动对象 
right: 不允许右边有浮动对象 
both : 不允许有浮动对象12345678

根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。而其实这种理解是不正确的，这样做没有任何效果。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

怎么理解呢？就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。

要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

以上がCSS ボックス モデルと配置の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。