身體標記溢出（自動，可見？）

身體元素如何不使用overflow-y: auto但它仍然表現相同的方式？身體標記溢出（自動，可見？）

我相信它默認爲visible，但它是如何工作的？

來源

2016-04-22 user1164937

除非您使用「overfloe：hidden」，否則不需要在''中使用'overflow：auto'屬性，因爲默認情況下，溢出在主體中可見 –

除了要顯示的主體外基本上沒有其他東西，所以「可見」值是沒有意義的。因此，它可能默認爲'auto'。 – JCOC611

我不關注。默認值是'visible'。我想知道爲什麼''不像其他元素那樣需要'overflow-y：auto'，爲了使它滾動。 – user1164937

body標記是一種特殊情況，因爲它被視爲文檔的根元素，並且瀏覽器必須呈現這些標記，就好像它們設置爲auto一樣。

這在overflow documentation on W3概述早在CSS 2.1：

的UA必須應用「溢出」屬性的根元素視口上設置。當根元素是HTML「HTML」元素或XHTML「html」元素，並且該元素具有HTML「BODY」元素或XHTML「body」元素作爲子元素時，用戶代理必須改爲應用「overflow」屬性從第一個這樣的子元素到視口，如果根元素上的值是「可見的」。用於視口的'可見'值必須解釋爲'auto'。傳播值的元素必須具有「可見」的「溢出」使用的值。

來源

2016-04-22 13:44:30 Quantastical

謝謝！你碰巧知道一個資源，列出''和''標籤的所有特殊情況？我已經遇到了一對，比如''的寬度和高度對應於視口。如果有一個地方我可以去深入瞭解，而不是在我碰到它們時必須通過W3或者stackoverflow來掃描，那會很好。 – user1164937

不，我不知道。我很確定這只是html上的寬度/高度，並且除了溢出怪癖之外，它還是一個靜態位置。我認爲機構有一個默認的保證金，但這是顯而易見的。我不知道其他情況下默認值被覆蓋或處理不同，但我可能是錯的。 – Quantastical

你可以從這裏開始（https://www.w3.org/TR/WD-positioning-970131），這是我從我的回答開始的地方。還有[在此]（https://www.w3.org/TR/）提供所有W3C標準的文檔。最近在2015年11月，DOM文檔中已經添加了修訂版，因此應該可靠 –

不得不查看一下這個白皮書。 body元素是DOM中的一個特殊元素，它具有一些「僞不可變」屬性，我將在答案中找到它們。

首先，從以下W3C position documentation點：

本體元件限定具有以下性質的特殊隱式容器，包括：

及其位置，寬度，高度和裁剪區域被確定由用戶代理，並且可能不會被修改。

它爲子元素建立座標系，其起點位於文檔的邏輯頂部左上角。

瞭解了這一點，我們深入瞭解這些屬性的默認值是否爲正文。 position設置爲static，最終使其height和width屬性繼承自父元素html。

我發現這個文檔中的那個奇怪的一點點我可以在主體元素上改變height的價值，並設置它周圍的邊框：

body { 
 
    border: 1px solid black; 
 
    background-color: #1db3e7; 
 
    height: 100px; 
 
    width: 30em; 
 
    margin: 0 auto; 
 
    border-top: none; 
 
    padding: 1em; 
 
}

<body> 
 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis dolor eget risus ultrices mattis. Maecenas dolor est, malesuada ac efficitur sed, cursus quis nibh. Sed vulputate arcu molestie ipsum pharetra hendrerit vitae ac mauris. Duis quis purus quis elit varius convallis. Proin dictum nec purus eget accumsan. Suspendisse dignissim sollicitudin risus. Praesent nec quam in nisl dictum lobortis. Maecenas ultricies purus nec turpis egestas, ultrices elementum arcu pretium. Vestibulum id diam eu arcu placerat ultrices. Donec porta augue magna, eu tristique dui sodales in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. 
 

 
</body>

然而，無論我設置了什麼position和overflow，文本總是有能力超越這個邊界。這說明了position財產的不變性，但它確實讓我質疑height的聲明。

最後，html元素是什麼是真正使滾動條顯示的基礎上，html元素的body的寬度和高度依賴，其默認position值。控制頁面滾動的第一個條目將位於body元素的第一個子元素上。

來源

2016-04-22 14:00:12

身體標記溢出（自動，可見？）

回答

相關問題