CSS常见布局技巧

常见布局技巧

1 margin 负值的运用

1.1 去除边框叠加加粗

 边框盒子在合并时中间边框会叠加加粗。如下图所示：

 border: 2px solid rebeccapurple;

 左移的值跟边框宽度时一致的。
 margin-left: -2px;

1.2 鼠标移动到盒子盒子变色

 中间盒子右框线不能显示

  解决方案

1. 若盒子无定位，添加相对定位（占有位置）
2. 若有定位，使用 z-index 提高层级
   

2 文字围绕浮动元素

  浮动的效果是文字环绕。

3 行内块的巧妙运用

 行内块元素给父盒子添加text-align：center 。所有盒子内的元素都可以水平居中。

4 CSS三角强化

 要生成如图所示的盒子需要一个蓝色的三角，那么它是怎么实现的呢？

 普通三角盒子如图所示，每个方向定义不同的颜色。

4.1 生成三角形

生成三角形步骤：

1. 将下边框宽度设置为0
2. 将上边边框宽度加大
3. 将左边边框设置为0
4. 将上边框颜色设置为透明色

.box2{
          height: 0;
          width: 0;
          margin: 100px 50px;
          border-top: 100px solid pink;
          border-right: 100px solid burlywood;
          border-bottom: 100px solid skyblue;
          border-left: 100px solid greenyellow;
 }

//合并改进后的代码   上下代码等价

.box2{
          height: 0;
           width: 0;
           margin: 100px 50px;
           /*上 右 下 左  顺时针方向*/
           border-color: transparent burlywood transparent transparent;
           border-style: solid;
           border-width: 150px 100px 0 0;
 }

4.2 案列

下列图片的代码实现：

CSS样式

.price{
     width: 160px;
     height: 24px;
     border: 1px solid red;
     margin: 100px 100px;
     line-height: 24px;
 }
 .miaosha{
     position: relative;
     float: left;
     width: 90px;
     height: 100%;
     background-color: red;
     color: #f3f5f7;
     font-weight: 700;
     text-align: center;
     margin-right: 8px;
 }
 .miaosha i{
     position: absolute;
     right: 0;
     top: 0;
     height: 0;
     width: 0;
     border-color: transparent #f3f5f7 transparent transparent;
     border-style: solid;
     border-width: 24px 12px 0 0;
 }
 .del{
     font-size: 15px;
     color: gray;
     text-decoration: line-through;
 }



盒子框架
<div class="price">
   <span class="miaosha">$1650
        <i></i>
    </span>
    <span class="del">$5650</span>
</div>