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>
執行的例項