css(css3) box-sizing

css3 box-sizing

브라우저 지원

익스플로러     8이상

크롬            10.0 이상    4.0 -webkit-

firefox          29.0 이상    2.0 -moz-

safari           5.1 이상     3.1 -webkit-

opera           9.5 이상

div1,div2 같은 경우 일반적인 css 사용 예시이다.

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
} 

비교 사용예시 (width:300px; height:100px)

비교 사용예시 (width:300px; height:100px)

아래의 같은 경우 box-sizing 를 적용한 모습이다.

.div3 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div4 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

비교 사용예시 (width:300px; height:100px)

비교 사용예시 (width:300px; height:100px)

속성

content-box: content 크기를 기준으로 설정이 된다.(일반적으로 설정을 안해도 무관하다)

border-box: 엘리먼트의 크기를 기준으로 설정이 된다.

이것을 사용 하면 padding를 주고 나서의 width 값이나 height값을 따로 계산할 필요가 없다.