ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3:box-sizing: ボックスについて心配する必要はもうありませんmodel_html/css_WEB-ITnose
CSS3:box-sizing: ボックスについて心配する必要はもうありませんmodel_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:291168ブラウズ
余談:
W3C が追求する標準は、ボーダー、パディング、コンテンツの計算を必要とする content-box ですが、個人的には
コンテナが拡張されて開くかどうかを考慮せず、従来の IE6 の奇妙なモードを好みます。 (レイアウトの破壊);
ボックス サイズの計算原理
W3C 標準ボックス = (ボーダー + パディング + コンテンツ ブロック サイズ)、本文全体に影響します
従来の IE6 ボックス = 全体の幅と高さ (ボーダー、パディング)ボックスのサイズによって調整が変わります)
占有位置が計算される場合、両方のボックスにマージンを含める必要があります
つまり、W3C 標準ボックスは、全体の幅と高さを取得するためにさまざまなサイズを合計する必要があります。従来の IE6 は全体から固有の要素のサイズを減算して調整効果を実現します
CSS3: box-sizingbox-sizing: content-box inner-box;、Firefox の場合も、パディング ボックスはほとんどありません。 use!!!
コード
簡単なコード、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> レンダリング
- この属性は IE8+ をサポートしており、他のブラウザも基本的にサポートしています (非常に古い FF、CHROME などを使用している人はほとんどいないはずです)
- ボーダーボックスの感じは、植字やレイアウトに非常に適しています。なぜなら、ボックスがラッピング層のサイズよりも大きくなったり、改行やその他の厄介な問題が発生したりするパディングについて心配する必要がないからです。
- 標準ボックスにも独自の利点があり、サイズを制御できます。非常に慎重に調整してください。ただし、計算はさらに面倒です
著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。