CSS3, box-sizing 속성과 calc() 함수

box-sizing

css로 크기를 지정하는 width, height 속성들은 기본적으로 padding, border 값을 포함하지 않습니다.

아래 값을 사용하게되면 padding, border의 값들이 width, height 값을 참조하게 됩니다.

box-sizing: border-box;

사용할 수 있는 값

content-box	기본값, border, padding의 크기가 각자 적용 된다.
border-box	width, height 값 안에서 padding, border 값이 적용 된다. margin 값은 여전히 별개로 적용 된다.
initial	-
inherit	부모 값과 동일하게 적용한다.

브라우저별 지원하는 최소 버전

지원하는 최소 버전	26.0 19.0 -webkit-	12.0	9.0	16.0 4.0 -moz-	7.0 6.0 -webkit-	15.0

*버전 뒤 -webkit- 혹은 -moz- 가 있는 버전의 브라우저는 해당 prefix를 붙여 사용해야 한다.

calc()

사용예) width: calc(100% - 100px);

주의 할 것은, calc 함수의 매개변수를 작성 할 때, 연산자와 값 사이에 공백을 꼭 넣어야 정상 작동한다.

브라우저별 지원하는 최소 버전

지원하는 최소 버전	26.0 19.0 -webkit-	12.0	9.0	16.0 4.0 -moz-	7.0 6.0 -webkit-	15.0

*버전 뒤 -webkit- 혹은 -moz- 가 있는 버전의 브라우저는 해당 prefix를 붙여 사용해야 한다.

* w3schools 참조하여 작성하였다. 원문은 아래 링크 참조

box-sizing 속성: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

calc 함수: http://www.w3schools.com/CSSref/func_calc.asp