정보실

웹학교

정보실

css CSS Box Sizing

본문

CSS에서 box sizing을 사용하는 방법


요소의 너비를 계산할 때 브라우저의 기본 동작은 padding, border 및 margin을 고려하지 않고 계산 된 너비 및 높이를 내용 영역에 적용하는 것입니다.


이런 접근 방식은 작업하기 매우 복잡합니다.

box-sizing 속성을 설정하여 이 동작을 변경할 수 있습니다.


상자 크기 조정 속성은 큰 도움이 됩니다. 그것은 2개의 값을 가지고 있습니다 :

  • border-box
  • content-box

content-box가 기본값인데, box-sizing가 지정되기 전까지 우리가 오래 전에 사용했던 것이 기본값이 되었습니다.


border-box는 우리가 찾고 있는 새롭고 멋있는 것입니다.


.my-div {
  box-sizing: border-box;
}


폭과 높이 계산에는 패딩(padding)과 경계(border)가 포함됩니다.

마진(margin)만 남겨두기 때문에 합리적입니다. 마음 속에서 우리는 일반적으로 이것을 별도의 것으로 보게 됩니다. 

여백(margin)은 상자 밖에 있습니다.


이 속성은 작은 변화이지만 큰 영향을 줍니다.

CSS Tricks는 국제적인 box-sizing 인식 일을 선포하기도 했는데, 이 말은 페이지의 모든 요소에 즉시 적용 할 것을 권장합니다.


*, *:before, *:after {
  box-sizing: border-box;
}






페이지 정보

조회 105회 ]  작성일19-07-12 21:46

웹학교