css box-sizing 프로퍼티

• css  box-sizing
• css3에 Working Draft 상태

• box의 size 계산을 설정.

• 지원브라우저
• Chrome : 10.0+ (1.0+에서는 -webkit 전치어 필요)
• FireFox : 29.0+ (1.0+에서는 -moz 전치어 필요)
• IE : 8.0+ (버그 : 계산 반환값에 문제가 있다고함)
• Opera : 7.0+

• Safari : 5.1(534.12)+ (3.0(522)+에서는 -webkit 전치어 필요)

• 설명링크
• http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
• https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
• 위 둘의 설명에서 신택스가 조금 다르다.

• w3schools : box-sizing: content-box	border-box	initial	inherit;
  Mozilla : box-sizing: content-box	padding-box (실험중)	border-box	inherit

• 설정 값 설명
• content-box : 기본값. 스타일에서 width, height와는 별도로 padding,border의 사이즈가 해당 엘레멘트의 실제 너비,높이에 영향을 미친다.

• width:200px, padding-left:2px 일 경우 엘레멘트는 202px의 너비를 가진다.

• border-box : 스타일의 width,height를 설정하면 padding,border의 사이즈는 해당 엘레멘트의 너비, 높이에 영향을 미치지 않는다.(즉, width,height가 padding,border의 사이즈를 포함하게 된다. 다만 margin은 영향 받지 않는다.)

• width:200px, padding-left:2px 일 경우 엘레멘트는 200px의 너비를 가진다.

• padding-box : 스타일 width,height는 padding의 사이즈만 포함한다.(border,margin에는 영향을 받지 않는다.)

• 실험적인것으로 브라우저 지원이 안되는 것이 많을것이다.

• 예제

• .boxstyle{
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
  }

• 주의
• *{
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
  }
• 이렇게 사용하지 말라!
  예전 소스와 같이 사용할 경우, 과거에 너비 맞춘게 틀어질 수 있다.

---

🔗original-link