스타일 boxSizing 속성
예시
boxSizing 속성을 변경합니다.
document.getElementById("myDIV").style.boxSizing = "border-box";
정의 및 사용
boxSizing 속성을 사용하면 특정 방식으로 영역에 맞도록 특정 요소를 정의할 수 있습니다.
예를 들어 두 개의 테두리가 있는 상자를 나란히 만들고 싶다면 boxSizing을 "border-box"로 설정하면 됩니다. 이렇게 하면 브라우저가 지정된 너비와 높이로 상자를 렌더링하고 상자 안에 테두리와 패딩을 배치합니다.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
boxSizing | Yes | Yes | Yes | Yes | Yes |
통사론
boxSizing 속성을 반환합니다.
object.style.boxSizing
boxSizing 속성을 설정합니다.
object.style.boxSizing = "content-box|border-box|initial|inherit"
속성 값
Value | Description |
---|---|
content-box | Default value. This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height |
border-box | The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 콘텐츠 상자 |
---|---|
반환 값: | 요소의 상자 크기 속성을 나타내는 문자열 |
CSS 버전 | CSS3 |
관련 페이지
CSS 참조: 상자 크기 속성
❮ 스타일 개체