div中的p元素看起來不在div中的原因
阿新 • • 發佈:2018-12-13
童鞋們,有沒有在寫html時發現明明p元素就在div中,可顯示的時候卻在div外面?如下圖1:
html程式碼部分:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> *{ margin: 0; padding: 0; background-color: silver; } #div{ height: 100px; width: 200px; background-color: green; text-align: center; margin: -50px 0 0 -100px; position: absolute; left: 50%; top: 50%; } </style> </head> <body> <div id="div"> <p id="p1">我是P1</p> <p id="p2">我是P2</p> </div> </body> </html>
仔細檢視程式碼,好像編寫沒有問題;其實編寫確實沒有問題,只是我們設定了
*{
margin: 0;
padding: 0;
background-color: silver;
}
*代表所有,就是指p也是按照所有元素的背景色設定,看起來在div之外,其實是在div裡面的。不信你可以在div的CSS樣式中加上border屬性。在#div中新增樣式:
border: 2px solid blue;
顯示如圖2
不過看起來很彆扭,可以不要設定所有元素(即*)的背景色,或者設定所有元素的邊框也行。
如下:
看起來是不是清楚很多。
我還有兩個發現:
發現一:如果不要position: absolute;屬性,那麼left和top定位會失效。那麼position屬性就是為了指定本元素定位的參照。是絕對定位呢,還是相對定位呢,還是靜態呢等。但,它們都是指定本元素的定位參照。
發現二:如果想要某個元素定位處於最中間,可以使用如下CSS程式碼
{
width: 200px;
height: 100px;
position: absolute;
left: 50%;
right: 50%;
margin-left: -100px;
margin-top: -50px;
}