CSS3 상자 크기

CSS3 box-sizing 속성은 너비를 설정하고 높이 속성은 패딩 (패딩)과 경계 (국경)가 포함되어 있습니다.

브라우저 지원

표의 수치 속성 버전 번호를 먼저 지원 브라우저를 나타낸다.

바로 수 -webkit- 브라우저 또는 -moz- 지정된 접두사 후.

재산
상자 크기 조정	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.1 -webkit-	9.5

기본적으로 다음과 같이 폭과 방법 고성능 컴퓨팅 원소이다 :

너비 (폭) + 패딩 (패딩) + 경계 (국경) 실제 폭 요소 =

높이 (높이) + 패딩 (패딩) + 경계 (국경) 요소의 실제 높이를 =

이것은 우리가 요소의 너비 / 높이를 설정하면, 요소의 표시 높이와 폭이 큰 (때문에 폭 / 높이를 계산합니다 패딩과 테두리 요소의) 될 것을 의미한다.

이것은 (, 높이가 100 픽셀 인 폭이 300 픽셀입니다) 작은 상자입니다.

이것은 (, 높이가 100 픽셀 인 폭이 300 픽셀이다) 큰 상자입니다.

이 두 <div> 요소, 너비와 높이가 같은 설정하지만,하지만 일관성이 실제 쇼의 크기 DIV2 지정된 패딩 때문에 :

.div1 {
폭 : 300 픽셀;
높이 : 100 픽셀;
국경 : 1 픽셀 청색;
}

.div2 {
폭 : 300 픽셀;
높이 : 100 픽셀;
패딩 : 50 픽셀;
국경 : 1 픽셀 고체 빨간;
}

당신은 작은 상자를 얻기 위해이 방법을 사용하고 싶은 여백 내에 포함되어있는 경우, 당신은 계정에 국경을 가지고 마진 폭 내에서해야합니다.

CSS3의 box-sizing 이 문제에 대한 좋은 해결책 속성을.

CSS3 box-sizing 속성은 요소의 폭과 높이에 패딩 (패딩)과 경계 (국경)가 포함되어 있습니다.

당신은 요소에 설정하면 box-sizing: border-box; 패딩 (패딩)과 경계 (국경)도 폭과 높이에 포함되어 있습니다 :

두 사업부는 현재 같은 크기입니다!

이 튜토리얼!

여기에 두 개의 <DIV> 요소가 추가되어 box-sizing: border-box; 간단한 예제의 속성을.

.div1 {
폭 : 300 픽셀;
높이 : 100 픽셀;
국경 : 1 픽셀 청색;
박스 크기 : 경계 상자;
}

.div2 {
폭 : 300 픽셀;
높이 : 100 픽셀;
패딩 : 50 픽셀;
국경 : 1 픽셀 고체 빨간;
박스 크기 : 경계 상자;
}

결과로부터 판단 box-sizing: border-box; 더 나은 결과를, 또한 필요 많은 개발자이다.

다음 코드의 크기를 표시하는 더 직관적 인 방법의 모든 요소를 만들 수있다. 대부분의 브라우저는 이미 지원 box-sizing: border-box; (모든하지만이 - 너비를 설정 입력 및 텍스트 요소 이유입니다 : 100 %; 포스트의 폭이 동일하지 않습니다).

박스 크기를 사용하여 모든 요소가 더 좋습니다 :

* {
박스 크기 : 경계 상자;
}