[WEB 2]CSS Boxモデル1


cssは文字を飾るだけではありません.
ドキュメント全体の設計を担当します.
1)ラベルの体積を理解する
まずhtmlファイルボックスです.htmlを生成します.
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title></title>
  </head>
  <body>
    <h1>CSS</h1>
    <p>
    Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/CSS">CSS</a>)
    is a style sheet language used for describing the presentation of a document
    written in a markup language.
    </p>
  </body>
</html>
こんな简単なhtmlファイルを作った

結果.
しかし、ここでh 1タグ(CSS)があちらのページのどこからどこまでを占めているのでしょうか.
styleラベルを作成して、それを理解しましょう.
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title></title>
    <style>
      h1 {
        border-width : 5px;
      	border-color : red;
      	border-style : solid;
      }
    </style>
  </head>
  <body>
    <h1>CSS</h1>
    <p>
    Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/CSS">CSS</a>)
    is a style sheet language used for describing the presentation of a document
    written in a markup language.
    </p>
  </body>
</html>
  • border-width:枠線厚さ
  • border-color:枠線の色
  • border-style:枠線のスタイル(破線、単線...)
  • この3つの設定の結果

    これはh 1ラベルの範囲または体積です.
    aラベルの体積を同様に理解する.
       <style>
         h1 {
           border-width : 5px;
           border-color : red;
           border-style : solid;
         	
         }
         a {
           border-width : 5px;
           border-color : red;
           border-style : solid;
         }
       </style>
    スタイルタグを変更した後
    実行

    aラベルのボリュームも出てきます.
    2つのラベルの違いが見えますか?
    h 1タグは画面全体を使用し、aタグはその位置を使用する.
    これをblock level elementとinline elementと呼びます.
    2)タグを置換するボリューム
  • blocklevel element:画面全体のタグ
  • inline element:ラベル
  • このように整理してもいいです.
    スタイルタグを変更することで、現在画面全体に書き込まれているh 1タグをinline elementに置き換えることができます.
    スタイルラベルを変更しましょう.
       <style>
         h1 {
           border-width : 5px;
           border-color : red;
           border-style : solid;
           display : inline;
         }
         a {
           border-width : 5px;
           border-color : red;
           border-style : solid;
         }
       </style>
    現在のドキュメントのh 1タグのすべてのdisplayプロパティをinlineプロパティ値に変更しました.

    したがって、画面全体のh 1ラベルを使用しているのは、自分と同じであることがわかります.
    これにより、aタグをblock level elementに置き換えることもできる.
      <style>
        h1 {
          border-width : 5px;
          border-color : red;
          border-style : solid;
          display : inline;
        }
        a {
          border-width : 5px;
          border-color : red;
          border-style : solid;
          display : block;
        }
      </style>
    コードを変更して実行します.

    前に示したように、aタグは画面全体に書き込まれます.
    また、displayプロパティにはnoneというプロパティ値があります.
    この機能を有効にすると、タグは非表示になります.
    3)スタイルラベルの重複を減らす
    TAGELのボリュームがわかっているので、ディスプレー属性は削除しましょう.
        <style>
          h1 {
            border-width : 5px;
            border-color : red;
            border-style : solid;
          }
          a {
            border-width : 5px;
            border-color : red;
            border-style : solid;
          }
        </style>
    コードを表示すると、h 1ラベルとaラベルのcssコードが繰り返されます.
    これを合わせて重複を解消
        <style>
          h1, a {
            border-width : 5px;
            border-color : red;
            border-style : solid;
          }
        </style>
    これらの計算演算子を使用すると、タグを簡単にグループ化できます.
    ここにはまだ不便なところがある
    すなわち、border-を繰り返す.
    合併します
        <style>
          h1, a {
            border : 5px solid red;
          }
        </style>
    このようにしてコードの重複を減らす.
    コードが非常に短く、可読性が向上したのではないでしょうか.
    4) content, border, padding, margin
    次はborder、padding、marginです.

    その答えはこの図で説明できます.
    でも初めて見たのであれば、きっと理解できないので、さらに説明します.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset = "utf-8">
        <title></title>
        <style>
          h1 {
            border : 5px solid red;
          }
        </style>
      </head>
      <body>
        <h1>CSS</h1>
        <h1>CSS</h1>
      </body>
    </html>
    このコードの結果を表示すると、

    この画面が表示されます
    ここのcontent

    この部分です
    しかし、このcontentborderの間には間隔がない.
    間隔を作成するにはpaddingを設定します.
        <style>
          h1 {
            border : 5px solid red;
            padding : 20px;
          }
        </style>

    間隔が表示されます.
    しかし、私はまた最初のcssと2番目のcssの距離を開きたいです.
    ではmarginをセットすればいいです
        <style>
          h1 {
            border : 5px solid red;
            padding : 20px;
            margin : 50px;
          }
        </style>

    上の最初の絵を理解できますか?
    5)コンテンツのサイズ変更
    contentのサイズはwidthとheightプロパティによって定義されます.
        <style>
          h1 {
            border : 5px solid red;
            padding : 20px;
            margin : 50px;
            width : 100px;
            height : 100px;
          }
        </style>

    以上は開発者モード(f12)で確認したh 1タグの内容サイズである.