有效沟通问答-【官方】百战程序员_IT在线教育培训机构

.content{
    width: 100%;
    overflow: hidden;
    padding: 4px 0 12px;
}
.title{
    text-align: left;
    color: #333;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
}
.yang-left{
    width: 234px;
    height: 100%;
    background-color: #ff6700;
    float: left;
}
.yang-right{
    width: 992px;
    height: 614px;
    float: left;
}
.yang-left img{
    width: 234px;
    height: 614px;
}
.items1{
    width: 234px;
    height: 300px;
    background-color: #e0e0e0;
    padding: 20px 0;
    margin: 0 0 14px 14px;
    float: left;
    transition: all .2s linear;
    box-sizing: border-box;
}
.img1{
    width: 164px;
    margin-bottom: 18px;
}
.items1:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}
.name1{
    width: 214px;
    height: 20.8;
    color: #333;
    font-size: 14px;
    line-height: 21px;
    margin: 0 auto 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name2{
    width: 214px;
    height: 18px;
    color: #b0b0b0;
    font-size: 12px;
    line-height: 18px;
    margin: 0 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name3{
    width: 214px;
    height: 20.8px;
    color: #ff6700;
    font-size: 14px;
    line-height: 18px;
    margin: 0 10px 14px;
}
.big-img{
    width: 1226px;
    height: 120px;
    margin: 22px 0;
}
老师，line-height: 21px这个不加可以吗？white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsi这行代码有啥用？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 541楼

<body>
    <div class="box">
        <a href="#">
            <img src="../img/魅族大图.png" alt="">
            <span class="title">魅族 18</span>
            <span class="intro">高通骁龙 888 ｜162g 6.2英寸轻妙手感</span>
            <span class="price">￥4399</span>
            <div class="sub">新品</div>
        </a>
        
    </div>
    <div class="box1">

    </div>
</body>

这是HTML

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS选择器 542楼

body{
    margin-left:0px;padding: 0;
    background-color: rgb(248, 244, 244);
}
a{
    text-decoration: none;
}
.box{
    width: 615px;
    height: 610px;
    background-color:#fff;
    position: relative;
    /* 图片是否平铺，不平铺 */
    background-repeat:no-repeat;
    float: left;
    margin-left:145px;
   
}
.box:hover{
    box-shadow: 0 10px 15px rgb(202, 202, 218);
}
.box img{
    width: 460px;
    height: 460px;
    position: absolute;
    bottom: 0;
    left: 77.5px;
}
span{
    /* 转换成块 */
    display: block;
    
}
.title{
    font-size: 28px;
    color: #333;
    position: absolute;
    top: 30px;
    left: 259px;
}
.intro{
    font-size: 18px;
    color: #333;
    position: absolute;
    top: 75px;
    left: 150px;
}
.price{
    font-size: 24px;
    color: #c00;
    position: absolute;
    top: 110px;
    left: 267px;

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS选择器 543楼

body{

margin-left:0px;padding: 0;

background-color: rgb(248, 244, 244);

}

text-decoration: none;

}

.box{

width: 615px;

height: 610px;

background-color:#fff;

position: relative;

/* 图片是否平铺，不平铺 */

background-repeat:no-repeat;

float: left;

margin-left:145px;

}

.box:hover{

box-shadow: 0 10px 15px rgb(202, 202, 218);

}

.box img{

width: 460px;

height: 460px;

position: absolute;

bottom: 0;

left: 77.5px;

}

span{

/* 转换成块 */

display: block;

}

.title{

font-size: 28px;

color: #333;

position: absolute;

top: 30px;

left: 259px;

}

.intro{

font-size: 18px;

color: #333;

position: absolute;

top: 75px;

left: 150px;

}

.price{

font-size: 24px;

color: #c00;

position: absolute;

top: 110px;

left: 267px;

点击整个父元素.box的div点击不了只能点击a里边的元素

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS选择器 544楼

老师，广告部分第一块容器ad-aside样式中写了左浮，但为什么和上面banner这一块对齐？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 545楼

.white-nav{

width: 100%;

height: 100px;

background-color: #fff;

position: relative;

}

.logo{

width: 55px;

height: 55px;

background-color: #ff6700;

float: left;

margin-top: 22px;

position: relative;

overflow: hidden;

}

.nav-bar{

width: 875px;

height: 100px;

line-height: 100px;

float: left;

}

.search{

width: 296px;

height: 100px;

float: left;

position: relative;

}

.logo>img{

width: 100%;

height: 100%;

position: absolute;

transition: all 2;

}

.yang{

left: -55px;

}

.guo{

left: 0;

}

.logo:hover>.yang{

left: 0;

}

.logo:hover>.guo{

left: 55px;

}

.yg{

width: 142px;

height: 88px;

}

.nav-bar li{

float: left;

}

.nav-bar>ul>li>a{

color: #333;

padding: 0 10px;

}

.nav-bar>ul>li>a:hover{

color: #fff;

}

.nav-bar>ul>li:first-child img{

margin-top: 22px;

}

.nav-bar-list{

width: 100%;

height: 229px;

background-color: #fff;

border-top: 1px sold #eee;

box-shadow: 0 3px 4px rgba(0, 0, 0, .1);

position: absolute;

top: 100px;

left: 0;

display: none;

}

.img-box{

width: 100%;

height: 137px;

margin-top: 35px;

border-right: 1px solid #eee;

box-sizing: border-box;

margin-bottom: 16px;

}

.nav-bar-list{

color: #333;

font-size: 12px;

line-height: 20px;

}

.nav-bar-list li{

width: 204px;

}

.nav-bar-list li:last-child .img-box{

border-right: none;

}

.nav-bar li:hover .nav-bar-list{

display: block;

}

.search>input{

width: 244px;

height: 50px;

border: 1px solid #e0e0e0;

box-sizing: border-box;

padding: 0 10px;

outline: none;

float: left;

border-right: none;

margin-top: 25px;

transition: all 2s;

}

.search>button{

width: 52px;

height: 50px;

border: 1px solid #e0e0e0;

float: left;

margin-top: 25px;

outline: none;

transition: all 2s;

}

.search>input:focus,.search>input:focus+button{

border-color: #b0b0b0;

}

.search>input:focus,.search>input:focus+button{

border-color: #b0b0b0;

}

.search>button:hover{

background-color: #ff6700;

border-color: #ff6700;

color: #fff;

}

.search-list{

width: 245px;

height: 241px;

background-color: #fff;

border: 1px solid #ff6700;

border-top: none;

box-sizing: border-box;

position: abso

老师，为啥我这个搜索框会从上往下移，这个框为啥会跑这里

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 546楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:805px;
            height:303px;
            border:5px solid brown;
            margin:100px auto;
            column-count:3;
            column-gap:10px;
            column-rule:solid 10px red;
            display:table-cell;
            vertical-align: middle;
        }
        /*p{
            display:table-cell;
            vertical-align: middle;
        }*/
    </style>
</head>
<body>
<div class="box">
    我想.那只是一刹那的心动吧.在人生中.一切的偶然太多.一切的不舍太多.一切的懵懂太多.一切的一切太多.就在刚刚明白的那一瞬间.却又懂得了离别.太美的错误因为太年轻.太美的承诺因为太无知.总在自己最脆弱的时候突然说要离开.是我太笨?还是青春太傻?是我太傻?还是时间太快?我不知道.自己到底是怎么一回事.在青春的愚昧中.我束手无策.
    　　就算鸟依旧要飞.就算风依旧要散.就算青春依旧会走.我还有什么办法去挽回花儿那段灿烂的时光呢?青春.是年少的冲动.青春.是懵懂的岁月.青春.是情窦的初开.青春.是回忆的见证.我的青春.我的冲动.我的年少.我的无知.我的心动.
    　　那些因为青春所许下的诺言.那些因为青春所留下的感悟.那些因为青春所犯下的错误.那些因为青春的种种种种.如装订的小说.一页一页的在我脑海中翻来覆去.剩下了些什么呢?是依依不舍.还是痛彻心扉?

</div>
</body>
</html>

问题一：本来想实现块级元素居中，多行文本在块级元素中垂直居中。我就用了display，但这样margin就失效了。有什么其他办法可以实现吗？

问题二：我试了用<p></p>标签，选择器里的display就不生效了，这是因为什么？display的适用范围吗？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS盒子模型 547楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用定位知识点</title>
    <style>
        * {
            /*p默认有16px的上下外边距*/
            margin: 0px;
        }
    .box{
        position:relative;
        width: 100%;
        height: 1155px;
    }
   .box img{
       width:100%;
   }
        .box1,.box2{
           width:303px;
           height:375px;
           background-color: red;
           position:absolute;
           top: 10px;
           left: 10px;
           right: 10px;
           /*position:static;使用静态定位，就相对浏览页面*/
       }


        a{
            text-decoration:none;
        }
        .box1,.box2{
            position:relative;
        }
        .text1,.text2{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name1{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc1{
            color:#fff;
            font-size:14px;
        }
        .price1{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2{
            background-color: whitesmoke;

        }

        .name2{
            color: #333;
            font-size: 16px;
        }
        .desc2{
            color:#999;
            font-size: 14px;
        }
        .price2{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2 span{
            color:#cc0000;
            font-size: 14px;
        }
        .box2 .number{
            color:#cc0000;
            font-size: 22px;
        }
        s{
            color:gray;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">
        <a href="#">
            <img src="images/1.jpg" alt="">
            <div class="text1">
                <p class="name1">魅族 EP3C 耳机</p>
                <p class="desc1">【限时特惠99元】</p>
                <p class="price1">￥129</p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/2.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 POP Pro 主动降噪耳机</p>
                <p class="desc2">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
                <p class="price2"><span>￥</span><span class="number">499</span></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/3.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 POP2s 真无线耳机</p>
                <p class="desc2">【限时6期免息】好声音标杆 | Flyme 妙连</p>
                <p class="price2"><span>￥</span><span class="number">299</span></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/4.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 HIFI 解码耳放</p>
                <p class="desc2">【年货节特惠价149元】</p>
                <p class="price2"><span>￥</span><span class="number">169</span></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/5.jpg" alt="">
            <div class="text2 ">
                <p class="name1">魅族 HD60 头戴式蓝牙耳机</p>
                <p class="desc1">【年货节特惠价349元+12期免息】</p>
                <p class="price1">￥499</p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/6.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 HD60 降噪耳机</p>
                <p class="desc2">【年货节特惠价799元+12期免息】</p>
                <p class="price2"><span>￥</span><span class="number">1099</span></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/7.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 EP63NC 无线降噪耳机</p>
                <p class="desc2">【年货节特惠价249元+6期免息】</p>
                <p class="price2"><span>￥</span><span class="number">249</span><s>￥499</s></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/8.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 POP Pro 主动降噪耳机</p>
                <p class="desc2">【年货节特惠价149元】</p>
                <p class="price2"><span>￥</span><span class="number">149</span><s>￥169</s></p>
            </div>
        </a>
    </div>
</div>
</body>
</html>

这个我用定位的知识，父元素用了相对定位，8个div子元素用绝对定位，但效果图没有实现，水平显示。我想实现以下效果图。

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS常用属性 548楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        .box,.box1{
            width: 303px;
            height: 375px;
            background-color: red;
            position: relative;
        }
        .box1{
            float:left;
        }
         img{
            width: 100%;
        }
        .text{
            width: 100%;
            height: 88px;
            /*相对于已经定位的父元素定位*/
            position: absolute;
            left: 0;
            bottom: 20px;
            text-align: center;

        }
        .name{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc{
            color: #fff;
            font-size: 14px;
        }
        .price{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="#">
        <img src="images/370ad36f-425c-453a-b406-ccb2a0dffeec.jpg" alt="">
        <div class="text">
            <p class="name">MEIZU UR 高端定制耳机 预约</p>
            <p class="desc">【预约专用】私人定制，为你而声</p>
            <p class="price">￥200</p>
        </div>
    </a>
</div>
<div class="box1">
    <a href="#">
        <img src="images/370ad36f-425c-453a-b406-ccb2a0dffeec.jpg" alt="">
        <div class="text">
            <p class="name">MEIZU UR 高端定制耳机 预约</p>
            <p class="desc">【预约专用】私人定制，为你而声</p>
            <p class="price">￥200</p>
        </div>
    </a>
</div>
</body>
</html>

我已经在box1处加了float:left;效果图为什么没有实现块级元素水平显示

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS常用属性 549楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            /*p默认有16px的上下外边距*/
            margin: 0px;
        }
        .box{
            width:1260px;
            height:780px;
            position:relative;
        }
        /* 合并选择器*/
        .box1,.box2 {
            width:303px;
            height:375px;
            background-color: red;
            position:relative;
            float: left;
            margin:12px 0px 0px 12px;
            /*position:static;使用静态定位，就相对浏览页面*/
        }
         img{
            width:100%;
        }
        .text1{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name1{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc1{
            color:#fff;
            font-size:14px;
        }
        .price1{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2{
            background-color: whitesmoke;

        }
        .box2 img{
            width:100%;
        }
        .text2{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name2{
            color: #333;
            font-size: 16px;
        }
        .desc2{
            color:#999;
            font-size: 14px;
        }
        .price2{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2 span{
            color:#cc0000;
            font-size: 14px;
        }
        .box2 .number{
            color:#cc0000;
            font-size: 22px;
        }
        s{
            color:gray;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">

        <img src="images/1.jpg" alt="">
        <div class="text1">
            <p class="name1">魅族 EP3C 耳机</p>
            <p class="desc1">【限时特惠99元】</p>
            <p class="price1">￥129</p>
        </div>
    </a>
</div>
    <div class=" box2">

        <img src="images/2.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP Pro 主动降噪耳机</p>
            <p class="desc2">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
            <p class="price2"><span>￥</span><span class="number">499</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/3.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP2s 真无线耳机</p>
            <p class="desc2">【限时6期免息】好声音标杆 | Flyme 妙连</p>
            <p class="price2"><span>￥</span><span class="number">299</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/4.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 HIFI 解码耳放</p>
            <p class="desc2">【年货节特惠价149元】</p>
            <p class="price2"><span>￥</span><span class="number">169</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/5.jpg" alt="">
        <div class="text2 ">
            <p class="name1">魅族 HD60 头戴式蓝牙耳机</p>
            <p class="desc1">【年货节特惠价349元+12期免息】</p>
            <p class="price1">￥499</p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/6.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 HD60 降噪耳机</p>
            <p class="desc2">【年货节特惠价799元+12期免息】</p>
            <p class="price2"><span>￥</span><span class="number">1099</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/7.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 EP63NC 无线降噪耳机</p>
            <p class="desc2">【年货节特惠价249元+6期免息】</p>
            <p class="price2"><span>￥</span><span class="number">249</span><s>￥499</s></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/8.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP Pro 主动降噪耳机</p>
            <p class="desc2">【年货节特惠价149元】</p>
            <p class="price2"><span>￥</span><span class="number">149</span><s>￥169</s></p>
        </div>
        </a>
    </div>
</div>
</body>
</html>

老师，我想实现图片居中，该怎么弄，现在的效果图全部靠左，我想两边空白地方一样多

右边红色的地方太多了，如何左右均匀分布

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS常用属性 550楼

一、老师，这是这个周的是操作业，我遇到的问题是 middle2 达不到作业的要求，没有紧贴盒子底部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100%
            height: 50px;
            background-color: blue;
        }
        .wrap{
            width: 700px;
            height: 50px;
            margin: 0 auto;
            background-color: cadetblue;
            padding-top: 10px;
        }
        .box2{
            width: 700px;
            height: 100px;
            background-color: cadetblue;
            margin: 10px auto 0px auto;
            padding-top: 20px;
        }
        .box3{
            width: 700px;
            height: 20px;
            background-color: gray;
            margin: 0 auto;
        }
        .box4{
            width: 700px;
            height: 40px;
            background-color: green;
            margin: 0 auto;
            padding-top: 50px;

        }
        .box5{
            width: 700px;
            height: 250px;
            background-color: gray;
            margin: 0 auto;
            margin-top-40px;

        }
        .box6{
            width: 700px;
            height: 20px;
            background-color: dodgerblue;
            margin: 10px auto 0px auto;
        }
        .no1{
            padding-left: 50%;
            padding-right: 50%;
        }
        .no2{
            padding-left: 50%;
            padding-right: 50%;
        }
        .no3{
            padding-left: 50%;
            padding-right: 50%;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="wrap"><span class="no1">top1</span></div>
    </div>

    <div class="box2" ><span class="no2">middle1</span></div>
    <div class="box3"></div>
    <div class="box4" ><span class="no3">middle2</span></div>
    <div class="box5"></div>
    <div class="box6"></div>
</body>
</html>

WEB前端全系列/第一阶段：HTML5+CSS3模块/初识CSS 551楼

<!--页脚开始-->
<div class="footer">
    <div class="wrap">
        <div class="footer-seriver">
            <ul>
                <li>
                    <a href="#">
                    <i class="iconfont">&#xe629;</i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe60e;</i>
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe606;</i>
                        <span>15天免费换货</span>
                    </a>

                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe624;</i>
                        <span>满99元包邮</span>
                    </a>

                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe617;</i>
                        <span>520余家售后网点</span>
                    </a>

                </li>
            </ul>
        </div>
        <div class="footer-link">
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <div class="footer-aside">
                <p class="tel">400-100-5678</p>
                <p class="time">8:00-18:00（仅收市话费</p>
                <a href="#" class="kefu">人工客服</a>
                <div class="follow">
                    关注小米：
                    <img src="image/wb.png" alt=""/>
                    <img src="image/wx.png" alt=""/>
                </div>

            </div>

        </div>
    </div>

</div>

老师我就想问下，在页脚最后右边的最后一排字“关注小米”这点本来我自己想的是用p标签，然后给嵌套两个a标签，然后在在a标签里给两个img

后面看到视频中老师用的div，我就想问下，最后一排为什么要用div上面三排出了有个用的a标签，其他都是用的p标签来写的，为什么最后这一点要用div

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 552楼

<!--主体开始-->
<div class="cantent">
    <div class="wrap">
        <!--手机开始-->
        <div class="phone">
            <h3 class="title">手机</h3>
            <div class="phone-box">
                <div class="phone-box-left">
                    <a href="#">
                        <img src="image/cb1bd61ad71c45a4f67f09b075463944.jpeg" alt=""/>
                    </a>
                </div>
                <div class="phone-box-right">
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="big-img">
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=736&h=72" alt=""/>
                </a>
            </div>
        </div>
        <!--手机结束-->
    </div>
</div>
<!--主体结束-->


css
/*主体开始*/
.cantent{
    width: 100%;
    /*自动找高*/
    overflow: hidden;
    padding: 4px 0 12px;
    background-color: #f5f5f5;
}
.title{
    text-align: left;
    color: #333;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
}
.phone-box-left{
    width: 234px;
    height: 614px;
    float: left;
    transition: all .2s linear;
    box-sizing: border-box;
}
.phone-box-right{
    width: 992px;
    height: 614px;
    /*background-color: deepskyblue;*/
    float: left;


}
.phone-box-left img{
    width: 100%;
    height: 100%;
}
.items1{
    width: 234px;
    height: 282px;
    padding: 20px 0;
    margin: 0 0 14px 14px;
    background-color: #fff;
    float: left;
    transition: all .2s linear;
    /*box-sizing: border-box;*/
}
.items1 img{
    width: 160px;
    height: 160px;
    margin-bottom: 18px; ;
}
.name2{
    width: 214px;
    height: 20px;
    color: #333;
    font-size: 14px;
    line-height: 21px;
    margin: 0 10px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name3{
    width: 214px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
    margin: 0 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name4{
    width: 214px;
    height: 21px;
    color: #ff6700;
    margin: 0 10px 14px;
    font-size: 14px;
}
.phone-box-left:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    transform: translate(0,-2px);
}
.items1:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    transform: translate(0,-2px);
}
.big-img{
    width: 100%;
    height: 120px;

 }
.big-img img{
    width: 1226px;
    height: 120px;
    margin: 22px 0;
}

老师我已经遇见过好几次这种情况了，代码没问题，但就是不显示，去浏览器检索了也有，但就是显示不出来，空白一片，这到底是bug？还是什么问题，求老师解答下！！感谢

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 553楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:600px;
            height:1200px;
            margin:auto;
            background:rgb(14, 112, 128);
        }
        #box > h2{
            padding:50px;
            padding-bottom:15px;
            text-align:center;
            color:white;
        }
        #box > h2:nth-child(2){
            padding-top:0px;
            color:yellow;
        }
        #box > h3{
            height:40px;
            text-align:center;
            line-height:40px;
            color:white;
            border:1px solid red;
        }
        #box > h3 > i{
            font-size:30px;
            color:white;
        }
        #box > .content{
            width:100%;
            height:280px;
            margin-top:20px;
        }
        #box > .content .content_center{
            width:75%;
            height:100%;
            margin:auto;
        }
        #box > .content .content_center .content_center_left{
            float:left;
            width:60%;
            height:100%;
        }
        #box > .content .content_center .content_center_left .content_center_left_top{
            width:100%;
            height:60px;
            text-align:center;
            color:white;
            line-height:60px;
            font-size:20px;
        }
        #box > .content .content_center .content_center_left .content_center_left_bottom{
            width:220px;
            height:220px;
            margin:auto;
            background:pink;
        }
        #box > .content .content_center .content_center_right{
            float:left;
            width:40%;
            height:100%;
        }
        #box > .content .content_center .content_center_right .content_center_right_center{
            float:right;
            width:80%;
            height:100%;
            padding-top:8px;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .content_center_right_center_top{
            width:100%;
            height:120px;
        }   
        #box > .content .content_center .content_center_right .content_center_right_center .fz{
            width:100%;
            height:40%;
            font-size:20px;
            color:white;
            line-height:48px;
            text-align:center;
            cursor: pointer;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .lj{
            width:100%;
            height:46%;
            text-align:center;
            line-height:55px;
            border-radius:30px;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .fzje{
            background:yellow;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .fzlj{
            background:white;
            margin-top:0px;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .content_center_right_center_bottom{
            width:100%;
            height:120px;
            margin-top:50px;
        }
        #box > .ziduan{
            width:100%;
            margin-top:40px;
            color:white;
        }
        #box > .ziduan > p{
            margin-left:20px;
            line-height:40px;
        }
    </style>
</head>
<body>

    <div id="box">
        <h2>请使用USDT-TRC20支付转账</h2>
        <h2>转账数量需严格要求, 数量错误将不会到账</h2>
        <h3> <i class="iconfont icon-naozhong"></i> 有效时间 : <span class="shi">10</span>:<span class="fen">00</span>:<span class="miao">00</span></h3>
        <div class="content">
            <div class="content_center">
                <div class="content_center_left">
                    <div class="content_center_left_top">
                        马上扫码去转账
                    </div>
                    <div class="content_center_left_bottom"></div>
                </div>
                <div class="content_center_right">
                    <div class="content_center_right_center">
                        <div class="content_center_right_center_top">
                            <div class="fz">复制金额</div>
                            <div class="lj fzje">15.38 USDT</div>
                        </div>
                        <div class="content_center_right_center_bottom">
                            <div class="fz">复制链接</div>
                            <div class="lj fzlj">链接</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ziduan">
            <p>温馨提醒</p>
            <p>1. 请勿向上述地址充值任何非USDT-TRC20资产, 否则资产将不可找回</p>
            <p>2. 您充值至上述地址后, 需整个网络节点的确认, 多次网络确认后到账</p>
            <p>3. 务必确保最终到账金额为15.38USDT, 不包含额外手续费, 其他不符金额都不自动到账</p>
            <p>4. 该地址只能使用一次, 重复使用会造成资产丢失</p>
        </div>
    </div>
    
</body>
</html>

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 554楼

老师您好，在听完这节课后，视频中出现了很多转换为怪异盒模型的用法，之前学的怪异盒模型，我知道它的属性，但什么时候该去使用它，一直没搞清楚，麻烦老师解答下，谢谢老师

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 555楼

同学您好