Css技巧

1. 伪类元素::after

    .primary::after {
      /*
      content: url(../assets/logo.png);
      margin-left: 100px;
      width: 20px;
      height: 20px;
      // 图片宽高无效，采取下面background的方式可以实现
      */
      content: "";
      display: inline-block;
      background: url('../assets/logo.png');
      background-size: cover;
      width: 20px;
      height: 20px;
    }

说明：content可以设置url图片，但是图片大小是无法改变的。解决方案:改成背景设置图片样式

2. flex-grow、flex-shrink

 ...
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <script>
    let items = document.querySelectorAll('.item')
    console.log(document.querySelector('.one').clientWidth);
    for (const iterator of items) {
      // iterator.innerHTML = iterator.offsetWidth
      console.log(iterator.offsetWidth); // 1520 ,可见用js只能获取行内样式的宽高
    }
  </script>
  <style>
    /* grow(扩大):用来瓜分剩余空间 */
    .box {
      width: 400px;
      height: 50px;
      display: flex;
      background-color: #eee;
    }

    .item {
      height: 50px;
    }

    .item:nth-child(1) {
      width: 50px;
      background: red;
    }

    .item:nth-child(2) {
      width: 70px;
      flex-basis: auto;
      flex-grow: 2;
      background: grey;
    }

    .item:nth-child(3) {
      width: 50px;
      flex-basis: 100px;
      /* flex-basis主轴大小，宽度或者高度 */
      flex-grow: 1;
      background: yellow;
    }
  ...

说明：容器的宽度为400px, 子项1的占用的基础空间(flex-basis)为50px，子项2占用的基础空间是70px，子项3占用基础空间是100px，剩余空间为 400-50-70-100 = 180px。 其中子项1的flex-grow: 0(未设置默认为0)， 子项2flex-grow: 2，子项3flex-grow: 1，剩余空间分成3份，子项2占2份(120px)，子项3占1份(60px)。所以 子项1真实的占用空间为: 50+0 = 50px， 子项2真实的占用空间为: 70+120 = 190px， 子项3真实的占用空间为: 100+60 = 160px。

 <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <style>
    /* shrink(收缩):用来吸收超出的空间 */
    .box {
      width: 400px;
      height: 50px;
      display: flex;
      background-color: #eee;
    }

    .item {
      height: 50px;
    }

    .item:nth-child(1) {
      width: 250px;
      background: red;
    }

    .item:nth-child(2) {
      width: 150px;
      flex-basis: auto;
      flex-shrink: 2;
      background: grey;
    }

    .item:nth-child(3) {
      width: 50px;
      flex-basis: 100px;
      flex-shrink: 2;
      background: yellow;
    }

  </style>

说明：容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px，子项2占用的基准空间是150px，子项3占用基准空间是100px，总基准空间为 250+150+100=500px。容器放不下，多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1)， 子项2 flex-shrink: 2，子项3 flex-shrink: 2。子项1需要吸收的的空间为 (250*1)/(250*1+150*2+100*2) * 100 = 33.33px，子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为(150*2)/(250*1+150*2+100*2) * 100=40px，子项2真实空间为 150-40 = 110px。子项3吸收的空间为(100*2)/(250*1+150*2+100*2) * 100 = 26.67px，真实的空间为100-26.67=73.33px。

简单的应用场景，始终将页脚放在底部

  <div class="container">
    <header>...</header>
    <main></main>
    <footer>...</footer>
  </div>
  <style>
    body {
      padding: 0;
      margin: 0;
    }

    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    header {
      background-color: aqua;
    }

    footer {
      background-color: brown;
    }

    header,
    footer {
      flex-shrink: 0;
      flex-basis: 100px;
    }

    main {
      /* flex-grow: 1;
      flex-shrink:1;
      flex-basis:auto; */
      /* 简写 */
      flex-grow: 1;

      /* flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0; */
      /* 简写 */
      /* flex: 1; */
      background-color: black;
    }

  </style>

3. :hover简写

...
<div class="header">
  <a href="">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</div>
<div class="nav">
  <a href="">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a>
</div>
<div class="footer">
  <a href="">cccccccccccccccccccccccccccc</a>
</div>
...
...
  :is(.header, .nav, .footer) a:hover {
    text-decoration: none;
  }
  /*
  // 等价于：
  .header a:hover,
  .nav a:hover,
  .footer a:hover {
    text-decoration: none;
  } 
  */
...