「當你迷惘的時候，就回到原點想一想」-中華一番 蘭飛鴻
網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字，成為比較有系統性的視野。
讓一開始接觸網頁前端的新手們，有一個比較友善的系統來架構你的學習，至於技術本身的深入探討，就留給其它的高手們吧。
這個問題，來自於幾種現象(好像在講鬼故事)
<body> 設定 background 時<body> 設定 position: relative 再將內容的元素設定 position: absolute ，內容的元素再設定 bottom: 0 下邊緣，就會找到 <body> 的下邊緣<body> 設定 border 或 outline 可以框出 <body> 的四邊這幾種現象，讓 <body> 的大小眾說紛紜。
從 www.w3.org 的 HTML5, 4.3.1. The body element [1]文件中，看不出 body 有針對這部份，有什麼特別解釋的地方。
又找到 dev.w3.org 的 HTML5 裡面特別定義了實作瀏覽器時要定義的 Interface 滿有趣的，不過，還是沒有什麼特別針對渲染和範圍做定義。
interface HTMLBodyElement : HTMLElement {
attribute Function onbeforeunload;
attribute Function onerror;
attribute Function onhashchange;
attribute Function onload;
attribute Function onmessage;
attribute Function onoffline;
attribute Function ononline;
attribute Function onpopstate;
attribute Function onresize;
attribute Function onstorage;
attribute Function onunload;
};
看 HTML 的 <body> 的定義，沒有什麼線索。
試看看從 CSS 的 background 來看好了。
術語
canvas: 渲染出來的格式化結構創造的空間。[3]
(避免與<canvas>混淆，下面的內容以「畫布」來稱呼)
畫布是無限維度空間。渲染出有限維度結果。
所以，文件畫布渲染之後是2維無限大的表面。在 CSS2 規範中，並無元素對應到畫布，所以 CSS 套用到 root element 的 background。
那我們就來看看 CSS2 的規範。
可以指定一個顏色或圖片在元素的背景(渲染表面)。用 box model 解釋的話，就是 padding 和 border 的 background。margin 的 background 永遠透明。
背景屬性不會繼承，但是由於 background-color 預設值是 transparent ，所以元素總是會透出容器的背景設定。
術語
root element: 根元素，在 HTML 文件中指的是<html>
<body> 元素背景，而不是 <html> 元素。background-color: transparent 和 background-image: none 來計算背景。<body> 繪製背景時，要將其背景繪製到畫布上。用 background 來找 <body> 是不對的，background 本身對 <body> 的行為是一種特例。而不管是用 position 還是用 border 圈出來，都是正確的做法。
[1]: 4.3.1. The body element - w3.org
[2]: 3.11. Backgrounds of Special Elements - w3.org
[3]: 2.3.1 The canvas - w3.org
[4]: 14.2 The background - w3.org
iThome鐵人賽
看影片追技術