Body 요소의 배경색 스타일링이 전체 화면에 영향을 미치는 이유는 무엇입니까?

Body 요소의 배경 스타일링이 전체 화면에 영향을 미치는 이유

body 요소는 HTML 문서의 루트 요소이며, background 속성은 요소 자체를 넘어 확장되는 고유한 효과를 갖습니다. 본문에 배경색을 지정하면 전체 브라우저 뷰포트를 덮는 전체 웹페이지의 배경이 됩니다.

CSS 사양(http://www.w3.org/TR/CSS21)에 따르면 /colors.html), "루트 요소의 배경은 캔버스의 배경이 되어 캔버스 전체를 덮습니다." 이는 body 요소 자체가 전체 뷰포트를 차지하지 않더라도 body 요소의 배경색이 전체 페이지에 적용된다는 의미입니다.

예를 들어 다음 CSS 규칙을 설정한 경우:

body {
  width: 700px;
  height: 200px;
  border: 5px dotted red;
  background-color: blue;
}

배경색은 요소의 너비와 높이로 정의된 700x200픽셀 영역만 채울 것으로 예상할 수 있습니다. 그러나 파란색 배경은 대신 전체 화면을 차지하고 테두리는 700x200픽셀 크기로 제한됩니다.

이 동작은 CSS 스타일의 기본 측면입니다. body 요소는 페이지의 다른 모든 요소에 대한 가장 바깥쪽 컨테이너이며, 해당 background 속성은 전체 캔버스의 배경을 설정합니다. 테두리와 같은 다른 속성은 요소 자체에 적용되는 반면, 배경 속성은 전체 뷰포트로 확장되어 배경이 전체 화면에 스며드는 듯한 착각을 불러일으킵니다.

위 내용은 Body 요소의 배경색 스타일링이 전체 화면에 영향을 미치는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!