2020-11-12-CSDN博客

本文链接：https://blog.csdn.net/Amaya_Angel/article/details/109652084

行内块与浮动区别

1.行内块

问题1.多个行内块并排展示时会有间隙

解决1.父元素添加font-size:0px

2.消除两个元素之间空格、缩进；

问题2.多个行内快其中一个有内容其他无内容，该元素会掉下去。

原因：默认对齐方式为基线对齐，有内容的会按照内容的基线去对齐。

解决1.添加内容。

解决2.修改对齐方式

HTML

<div>人面不知何处去</div>
<div>人面不知何处去</div>
<div>人面不知何处去</div>
<div>人面不知何处去</div>
<div></div>

css

div{
      width: 200px;
      height: 200px;
      display: inline-block;
      background-color: aquamarine;
      vertical-align: top;
    }

2.清除浮动

浮动脱标，行内块不脱标。

.clearFix::after{
content: "";
display: block;（添加块级元素）
clear: both;（清除两侧浮动）消除清除对象：line-height:0; ，height:0;,font-size:0;
}

HTML

<div class="father clearFix">
    <div class="son1"></div>
    <div class="son2"></div>
</div>

css

.father{
      width: 800px;
      background-color: seagreen;
    }
    .son1{
      float: left;
      width: 300px;
      height: 300px;
      background-color: rosybrown;
    }
    .son2{
      float: left;
      width: 300px;
      height: 300px;
      background-color: royalblue;
    }
   
    .clearFix::after{
      content: "";
      display: block;
      clear: both;
    }

小米channel

伪元素

p::after{content:"";}content:内容必写

p::before{content:"";}

css

.sup {
    height: 170px;
    margin-top: 50px;
}

.sup-container {
    width: 1226px;
    margin: 0 auto;
    /* background-color: #5f5750; */
}

.sup-nav {
    width: 234px;
    float: left;
    background-color: #5f5750;
}

.sup-nav ul {
    /* background-color: #5f5750; */
    margin: 0;
    padding: 2px;
    text-align: center;
}

.sup-nav li {
    list-style: none;
    position: relative;
    float: left;
    width: 74px;
    height: 82px;
    padding: 0 1px;
    background-color: #352828;
    text-align: center;
    display: block;
    text-align: center;
}


/* span {
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #ff6900;
} */

.sup-nav a {
    display: block;
    font-size: 14px;
    padding-top: 18px;
    text-overflow: ellipsis;
    color: #fff;
    opacity: 0.7;
    text-decoration: none;
}

.sup-nav a:hover {
    opacity: 1;
}

.sup-nav ul::after {
    content: "";
    display: table;
}

.sup-nav li::before {
    content: "";
    position: absolute;
    background-color: #665e57;
    top: -1px;
    left: 6px;
    width: 64px;
    height: 1px;
    opacity: 0.7;
}

.sup-nav li::after {
    content: "";
    position: absolute;
    background-color: #665e57;
    top: 6px;
    left: 0;
    width: 1px;
    height: 70px;
    opacity: 0.7;
}

.sup-nav img {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
}

.sup-adv {
    width: 978px;
    float: left;
    margin-left: 14px;
    min-height: 14px;
}

.sup-adv .supadv1 {
    list-style-type: none;
}

.sup-adv li {
    float: left;
}

.sup-adv li img {
    display: block;
    width: 310px;
    height: 170px;
    margin: 0 8px;
}

HTML

<div class="sup">
            <div class="sup-container">
                <div class="sup-nav">
                    <ul>
                        <li>
                            <a href="https://www.mi.com/buy/seckill"><img src="./../../第九天/图片/钟表1.png" alt="小米秒杀">小米秒杀</a>
                        </li>
                        <li>
                            <a href="https://qiye.mi.com/"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="企业团购">企业团购</a>
                        </li>
                        <li>
                            <a href="https://www.mi.com/order/fcodeseckill"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="F码通道">F码通道</a>
                        </li>
                        <li>
                            <a href="https://www.mi.com/mimobile/"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="米粉卡">米粉卡</a>
                        </li>
                        <li>
                            <a href="https://www.mi.com/a/h/16769.htmlseckill"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="以旧换新">以旧换新</a>
                        </li>
                        <li>
                            <a href="https://recharge.10046.mi.com/"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="话费充值">话费充值</a>
                        </li>
                    </ul>
                </div>
                <div class="sup-adv">
                    <ul class="supadv1">
                        <li><img src="./../../第九天/图片/small1.jpg" alt=""></li>
                        <li> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340" alt=""></li>
                        <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340" alt=""></div>
                </li>
                </ul>
            </div>
        </div>

悬停下载

html

<a href="https://www.mi.com/aptitude/list/" target="blank" class="hid">下载app
                    <div class="app">
                        <img src="//i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城"class="appcode"> 小米商城APP
                </div>
            </a>
                <span class="sep">|</span>

css

.hid {
    position: relative;
}

.app {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 124px;
    height: 148px;
    background: #fff;
    margin-left: -55px;
    box-shadow: 0 1px 5px #aaa;
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 1px;
    display: none;
}

.app::before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border: 8px solid rgb(51, 51, 51);
    border-top: none;
    border-bottom-color: white;
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -8px;
}

.hid:hover .app {
    display: block;
}

.appcode {
    display: block;
    width: 90px;
    height: 90px;
    margin: 18px auto 12px;
}