JS=>CSSボックス型番

それぞれの内容には自分の分野がある。

すべての内容にはそれぞれの分野がある.
一般的には、1つのコンテンツで縛られた要素が箱になります.
箱はいつも長方形で、幅と高さがあります.
HTMLの例

<h1>Basic document flow</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not</p>

CSS例

h1 { // h1 엘리먼트 박스
  background: gray;
  width: 60%;
}
p { // p 엘리먼트 박스
  background: rgba(255,84,104,0.3);
  width: 80%;
  height: 200px;
}
span { // span 엘리먼트 박스
  background: yellow;
  width: 100px;
  height: 100px;
}

HTML例+CSS例

以上のようにCSSは、HTMLで作成された各要素にボックスがあると仮定して設計することができる.

改行ボックス(ブロック)vs側接ボックス(インライン、インライン-ブロック)

箱の種類は改行された箱と改行されない縁取りの箱に分けられます.

줄바꿈이 되는 태그: <h1>, <p>
줄바꿈이 되지 않는 태그: <span>

blockinline-blockinlineが改行されているかどうかを区別改行されていない改行されていないデフォルト幅100%文字が占めている文字数はwidth、heightが有効な文字数と等しくありません

ボックスを構成する要素

ボックスコンポーネントは、次の画像を覚えるだけでいいです.

border(枠線)
1.審美に使える
2.各領域の大きさを直感的に見ることができる
pタグ上の1 pxの赤い実線の例

p {
  border: 1px solid red;
}

マージン
1.箱の任意の方向にマージンを適用できる
2.各値は時計回りに上、右、下、左
pタグとh 1タグの上下左右に余白を追加する例

p {
  margin: 10px 20px 30px 40px; // top, right, bottom, left
}
h1 {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

义齿
1.padding borderに従ってボックス内の余白を指定
2.値の順序方向が余白と同じ
pラベルのpaddingプロパティに余白を追加

p {
  padding: 10px 20px 30px 40px; // top, right, bottom, left
}

pラベルにborder、background-colorプロパティを追加

p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
  background-color: lightyellow;
}

箱から離れる内容を処理する
1.コンテンツが1つのボックスを通過すると、ボックスのサイズに一致するコンテンツは表示されなくなります.
2.スクロールをボックスに追加して内容を表示
pラベルにoverflowプロパティを指定して、ボックスより大きいコンテンツにスクロールを表示します.

p {
  height: 40px;
  overflow: auto; // 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 경우 auto 대신 hidden
}