[css] box-sizing

box-sizing

http://css-tricks.com/almanac/properties/b/box-sizing/

CSS3 box-sizing Property

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

Default value: content-box 이고, border 와 padding 까지 width 로 포함되는 border-box 를 사용할 수 있다.

IE 5.5 까지는 IE의 box model 이 border 와 padding 까지 width 로 포함되는 border-box 였다.

IE 만 웹 표준을 따르지 않는다고 욕을 먹고 나서야, IE 6 부터 순수 contents 만 width 로 사용하는 현재의 box model 을 사용하게 되었다.

그런데, 사용해 보니 불편할 때가 있어서 IE 6 이전에 사용하던 box model 로 돌아갈 수 있게 하는 CSS3 Property를 만든 것이다.

이 box-sizing 프라퍼티는 IE8 부터 지원하니, IE 6 이랑 IE 7 은 이전 IE Box Model 인 border-box Model 을 쓰고 싶어도 쓸 수 없는 상황이 되었다.

Internet Explorer and the CSS box model

http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

box-sizing

http://ko.learnlayout.com/box-sizing.html

Opening the Box Model

http://learn.shayhowe.com/html-css/opening-the-box-model/