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

時間 2019-12-19

標籤 css 進階絕對定位元素如何定義欄目 CSS 简体版

原文原文鏈接

先拋兩個小問題：css

絕對定位相對於誰來定位？
大多數人都知道是相對於最近的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的左上角？

若是你還不是頗有把握說出來答案，能夠先思考一下或者實踐一下，而後再閱讀後面的內容。html

絕對定位元素的特性

絕對定位元素徹底脫離文檔流，不會對後面兄弟元素的佈局產生任何影響
其位置（或者說大小）是由top right bottom left四個屬性決定的
絕對定位元素的margin不會和其餘元素的margin摺疊

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

包含塊

絕對定位元素的包含塊是由其最近的position屬性設置爲relative、absolute或fixed的祖先元素，按照如下方式生成的：函數
- 若是這個祖先元素是行內元素...此種狀況請參考後續文章
- 不然，包含塊是由祖先元素的padding edge組成（即相對於祖先元素padding-box進行定位）
若是絕對定位元素的全部祖先元素的position屬性都沒有設置relative、absolute或fixed，則其包含塊爲初始包含塊。佈局

初始包含塊

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

頁面滾動以後：

<!-- demo1 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>初始包含塊</title>
  <style> html { margin: 10px; padding: 10px; border: 1px solid red; } body { padding: 10px; border: 1px solid blue; } .abs { position: absolute; /*left: 0;*/ /*bottom: 0;*/ padding: 5px; background-color: #9089e4; color: #fff; } </style>
</head>
<body>
  <h3>絕對定位之初始包含塊</h3>
  <div>
    <div>初始包含塊不是html，也不是body，而是指視口。</div>
    <div>初始包含塊不是html，也不是body，而是指視口。</div>
    <div>初始包含塊不是html，也不是body，而是指視口。</div>
    <div>初始包含塊不是html，也不是body，而是指視口。</div>
    <div>初始包含塊不是html，也不是body，而是指視口。</div>
    <div>初始包含塊不是html，也不是body，而是指視口。</div>
    <div>初始包含塊不是html，也不是body，而是指視口。</div>
    <div>初始包含塊不是html，也不是body，而是指視口。</div>
    <div>初始包含塊不是html，也不是body，而是指視口。</div>
    <div>滾到底啦，沒有更多內容啦~~~</div>
    <div class="abs">我是絕對定位元素。</div>
  </div>
</body>
</html>複製代碼

函數邊框表明html元素，藍色邊框表明body元素，由gif圖能夠進一步加深對初始包含塊的理解：初始包含塊並非大多數人認爲的html或body元素，這是個誤區，要糾正！

絕對定位元素的大小

靜態位置（static position）

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

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

<!-- demo2 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>初始包含塊</title>
  <style> body { position: relative; padding: 10px; border: 1px solid blue; } .abs { position: absolute; margin-left: 5px; padding: 5px; background-color: #9089e4; border: 1px solid orange; color: #fff; } .abs2 { position: absolute; top: 50px; left: 10px; margin-left: 5px; padding: 5px; background-color: #9089e4; color: #fff; border: 1px solid orange; } </style>
</head>
<body>
  <div class="abs">絕對定位元素1</div>
  <div class="abs2">絕對定位元素2</div>
  <div>body的其餘子元素body的其餘子元素body的其餘子元素body的其餘子元素body的其餘子元素body的其餘子元素body的其餘子元素body的其餘子元素body的其餘子元素body的其餘子元素</div>
</body>
</html>複製代碼

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

絕對定位元素的佈局

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

'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默認值是0htm

以水平方向（從左至右：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值。