정의 및 사용
boxSizing 속성을 사용하면 특정 방식으로 지역에 맞게 특정 요소를 정의 할 수 있습니다.
당신이 옆에 두 개의 경계 상자의 측면을 원하는 경우 예를 들어,이 boxSizing에 설정을 통해 달성 될 수있다 "border-box" . 이것은 지정된 폭과 높이의 상자를 렌더링하고, 상자 내부의 테두리와 패딩을 배치 할 브라우저를 강제로.
브라우저 지원
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
<스타일 개체