CSS進階——絕對定位元素的寬高是如何定義的

teren 發布于2019-08-29 12:43 / 3440人閱讀

摘要：絕對定位元素的布局計算公式表示內容寬度，即標準盒子模型默認值是默認值是以水平方向從左至右為例說明一下絕對定位元素的位置或大小是如何定義的。

先拋兩個小問題：

絕對定位相對于誰來定位？
大多數人都知道是相對于最近的position設置為relative/absolute/fixed的父元素來定位。那如果所有父元素的position都沒有設置上面三個值，那又是相對誰來定位呢？

包含塊是什么？初始包含塊又是什么？
元素A包含元素B，A設置position:relative，B設置position:absolute;left:0;top:0，這個left:0;top:0是相對于A元素的content-box、padding-box還是margin-box的左上角？

如果你還不是很有把握說出來答案，可以先思考一下或者實踐一下，然后再閱讀后面的內容。

絕對定位元素的特性

絕對定位元素完全脫離文檔流，不會對后面兄弟元素的布局產生任何影響

其位置（或者說大小）是由top right bottom left四個屬性決定的

絕對定位元素的margin不會和其他元素的margin折疊

上面說到絕對定位元素的大小是由top right bottom left四個屬性決定的，這四個屬性是相對于絕對定位元素的包含塊來定位的。

包含塊

絕對定位元素的包含塊是由其最近的position屬性設置為relative、absolute或fixed的祖先元素，按照以下方式生成的：

如果這個祖先元素是行內元素...此種情況請參考后續文章

否則，包含塊是由祖先元素的padding edge組成（即相對于祖先元素padding-box進行定位）

如果絕對定位元素的所有祖先元素的position屬性都沒有設置relative、absolute或fixed，則其包含塊為初始包含塊。

初始包含塊

根元素（在HTML文檔中即元素）所在的包含塊即是初始包含塊，對于瀏覽器來說：初始包含塊的大小即是視口的大小，但是是以畫布原點為錨點的。
瀏覽器的視口是固定在那不變的，但是一個文檔可能會很長，可以上下滾動，視口中的內容會不斷變化。初始包含塊可以簡單理解為第一個視口區域（這句話是我自己造的），上圖：

頁面滾動之后：





  
  初始包含塊
  


  絕對定位之初始包含塊
  
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    滾到底啦，沒有更多內容啦~~~
    我是絕對定位元素。

紅色邊框代表html元素，藍色邊框代表body元素，由gif圖可以進一步加深對初始包含塊的理解：初始包含塊并不是大多數人認為的html或body元素，這是個誤區，要糾正！

絕對定位元素的大小 靜態位置（static position）

一個元素的靜態位置可以簡單理解為這個元素在普通文檔流中的位置，就是這個元素的position為static，float為none時，元素在文檔中所處的位置。

靜態位置的left值：包含塊的左邊界到當前定位元素的左外邊距（Left Margin）邊界的距離

靜態位置的right值：包含塊的右邊界到當前定位元素的右外邊距（Right Margin）邊界的距離





  
  初始包含塊
  


  絕對定位元素1
  絕對定位元素2
  body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素

從上面代碼可以看出，.abs和.abs2兩個元素的靜態位置的left值都為10px（即body的padding-left值），我們不設置.abs的left值，即默認auto，而.abs2的left設置為10px，會看到兩個元素距離包含塊左邊的距離是一樣的。

絕對定位元素的布局

計算公式（width表示內容寬度，即標準盒子模型）：

"left" + "margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" + "right" = width of containing block
left、width、right默認值是auto
margin-left、margin-right默認值是0

以水平方向（從左至右：ltr）為例說明一下絕對定位元素的位置（或大小）是如何定義的。起決定因素的有left right width，每個屬性都可以設置或者不設置值，默認為auto，設置了值的在表格中用1表示，總共有2 * 2 * 2 = 8 種情況：

Left	Width	Right	布局
auto	auto	auto	把margin-left和margin-right為auto的設置為0；把left設置為靜態位置的left值；寬度自適應：margin-right邊緣最遠到right為0的位置（如果margin-right為0，則取border-right邊緣，如果border-right-width也為0，則取padding-right邊緣，下同）
1	auto	auto	把margin-left和margin-right為auto的設置為0；寬度自適應：margin-right邊緣最遠到right為0的位置
auto	auto	1	把margin-left和margin-right為auto的設置為0；寬度自適應：margin-left邊緣最遠到left為0的位置
auto	1	auto	把margin-left和margin-right為auto的設置為0；把left設置為靜態位置的left值；
1	1	auto	把margin-left和margin-right為auto的設置為0；從左至右按照各屬性值布局
auto	1	1	把margin-left和margin-right為auto的設置為0；從右到左按照個屬性值布局
1	auto	1	把margin-left和margin-right為auto的設置為0；寬度自動拉伸
1	1	1	① 如果margin-left和margin-right都為auto，此時二者相等，則按照上述方程計算出對應的margin值；如果此時計算出來的margin值為負值，則設置margin-left為0，然后根據方程再計算出margin-right的值。 ② 如果margin-left、margin-right中有一個為auto，則按照方程計算出這個值； ③ 如果margin-left、margin-right都設置了值，且導致方程左右不相等，則忽略right值。

上面是以水平方向布局講述了絕對定位元素的寬度是如何定義的，高度是類似的，就不再詳細闡述了，想進一步了解細節的同學請參考 https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height

本文主要參考：
https://www.w3.org/TR/CSS22/visudet.html

篇幅已經很長了，還有一部分知識點沒講到：

包含塊部分：

絕對定位元素的包含塊是由其最近的position屬性設置為relative、absolute或fixed的祖先元素，按照以下方式生成的：

如果這個祖先元素是行內元素...（包含塊是如何定義的？）

布局部分：
上述所講的絕對定位元素的布局是針對非可替換元素，如果是可替換元素，布局又是怎樣的？這些內容將在后續文章中做進一步闡述。

云服務器 GPU云服務器 asp獲取屏幕的寬高中的絕對定位相對定位-絕對定位絕對定位

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112090.html

position 的屬性值

摘要：注意當該固定元素的祖先元素的屬性非時，容器由瀏覽器窗口改為該祖先元素粘性定位，相當于相對定位和固定定位的混合。粘性定位根據一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個包括：position：static | relative | absolute | fixed | sticky | initial | inherit...

番茄西紅柿 2019-04-23 13:30 評論0 收藏0
CSS 單位

摘要：概覽中的長度單位有很多，覺得有必要整理備忘。單位大體分為兩大類絕對單位，不會因為其他元素的尺寸變化而變化。如果想使用顯示窗口的寬度或高度而不是父元素的寬度將會怎么樣這正是和單位所提供的。和現代瀏覽器都支持這兩個單位。概覽 CSS中的長度單位有很多，覺得有必要整理備忘。網上介紹的也比較多和全，詳見參考資料。單位大體分為兩大類：絕對單位，不會因為其他元素的尺寸變化而變化。相對...

ARGUS 2019-08-28 18:23 評論0 收藏0
css垂直水平居中解決方案

摘要：寫在前面垂直水平居中即垂直與水平方向上都要居中，也就是視覺效果中的，處于視圖的正中間。我們把需要垂直水平居中的設置為。使用使塊級元素垂直居中是很簡單的。寫在前面：垂直水平居中即垂直與水平方向上都要居中，也就是視覺效果中的，處于視圖的正中間。下面，我們來講講幾個css中常用的垂直水平居中的解決方案方法1: 1、把外層的div的顯示方式設置為table，即display: table...

taoszu 2019-08-29 14:18 評論0 收藏0
#思考# 移動端絕對定位在不同設備適配問題

摘要：交互中的復雜問題拖動物體擺放位置物體的寬高，起點位置都已計算拖動物體過程中移動過程中移動距離需要縮放元素目標位置是否為預設的位置判斷預設位置已進行計算需求：需要展示的數據已在數據庫設置好，并且是以大屏幕為準，現在需要在不同設備上顯示出來實現：所有物體都采用絕對定位，根據實際屏幕與數據庫設置的屏幕尺寸比例，對數據進行縮放背景居中鋪滿 background-position: ...

Kahn 2019-08-23 18:17 評論0 收藏0