css代码块，之所以起这个名字，是因为有时候在开发过程中会遇到一些写的比较好的代码，就想统一的记在这里:

1> css之flex细节
父级 display: flex, 默认会占用整行，假如子元素只有 120px, 那么如果需要让父元素和子元素占用一样的空间，可以将父级 display: inline-flex
  
// tailwindcss 样式控制
<div
        class="flex h-[calc(100vh-10rem)] flex-wrap justify-between gap-x-[4.4rem] gap-y-4 overflow-auto px-4 md:h-[calc(100vh-15rem)] md:flex-nowrap">

</div>
  
2> text-[1.875rem] 设置字体大小为 1.875rem (30px), 设置行高为 2.4375rem (39px), 在 Tailwind 中,斜杠后面的值用来指定行高
<div class="!text-[1.875rem]/[2.4375rem] font-semibold">
        
</div>
  
3> 给ul 下的 li 前设置无序列表符号
ul {
    list-style-type: none;
    padding-left: 1.25rem;
    li::before {
      content: "\2022";
      color: black;
      font-weight: bold;
      display: inline-block;
      width: 1em; // 调整圆点和文本之间的距离
      margin-left: -1em; // 这个主要是设置 圆点在1.25rem范围内的位置, 主要是解决圆点想右边挤压文本的问题
    }
  }
  
// tailwindcss写法
.affiliation-box {
  ul {
    @apply pl-5;
    li::before {
      @apply content-['\2022'] text-color-default font-semibold inline-block w-4 -ml-4
    }
  }
}
4>html的 details 标签 实现展开收起功能
官方地址: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details