다음 항목에서 이상한 CSS 속성을 사용해야 합니다.

본문 최초 발표my blog
우선, 우리는 당신에게 CSS 상자 모델을 익힐 필요가 있습니다.
만약 당신이 상자 모형을 이미 알고 있다면, 다음 섹션의 테스트로 넘어가십시오

CSS 상자 모델

box모델은 html 요소의 기본 구조를 묘사했다.이것은 비례에 따라 축소된 것이 아니기 때문에 이미지의 픽셀이 일치하지 않습니다!

파란색 점선틀은 html원소

중의 내용width x height

자색 공백은 html 요소에 공백

을 채우는 내용입니다

Border는 html 요소 주위의 선이다.요소 주위에 테두리를 설정하는 데 사용됩니다.

여백은 채우기(공백)와 유사하지만 경계를 넘어 요소 사이의 공간을 결정합니다.

알다좋아, 너는 시험에 참가할 준비가 다 되었다

빠른 CSS 테스트

가령 하나의 div가 있다고 가정하면 그 너비는 50px, 높이는 5px, 테두리는 1px, 주위는 10px 채워져 있다.
이 div의 총 너비는 테두리와 충전을 포함하여 얼마입니까?
⏳
⏳
⏳
⏳
⏳
⏳

Answer: 72px

이 답을 얻으려면 50px 너비부터 2px 테두리의 왼쪽과 오른쪽을 추가하고 20px 왼쪽과 오른쪽을 채워야 합니다.

꼭 이럴 필요는 없어!

왜 우리는 이 모든 계산을 해서div의 간단한 폭을 측정해야 합니까?왜 css폭은 실제로div의 폭을 가리킬 수 없습니까?
상자 모형이 하나 더 있어요. 저희가 쓸 수 있어요!

소개: 상자 크기 css 속성

우선, 나는 box-sizing의 기본값, 즉 content-box 을 검사할 것이다.그리고 대체 설정 다시 볼게요 border-box!
간단하게 말하면 content-box에 대해 css의 너비와 고도 속성은 html 내용의 너비와 높이를 가리키며 충전과 테두리를 포함하지 않는다.border-box에 대해width와height속성은 html의 총 너비와 높이를 가리키며 충전과 테두리를 포함한다.

컨텐트 상자(기본값)

box-sizing: content-box 속성이 설정된 경우 너비 및 높이 속성은 컨텐츠 섹션에만 적용됩니다.전체 html 원소의 결과 너비72px는 채워진 추가 너비20px와 테두리에서 나온 추가 너비2px를 포함한다.얻은 높이는 5px.

✨테두리 상자✨

box-sizing: border-box 속성이 설정된 경우 너비 및 높이 속성이 전체 엔티티에 적용됩니다.채우기 및 테두리를 포함하여 컨텐츠 섹션을 계산하므로 전체 하위 요소의 너비는 50px, 컨텐츠 너비는 28px, 채우기는 20px 및 테두리 2px 입니다.컨텐츠 높이가 현재 0 로 계산됩니다. 맨 위와 맨 아래의 10px 채우기가 5px 높이 요구 사항을 충족하기 때문입니다.

코드 펜

제가 CodePen으로 프레젠테이션을 했어요!검사기를 마음대로 열고 끊임없이 변화하는 너비를 보십시오.
상자 크기 속성이 컨텐트 상자로 설정된 경우 너비는 72px 입니다.
상자 크기 속성이 [테두리 상자]로 설정된 경우 너비50px!
https://codepen.io/abdisalan/full/NWqNYgJ

역사

물론 인터넷의 역사에 대해 말하자면 인터넷 익스플로러를 언급하지 않을 수 없다.
Internet Explorer는 채우기 + 테두리를 포함한 너비와 높이의 테두리 모델을 사용하고 보급했습니다.이에 비해 유니버설 네트워크 연합(W3C)은 콘텐츠 상자 모델이 표준이고 현재 사용되고 있으며 대부분의 현대 브라우저의 기본 모델이라고 결정했다.

너는 어느 것을 더 좋아하니?

나는 개인적으로 border-box 을 더 좋아하지만, 그것들은 각각 이해득실이 있다.뭐 공부 해요?

border-box - 채우기나 테두리를 추가할 필요가 없습니다. 이 테두리는 계산이 가능하고 이전 브라우저에서 지원됩니다.

content-box - 대부분의 브라우저에서 기본 동작입니다.다른 요소에 쉽게 적응할 수 있도록 내용의 크기를 지정할 수 있습니다.

다음 항목에 테두리 상자를 포함하려면 이 편리한 CSS 규칙을 사용하여 모든 요소에 적용할 수 있습니다.

* {
    box-sizing: border-box;
}

이 글을 좋아해 주시고 모든 항목에서 사용하시기 바랍니다border-box!
✌️