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

CSS2サイジングプロパティとCSS3ボックスサイジングプロパティ

CSS2サイジングプロパティとCSS3ボックスサイジングプロパティの違いを理解しましょう。

CSS2サイジングプロパティ

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

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

  1. ボックスサイズを使用したCSS3ボックス幅

    box-sizingプロパティを使用して、要素の幅だけでなく高さも変更します。 以下は、CSS3-を使用したボックスサイズ設定でのボックス幅のコードです。 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 200px;    height: 200px; &n

  2. CSS3トランジション短縮プロパティ

    遷移の省略形プロパティを使用すると、遷移プロパティ、遷移期間、遷移タイミング関数、および遷移遅延を、遷移プロパティの値として1行で指定できます。 以下は、CSSの遷移短縮プロパティのコードです- 例 <!DOCTYPE html> <html> <head> <style> .container div {    width: 300px;    height: 100px;    border-radius: 1px;    background-color: r