2

ページのすべてに box-sizing: border-box を使用しています。ただし、960.gs グリッドのコンテナー要素にパディングを追加すると、2 番目のグリッドが次の行に移動します。ただし、個々のグリッド クラスに追加すると、期待どおりに機能します。

<header role="banner" id="header">
     <div class="container container_12">
          <div class="grid_4">
               logo here
          </div>
          <div class="grid_8">
               tagline here
          </div>
     </div> </header>

.conatiner に 10px のパディングを追加すると、grid_8 が次の行にラップされます。grid_4 と grid_8 の両方に 10px を追加しても機能しません (ボックスのサイズ変更は機能します)。どんな助けでも大歓迎です。

4

1 に答える 1

2

正しく機能していると思います。

box-sizing: border-box(絶対サイズでない) 要素にパディングとボーダーを追加すると、その要素の合計サイズが増加するデフォルトの動作をオーバーライドします。を使用border-boxすると、すべての要素が、パディングに関して絶対的なサイズであるかのように動作します。パディングを追加すると、要素の境界線とそのコンテンツの間の内部スペースが増加しますが、要素の合計サイズは増加しません。

に を追加padding: 10pxすると.container、 のコンテンツに使用できる水平方向の内部スペースの量が減少します.container。また、.containerの幅は (box-sizingルールで指定されているように) 拡大せず、子要素は縮小しないため、両方の子要素を合わせた幅が の使用可能な内部スペースよりも大きくなるため、2 番目の子はラップする必要があります.container。

要素にパディングを追加すると.grid_「機能します」(「機能する」の定義は、.container子が 1 つの行に収まり、折り返されないと想定されます)。box-sizingルールによれば、これらの要素は、設定された幅に加えて幅を増やしてはならないためです (パディングが与えられたときに 960 gs で設定されます)。追加されたパディングの結果は、代わりに、.grid_要素の境界線とそのコンテンツ (「ここにロゴ」/「ここにタグライン」) の間のスペースを増やし、.grid_要素の「内部幅」を減らします。

基本的に、box-sizing: border-boxパディング（およびボーダー！）が外部ではなく内部で追加されることを意味し、あなたの例はこの動作を一貫して示しています。

値の詳細box-sizingといくつかのデモを次に示します。

于 2012-10-24T16:43:34.243 に答える