CSS - 2(box model)

9346 ワード
CSS 箱型 Box Model テキストリンク

箱型の概要


次のメイン画面では、h 1タグが自動的に改行され、行がいっぱいになりますが、aタグは改行されず、ほんの一部しか占めていません.
<body>
  <h1>CSS</h1>Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/CSS">CSS</a>) is (이하 생략)
</body>
borderプロパティで、本当に正しいかどうかを確認しましょう.

border


5 px(ピクセル)の赤い枠線はstyletagでborderプロパティを使用して適用できます.
<style>
  /* block level element */
  h1 {
    border-width: 5px;
    border-color: red;
    border-style: solid;      
  }
  /* inline element */
  a {
    border-width: 5px;
    border-color: red;
    border-style: solid;
  }
</style>

display


displayプロパティを使用すると、囲まれた赤い枠線のプロパティを変更できます.
<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>

重複を減らす


上記のコードに重複する部分が多く、次のコードのように記述されている場合は、重複する部分を減らすことができます.
<style>
  h1, a {   
    border: 5px solid red;
  }
</style>

box model


boxモデルのプロパティにはborder、padding、margin、contentが含まれます.
contentはコンテンツを表し、paddingはコンテンツ外の余白を表し、borderは枠線外の余白を表す.

コード#コード#

<style>
  h1 {   
    border: 5px solid red;
    padding: 20px;
    margin: 20px;
    display: block;
    width: 100px;
  }
</style>
<body>
  <h1>CSS</h1>
  <h1>CSS</h1>
</body>

結果



開発者ツールを使用して、プロパティ値の配置方法を決定します.

Boxモデルの使用


開発者ツールを使用してホームページを装飾する場合は、この文書を参照して、現在の余白値とpadding値を確認できます.
開発者ツールで使用するタグをクリックして、ボックスモデルの値を確認します.
私はこの方法でそれを適用します.

コード#コード#

    body {
      margin: 0 
      }
	  (생략)  
    h1 {      
      font-size: 45px;
      text-align: center;      
      border-bottom: 1px solid gray;
      margin: 0;
      padding: 20px;
    }
    ol {
      border-right: 1px solid gray;
      width: 100px;
      margin: 0;
      padding: 20px;
    }

結果



ソースと説明:https://opentutorials.org/course/3086/18319
JAvaモード(例)----外観モード
Programmers-フリップバイナリ(Java)