최고의 CSS3 상자 크기 튜토리얼 2024년, 이 튜토리얼에서는 브라우저 지원,CSS3 상자 크기 조정 속성을 사용하지 마십시오,사용 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 |
기본적으로 다음과 같이 폭과 방법 고성능 컴퓨팅 원소이다 :
너비 (폭) + 패딩 (패딩) + 경계 (국경) 실제 폭 요소 =
높이 (높이) + 패딩 (패딩) + 경계 (국경) 요소의 실제 높이를 =
이것은 우리가 요소의 너비 / 높이를 설정하면, 요소의 표시 높이와 폭이 큰 (때문에 폭 / 높이를 계산합니다 패딩과 테두리 요소의) 될 것을 의미한다.
이 두 <div> 요소, 너비와 높이가 같은 설정하지만,하지만 일관성이 실제 쇼의 크기 DIV2 지정된 패딩 때문에 :
당신은 작은 상자를 얻기 위해이 방법을 사용하고 싶은 여백 내에 포함되어있는 경우, 당신은 계정에 국경을 가지고 마진 폭 내에서해야합니다.
CSS3의 box-sizing
이 문제에 대한 좋은 해결책 속성을.
CSS3 box-sizing
속성은 요소의 폭과 높이에 패딩 (패딩)과 경계 (국경)가 포함되어 있습니다.
당신은 요소에 설정하면 box-sizing: border-box;
패딩 (패딩)과 경계 (국경)도 폭과 높이에 포함되어 있습니다 :
여기에 두 개의 <DIV> 요소가 추가되어 box-sizing: border-box;
간단한 예제의 속성을.
결과로부터 판단 box-sizing: border-box;
더 나은 결과를, 또한 필요 많은 개발자이다.
다음 코드의 크기를 표시하는 더 직관적 인 방법의 모든 요소를 만들 수있다. 대부분의 브라우저는 이미 지원 box-sizing: border-box;
(모든하지만이 - 너비를 설정 입력 및 텍스트 요소 이유입니다 : 100 %; 포스트의 폭이 동일하지 않습니다).
박스 크기를 사용하여 모든 요소가 더 좋습니다 :