資訊專欄INFORMATION COLUMN
摘要：文檔流簡單說就是元素按照其在中的位置順序決定排布的過程。只要不是和絕對定位方式布局的，都在文檔流里面。位置設置為的元素，它始終會處于文檔流給予的位置。但是，當注釋代碼取消注釋生效后，就會相對文檔流中應當呈現的位置進行移動。
1.文檔流
簡單說就是元素按照其在 HTML 中的位置順序決定排布的過程。HTML的布局機制就是用文檔流模型的，即塊元素（block）獨占一行，內聯元素（inline）不獨占一行。
一般使用margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“距離”。只要不是float和絕對定位方式布局的，都在文檔流里面。
static，默認值。位置設置為static的元素，它始終會處于文檔流給予的位置。
inherit，規定應該從父元素繼承 position屬性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 “inherit”。
fixed，生成絕對定位的元素。默認情況下，可定位于相對于瀏覽器窗口的指定坐標。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。不論窗口滾動與否，元素都會留在那個位置。但當祖先元素具有transform屬性且不為none時，就會相對于祖先元素指定坐標，而不是瀏覽器窗口。
absolute，生成絕對定位的元素，相對于距該元素最近的已定位的祖先元素進行定位。
此元素的位置可通過 “left”、”top”、”right” 以及 “bottom” 屬性來規定。
relative，生成相對定位的元素，相對于該元素在文檔中的初始位置進行定位。
通過 “left”、”top”、”right” 以及 “bottom” 屬性來設置此元素相對于自身位置的偏移。
relative生成相對定位的元素，相對于其正常位置進行定位。
相對定位完成的過程如下：
按默認方式（static）生成一個元素(并且元素像層一樣浮動了起來)。相對于以前的位置移動，移動的方向和幅度由 left、right、top、bottom 屬性確定，偏移前的位置保留不動。
其中box2中的注釋代碼未生效前，是按照文檔流進行排序呈現。
但是，當注釋代碼取消注釋生效后，就會相對文檔流中應當呈現的位置進行移動。
所以，相對定位的參照物是它本身。
絕對定位與相對定位的一大不同之處就是，當我們把一個元素設置成絕對定位，那么這個元素將會脫離文檔流，其他元素就會認為這個元素不存在于文檔流中而填充它原來的位置。絕對定位元素根據它的參照物移動自己的位置，而參照物則需要根據它祖先元素的定位設置來確定。
所謂根據它祖先元素的定位設置來確定簡單理解為：相對于該元素最近的已定位的祖先元素，如果沒有一個祖先元素設置定位，那么參照物是body層。
在祖先元素沒定位的情況下，使用absolute。在這種情況下，參考物就是body。
祖先元素有定位，祖先元素只要設置了值不為position:static之外的值，都視為有定位，并且最近的祖先元素會被設置為絕對定位元素的參照物。在這種情況下，參考物就是最近的祖先元素。
在沒設置left/right、top/bottom的情況下，absolute元素的位置就是該元素在文檔流里的位置
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113055.html
摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。 這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...
摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。 這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...
摘要：注意當該固定元素的祖先元素的屬性非時，容器由瀏覽器窗口改為該祖先元素粘性定位，相當于相對定位和固定定位的混合。粘性定位根據一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...
摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復習 + CSS基礎 CSS框模型 寬度和高度 內邊距 外邊距 CSS定位 浮動 CSS框模型 內容引用：CSS 框模型概述 CSS 框模...
摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復習 + CSS基礎 CSS框模型 寬度和高度 內邊距 外邊距 CSS定位 浮動 CSS框模型 內容引用：CSS 框模型概述 CSS 框模...
閱讀 1370·2021-11-25 09:43
閱讀 3582·2021-11-10 11:48
閱讀 5091·2021-09-23 11:21
閱讀 1597·2019-08-30 15:55
閱讀 3508·2019-08-30 13:53
閱讀 1234·2019-08-30 10:51
閱讀 868·2019-08-29 14:20
閱讀 1971·2019-08-29 13:11
