常见的布局技巧

1.margin负值的运用

• 当若干个盒子水平排列并添加了边框之后，会出现两个盒子之间边框叠加大于1px的情况，这时需要给每个盒子指定一个 margin-left等于-1px的
  样式就可以让两个盒子之间的的边框为1px。

但这样后会出现中间盒子右边框被覆盖的问题，解决办法如下：

• 如果盒子没有定位，则鼠标经过添加相对定位即可

ul li:hover {
               position:relative;
               border:1px solid red;
}

-如果都有定位，则利用z-index 提高层级

ul li:hover {
              z-index:1;
              border:1px solid blue;
}

2.三角强化

image.png

<style>
        .pic {
            width: 160px;   height: 24px;   border: 1px solid red;
              line-height: 24px;   text-align: center;
        }
        .pic span {
            display: inline-block;
        }
        .pic span:first-child {
            float: left;
            height: 100%;
            width: 90px;
            background-color: red;
        }
        .pic span:first-child::after {
            content: '';
            /* display: inline-block; */
            width: 0;
            height: 0;
            border-style: solid;
            border-color: transparent white transparent transparent;
            border-width: 24px 10px 0 0;
            float: right;
        }
        .pic span:last-child {
            text-decoration: line-through;
            color: gray;
        }
    </style>


<div class="pic">
        <span>$1055</span>
        <span>$5065</span>
    </div>

3.利用旋转rotate制作下三角

image.png

文本域固定高度

resize:none