[WEB 2]CSS Boxモデル1

23946 ワード
箱型 CSS テキストリンク
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は

    この部分です
    しかし、このcontentとborderの間には間隔がない.
    間隔を作成するには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タグの内容サイズである.
    コードエンジンCLIでバッチジョブを実行する
    どのようなビープ音は