div中的p元素看起来不在div中的原因

怼烎@ 2022-05-09 09:30 408阅读 0赞

童鞋们，有没有在写html时发现明明p元素就在div中，可显示的时候却在div外面？如下图1：

![div\_p1.jpg][div_p1.jpg] 图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

![div\_p2.jpg][div_p2.jpg] 图2

不过看起来很别扭，可以不要设置所有元素(即\*)的背景色，或者设置所有元素的边框也行。

如下：

![div\_p3.png][div_p3.png]

看起来是不是清楚很多。

我还有两个发现：

发现一：如果不要position: absolute;属性，那么left和top定位会失效。那么position属性就是为了指定本元素定位的参照。是绝对定位呢，还是相对定位呢，还是静态呢等。但，它们都是指定本元素的定位参照。

发现二：如果想要某个元素定位处于最中间，可以使用如下CSS代码

{
        width: 200px;
        height: 100px;
        position: absolute;
        left: 50%;
        right: 50%;
        margin-left: -100px;
        margin-top: -50px;
    }

参考：[使一个div在body中水平垂直居中的方法][div_body]

[div里面的<p>标记为什么会跑到div的外面][div_p_div]

[div_p1.jpg]: /images/20220509/b91262214d9743af94b52fc9f4c1db3e.png
[div_p2.jpg]: /images/20220509/153d298172934b618b317f0a37278e9f.png
[div_p3.png]: /images/20220509/ae8fee56d83947d096d2ae25f730a249.png
[div_body]: https://blog.csdn.net/tarajk05/article/details/41145299
[div_p_div]: https://bbs.csdn.net/topics/380081137