XHTML 문서의 루트 요소 인 <html> 요소는 매우 친숙합니다. 그러나 나는 최근에 레이아웃을 만들려고 노력해 왔으며 IE에서는 단순한 역할이 아니며 매우 특별한 속성이 있음을 발견했습니다. 참조를 위해 요약하겠습니다.
IE6 표준 모드 :cight 높이와 너비가 설정 되더라도 크기는 항상 전체 시청 영역을 채 웁니다.
∎ 그에게 어떤 종류의 패딩과 테두리가 설정되어 있든 크기와 크기는 항상 전체 시청 영역을 채 웁니다.
margin은 무시됩니다.
◎ 초기 포함 블록은 뷰 영역 사각형의 경계 너비입니다. <html>
CSS3을 사용하여이를 표현하면 IE6에서 <html>을 특수한 높이 요소로 간주 할 수 있습니다 : 100%; 너비 : 100%; 박스 사이징 : 국경 박스; 그리고 이러한 속성은 불변입니다.
IE7 표준 모드 :IE7이 IE6에서 몇 가지 CSS 버그를 수정했지만 <HTML>에 대한 이해는 IE6보다 훨씬 복잡합니다. IE6은 이상하지만 변경할 수있는 속성은 거의 없으므로 여전히 간단합니다. IE7의 <HTML>은 더 많은 속성을 수용 할 수 있지만 알고리즘은 사양을 따르지 않으며 정직하기 때문에 IE6보다 파악하는 것이 훨씬 더 번거 롭습니다.
첫 번째는 자동 확장 기능입니다.
<html> 요소는 IE6의 정상 요소 높이에 대한 IE6의 이해와 유사하게 Y 방향에서 더 간단합니다. 컨텐츠 높이가 <html>의 높이를 초과하거나 <html>에 고정 된 높이가 없으면 (즉, 기본값 자동), <html>은 자체 높이를 자동으로 확장하여 내용을 포함합니다.
그러나 X 방향에서 문제는 주로 <body>의 폭에 대한 이해에 중점을 둡니다. 두 가지 상황은 다음과 같습니다.
첫 번째 사례 : <html>의 너비가 0이 아닌 값 (기본값 자동 포함) 이외의 모든 값 인 경우 <body>의 너비는 다음 규칙에 따라 결정됩니다.
1. <body>의 너비가 고정 값이라면 너비가 너무 많습니다.
2. <body>의 너비가 기본값 자동 인 경우 너비는 <html>의 내용 공간을 채 웁니다.
3. <body> 자체가 설정 위치 설정과 같은 수축 및 주변 특성이 있다면 : 절대 또는 디스플레이 : 인라인 (이상하게도 플로트는이 항목을 만족시키지 못하고 2를 만족합니다).
두 번째 사례 : <html>의 너비가 0이라면, 첫 번째와 3 점은 위와 동일하고, <body>의 너비가 기본 값 자동이라면, 너비는 내용에 적응할 것이지만, <body>는 이상한 현상 또는 패드가 아닌 패딩이 아닌 패딩이 아니라면 이상한 현상이없고, 그와 같은 지점이 아니라면, 그와 같은 지점이 없다. 첫 번째 경우 - <html>로 가득 찬 컨텐츠 공간. <html>의 너비는 현재 0이므로 <body>의 너비도 0으로 무너집니다.
둘째, <html>의 너비 및 높이 설정은 <body> (또는 <body>의 함유 블록)의 기준 백분율에 이상하게 영향을 미칩니다.
y 방향에서 <html>의 높이가 기본값 자동 인 경우 <body>의 높이는 백분율 값을 사용하면 무시됩니다. 그러나 일단 <html>의 높이 값이 0 인 경우에도 <body>의 높이가 적용됩니다. 그러나 이상한 점은이 백분율 높이에 대한 계산 참조는 <html>의 높이가 방금 설정되지만보기 영역 높이의 마진+테두리+패딩 높이의 합은 <html>이라는 것입니다.
X 방향에서 너비가 기본값 자동을 취하고 <body>의 비율이 무시되지 않지만 계산 참조는 여전히 y 방향만큼 이상한 일이므로 뷰포트 너비의 <html>의 마진+테두리+패드 폭의 합을 빼냅니다. 너비의 특정 값이 있으면 <body>에 대한 비율 너비 참조로 대체됩니다.
다시 말하지만, <body>가 위치로 설정되면 절대로 설정되면 <html>의 경계 색상이 유효하지 않습니다. 이것은 또 다른 이상한 버그입니다.
마지막으로, 초기 포함 블록은 기본적으로 정상인 뷰포트 사각형을 채택합니다. 그러나 절대적으로 배치 된 요소가있는 포함 블록을 만드는 것은 불가능합니다. 그러나 <html>에 의해 생성 된 포함 블록은 아마도 뷰포트 사각형 일 것입니다.
너무 지저분 해요. 그것은 큰 머리 일뿐 만 아니라 그것을 분류 한 후에도 큰 머리이기도합니다. 앞으로 되돌아 본 후 명확하게 볼 수 있는지 모르겠습니다. IE7 AH IE7 ... 당신을 사랑한다고 말하는 것은 쉽지 않습니다 ...
IE5 및 Quirks 모드◎ <html> 및 <bod> 모든 너비와 높이 설정은 무시되고 뷰포트로 가득합니다.
<html> 패딩 및 마진은 허용되지 않습니다.
padding과 마진을 수락하지만 음수 마진은 시각적 효과가 없지만 다른 해당 매개 변수를 계산할 때 가져옵니다.
<body>의 경계, 배경 및 기타 속성은 <html> 요소로 위로 전송됩니다.
초기 포함 블록은 <body>의 패딩 에지입니다.
유용성이 요약은 처음의 레이아웃 문제에서 파생됩니다. 레이아웃 문제는 그 용도 중 하나입니다. 나중에 게시물을 다시 작성하겠습니다. 그러나이 레이아웃은 몇 가지 기능 만 사용하므로 탭할 수있는 잠재력이 더 있어야하므로 천천히 연구하십시오.