최신 웹 개발 튜토리얼
 

Style boxSizing Property

<스타일 개체

boxSizing 속성을 변경 :

document.getElementById("myDIV").style.boxSizing = "border-box";
»그것을 자신을 시도

정의 및 사용

boxSizing 속성을 사용하면 특정 방식으로 지역에 맞게 특정 요소를 정의 할 수 있습니다.

당신이 옆에 두 개의 경계 상자의 측면을 원하는 경우 예를 들어,이 boxSizing에 설정을 통해 달성 될 수있다 "border-box" . 이것은 지정된 폭과 높이의 상자를 렌더링하고, 상자 내부의 테두리와 패딩을 배치 할 브라우저를 강제로.


브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

boxSizing 속성은 인터넷 익스플로러, 오페라, 크롬, 사파리에서 지원됩니다.

파이어 폭스의 방법은 MozBoxSizing 속성을 지원합니다.


통사론

boxSizing 속성을 반환합니다 :

object .style.boxSizing

boxSizing 속성을 설정 :

object .style.boxSizing="content-box|border-box|initial|inherit"

속성 값

기술
content-box 기본값. CSS2.1로 지정된이 폭과 높이의 동작이다. 지정된 폭 및 높이 (and min/max properties) 요소의 콘텐츠 상자를 각각의 폭과 높이에 적용된다. 요소의 패딩 및 경계 뻗어 지정된 폭 및 높이를 벗어난
border-box 지정된 폭 및 높이 (and min/max properties) 이 요소는 요소의 경계 박스를 결정한다. 즉, 요소 ​​지정 패딩 또는 테두리 뻗어이 지정된 폭과 높이의 내부에 그려져있다. 콘텐츠의 폭과 높이가 지정된 '폭'와 '높이'속성에서 양측의 가장자리 패딩 폭을 감산하여 계산된다
initial 기본값으로이 속성을 설정합니다. 초기 읽기에 대한
inherit 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기

기술적 세부 사항

기본값: 내용 상자
반환 값 : 요소의 상자 크기 조정 속성을 나타내는 문자열
CSS 버전 CSS3

관련 페이지

CSS 참조 : box-sizing property


<스타일 개체