css box-sizing 프로퍼티

less than 1 minute read

  • 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

Updated: