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 %로 다른 이유는이 때문입니다).

이것을 모든 요소에 적용하는 것은 안전하고 현명합니다.

예

* {

    box-sizing: border-box;

}