|CSS| CSS: 상자 모델

          -Box Model: Width and Height 

          -Box Model: Border and Border-Radius

          -Box-Model: Padding

          -Box-Model: Margin

          -The Display Property 

          -CSS Units Revisited

          -CSS Units: ems

          -CSS Units: rems

상자 모델: 너비 및 높이

CSS의 모든 것은 상자입니다. 그 상자는 다른 속성을 가지고 있습니다. 브라우저는 항목이 상자처럼 보이지 않더라도 웹 페이지의 모든 것을 상자로 취급합니다.

CSS 속성의 너비는 요소 너비를 설정합니다.
CSS 속성의 높이는 요소 높이를 설정합니다.

div {
너비: 200px;
높이: 200px;
}

상자 모델: 테두리 및 테두리 반경

테두리는 특정 작업을 명확하게 하거나 특정 요소에 주의를 끌 수 있기 때문에 중요합니다. 경계는 상호 작용할 때 변경될 수 있습니다.

테두리 속성

테두리 너비

테두리의 두께를 제어합니다.


테두리 색상

테두리의 색상을 제어합니다.


테두리 스타일

선 스타일 제어 - 파선, 실선

상자 모델: 패딩

패딩 속성

개별 속성

패딩 왼쪽
패딩 오른쪽
패딩-하단
패딩 탑
약식 속성은 4가지 모두를 설정할 수 있는 곳입니다.
한 번에 측면.

상자 모델: 여백

여백은 외부에 있고 요소 사이의 공간이고 패딩은 요소 내부의 테두리와 해당 콘텐츠 영역 사이입니다.

디스플레이 속성

인라인

너비와 높이는 무시됩니다. 여백과 패딩은 요소를 수평으로 밀어내지만 수직으로 밀어내지 않습니다.

차단하다

블록 요소는 문서의 흐름을 끊습니다. 너비, 높이, 여백 및 패딩이 준수됩니다.

인라인 블록

Width, Height, Margin 및 Padding을 제외하고 인라인 요소처럼 동작합니다.

CSS 단위 재검토

상대 단위

   -em


   -rem


   -vh

   -vw

   -%  percentages are always relative to some other value. 

절대 단위

    -px

    -pt

    -cm

    -in

    -mm

CSS 단위: ems

em은 font-size의 상대 단위이며 1em은 부모의 font-size와 같습니다. 2em's는 부모의 글꼴 크기입니다.

CSS 단위: 렘

rem은 루트 html 요소의 글꼴 크기와 관련이 있습니다. 작업하기가 더 쉬운 경우가 많습니다.
루트 글꼴 크기가 20px이면 1rem은 항상 20px, 2rem은 항상 40px입니다.