목차
box-sizing 예제 - 요소 너비 계산 방식 선택 box-sizing 정의 box-sizing 구문 box-sizing:border-box; 경우, 전체 차지 너비
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 이상 주요 최신브라우저 지원 .
box-sizing 구문
selector {box-sizing: content-box|border-box|initial|inherit;}
[속성값]
content-box
너비 = (width + 좌우border + 좌우padding)
border-box
너비 = (width)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
box-sizing:border-box; 경우, 전체 차지 너비
width + (좌우margin)
※ padding, border 값은 너비에서 제외.
