ホームページ >ウェブフロントエンド >CSSチュートリアル >css3のボーダーサイズプロパティを詳しく見てみる
推奨: css ビデオ チュートリアル
box-sizing幅と高さの計算に使用されるデフォルトを変更します。要素 CSS ボックス モデル。これには、content-box、border-box、inherit の 3 つの値があります。 inherit は、親要素から box-sizing 式形式を継承することを指します。これはもはや冗長ではありません。
content-boxCSS2.1でもデフォルト値はボックスモデルです。 width および height を計算する場合、border、padding、および margin は計算されません。 高さと幅はコンテンツの高さです。
border-boxcss3新しく追加されました。 width および height プロパティには、コンテンツ、パディング、境界線が含まれますが、マージンは含まれません。
計算式:
margin
を考慮します。上記のことから、それが border であることがわかります。 -box margin は計算されませんが、border と padding は重複して計算されます。 border と padding は両方ともボックス モデルの一部ですが、margin はボックス 間の距離をマークするためです。したがって、border-box の説明は非常に常識的です。
問題は、次のレンダリングを実現します:margin
を時々設定する必要がある場合、互換性を確保するために自由な制御を実現するにはどうすればよいでしょうか ?たとえば、ページ全体を埋め、余白に邪魔されるボックス要素を設定したいのですが、どうすればよいでしょうか?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>yuanxin.me</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#app {
box-sizing: border-box; /* 指定计算方式 */
margin: 10px; /* 外边距干扰 */
/* 利用 css3 的 calc */
width: calc(100vw - 2*10px);
height: calc(100vh - 2*10px);
}
</style>
</head>
<body>
<div id="app">
</div>
</body>
</html>
したがって、マージンを計算する必要がある場合、css3 の四則演算 (calc) で を使用できます。
プロジェクトでの使用経験と w3c の推奨事項に基づいて、プログラミング関連の知識について詳しくは、box-sizing
属性を次のように設定することをお勧めします。ボーダーボックス。* { margin: 0; padding: 0; } div { box-sizing: border-box; }
プログラミング入門をご覧ください。 ！
以上がcss3のボーダーサイズプロパティを詳しく見てみるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。