老师为什么这一块设置浮动效果是这样的

老师，我想问一下这里的width和height设置的是content的大小吗？

9分43开始突然有一段没声音啊

老师，像播放的三角按钮，使用播放图标可以吗？

使用css画三角和使用图标，哪种方式更好呢？

刚才通过实操作业。

发现把大容器宽度和高度都设置为    实参。

里面的子容器宽度和高度都设置为%百分比形式的    形式参数。

结论：

貌似发现了新世界，感觉后期如果维护的话。只需要修改外面大容器的实际参数值。就好了

毕竟内部的一些参数因为全部都是百分比形式输入的。所以内部布局都会跟着外部布局去变化。

老师，这个img 直接margin:0 auto不就居中了嘛，为什么还要transform跟absolute定位

盒子的背景颜色老师有时候用background，有时候用background-color，这两个有什么区别吗

为啥老师输入<a就能自动生成<a href=""</a>

/* 导航样式开始 */
.nav {
    width: 100%;
    height: 66px;
    background: #88c5e1;
    border-bottom: 5px solid #54abd4;
}

.wrap {
    width: 87%;
    margin: 0 auto;
}

.logo,
.nav-bar,
.search {
    float: left;
    height: 66px;
}


.search .text-input {
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    box-sizing: border-box;
    border-radius: 2px;
    outline: none;
    margin-top: 13px;
    padding-left: 10px;
    transition: all 0.2s;
}

.search button {
    width: 40px;
    height: 34px;
    background-color: #f5f5f5;
    color: #54abd4;
    font-weight: 900;
    position: absolute;
    top: 16px;
    right: 2px;
}

.text-input:hover {
    background-color: #f5f5f5;
    border-color: #54abd4;
}


.nav-bar>ul {
    float: right;
}

.nav-bar ul li {
    float: left;
}

.nav-bar ul li a {
    color: #fff;
    padding: 10px;
    display: block;
    margin-left: 8px;
    margin-top: 12.5px;
}

.nav-bar-active {
    border-bottom: 2px solid #fff;
}

.nav-bar a:hover {
    border-bottom: 2px solid #fff;
}

/* 导航样式结束 */

/* **************  响应式设计  *********** */
/* pc端 */
@media screen and(min-width:992px) {
    .logo {
        width: 25%;
        background: url("../images/Brand.png") no-repeat left;
        background-size: 183px;
    }

    .search {
        width: 40%;
        position: relative;
    }

    .nav-bar {
        width: 35%;
    }

    .btn {
        display: none;
    }
}

/* pad端 */
@media screen and(min-width:768px) and (max-width:992px) {
    .logo {
        width: 18%;
        background: url("../images/Brand-M.png") no-repeat left;
        background-size: 86px;
    }

    .search {
        width: 42%;
        position: relative;
    }

    .nav-bar {
        width: 40%;
    }

    .btn {
        display: none;
    }
}

/* M端 */
@media screen and(max-width:768px) {
    .logo {
        width: 16%;
        background: url("../images/Brand-S.png") no-repeat left;
        background-size: 38px;
    }

    .search {
        width: 68%;
        position: relative;
    }

    .nav-bar {
        display: none;
    }

    .btn {
        width: 43px;
        height: 43px;
        border: 1px solid #fff;
        font-weight: 700;
        line-height: 43px;
        float: right;
        color: #fff;
        margin-top: 10.5px;
    }

    .btn i {
        font-size: 20px;
    }
}

也不知道哪里出问题了，对照着源码对了好几遍了，但是源码复制过来就没问题了

/*视频开始*/
.video-box{
    width: 100%;
    height: 299px;
    background-color: red;
}
.video-box>div{
    width: 296px;
    height: 285px;
    background-color: #ffffff;
    float: left;
    margin-bottom: 14px;
    margin-right: 14px;
}
.video-box>div:last-child{
    margin-right: 0;
}

<!--主题开始-->
<div class="content">
       <div class="wrap">
<!--手机开始-->
      <div class="phone">
          <h3 class="title">手机</h3>
          <div class="phone-box">
              <div class="phone-box-left">
                  <a href="#">
                      <img src="images/574c6643ab91c6618bfb2d0e2c761d0b.jpg" alt="">
                  </a>
              </div>
              <div class="phone-box-right">
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
              </div>
          </div>
          <div class="big-img">
              <a href="#">
                  <img src="images/c3b86ede4dd31d7c126d56fbdde4f855.jpg" alt="">
              </a>
          </div>
      </div>
<!-- 手机结束-->
<!--  家电开始-->
       <div class="elc">
           <h3 class="title">家电</h3>
           <div class="elc-box">
               <div class="items1 items2">
                   <a href="#">
                       <img src="images/f256b81e4233333692eece77ed06ebc2.jpg" alt="">
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                       class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                       class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                       class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                       class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1 items2">
                   <a href="#">
                       <img src="images/f256b81e4233333692eece77ed06ebc2.jpg" alt="">
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                            class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                            class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                            class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items-last">
                   <div></div>
                   <div></div>
               </div>
           </div>
       </div>
       </div>
        <div class="big-img">
               <a href="#">
                   <img src="images/c3b86ede4dd31d7c126d56fbdde4f855.jpg" alt="">
               </a>
           </div>
    <!--    家电结束-->
    <!--视频开始-->
    <div class="video">
        <h3 class="title">视频</h3>
        <div class="video-box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
<!--  视频结束-->
       </div>
</div>
<!-- 主题结束-->

视频顶头le？

老师为啥就能一下子把几行代码包进<a>里，看着很丝滑；翻译件提供的快捷提示我没有，怎么安装啊

/*视频开始*/
.video-box{
    width: 100%;
    height: 299px;
    background-color: red;
}
.video-box>div{
    width: 296px;
    height: 285px;
    background-color: #ffffff;
    float: left;
    margin-bottom: 14px;
    margin-right: 14px;
}
.video-box>div:last-child{
    margin-right: 0;
}

<!--主题开始-->
<div class="content">
       <div class="wrap">
<!--手机开始-->
      <div class="phone">
          <h3 class="title">手机</h3>
          <div class="phone-box">
              <div class="phone-box-left">
                  <a href="#">
                      <img src="images/574c6643ab91c6618bfb2d0e2c761d0b.jpg" alt="">
                  </a>
              </div>
              <div class="phone-box-right">
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
                  <div class="items1">
                      <a href="#">
                          <img src="images/d880ff45a9a3b70527770e01521fc939.jpg"
                               alt="" class="img1">

                          <p class="name2">小米10至尊版</p>
                          <p class="desc2">120X 变焦/120W秒充/120Hz屏幕</p>
                          <p class="price2">5299元起</p>
                      </a>
                  </div>
              </div>
          </div>
          <div class="big-img">
              <a href="#">
                  <img src="images/c3b86ede4dd31d7c126d56fbdde4f855.jpg" alt="">
              </a>
          </div>
      </div>
<!-- 手机结束-->
<!--  家电开始-->
       <div class="elc">
           <h3 class="title">家电</h3>
           <div class="elc-box">
               <div class="items1 items2">
                   <a href="#">
                       <img src="images/f256b81e4233333692eece77ed06ebc2.jpg" alt="">
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                       class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                       class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                       class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                       class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1 items2">
                   <a href="#">
                       <img src="images/f256b81e4233333692eece77ed06ebc2.jpg" alt="">
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                            class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                            class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items1">
                   <a href="#">
                       <img src="images/ef4c68fed730ec26bf2fa0ff620975c5.jpg" alt=""
                            class="img1">
                       <p class="name2">小米11 Ultra</p>
                       <p class="desc2">1/1.12''GN2｜2K四微曲屏</p>
                       <p class="price2">5499元 <del>5999元</del></p>
                   </a>
               </div>
               <div class="items-last">
                   <div></div>
                   <div></div>
               </div>
           </div>
       </div>
       </div>
        <div class="big-img">
               <a href="#">
                   <img src="images/c3b86ede4dd31d7c126d56fbdde4f855.jpg" alt="">
               </a>
           </div>
    <!--    家电结束-->
    <!--视频开始-->
    <div class="video">
        <h3 class="title">视频</h3>
        <div class="video-box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
<!--  视频结束-->
       </div>
</div>
<!-- 主题结束-->

视频顶头le？

请问 标记等于标签吗 谢谢

上面的是视频里面的

下面这个是我打的，我想了解的是为什么我打的代码下面会多出一个href=“”

加入我想选择div中的最后一个p，那么是div p:last-chile吗？