css中的技巧

css 技巧

怎么让父元素 css 为 overflow：hidden 的后代元素超出的部分可以显示？

• 后代元素固定定位即可。

怎么让图片视频适应可防止内容而不变形

• img/video 的宽、高都设置为 100%；然后设置 object-fit:contain;

：focus

• 任何元素都可以使用这个伪类
  • 例如 div 元素，鼠标点击之后这个伪类就会生效，点击其他地方是就会失效。

对于浮动的理解

• CSS 实现超过固定高度后出现展开折叠按钮——利用浮动控制按钮位置
  • 截图 (opens new window)
  • https://mp.weixin.qq.com/s/PLVvNo-0OyMHVMUzbKts3g
    • 非正常布局的区域布局方式不在浮动规则内：比如 b 元素的 margin-left 为负值的区域不会限制 c 元素在垂直方向的位置（c 的垂直方向的位置而是决定于 a 元素）。

fixed 定位失效

• 以下情况会失效：
  • 父辈元素使用了 transform 属性
  • 父辈元素使用了 backdrop-filter 属性

根据容器宽度自适应字体大小

• 参考：https://cloud.tencent.com/developer/ask/sof/138493
  • 其中 svg 方法最简单：参考：https://code.juejin.cn/pen/7293776041087074304
  • 使用 vw 这个单位也简单

css 容器查询

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_containment/Container_queries

利用 css 解决滚动穿透问题

• // 参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior
  overscroll-behavior: contain;
  

图片加载失败时，结合 css 让图片不显示裂图

• <div>
    <img src="secondary-backup.jpg" alt="描述" onerror="this.classList.add('error')" />
    <img src="占位.jpg" />
  </div>
  

• div {
    display: inline-flex;
  }
  img + img {
    display: none;
  }
  .error {
    display: none;
  }
  .error + img {
    display: block;
  }
  

别人搜集了很多 css 技巧

• https://github.com/chokcoco/iCSS，配合对应的网站icss-dun.vercel.app (opens new window)可以搜索想要的效果。

现当文本内容过长时，中间显示省略号...,两端正常展示：

• 参考链接：https://codepen.io/xboxyan/pen/VwpPNbm?fileGuid=YcHxPHhHvDtpqvDw

  • 其中涉及到文案排版的顺序问题

  • 代码如下：

    • <ul class="con">
          <li class="wrap">
              <span class="txt">CSS 实现优惠券的技巧 - 2021-03-26</span>
              <span class="title" title="CSS 实现优惠券的技巧 - 2021-03-26">CSS 实现优惠券的技巧 - 2021-03-26</span>
          </li>
          <li class="wrap">
              <span class="txt">CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26</span>
              <span class="title" title="CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26">CSS
                  测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26</span>
          </li>
          <li class="wrap">
              <span class="txt">CSS 拖拽?</span>
              <span class="title" title="CSS 拖拽?">CSS 拖拽?</span>
          </li>
          <li class="wrap">
              <span class="txt">CSS 文本超出自动显示title</span>
              <span class="title" title="CSS 文本超出自动显示title">CSS 文本超出自动显示title</span>
          </li>
      </ul>
      
      // css如下
      .con {
          font-size: 14px;
          color: #666;
          width: 600px;
          margin: 50px auto;
          border-radius: 8px;
          padding: 15px;
          overflow: hidden;
          resize: horizontal;
          box-shadow: 20px 20px 60px #bebebe,
              -20px -20px 60px #ffffff;
      }
      
      .wrap {
          position: relative;
          line-height: 2;
          height: 2em;
          padding: 0 10px;
          overflow: hidden;
          background: #fff;
          margin: 5px 0;
      }
      
      .wrap:nth-child(odd) {
          background: #f5f5f5;
      }
      
      .title {
          display: block;
          position: relative;
          background: inherit;
          text-align: justify;
          height: 2em;
          overflow: hidden;
          top: -4em;
      }
      
      .txt {
          display: block;
          max-height: 4em;
      }
      .title::before{
          content: attr(title); // 这里通过html和css实现了动态内容，attr也可以使用自定义属性（data-xxx）
          width: 50%;
          float: right;  // 使用float的作用是让内容完整的被截断，也就是通过float的特征实现左侧字符换行进而整个字符被截断。
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          direction: rtl;  // 这是中间显示省略号的关键。这里会有一个bug，那就是如果文案的开头是一些特殊字符或者是数字，那么他们会自动显示在最后的位置，这样一来内容错误了。处理方式是在确保content属性值内容以中文或英文字幕开头即可。
      }