一、图片和文字一起时，通常可通过给图片或文字设置浮动，然后再设置其他样式进行排版。
二、当给元素的添加内容时，可通过伪元素 before 和 after 去添加。
1.给元素添加边界线
2.添加背景：给before 和 after 设置绝对定位 ，并设置背景色，可作为元素的背景色。
<style>
div{
height:30px;
width:50px;
position: relative;
}
div:after{
content:"";
background: rgba(0, 205, 0, 0.33);
position: absolute;
left:0; //after 的大小和元素一样大
right:0;
bottom:0;
top:0;
}
</style>
<body>
<div>fwef</div>
</body>
结果：
上面 after 的样式代码和下面的效果是一样的：position: absolute; left:0;right:0;bottom:0; top:0; 绝对定位的四个坐标都为0意思是 after 的大小和元素一样大， 除了 after 其他元素也一样。
div:after{
content:"";
height:30px;
width:50px;
background: rgba(0, 205, 0, 0.33);
position: absolute;
left:0;
top:0;
}
三、购物车中的子父元素的图层
如图1、图2所示：图1中one 的下边框线是白色的，two 的上边框线是红色的，two 的上边框线把 one 的下边框线盖住了
如果要让图1中 one 的下边框盖住 two 的上边框线，形成图2的效果，方法是：
把 one 和 two 放在同一个 div 中，并给他们同时设置定位，让它们的边框线重合，这样 one 和 two 就是并列关系，最后再把 one 的z-index设置的比 two 高，就能达到 图2 的效果。
重点：
1.one 和 two 放在同一个 div 中
2.同时给one 和 two设置定位
3.one 的z-index设置的比 two 高
确保 one 和 two 是并列的，代码如下：
<style>
.one{
width:100px;
height:36px;
border: 1px solid #e1251b;
border-bottom-color: #fff;
z-index: 1;
background: #fff;
position:absolute
最低0.47元/天 解锁文章
3879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
