목차
- box-sizing 예제 - 요소 너비 계산 방식 선택
- box-sizing 정의
- box-sizing 구문
- box-sizing 예제 - <input>요소와 <button> 요소 높이 통일
box-sizing 예제 - 요소 너비 계산 방식 선택
<style>
#hz_cb h2 {color:blue;}
#hz_cb div {
box-sizing: content-box; /* 요소너비 = width + padding + border */
width: 400px;
height: 100px;
padding: 30px;
border: 10px solid blue;
}
#hz_bb h2 {color:red;}
#hz_bb div {
box-sizing: border-box; /* 총너비 = width */
width: 400px;
height: 100px;
padding: 30px;
border: 10px solid red;
}
</style>
</head>
<body>
<div id="hz_cb">
<h2>box-sizing: content-box (기본값)</h2>
<p>padding, border : 총너비에 포함 O</p>
<div>
총너비 480px = width 400 + padding (30 x 2) + border (10 x 2)<br>
홈짱닷컴 (Homzzang.com)
</div>
</div>
<div id="hz_bb">
<h2>box-sizing: border-box</h2>
<p>padding, border : 총너비에 포함 X</p>
<div>
총너비 400px = width 400<br>
홈짱닷컴 (Homzzang.com)
</div>
</div>
결과 보기
box-sizing 정의
(박스너비 = 박스전체너비 =박스총너비) 결정방식.
즉,
너비・높이 계산 시, padding・ border 포함여부 결정.
1.
- 기본값: content-box
- 상속여부: X
- 애니효과: X
- CSS버전: CSS3
- JS구문: object.style.boxSizing="border-box"
2.
IE8 이상 주요 최신브라우저 지원. (※ 구형 브라우저 경우, 접두사 필요)
- 구형 Chrome, Safari 경우: -webkit-
- 구형 Firefox 경우: -moz-
box-sizing 구문
selector {box-sizing: content-box|border-box|initial|inherit;}
[속성값]
content-box
너비 = (width + 좌우border + 좌우padding)
- <input type="text">와 <button> 요소 높이 같게 할 때 필요.
border-box
너비 = (width)
- 실제 너비: width + 좌우margin
- padding, border 값은 너비에서 제외.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
box-sizing 예제 - <input>요소와 <button> 요소 높이 통일
<style>
.display {float:left; height:30px;line-height:30px; box-sizing: content-box;}
.btn_box {position:relative;}
.btn_box .btn {width:80px; height:30px; line-height:30px; box-sizing: content-box; overflow:hidden;}
.btn_box .hidden {font-size:29px; position:absolute; right:0px; top:0px; opacity:0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); cursor:pointer;}
</style>
<input type="text" id="hz" class="display" readonly>
<div class="btn_box">
<button type="button" class="btn">파일찾기</button>
<input type="file" name="hz" class="hidden" onchange="javascript: document.getElementById('hz').value = this.value"/>
</div>
결과보기
PS. 주의: box-sizing:content-box 없으면, 높이값이 같아도 실제 높이 다름.
