css3偽元素選擇器和box-sizing盒子模型
阿新 • • 發佈：2018-11-01
要點：
1.偽元素選擇器
寫法：E::before E::after （E代表元素，如下面的div元素為例）
作用：在div中內容部分的最前面和最後面新增content屬性，文字內容可以為空。但是注意，content是行類元素，自己本身也是一個盒子，所以我們這裡可以使用相對定位。
2.CSS3的border-box盒子模型
傳統的也是預設的盒子模型是content-box模型，它保證了W3C的標準Box Model。它是外加式的，加上內邊距和外邊距，原來定義的盒子會不斷的變大，這時我們就可能回過頭將定義的盒子寬高減去內外邊距。
border-box應運而生，他是內減式的，他不會改變整體的盒子的大小。
例項程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 632px; height: 340px; position: relative; /*子決父相*/ border-radius: 10px; overflow: hidden; /*父盒子還是預設的content-box模型,加上外邊距會超出*/ } div:hover::after{ /*滑鼠經過之後，新增偽元素選擇器*/ content: ""; position: absolute; /*內容尾部新增::after偽類選擇器，也是盒子，只不過是行內元素*/ width: 100%; height: 100%; top: 0; left: 0; border: 20px solid rgba(199,91,91,0.5); box-sizing: border-box; /*轉換為CSS3盒子模型，內減式*/ } </style> </head> <body> <div> <img src="mi.jpg"> </div> </body> </html>
執行的例項
