Properties

Properties

Draft
  • account_tree
  • bug_report

box-sizing

웹브라우저별 박스의 width, height을 계산하는 방식의 차이를 해결하기 위한 속성이다.

설정 가능한 속성 값

  • content-box기본값키워드CSS3

    기본 값이며 박스에 적용된 테두리, 내부 여백 크기가 포함되지 않는다.

  • border-box키워드CSS3

    박스에 적용된 테두리, 내부 여백 크기가 가로, 세로의 크기에 함께 포함된다.

  • initial키워드CSS3

    CSS의 기본 값으로 설정한다.

구문

  • box-sizing content-box or border-box or initial;기본값CSS3

    상수를 이용해 박스의 가로와 세로의 계산 방식을 웹브라우저에게 알린다.

  • object.style.boxSizing = "border-box";자바스크립트 형식CSS3

    자바스크립트 형식

테스트 도구

박스의 크기를 계산하는 방식에 따른 결과 테스트

지원 웹브라우저