CSS中的一些细节

1.单行和多行文字隐藏

　　　　/* 多行省略 */
      .multiple {
        width: 400px;
        overflow: hidden;
        text-overflow: ellipsis; /* 当内联内容溢出块容器时，将溢出部分替换为（...）。*/
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-all; /* 对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行 */
      }
      /* 单行省略 */
      .single {
        width: 400px;
        white-space: nowrap; /* 会强制所有文本在同一行内显示 */
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }

2.同时给图片设置高度和宽度，会引起图片内容压缩，不美观，可设置：

img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}
/*
object-fit 还有一个配套属性 object-position，它可以控制图片在其内容框中的位置。（类似于 background-position），m默认是 object-position: 50% 50%，如果你不希望图片居中展示，可以使用它去改变图片实际展示的 position 。
像是这样，object-position: 100% 50% 指明从底部开始展示图片。这里有一个很好的 Demo 可以帮助你理解 object-position。
*/

      

 

 3.图片加载失败/丢失：

1. 利用图片加载失败，触发 <img> 元素的 onerror 事件，给加载失败的 <img> 元素新增一个样式类
2. 利用新增的样式类，配合 <img> 元素的伪元素，展示默认兜底图的同时，还能一起展示 <img> 元素的 alt 信息

 <img src="test.png" alt="图片描述" onerror="this.classList.add('error');" />

　　　　img.error {
        position: relative;
        display: inline-block;
      }

      img.error::before {
        content: "";
        /** 定位代码 **/
        position: absolute;
        width: 220px;
        height: 200px;
        background: url(./error.jfif) no-repeat;
        background-size: contain;
      }

      img.error::after {
        content: attr(alt);
        /** 定位代码 **/
        position: absolute;
        width: 100%;
        color: red;
        top: 75px;
        left: 90px;
      }

4、CSS常见布局的实现方案：

1. 居中相关的布局：水平居中布局、垂直居中布局、水平垂直居中布局；
2. N列布局：两列布局、三列布局（普通三列布局、圣杯布局、双飞翼布局、多列等分布局、多列等高布局）
3. 以后在工作中多多积累（参考文章：1.https://mp.weixin.qq.com/s/ks2cKhJ1_bOwYzjkQB_c6A，2.https://mp.weixin.qq.com/s/4wW4gPf164haoxHGNaX3RQ）

5、css3 flex居中布局，最后一行居左排版：

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

      .box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 210px;
      }
      .box:after {
        content: "";
        flex: auto;
      }
      .box .item {
        margin: 5px;
        width: 60px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: #2a7600;
        list-style: none;
      }