CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSボックスのサイズ設定プロパティ

Box-sizingプロパティは、要素の高さと幅を変更するために使用されます。 CSS2以降、boxプロパティは次のように機能します-

width + padding + border = actual visible/rendered width of an element's box
height + padding + border = actual visible/rendered height of an element's box

例

ボックスサイズのプロパティを理解するために、例を見てみましょう：

<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">TutorialsPoint.com</div></br>
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

  1. CSSの幅と高さのプロパティ

    高さと幅は要素のコンテンツ専用に定義できますが、これらのプロパティには余白、パディング、境界線は含まれていません。 構文 CSSのheightプロパティの構文は次のとおりです- Selector {    height: /*value*/ } CSSwidthプロパティの構文は次のとおりです- Selector {    width: /*value*/ } 幅と高さのプロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <title>CSS height

  2. CSSの要素の幅と高さ

    CSSのheightプロパティとwidthプロパティは、要素の高さと幅をそれぞれ指定するために使用されます。 max-height、max-width、min-height、およびmin-widthプロパティを使用して、これらのプロパティの最大値と最小値を設定することもできます。 構文 CSSの高さとCSSの幅のプロパティの構文は次のとおりです- Selector {    height: /*value*/    width: /*value*/ } 要素の実際の幅と高さは次のように計算されます- ボックスサイズ 計算 全幅 幅+パディン