css中的虛擬元素，我今天記住了！o~yeah

標籤：圖片   技術分享   練習   src   分享   示範   pos   image   自己   

對於偽類和虛擬元素，我如果要區別它們，一般是使用css中的手冊來區分，平常時候也沒特意去記，需要用到時開啟手冊“哦，這個是虛擬元素，這個是偽類”，我個人覺的某些東西你把它存在網上，不一定要存在頭腦中。帶著這樣的思維去面試的我，常常碰壁，當人事問我會什麼的時候，我說我會百度，然後就沒有然後了……笑話不多說，進入今天的正題！

先上張圖片，畢竟有圖有真相嘛~

這是我在慕課網上練習切圖技能時，老師在視頻中示範的案例，我剛開始也是跟著視頻一點點切，可以說全部代碼都是Copy過來的，後來有感覺了，就自己動手，遇到不會的地方，在看看視頻，今天在切這個地方的時候，按照自己的想法，用的是margin置中，後來就碰到問題了，“怎麼為下方添加一個白色的三角形呢？”，於是我就去看視頻，視頻中用的是position定位，通過添加偽類的方式在紅色方框的下方添加了白色三角形。原視頻代碼如下：

查看第一張圖（html）紅色方框中只有兩個元素，一個div元素和p元素；在第二張圖（css）通過添加一個:after偽類元素的方式，添加一個白色三角形，來達到最終的效果。下面是我的：

第一張圖（html）紅色方框中也是兩個元素，兩個div，第二個div添加了一個triangle的class;第二張圖的css代碼沒有進行修改，只是去掉了了一個position:absolute。

那麼虛擬元素是什嗎？有什麼用是不是就體現出來了？我的理解是：通過虛擬元素可以添加一個在html代碼中“看不到的html”元素，但在瀏覽器頁面能夠看到效果。如上面兩個例子最終呈現的效果是一樣的。

當然如果你有更好的理解方式或結論請留言~謝謝

css中的虛擬元素，我今天記住了！o~yeah