CSS 상자 유형 정보

CSS의 박스형을 제대로 배우지 못했기 때문에 정리해봤어요.

상자 유형

CSS에는 상자라는 개념이 있다.
이걸 따라서, CSS 제작 섹션 디자인과 프로젝트들이 다 갖추었다면.

블록 상자

인라인 카트리지

CSSdisplay 속성의 값에 따라 두 가지 유형이 있습니다.(inline-block 뒤에 서술*1)

기본 블록 요소(기본값display: block;

<address>、<blockquote>、<div>、<dl>、<fieldset>、<form>、<h1>、
<hr>、<ol>、<p>、<pre>、<table>、<ul>

기본 인라인 컴포넌트(기본값display: inlineblock;

<a>、<b>、<br>、<code>、<em>、<i>、<img>、<input>、<label>、<s>、<select>、
<span>、<strong>、<textarea>

상자 모델 정의

두 종류는 각각 다음과 같이 정의된다.

네모난 틀

폭과 높이 지정: 적용

가로 초기값: 부모 요소와 동일

고도의 초기값: 내용에 따라(자가 되는 요소에 가깝다)

와 기타 요소의 배열: 상자가 줄로 바뀐다

margin 및 padding

을 지정할 수 있습니다.

인라인 프레임

폭과 높이 지정: 적용되지 않음(input처럼 CSS를 통해 폭과 높이를 설정할 수 있는 요소도 있음)

가로 초기값: 부모 요소와 동일

높이의 초기값: 내용에 따라 다름

와 기타 요소의 배열: 상자 불환행(가로 배열)

margin을 위아래로 지정할 수 없음

또한 상자형은 바깥쪽과 안쪽의 디스플레이 유형이 있다.
블록 상자와 내부 연결 상자는 외부 디스플레이 유형으로 각각의 규칙을 적용합니다.그러나 내부 디스플레이 유형도 있다.내부 값을 결정하여 내부 디스플레이 유형을 변경하고 규정 값에 가까운 규칙을 적용합니다.즉, 블록 상자로서의 블록 요소에 대한 지정display: flex; 또는display: grid;을 통해 바깥쪽의 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 각각flex,grid이다.CSS를 쓰고 싶은 사람들은 당연히 내부 디스플레이 유형의 규칙이 상자 안의 요소의 레이아웃 방법에 적용된다는 것을 알아야 한다.

상자형

상자형을 이해하려면 반드시 상자의 구성을 이해해야 한다.
다음 그림에서 보듯이 네모난 테두리는 네 가지 요소로 구성되어 있다.

유도 상자

경계 박스

필러 카트리지

컨텐츠 상자

각자가 구성한 명칭이 그렇게 적용되는 속성을 나타낸다.경계 상자는 상자의 가장 바깥쪽에 있는 공백 구역입니다.margin 속성으로 지정할 수 있습니다.경계 상자는padding 외부에margin의 안쪽에 저장되며border-width 속성을 통해 지정할 수 있습니다.패키지는 conntent와border 사이의 공백 구역, 즉 요소 내부의 공백이다.padding 속성에서 지정할 수 있습니다.마지막 내용 상자는text와 이미지 등 요소 자체가 표시된 곳이다.width와 Height 속성에서 지정할 수 있습니다.
상자의 크기는 상기 네 개의 상자의 영역을 포함한다.따라서 세로와 가로는 모두 컨텐트+채우기+경계+모서리의 합계입니다.

프레임 모델의 크기 계산하기

사이즈 계산을 왜 하는지는 부모 요인을 뛰어넘는 현상을 피하고 싶어서다.예를 들어 특정width를 지정하려면 상자의 크기가 미리 정해져 있으면, 사이즈에서 채우기 + 경계 + 테두리의 값을 빼고 조정합니다.만약 이 방법이라면 반드시 일일이 계산해야 한다.사용calc()도 이 계산에서 탈출할 수 있지만 calc()지정된 방법에 익숙하기 때문에 습관이 필요할 수 있습니다.MDN의 현수막의 예는 이해하기 쉽다.
(참조: https://developer.mozilla.org/ja/docs/Web/CSS/calc()

지정 상자 영역

개인이 가장 이해하지 못하는 것은border sizing 속성이다.이 속성을 사용하면 width, Height에서 지정한 상자 영역의 크기를 변경할 수 있습니다.

border-sizing: border-box;

이 경우 내용 + 채우기 + 테두리 상자 영역에 width와 Height를 지정할 수 있습니다.

border-sizing: padding-box;

내용 + 채우기 상자 영역에 width와 Height를 지정할 수 있습니다.

border-sizing: content-box;

내용 상자 영역에 width와 Height를 지정할 수 있습니다.
내용+충전+경계선의 영역에서width와height를 지정할 수 있으면 CSS에서 판면 디자인을 할 때 매우 간단해질 수 있다고 생각합니다.그래서 기본적으로 모든 요소를 지정하고 싶다border-sizing: border-box;.reset css*2에서 지정한 경우border-sizing: border-box;가 많은 이유는 이 때문입니다.(HTML5Doctor Reset CSS 같은 것은...)
*1 display: inline-block;이 속성을 설정하면 내부 블록 상자에 정의된 규칙이 적용됩니다.

기타 요소와 배열: 상자 불환행

폭과 높이 지정: 적용

margin 및 padding

을 지정할 수 있습니다.
아이소메트릭 및 인라인 프레임의 피쳐입니다.메뉴판과 블로그 사이트의 소셜네트워크서비스(SNS)에 가로로 늘어선 물건 등 가로로 요소를 배열할 때 편리하다.
*2 reset css
다양한 브라우저를 사용하더라도 웹 응용 프로그램을 표시하는 CSS 파일입니다.브라우저의 기존 기본 CSS 설정을 덮어쓰고 다양한 브라우저 간의 표시를 일관되게 합니다.브라우저마다 스타일이 다르기 때문에 특정한 선택기에 속성을 지정하고 취소합니다.