표준 CSS 박스 모델 및 모델 비교 IE 설정하고 획득 한 카세트의 크기

CSS 박스 모델은 다음과 같습니다 :
내용 내용 + 패딩 패딩 + 국경 경계 + 마진 마진을

1. 표준 모델 및 모델 비교 IE

• 표준 / W3C 박스 모델은 포함 범위 margin,, border, padding, content과 content는 다른 부분이 포함되어 있지 않습니다.

• IE 박스 모델의 범위도 포함된다 margin,, border, padding, content표준 상자 상이한 박스 IE를 content포함 padding하고 border부.

  표준 모델 및 2.CSS IE 모델을 설정하는 방법

  다음 구문으로

box-sizing:border-box || content-box || inherit

• 사용하는 경우 content-box때 표준 패턴을 해결할 수있는 페이지를 계산, content-box기본 모드입니다;
• 사용하는 경우 border-box, 페이지 모드는 IE 분석 계산을 사용합니다;

• 때 inherit페이지 요소를 부모로부터 상속 : 시간 box-sizing의 값입니다.

  3.JS 설정 수집 박스 모델의 폭과 높이에 대응

  세 CSS를 추가 할 수있는 방법을 : CSS 인라인 스타일, 증가 <style>노드 외부 스타일 시트를. 다음과 같은 방법이 있습니다 :
• dom.style.width/height: 인라인 스타일의 폭과 높이, 특정 제거 예 .
• dom.currentStyle.width/height: 실시간 컴퓨팅의 스타일이, 실시간 렌더링이 실행의 결과를 가져옵니다,하지만 IE를 지원합니다.
• window.getComputedStyle(dom).width/height: 또한 실시간으로 계산되는 스타일을 가져옵니다, 같은 크롬과 파이어 폭스, 더 나은 호환성 등의 다른 브라우저를 지원합니다.

• dom.getBoundingClientRect( ).width/height: 계산 페이지의 박스 모델의 절대 위치가 거의 사용되지 않습니다.
  상세한 내용은 여기 .
  "여백이 겹쳐 BFC는"을 참조하십시오 여기 .