CSS3 상자 크기 조정
CSS3의 box-sizing 속성은 우리가 요소의 전체 폭과 높이의 패딩과 국경을 포함 할 수 있습니다.
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit- 또는 -moz- 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
CSS3없이 box-sizing 부동산
기본적으로, 소자의 폭과 높이가 이와 같이 계산된다 :
요소의 폭 + 패딩 + 국경 = 실제 폭
높이 + 패딩 + 국경 = 요소의 실제 높이
이 의미는 요소의 너비 / 높이를 설정하면 요소가 자주 (요소의 테두리와 패딩 요소의 지정된 너비 / 높이에 추가되기 때문에) 사용자가 설정 한 것보다 더 큰 나타납니다.
다음 그림은이 보여줍니다 <div> 같은 지정된 폭과 높이 요소를 :
두 개의 <div> 결과에 서로 다른 크기와 마지막까지 위의 요소 (DIV2 때문에 패딩이 지정한) :
예
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} »그것을 자신을 시도 그들은 패딩과 국경을 빼야했기 때문에 그래서, 오랜 시간 동안 웹 개발자들은 그들이 원하는 것보다 작은 폭 값을 지정했습니다.
CSS3로, box-sizing 속성은이 문제를 해결합니다.
CSS3와 함께 box-sizing 부동산
CSS3의 box-sizing 속성은 우리가 요소의 전체 폭과 높이의 패딩과 국경을 포함 할 수 있습니다.
설정하면 box-sizing: border-box; 요소 패딩과 테두리의 폭과 높이에 포함되어 있습니다 :
다음은 같은 예로, 위와이다 box-sizing: border-box; 모두에 추가 <div> 요소 :
예
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} »그것을 자신을 시도 사용의 결과 때문에 box-sizing: border-box; 그래서 훨씬 더 많은 개발자가 이런 식으로 일을 자신의 페이지에있는 모든 요소를합니다.
아래 코드는 모든 요소가이보다 직관적 인 방법으로 크기임을 보장합니다. 대부분의 브라우저는 이미 사용 box-sizing: border-box; 여러 형태 요소 (전부는 아니지만 - 입력 및 텍스트 영역이 폭이 다르게 보일 이유입니다 : 100 %).
모든 요소에이를 적용하면 안전하고 현명하다 :