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

<!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常用属性 211楼

对于download这个div的css：

position: absolute之后，

left: 50%; 是距离父容器的左边的垂直线往右父容器宽度的50%吗

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 212楼

<form action="提交页面.html">
    <p>
        性别：
        <input type="radio" name="sex" id="man"/>
        <lable for="man">男</lable>
        <input type="radio" name="sex"id="woman"/>
        <lable for="woman">女</lable>
    </p>
</form>

提升用户体验度点击文字这里，代码如上，浏览器里却不能点击文字

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 213楼

这个地方的<span>可以用<p>吗

WEB前端全系列/第一阶段：HTML5+CSS3模块/浮动与定位 214楼

为什么19:28的时候margin-left: -62px;能使download这个div向左移动，这个62是怎么算出来的（哪个减去哪个）？

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 215楼

老师，我这里没有明白视频的意思，col-xs-12是把一行分成12个格子？一行占12个格子？还是分成12行？

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

.black-nav-left li:hover>.download {

height: 148px;

}

这个是对于black-nav-left中所有li标签悬浮时的设置吗，为什么能实现只有悬浮到到下载APP上的时候才弹出而不是悬浮于任何一个li上时都弹出呢？

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 217楼

老师，我的搜索框用一个div承载了一个input和一个button，宽度设置的刚好够两个的宽度和，为什么button会跳到下一行呢

 <div class="search">
                <input type="text" placeholder="笔记本">
                <button class="iconfont">
                    &#xe63d;
                </button>
            </div>

.search{
    width: 296px;
    height: 50px;
    float: right;
    margin-top: 25px;
    position: relative;
}

.search button{
    width: 38px;
    height: 46px;
    padding: 1px 6px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    font-size: 24px;
    line-height: 46px;
    color: #616161;
    box-sizing: content-box;
    transition: all .2s;
    cursor: pointer;
}

.search input{
    width: 223px;
    height: 48px;
    padding: 0 10px 0;
    border: 1px solid #e0e0e0;
    font-size: 14px;
    line-height: 48px;
    border-right: 0;
    transition: all .2s;
    outline: none;
}

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 218楼

.download p {

color: #333;

font-size: 14px;

line-height: 14px;

}

为什么我把line-height调成12，甚至6px，小米商城APP这几个字都能显示完呢，不设置line-height属性的话就会被遮挡，想知道为什么能想到用这个属性，是个什么原理。

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 219楼

<!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常用属性 220楼

我的button标签为什么默认box-sizing不是content-box而是border-box

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 221楼

input的name属性是不是随便给一个值都行，只要给取个名字就可以，还是讲name属性的属性值必须是有要求的

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 222楼

老师在视频讲到用户名和密码框是行内元素，什么叫行内元素，

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 223楼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .phone {
        width: 1300px;
        height: 680px;
        margin: 0 auto;
        background-color: bisque;
    }

    .left {
        width: 234px;
        height: 680px;
        background-color: rgb(236, 41, 7);
    }

    .right {
        float: right;
        width: 1050;
        height: 680px;
        background-color: aliceblue;
    }

    .box {
        float: left;
        width: 250px;
        height: 300px;
        background-color: black;
        margin-top: 10px;
        margin-left: 10px;
    }
</style>

<body>
    <div class="phone">
        <div class="left"></div>
        <div class="right">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</body>

</html>

老師，我的網頁加載后right裏面内容都向下排列了

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 224楼

超链接href属性跳转网站地址前面一定要加https://吗

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

同学您好