css3のボーダーサイズプロパティを詳しく見てみる-CSSチュートリアル-php.cn

css3のボーダーサイズプロパティを詳しく見てみる

青灯夜游

リリース： 2020-12-23 10:45:31

転載

2107 人が閲覧しました

css3のボーダーサイズプロパティを詳しく見てみる

box-sizing幅と高さの計算に使用されるデフォルトを変更します。要素 CSS ボックスモデル。これには、content-box、border-box、inherit の 3 つの値があります。 inherit は、親要素から box-sizing 式形式を継承することを指します。これはもはや冗長ではありません。

1. プロパティの説明

`content-box`

CSS2.1でもデフォルト値はボックスモデルです。 width および height を計算する場合、border、padding、および margin は計算されません。 高さと幅はコンテンツの高さです。

`border-box`

css3新しく追加されました。 width および height プロパティには、コンテンツ、パディング、境界線が含まれますが、マージンは含まれません。

計算式:

##width = 幅 = 境界線のパディングコンテンツの幅
高さ = 境界線のパディングcontent height

2. ボックスモデルの `margin`

を考慮します。上記のことから、それが border であることがわかります。 -box margin は計算されませんが、border と padding は重複して計算されます。 border と padding は両方ともボックスモデルの一部ですが、margin はボックス 間の距離をマークするためです。したがって、border-box の説明は非常に常識的です。

問題は、
margin を時々設定する必要がある場合、互換性を確保するために自由な制御を実現するにはどうすればよいでしょうか ?たとえば、ページ全体を埋め、余白に邪魔されるボックス要素を設定したいのですが、どうすればよいでしょうか?

次のレンダリングを実現します:

css3のボーダーサイズプロパティを詳しく見てみる

コード: ソースコードのダウンロード

<!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) で を使用できます。

3. 使用上の提案

プロジェクトでの使用経験と w3c の推奨事項に基づいて、
box-sizing 属性を次のように設定することをお勧めします。 ボーダーボックス。
* {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}
ログイン後にコピー
プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。！
以上がcss3のボーダーサイズプロパティを詳しく見てみるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。