一、图片和文字一起时,通常可通过给图片或文字设置浮动,然后再设置其他样式进行排版。
二、当给元素的添加内容时,可通过伪元素 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