CSS 사용자 정의 속성 (변수)
CSS 상자 크기 조정 부동산 것은 우리가 총 요소의 채우기 및 테두리 폭과 높이를 포함 할 수 있습니다.
어떤 CSS 상자 크기 조정 재산권
기본적으로 다음과 같이 요소의 폭과 높이가 계산됩니다 : 당신은 요소의 너비 / 높이를 설정하면 요소는 일반적으로 같습니다 폭 패딩 + 국경 = 요소의 높이 + 패딩 + 국경의 실제 폭 +는 = 이것은 요소의 실제 높이가 있음을 의미 (경계 패딩 소자 폭 / 높이를 지정한 요소에 첨가하기 때문에)가 설정 비율. 다음 그림은 두 <div> 요소는 동일한 폭과 높이를 특정 보여준다
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>ccs</title> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } </style> </head> <body> <div class="div1">这个div更小(宽度为300px，高度为100px)。</div> <br> <div class="div2">这个div更大(宽度也是300px，高度也是100px)。</div> </body> </html> 상자 크기 조정이 문제를 해결하기 위해 속성을.
사용 CSS 박스 크기 특성
상자 크기 조정 부동산 것은 우리가 총 요소의 채우기 및 테두리 폭과 높이를 포함 할 수 있습니다. 만약 박스 크기 : 경계 박스, 테두리의 폭과 높이에 함유되는 원소에 채워 배치 :
.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; } 그것의 상자 크기 조정의 결과의 사용 : 경계 상자, 아주 좋은, 많은 개발자들이 원하는 페이지의 모든 요소는이 방식으로 노력하고 있습니다. 다음 코드는 크기가 조정의 모든 요소가보다 직관적 인 방법을 확인합니다. 대부분의 브라우저는 박스 크기가 : 경계 상자를,에 사용되는 폼 요소 많은 (전부는 아니지만 -이 입력에서 텍스트 영역과 다른 이유는 폭 보면 : 100 %). 그것은 안전하고 합리적인 모든 요소에 적용 :
* {
box-sizing: border-box; } CSS 상자 속성은 크기를 조정
박스 크기는 요소의 폭과 높이를 계산하는 방법을 정의 패딩 및 테두리를 포함해야하는지 여부