Margin と Padding の値をpercentages_html/css_WEB-ITnoseに設定したレイアウトについての簡単な説明

転載元: Wenshuo.com http://www.uedsc.com/Discussion-margin-and-padding-values.html

Margin と Padding は、Web デザインでよく使用される CSS スタイルで、それぞれスペースを表します。 . とパディング、一方はボックスの外側で動作し、もう一方はボックスの内側で動作します。デフォルトでは、これらの属性の値は、Web 開発の流体レイアウトまたはレスポンシブ レイアウトの領域内で計算されます。はよく使用され、Padding はパーセンテージに設定されます。このパーセンテージは何で、どのように計算されるのでしょうか?

マージン

このような HTML コードがあり、外側の DIV の幅が 980 ピクセル、内側にサブ要素の DIV があり、幅と高さが設定されていないとします。 : 10% 5% この属性はマージン:10% 5% 10% 5% に相当します。

HTML コード

<div class="demo1">    <div>这个div设置：margin:10% 5%</div></div>

CSS コード

.demo1{ height:500px; width:980px; margin:0 auto; background:#EEE; overflow:hidden;}.demo1 div{margin:10% 5%; background:#666;}

効果を見やすくするために、それぞれに異なる背景も設定しています。

ここにも小さなハックがあります。つまり、demo1 ボックスはボディの隣にありません。つまり、レイアウトは固定されず、ボディ要素の上に空白スペースがあります。 space は .demo1 div 要素のマージンと同じです。 -top、demo1、および .demo1 div 要素はすべて上に配置されます。この問題を解決するには、demo1 要素に overflow:hidden を設定するだけです。 。

これまでの理解に基づくと、.demo1 div のマージンは 50px 49px 50px 49px であるはずですが、実行後にボックス モデル図を見ると、98px 49px 98px 49px になっていることがわかりました。の上？

この 98 ピクセルは実際には幅の 10% に設定されています。信じられない場合は、TOP を 10% に設定する必要があります。このサンプル ページをクリックして効果を確認できます。

概要

上記の例とコードから、マージンがパーセンテージに設定されている場合、親要素ボックスの幅を参照して右上、左下の値が計算されることがわかります。これについても説明します。 w3c 仕様では、マージンのパーセンテージ値は、それを含むブロックの幅を参照して計算されます。同じパディングがパーセンテージに設定されている場合、そのボックス モデルはマージンと同じになります。

これは、デフォルトのwriting-mode: 水平-tb; および方向: ltr; でのみ発生します。

高さではなく幅を基準として選択する必要があるのはなぜですか?

これは実際には CSS の設計意図により大きく依存します。CSS の基本要件は植字であり、通常、私たちが目にする横書きテキストには一定の横幅があります (幅の明示的な定義がない場合や、強制的に 1 行を表示すると、水平方向の拡張ではなく境界の折り返しが発生します)、垂直方向は無限に拡張できます。ただし、書き込みモードが縦長の場合、基準は幅ではなく高さになります。

詳細情報

http://dev.w3.org/csswg/css-box/#the-margin-properties

http://dev.w3.org/csswg/css-box/#ltpercentagegt

http://dev.w3.org/csswg/css-box/#Calculation