목차
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
<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
<p>padding, border : 총너비에 포함 X </p>
<div>
총너비 400px = width 400 <br>
홈짱닷컴 (Homzzang.com)
</div>
</div>
결과 보기
box-sizing 정의
(박스너비 = 박스전체너비 =박스총너비) 결정방식.
즉,
너비・높이 계산 시, padding・ border 포함여부 결정.
1.
기본값:
상속여부:
애니효과:
CSS버전:
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 없으면, 높이값이 같아도 실제 높이 다름.
