1. float元素显示只能由本身的line-height,height,margin,padding来调节
绝对定位元素位置才可以用top,left调节
float元素定位与上一个元素和父元素都有关,而绝对定位元素定位时与上一个元素没有关系,只与父元素有关
2.
上图中直角矩形css实现方法:
.tixing{
height:0px;
width:40px;
border-top: 25px solid red;
border-right:20px solid transparent;
position:absolute;
top:0px;
left:0px;
}
也可以设置爆款的背景色+css设置三角形实现:
<div class="pic">
<span>
爆款
</span>
</div>
css如下:
.temaihui .bd .pic{
position: relative;
}
.temaihui .bd .pic span{
position: absolute;
top: 0;
left: 0;
width: 38px;
height: 20px;
background-color: red;
text-align: center;
font-size: 12px;
color:white;
line-height: 20px;
}
.temaihui .bd .pic span:before{
content:"";
position: absolute;
top: 0;
left: 38px;
width: 0px;
height: 0px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border-top:20px solid red;
border-right:8px solid transparent;
}