html鼹鼠出现不重叠,css,_设置position:absolute绝对定位后，<p>标签发生重叠现象... 已抓狂！！，css - phpStudy...

设置position:absolute绝对定位后，

标签发生重叠现象... 已抓狂！！

一.问题背景：

外层容器宽高未知，里面为四个相同大小的格子，格子间间距为10px，如下图所示：

请实现该全等四宫格.

二.代码如下:

HTML代码：

CSS代码：

/**{margin:0px;}*/

.child{background-color: #009999;}

.parent{position:relative;width: 300px;height: 300px;}

.child{position: absolute; width: 50%;height: 50%;box-sizing: border-box; background-clip: content-box;}

.b1{left: 0;top: 0;padding-bottom: 10px;padding-right: 10px;outline: 2px solid red}

.b2{right:0;top: 0;padding-bottom: 10px;outline: 2px solid blue}

.b3{left: 0; bottom: 0;padding-right: 10px;outline: 2px solid yellow}

.b4{right: 0;bottom: 0;outline: 2px solid green}

三.思路：

⑴将

作为最外层容器，里面用4个 p标签 来实现4个格子的效果.

⑵对p标签设置position:absolute绝对定位，然后分别操纵left,right,bottom来将他们定位到

的上下左四角.

⑶ 中间的 "十" 字型空隙效果则可以通过设置 上左格子 ， 上右格子 ， 下左格子的padding-left和padding-bottom实现.

四.问题

如果不对p设置margin:0px的话，会出现下图所示状况：

四个格子出现了重叠...

而设置了margin:0px后，正常，如下图：

为什么会造成这种情况呢？小子诚望各位先生指点.

相关阅读:

根据已知的条件重组li列表

leancloud里的groupid和系统表里的objectId的区别

javascript/mongoose 在for循环中有一个异步函数，不能得到正确的结果？

python函数嵌套定义，如何使内部函数能够修改外部函数的值？

关于下载服务器流量均衡的问题？

python numbers.integral 与 int 的区别

问一个 MySQL 语句,在已知记录的基础上,添加新记录的问题

怎么让自己的编辑器支持markdown

iOS如何限制使用SDK的版本？

关于Tornado的asyncHttpClient的问题

ThinkPHP 注册后跳转到来路页面

_.include(html, "main.html")

ES6与ES5写webpack配置文件的疑问

django winerror 10053 on ajax post

Typecho可用的播放器

PhoneGap 只能获取一条通讯录记录

[C] memset的第二个参数为何不能在执行的时候确定？？？(已解决)

求解读：一段有关IE浏览器兼容性问题的代码

Laravel Mews/Captcha 验证码报错500

javascript中Array的reduce函数的参数为什么可以使用push