ホームページ > 記事 > ウェブフロントエンド > css3のボックスサイジングの詳しい説明
css3のボックスサイジングの詳しい説明
- 高洛峰オリジナル
- 2017-02-20 11:28:541287ブラウズ
人々は、従来のボックス モデルが単純ではないことに徐々に気づき、box-sizing と呼ばれる新しい CSS プロパティを追加しました。 box-sizing 的CSS属性。
box-sizing: box-sizing: box size,box model.
左右のモジュールの幅が 50% であることがよくあります。枠線を追加すると外れてしまいます。問題を解決するには、このスタイルを追加してください:
<!DOCTYPE html><html><head><style> p.container{width:300px;border:10px solid blue;}p.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;height:80px;padding:10px;border:10px solid red;float:left;}</style></head><body><p class="container"><p class="box">这个 p 占据左半部分。</p><p class="box">这个 p 占据右半部分。</p><p style="clear:both;"></p></p></body></html>
box-sizing 属性は 3 つのうちの 1 つです。値: content-box (デフォルト)、border-box、padding-box。 Content-box、border、padding は幅に計算されません padding-box、padding は幅に計算されます border-box、border、padding は幅に計算されますが、これは実際には奇妙なモードです。 Pear:
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}</style> css3 ボックスサイジング関連の記事の詳細については、PHP 中国語 Web サイトに注目してください。
🎜声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。