CSSプロパティボックスのサイズ変更の詳しい説明-CSSチュートリアル-php.cn

CSSプロパティボックスのサイズ変更の詳しい説明

Guanhui

リリース： 2020-05-09 09:43:05

転載

8386 人が閲覧しました

#CSS ボックスモデル

最初に CSS ボックスモデルを理解する必要があります

CSS ボックスモデルの幅と高さの計算ルール:

CSS では、要素に設定した幅と高さは、この要素のコンテンツ領域にのみ適用されます。この要素にボーダーまたはパディングがある場合、画面に描画されるときのボックスの幅と高さが、設定されているボーダーとパディングの値に追加されます。

以下は例です

パディングとボーダーを追加しない場合

<body>
  <div class="wrapper"></div>
</body>

ログイン後にコピー

*{
      margin:0;
      padding:0;
    }
    body{
      border:1px solid blue;
      margin:10px;
    }
    .wrapper{
      width:100px;
      height:100px;
      background:pink;
    }

ログイン後にコピー

CSSプロパティボックスのサイズ変更の詳しい説明

このとき、 div.wrapper 要素は 100* 100

CSSプロパティボックスのサイズ変更の詳しい説明

##ラッパー要素のボックスモデル

div にパディングとボーダーのスタイルを追加する場合。ラッパー要素

.wrapper{
      width:100px;
      height:100px;
      background:pink;
      padding:10px;
      border:1px solid black;
      margin:10px;
    }

ログイン後にコピー

CSSプロパティボックスのサイズ変更の詳しい説明このとき、div.wrapper要素の幅と高さは122*122です。10ピクセルのパディングと1ピクセルのボーダーが設定されているため、要素に追加すると、この時点でピンク色の領域が表示されます。それはより大きくなります

CSSプロパティボックスのサイズ変更の詳しい説明

注: マージンは要素の幅と高さに影響しません。ここでもマージンを設定しますが、要素の幅と高さにはマージンは加算されません。

box-sizing属性

の値1. box-sizing 属性は何に使用されますか?

box-sizing 属性は、CSS ボックスモデル

2 で計算された要素の幅と高さを変更するために使用されるメソッドです。box-sizing の値

content -box

はデフォルト値です。要素の幅を 100 ピクセルに設定すると、要素のコンテンツ領域の幅は 100 ピクセルになり、境界線とパディングの幅は要素の最後に描画された幅に追加されます。

border-box

要素の幅を 100 ピクセルに設定すると、この 100 ピクセルにはその境界線とパディングが含まれ、コンテンツ領域の実際の幅は幅から境界線のパディングを引いたものになります。 . 計算上。

3. box-sizing 属性を使用します

Use border-box

<body>
  <div class="wrapper"></div>
</body>

ログイン後にコピー

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
    body{
      border:1px solid blue;
      margin:10px;
    }
    .wrapper{
      width:100px;
      height:100px;
      background:pink;
      margin:10px;
      padding:10px;
      border:1px solid black;
    }

ログイン後にコピー

CSSプロパティボックスのサイズ変更の詳しい説明この時点で、 div.wrapper 要素は 100*100 のままですが、実際のコンテンツ領域の幅と高さは 78*78 になります。要素の幅と高さには、実際のコンテンツの幅と高さに加えて、ボーダーとパディングの値が含まれます

CSSプロパティボックスのサイズ変更の詳しい説明

content-box を使用します

上記の例を例として、box-sizing の値を content- に変更するだけです。 box

*{
      margin:0;
      padding:0;
      box-sizing:content-box;
    }

ログイン後にコピー

CSSプロパティボックスのサイズ変更の詳しい説明ピンク色の部分がまた大きくなりましたこのとき、div.wrapper 要素の幅と高さは 122*122、幅と高さは 122*122 です。コンテンツの高さは 100*100 のままです

CSSプロパティボックスのサイズ変更の詳しい説明推奨チュートリアル:「

CSSTutorial

以上がCSSプロパティボックスのサイズ変更の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。