CSS开发小技巧

2021-09-18

CSS开发中的经验总结

一、超出隐藏

一行显示，超出…

1
2
3

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

两行显示，超出…

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

二、画各种三角形

画三角形参考内容

向上三角形

  #triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

向下三角形

 #triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

向左三角形

  #triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

向右三角形

 #triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

三、九宫格画法

flex布局+css3

原理：flex布局和css3计算属性

<style>
*{
 margin: 0;
 padding: 0;
}
.blockDiv{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
}
.block{
    width: calc(calc(100% / 3) - 10px);
    margin:5px;
    height:50px;
    box-sizing: border-box;
    border:1px  solid #000;
}
</style>
<body>
   <div class="blockDiv">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>

float写法

原理：margin负边距

关键点
1. 最外层的包裹元素等于：li宽度3+li右间距2
2. 如果li是右间距，则ul的margin-right为负的li间距值。
3. 父元素ul使用overflow:hidden;形成bfc，以清除浮动带来的影响（父元素塌陷）。
4. margin-bottom和margin-top的配合，是同right的理的，消除最后一排li撑开的底边距。
5. li要浮动。外边距方向和ul设置负值的外边距方向一致。

.box{
    width: 940px;
  }
  ul{
    overflow: hidden;
    margin-right: -20px;

    margin-bottom: -20px;
    margin-top: 0;
  }
  .box li{
    float: left;
    width: 300px;
    height: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }

一、 超出隐藏

二、 画各种三角形

三、 九宫格画法

一、超出隐藏

二、画各种三角形

三、九宫格画法