CSS體寬100％
[英]CSS body width 100 percent
問題描述
我是CSS的新手，我在理解下面的代碼如何工作時遇到了問題：
body {
width: 100%;
height: 100%;
}
我明白，當你指定width: 100% 。
元素的總寬度將是其包含塊的100％。 包含塊的主體是html，但我的問題是html的大小是多少？
html的大小取決於用戶監視器的分辨率？
如果是這種情況，那么當我創建一個網站並且用戶百分比時，所有元素大小將根據顯示器分辨率而變化？
我不確定我是否完全理解這個概念，所以任何幫助都將不勝感激。 謝謝！
2 個解決方案
解決方案1
2 已采納 2014-05-09 08:40:21
HTML元素實際上是viewport （瀏覽器窗口可見區域）， body元素是頁面的實際內容。
html和body元素是父/子關系中不同的塊級實體。
html元素的高度和寬度由瀏覽器窗口控制。
它是html元素（默認情況下）溢出：auto，導致滾動條在需要時出現。
body元素（默認情況下）position：static，這意味着它的定位子元素相對於html元素的坐標系定位。
在幾乎所有現代瀏覽器中，頁面邊緣的內置偏移量通過body元素上的邊距應用，而不是在html元素上填充。
HTML
HTML根元素（
<html>）表示HTML或XHTML文檔的根。 所有其他元素必須是此元素的后代。
身體
HTML Body（
<body>）元素表示HTML文檔的主要內容。 文檔中只有一個元素。
解決方案2
1 2014-05-09 09:04:17
基於百分比的值始終基於其外部的對象（它的父級）。
回答你的問題：在HTML中你無法添加任何內容，HTML是head和body的父級。 body是實際內容的持有者。
為了解釋CSS中的寬度百分比，我給出了這個例子：
<html>
<body>
<div id="grandparent" style="width:90%;">
<div id="parent" style="width:80%;">
<div id="child" style="width:70%;">
</div>
</div>
</div>
</body>
<html>
讓我們假裝我們正在尋找500像素（px）寬的屏幕。
body是祖父母的父母，因為grandparent是在body ; 它與文檔保持相同的寬度，因為它是標准的CSS值。 （就像我在這個例子中提到的那樣是500px）。
-
grandparent有90％的body寬度（450px） -
parent有80％的grandparent寬度（360px） -
child有70％的parent寬度（252像素）
CSS 主體寬度未填充 100%
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.