CSS 박스 모델의 이해에 대해 간단히 이야기해 보세요. CSS 박스 모델 소개

이 글의 내용은 CSS 박스 모델에 대한 이해를 간략하게 이야기 하려는 것인가요? CSS 박스 모델을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

모든 웹페이지의 구성은 상자 모델의 쌓기와 불가분의 관계입니다. CSS 모델은 웹의 기초라고 해야 할까요. 최종 효과의 차이는 높이와 너비, 내용과 배경 삭제의 차이일 뿐입니다.

그럼 CSS 모델에 대해 무엇을 알고 있나요?

일단 CSS 박스 모델에는 몇 가지 종류가 있나요? 두 종류.

1. 표준 모델 2. IE 모델

먼저 이 두 박스 모델의 차이점에 대해 이야기해 보겠습니다.

표준 모델과 IE 모델의 가장 큰 차이점은 계산 방법의 차이입니다. 표준 박스 모델의 높이와 너비는 상자 모델의 높이와 너비입니다. 콘텐츠. IE 모델의 높이와 너비 계산에는 패딩과 테두리의 너비와 높이가 포함됩니다. 설정할 때 상자 크기를 설정하여 둘을 구분할 수 있습니다.

박스 크기의 가치

content-box: 표준 박스 모델.

border-box: IE 박스 모델.

그럼 IE 박스 모델은 언제 사용해야 할까요? 작가의 느낌이 여러 곳에 활용되지는 않지만, 꼭 필요한 상황이 하나 있다. 요소를 호버로 설정하고 테두리를 추가할 때 이때 표준 상자 모델을 사용하면 스타일이 혼란스러울 것입니다. 요소가 1px 상자에 눌려져 있다는 것입니다. . 그러나 box-sizing:border-box를 설정하면 이 문제를 매우 잘 해결할 수 있습니다.

두 번째로, js를 사용하여 요소의 너비와 높이를 얻는 방법은 무엇인가요?

먼저 방법의 개요를 설명한 다음 차이점에 대해 이야기해 보겠습니다.

document.getElementById('id').style.width/height: 너비와 높이를 얻기 위해 인라인 스타일을 가져오는 것으로만 제한됩니다.

document.getElementById('id').currentStyle.width/height: 실시간으로 렌더링한 후 브라우저의 너비와 높이를 얻을 수 있습니다. 이 방법은 더 정확하지만 IE만 지원합니다. (정확해야 하며 누구나 아래 방법을 사용할 수 있습니다.)

window.getCompulatedStyle(dom).width/height: 이 방법은 Chrome 및 Firefox 브라우저와 호환됩니다.

document.getElementById('id').getBoundingClientRect().width/height: 이 메서드는 시간에 따라 요소의 너비와 높이를 가져오고 요소의 절대 위치를 계산하여 위쪽과 왼쪽을 동시에 , 너비, 높이 4개 값으로 만듭니다.

CSS 박스 모델에 관해서는

BFC

개념을 소개해야 합니다(블록 수준 서식 컨텍스트). 이 부분은 온라인에서 더 자세히 소개하지 않겠습니다. . 여기서 바퀴를 재발명하고 있는데, 간단히 언급하겠습니다.

BFC의 원리

1 BFC 요소의 세로 여백이 겹쳐집니다.

2. BFC 영역은 플로팅 요소의 BOX와 겹치지 않습니다.

3. BFC는 독립적인 컨테이너이므로 외부 요소가 내부 요소에 영향을 주지 않습니다.

4. BFC 높이를 계산할 때 플로팅 요소도 계산에 참여합니다.

BFC를 만드는 방법

1. 오버플로: 숨겨진, 자동; float는 없음이 아닙니다.

3. 위치 값이 기본값이나 실제값이 아닙니다

4. 표시: inline-block, table-cell, table

위 내용은 CSS 박스 모델의 이해에 대해 간단히 이야기해 보세요. CSS 박스 모델 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!