CSS3:box-sizing: ボックスについて心配する必要はもうありませんmodel_html/css

CSS3:box-sizing: ボックスについて心配する必要はもうありませんmodel_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:29

オリジナル

1162 人が閲覧しました

余談:

W3C が追求する標準は、ボーダー、パディング、コンテンツの計算を必要とする content-box ですが、個人的には
コンテナが拡張されて開くかどうかを考慮せず、従来の IE6 の奇妙なモードを好みます。 (レイアウトの破壊);

ボックスモデルの違い

ボックスサイズの計算原理

W3C 標準ボックス = (ボーダー + パディング + コンテンツブロックサイズ)、本文全体に影響します
従来の IE6 ボックス = 全体の幅と高さ (ボーダー、パディング)ボックスのサイズによって調整が変わります)

占有位置が計算される場合、両方のボックスにマージンを含める必要があります

つまり、W3C 標準ボックスは、全体の幅と高さを取得するためにさまざまなサイズを合計する必要があります。従来の IE6 は全体から固有の要素のサイズを減算して調整効果を実現します

CSS3: box-sizing

box-sizing: content-box inner-box;、Firefox の場合も、パディングボックスはほとんどありません。 use!!!

content-box: 標準 W3C ボックスモデル

border-box: 従来の IE6 ボックスモデル

padding-box: 現在 Firefox でのみ有効ですが、これも適応を除いています。ただし、パディングから始めます

検証と効果。

コード

簡単なコード、3つのボックス

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>box-sizing</title>    <style> .demo1,.demo2,.demo3{ width:200px; height:200px; background-color: #2277AD; margin:20px; } .demo1{ box-sizing: content-box; border:30px solid #12D732; padding:10px; } .demo2{ box-sizing: border-box; border:30px solid #12D732; padding:10px; } .demo3{ box-sizing: padding-box; border:30px solid #12D732; padding:10px; } </style></head><body>    <div class="demo1">        我是盒子内部的内容啊!!    </div>    <div class="demo2">        我是盒子内部的内容啊!!    </div>    <div class="demo3">        我是盒子内部的内容啊!!    </div></body></html>

ログイン後にコピー

レンダリング

標準モデルのボックスサイズ(280X280) = 200 +10*2 + 30*2 ? 加算効果

従来のIE6ボックスサイズ (200X200) = 120 + 10 * 2 + 30*2 ? 減算効果

Firefox のパディングボックスボックスサイズ (260X260) = 180 + 10* 2 + 30*2 ? 減算効果は次から始まります。パディング

概要

この属性は IE8+ をサポートしており、他のブラウザも基本的にサポートしています (非常に古い FF、CHROME などを使用している人はほとんどいないはずです)
ボーダーボックスの感じは、植字やレイアウトに非常に適しています。なぜなら、ボックスがラッピング層のサイズよりも大きくなったり、改行やその他の厄介な問題が発生したりするパディングについて心配する必要がないからです。
標準ボックスにも独自の利点があり、サイズを制御できます。非常に慎重に調整してください。ただし、計算はさらに面倒です

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。