logo image
메인
기술
HOME
기술

css box-sizing 프로퍼티

목록
#css
  • 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 전치어 필요)
  • 설명링크
  • 설정 값 설명
    • 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; 
      }
      • 이렇게 사용하지 말라!
        예전 소스와 같이 사용할 경우, 과거에 너비 맞춘게 틀어질 수 있다.
목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1
tag