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;
}