CSS3 상자 크기 조정 속성을
예
두 상자에 지정된 경계를 :
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
»시도
브라우저 지원
표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.
属性 | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
정의 및 지침을 속성
상자 크기 조정 속성 것은 당신이 지정된 영역에 적응하기 위해 어떤 방법으로 특정 요소를 정의 할 수 있습니다.
예를 들어, 당신은 상자 크기에 "경계 상자"로 테두리 상자 옆에 두 개의 측면을 배치해야합니다. 이 상자에 지정된 폭과 높이, 그리고 테두리와 패딩 상자를 보여주는 브라우저를 만들 수 있습니다.
기본값 : | 내용 상자 |
---|---|
상속 : | 아니 |
버전 : | CSS3 |
자바 스크립트 구문 : | 개체 .style.boxSizing = "경계 상자" |
문법
박스 크기 : 내용 상자 | 경계 상자 | 상속 :
값 | 설명 |
---|---|
내용 상자 | 이 폭과 높이를 특정 CSS2.1의 동작이다. 폭과 높이 (최소 / 최대 속성) 상자에 너비와 높이에 적합한 요소를 지정했습니다. 패딩 테두리 및 도면 배치 이외에는 요소의 폭 및 높이를 지정 |
경계 상자 | 요소의 테두리 상자를 결정하기 위해 너비와 높이 (최소 / 최대 속성)를 지정합니다. 즉, 요소는 패딩과 경계의 지정을 포함한 폭 및 높이를 지정. 폭과 내용의 높이를 뺀 국경의 각 측면과 채우기는 "높이"속성 지정 "폭"폭 계산됩니다 |
상속 | 값은 상자 크기 조정 속성은 부모 요소에서 상속해야 지정 |
관련 기사
CSS3 튜토리얼 : 사용자 인터페이스 CSS3