CSS의 상자 모델 유형 차이

우리는 박스 모델이 CSS에서 중요한 개념이라는 것을 알고 있습니다. 박스 모델을 이해해야만 더 나은 레이아웃과 일정을 만들 수 있지만 일반적으로 박스 모델에는 두 가지 유형이 있습니다. 하나는 W3C 박스 모델과 같습니다. ie 상자 모델의 범위에는 여백, 테두리, 패딩 및 내용도 포함됩니다. 표준 w3c 상자 모델과의 차이점은 ie 상자 모델의 내용 부분에 테두리와 패딩이 포함된다는 것입니다.

예: 상자의 여백은 20px, 테두리는 1px, 패딩은 10px, 콘텐츠 너비는 200px, 높이는 50px입니다.

표준 w3c 상자 모델로 설명하면 이 상자가 차지해야 하는 위치는 너비 20*2+1*2+10*2+200=262px, 높이 20*2+1*2*10*2+50=112px이며 상자의 실제 크기는 다음과 같습니다. : 너비 1*2+10*2+200= 222px, 높이 1*2+10*2+50=72px;

ie 상자 모델을 사용하는 경우 이 상자가 차지해야 하는 위치는 너비 20입니다. *2+200=240px, 높이 20*2+50=70px, 상자의 실제 크기는 가로 200px, 세로 50px입니다.

박스 모델 선택:

"표준 w3c 박스 모델"을 선택하는 방법은 무엇입니까? 매우 간단합니다. 웹페이지 상단에 doctype 문 을 추가하기만 하면 됩니다. doctype 문을 추가하지 않으면 각 브라우저는 자체 동작에 따라 웹 페이지를 이해합니다. 즉, 즉 브라우저는 ie 상자 모델을 사용하여 상자를 해석하고 ff는 표준 w3c 상자 모델을 사용하여 다음을 수행합니다. 상자를 해석하면 웹페이지가 브라우저마다 다르게 표시됩니다. 반대로 doctype 선언을 추가하면 모든 브라우저는 표준 w3c 상자 모델을 사용하여 상자를 해석하고 웹 페이지는 각 브라우저에서 일관되게 표시됩니다.

PS: CSS에서 여백과 패딩의 차이

CSS에서 여백은 자체 프레임과 외부 컨테이너의 경계 사이의 거리를 의미하며, 이는 컨테이너 외부의 거리가 컨테이너 내부의 거리입니다. .

1.padding

1. 구문 구조

(1)

padding-left

:10px; leftpadding(2)

padding-right

:10px; 오른쪽 padding( 3) -top

: 10px; 상단 패딩

(4) padding-bottom

: 10px; 하단 패딩

(5) padding: 10px; 네 측면 모두 통일된 패딩

(6) 패딩:10px 상단, 하단, 왼쪽 및 오른쪽 패딩

(7) 패딩:10px 20px 30px; 상단, 왼쪽, 오른쪽, 하단 패딩

(8) 패딩:10px 20px 30px 40px 상단, 오른쪽, 하단, 왼쪽 패딩

2. 가능한 값 ​​

(1) 길이는 특정 단위로 패딩 길이를 지정합니다.

(2) % 상위 요소의 너비를 기준으로 패딩 길이를 지정합니다.

(3) 자동 브라우저 패딩 계산

(4) 상속은 패딩이 상위 요소에서 상속되어야 한다고 규정합니다.

3. 브라우저 호환성 문제

(1) 모든 브라우저는 패딩 속성을 지원합니다.

(2) IE 버전에서는 이를 지원하지 않습니다. 속성 값 "inherit"

믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

CSS3의 번역 속성에 대한 자세한 소개

CSS3에서 회전 후광 효과를 구현하는 단계

CSS3의 border-image 속성에 대한 자세한 소개

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