CSS進(jìn)階——絕對(duì)定位元素的寬高是如何定義的

teren 發(fā)布于2019-08-29 12:43 / 3442人閱讀

摘要：絕對(duì)定位元素的布局計(jì)算公式表示內(nèi)容寬度，即標(biāo)準(zhǔn)盒子模型默認(rèn)值是默認(rèn)值是以水平方向從左至右為例說(shuō)明一下絕對(duì)定位元素的位置或大小是如何定義的。

先拋兩個(gè)小問(wèn)題：

絕對(duì)定位相對(duì)于誰(shuí)來(lái)定位？
大多數(shù)人都知道是相對(duì)于最近的position設(shè)置為relative/absolute/fixed的父元素來(lái)定位。那如果所有父元素的position都沒(méi)有設(shè)置上面三個(gè)值，那又是相對(duì)誰(shuí)來(lái)定位呢？

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

如果你還不是很有把握說(shuō)出來(lái)答案，可以先思考一下或者實(shí)踐一下，然后再閱讀后面的內(nèi)容。

絕對(duì)定位元素的特性

絕對(duì)定位元素完全脫離文檔流，不會(huì)對(duì)后面兄弟元素的布局產(chǎn)生任何影響

其位置（或者說(shuō)大小）是由top right bottom left四個(gè)屬性決定的

絕對(duì)定位元素的margin不會(huì)和其他元素的margin折疊

上面說(shuō)到絕對(duì)定位元素的大小是由top right bottom left四個(gè)屬性決定的，這四個(gè)屬性是相對(duì)于絕對(duì)定位元素的包含塊來(lái)定位的。

包含塊

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

如果這個(gè)祖先元素是行內(nèi)元素...此種情況請(qǐng)參考后續(xù)文章

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

如果絕對(duì)定位元素的所有祖先元素的position屬性都沒(méi)有設(shè)置relative、absolute或fixed，則其包含塊為初始包含塊。

初始包含塊

根元素（在HTML文檔中即元素）所在的包含塊即是初始包含塊，對(duì)于瀏覽器來(lái)說(shuō)：初始包含塊的大小即是視口的大小，但是是以畫(huà)布原點(diǎn)為錨點(diǎn)的。
瀏覽器的視口是固定在那不變的，但是一個(gè)文檔可能會(huì)很長(zhǎng)，可以上下滾動(dòng)，視口中的內(nèi)容會(huì)不斷變化。初始包含塊可以簡(jiǎn)單理解為第一個(gè)視口區(qū)域（這句話是我自己造的），上圖：

頁(yè)面滾動(dòng)之后：





  
  初始包含塊
  


  絕對(duì)定位之初始包含塊
  
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    初始包含塊不是html，也不是body，而是指視口。
    滾到底啦，沒(méi)有更多內(nèi)容啦~~~
    我是絕對(duì)定位元素。

紅色邊框代表html元素，藍(lán)色邊框代表body元素，由gif圖可以進(jìn)一步加深對(duì)初始包含塊的理解：初始包含塊并不是大多數(shù)人認(rèn)為的html或body元素，這是個(gè)誤區(qū)，要糾正！

絕對(duì)定位元素的大小 靜態(tài)位置（static position）

一個(gè)元素的靜態(tài)位置可以簡(jiǎn)單理解為這個(gè)元素在普通文檔流中的位置，就是這個(gè)元素的position為static，float為none時(shí)，元素在文檔中所處的位置。

靜態(tài)位置的left值：包含塊的左邊界到當(dāng)前定位元素的左外邊距（Left Margin）邊界的距離

靜態(tài)位置的right值：包含塊的右邊界到當(dāng)前定位元素的右外邊距（Right Margin）邊界的距離





  
  初始包含塊
  


  絕對(duì)定位元素1
  絕對(duì)定位元素2
  body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素

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

絕對(duì)定位元素的布局

計(jì)算公式（width表示內(nèi)容寬度，即標(biāo)準(zhǔn)盒子模型）：

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

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

Left	Width	Right	布局
auto	auto	auto	把margin-left和margin-right為auto的設(shè)置為0；把left設(shè)置為靜態(tài)位置的left值；寬度自適應(yīng)：margin-right邊緣最遠(yuǎn)到right為0的位置（如果margin-right為0，則取border-right邊緣，如果border-right-width也為0，則取padding-right邊緣，下同）
1	auto	auto	把margin-left和margin-right為auto的設(shè)置為0；寬度自適應(yīng)：margin-right邊緣最遠(yuǎn)到right為0的位置
auto	auto	1	把margin-left和margin-right為auto的設(shè)置為0；寬度自適應(yīng)：margin-left邊緣最遠(yuǎn)到left為0的位置
auto	1	auto	把margin-left和margin-right為auto的設(shè)置為0；把left設(shè)置為靜態(tài)位置的left值；
1	1	auto	把margin-left和margin-right為auto的設(shè)置為0；從左至右按照各屬性值布局
auto	1	1	把margin-left和margin-right為auto的設(shè)置為0；從右到左按照個(gè)屬性值布局
1	auto	1	把margin-left和margin-right為auto的設(shè)置為0；寬度自動(dòng)拉伸
1	1	1	① 如果margin-left和margin-right都為auto，此時(shí)二者相等，則按照上述方程計(jì)算出對(duì)應(yīng)的margin值；如果此時(shí)計(jì)算出來(lái)的margin值為負(fù)值，則設(shè)置margin-left為0，然后根據(jù)方程再計(jì)算出margin-right的值。 ② 如果margin-left、margin-right中有一個(gè)為auto，則按照方程計(jì)算出這個(gè)值； ③ 如果margin-left、margin-right都設(shè)置了值，且導(dǎo)致方程左右不相等，則忽略right值。

上面是以水平方向布局講述了絕對(duì)定位元素的寬度是如何定義的，高度是類(lèi)似的，就不再詳細(xì)闡述了，想進(jìn)一步了解細(xì)節(jié)的同學(xué)請(qǐng)參考 https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height

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

篇幅已經(jīng)很長(zhǎng)了，還有一部分知識(shí)點(diǎn)沒(méi)講到：

包含塊部分：

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

如果這個(gè)祖先元素是行內(nèi)元素...（包含塊是如何定義的？）

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