鍍金池/ 問答/HTML5  HTML/ css中position: absolute為什么會改變元素的形狀?

css中position: absolute為什么會改變元素的形狀?

頁面最終效果如下：
圖片描述

在完成下圖紅框部分時：圖片描述

不加 position: absolute; 形狀如下：
圖片描述

加 position: absolute; 后，形狀如下：
圖片描述

就是 很想知道 為什么這么改會改變元素的形狀（從橢圓到空心圓...）
頁面最終效果傳送門：使用css生成太極

感激看到這里，希望有大佬可以解釋一下~

回答
編輯回答
凹凸曼

偽元素本身是行內(nèi)元素，設(shè)置寬度和高度并不會起作用。你看下面，before并沒有出現(xiàn)。
圖片描述

之后我取消position: absolute;的注釋后它出現(xiàn)了
圖片描述

元素絕對定位后，脫離文檔流，默認給它變?yōu)榱藟K級元素，這里不多說，詳情看css規(guī)范css2.1規(guī)范。

所以原因應(yīng)該很明白了，在設(shè)置position: absolute;之前它沒有寬高，你之所以能看到是因為border的原因，在設(shè)置這個屬性后有了寬高。
圖片描述

它之所以是橢圓的，是因為border之后是長方形，不知道我說的清不清楚，不清楚你在說。

2018年7月23日 10:56
編輯回答
糖果果

拜謝！ before偽類是行內(nèi)元素學到了。 還是我基礎(chǔ)不扎實呀....

2017年4月7日 09:45