10

子要素のサイズをパーセンテージで設定すると、そのプロパティを に設定したという事実とは関係なく、サイズは親のcontent-boxに対して相対的に計算されます。box-sizingborder-box

だから私はこのようなものを持っている場合:

.parent {
  box-sizing: border-box;
  padding: 0 100px;
  width: 600px;
}

.child {
  width: 50%;
}

の幅は(パディング適用後の親の幅) の.child50% になります。400pxここで例を見ることができます: JSBin

主な質問

border-box子要素の幅を、親ではなく親に対して相対的にする方法はありcontent-boxますか?

ボーナス質問

例を作成しているときに、サイズの計算で奇妙な動作に気付きました。.parentのパディングを実際に に設定すると0 10%、各辺から 68 奇数ピクセルのパディングが得られます。何故ですか？600px の 10% が 60px ではないか、何か不足していますか?

4

1 に答える 1

6

widthプロパティは、コンテンツ ボックスに関連するものとして明示的に定義されておりbox-sizing、親ではこれを変更しませんが、利用可能なトリックがあります。必要なのはスペースを消費しない境界線であり、ありがたいことに、それはまさにoutlineプロパティの機能です。

問題が 1 つあります。アウトラインはデフォルトでコンテンツ ボックスの外側に設定されています。outlineの関連プロパティの1 つがoutline-offset負の値を受け入れるため、コンテンツ ボックス内にアウトラインが表示されるため、心配する必要はありません。

HTML

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div class="outer">
      <div class="inner">
      TEST
      </div>
  </div>
</body>
</html>

CSS

.outer {
  position: relative;
  width: 100px;
  height: 100px;
  outline:20px solid red;
  border:1px solid black;
  outline-offset: -20px;
}

.inner {
  width: 50%;
  height: 100%;
  outline:1px solid yellow;
  position: absolute; /* required so inner is drawn _above_ the outer outline */
  background-color: blue;
}

JS ビン: http://jsbin.com/efUBOsU/1/

あなたの「ボーナス質問」に関して、幅のパーセンテージは要素のサイズではなく、コンテナのサイズに基づいています。widthこれは、 、paddingおよびに当てはまりますmargin。コンテナーが 680px であるため、68px のパディングを取得しています。{width: 80%; padding: 10%;}これは奇妙に思えるかもしれませんが、オブジェクトの合計サイズがコンテナーの 100% であり、子要素のコンテンツに基づく任意の値ではないことが保証されるため、次のようなルールがある場合に非常に便利です。

注: 今後は、追加の質問を個別に行ってください。特に、主要な質問にほとんど関係がない場合は特にそうです。

于 2013-09-13T05:12:44.267 に答える