利益率上限の計算プロセスはどのようなものですか?

Question

これは簡単なことだとは思いますが、margin-top: 50% が適用されると、次のコードの子要素が親コンテナの境界外になる理由を誰か教えていただけますか?マージントップの割合はどのように計算されますか?

リーリー リーリー

子要素は親要素の上から200px(親要素で設定した高さ)の50%、つまり上から100pxにすべきではないでしょうか？

Answer 1

パーセントベースのマージンは、マージンがどちら側にあるかに関係なく、親コンテナの width に基づいて計算されます。

つまり、上部マージンが幅の 50% に等しいことがわかります。

Answer 2

W3C仕様より:

垂直方向のマージンを包含ブロックの幅に基づいて決定する正当な理由は 2 つあります。

水平方向と垂直方向の一貫性

もちろん、ブロックの 4 辺のマージンを指定できる短縮プロパティがあります:

リーリー

これは次のように展開されます:

リーリー

さて、上記のいずれかを書いた場合、おそらくブロックの 4 辺すべてのマージンが同じサイズであることを期待したでしょう?ただし、margin-left と margin-right がコンテナの幅に基づいており、margin-top と margin-bottom がその高さに基づいている場合、通常は異なります。

循環依存関係を避ける

CSS は、ページ上で垂直に積み重ねられたブロックにコンテンツをレイアウトするため、通常、ブロックの幅は親要素の幅によって完全に決まります。つまり、ブロック内の内容を気にせずにブロックの幅を計算できます。

ブロックの高さは別の問題です。通常、高さはその内容の合計の高さによって決まります。コンテンツの高さを変更すると、ブロックの高さも変わります。問題がわかりましたか?

コンテンツの高さを取得するには、コンテンツに適用される上下の余白を知る必要があります。これらのマージンが親ブロックの高さに依存する場合、一方を知らずにもう一方を計算できないため、問題が発生します。

コンテナの幅に基づいた垂直マージンにより、この循環依存関係が解消され、ページ レイアウトが可能になります。

＃＃＃＃＃＃例：＃＃＃＃＃＃

これは一例です。コード:

HTML

リーリー

CSS

リーリー

JS

リーリー