CSS3 box-sizing 속성 사용 정보
CSS 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 %로 다른 이유는이 때문입니다).
이것을 모든 요소에 적용하는 것은 안전하고 현명합니다.
예
* {
box-sizing: border-box;
}
추천
0
0
댓글 1개
이건 진짜 꿀팁