https://www.bilibili.com/video/BV1pE411q7FU?p=425&spm_id_from=pageDriver
    idnex.html

    1. <!-- 搜索 -->
    2. <div class="search-wrap">
    3. <!-- wrap 是容器的意思 -->
    4. <div class="search-btn"></div>
    5. <div class="search"></div>
    6. <div class="search-login"></div>
    7. </div>

    index.css

    /* 搜索 */
    .search-wrap {
      position: relative;
      overflow: hidden;
      height: 44px;
    }
    
    .search-wrap .search-btn {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 44px;
      background-color: blue;
    }
    
    .search-wrap .search {
      height: 30px;
      background-color: skyblue;
      margin: 7px 50px;
      border-radius: 15px;
    }
    
    .search-wrap .search-login {
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 44px;
      background-color: red;
    }