border-box はボックスのサイズをどのように変更しますか?-CSSチュートリアル-php.cn

border-box はボックスのサイズをどのように変更しますか?

云罗郡主

リリース： 2018-11-05 16:35:25

オリジナル

4202 人が閲覧しました

この記事の内容は、border-box がボックスのサイズを変更する方法に関するものです。必要な方は参考にしていただければ幸いです。

ボックスのサイズ変更プロパティは、要素の高さと幅を変更するために使用されます。

css2 の時点では、box プロパティは次のように機能します。

width + padding + border =元素框的实际可见/渲染宽度
height + padding + border =元素框的实际可见/渲染高度

ログイン後にコピー

は、高さと幅を設定すると、少し大きく表示され、指定されたサイズによって要素が生成されることを意味します。要素の高さと幅にボーダーとパディングが追加されます。

1: CSS サイズ変更プロパティ

例:

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>
   <body>
      <div class = "div1">php中文网</div><br />
      <div class = "div2">php中文网</div>
   </body>
</html>

ログイン後にコピー

結果:

border-box はボックスのサイズをどのように変更しますか?

図内上記両方の要素の幅と高さは同じですが、異なる結果が得られるため、2 番目の要素にパディング属性が含まれます。

2: CSS3 ボックスサイズ属性

コード例:

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>
   <body>
      <div class = "div1">php中文网</div><br />
      <div class = "div2">php中文网</div>
   </body>
</html>

ログイン後にコピー

border-box はボックスのサイズをどのように変更しますか?