Question

css如何消除父元素与子元素相交的边框

<div class="a">a
<div class="b">b</div>
</div>
如下效果

Answer 1

消除边框的有几种，如下：

此为消除标签元素自带的一些边距:

margin:0; padding:0;

此为消除标签元素自带的一些边线:

border:none;
border-left:none;//消除左边线
border-right:none;//消除右边线
border-top:none;//消除上边线
border-bottom:none;//消除下边线

像图片中的样式要利用层级关系，让大框在小框下面被遮挡，再消除小框架的右边线：

.a{  width:100px; height:100px; background-color:#eee; position:relative; border:1px solid #ff0707; border-right:none; margin-top:300px;  }
.b{  width:300px; height:300px; z-index:-1; background-color:#eee; position:absolute; left:99px; top:-100px; border:1px solid #ff0707;  }

Answer 2

我一般给子元素写一个{margin-left:-1px; margin-top:-1px; }
像素大小根据边框大小调整，八九年了，我一直这么干的

Answer 3

.a{ position:relative; width:100px; height:100px; border:1px solid red; border-right:none; margin-top:300px; background-color:#eee; }
.b{ position:absolute; left:99px; top:-100px; width:300px; height:300px; border:1px solid red; background-color:#eee; z-index:-1;}

Answer 4

使用padding和margin属性

Answer 5

使用float 悬浮