박스 모델 이해

박스 모델에는 W3C와 IE 박스 모델의 두 가지 유형이 있습니다.

박스 모델에는 여백, 테두리, 패딩 및 콘텐츠가 포함됩니다.

W3C 요소 너비 = 콘텐츠 너비

IE 요소 너비 = 콘텐츠+패딩+테두리

개인적으로 W3C에서 정의한 박스 모델이 IE에서 정의한 박스 모델보다 더 합리적이라고 생각합니다.

요소의 너비에는 테두리와 패딩이 포함되어야 합니다. 이는 실제 생활에서 사용되는

W3C의 박스 모델과 동일합니다. 또한 자체 문제를 인식하여 CSS3에 content-box와 border-box라는 두 가지 속성을 포함하는 새로운 스타일의 상자 크기 조정을 추가했습니다.

content-box: width=content+padding+border

border-box: width=width (스타일로 지정된 너비)

1 행 수준 요소의 경우 margin-top 및 margin-bottom은 유효하지 않습니다. 위쪽 및 아래쪽 요소, margin-left 및 margin-right는 유효합니다

2. 인접한 블록 수준 요소 margin-bottom 및 margin-top의 경우 값 방법

1)은 모두 양수입니다. 최대 거리 = 수학을 사용합니다. .max(margin-botton , margin-top)

2) 모두 음수입니다. 최소 거리를 취합니다 = Math.min(margin-botton,margin-top)

3) 상단은 양수이고 하단은 음수 또는 상단은 음수이고 하단은 양수: 양수와 음수 거리의 추가 = margin-botton+margin-top

위 내용은 박스 모델 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!