[郑州|结业弟子]JS-张雄|2019年11月27日的日报-技能树.IT修真院

发表于： 2019-11-27 21:24:54

1 1052

首先，了解任务后，查阅了部分资料后开始任务。

第一，今天主要收获是，九宫格的自适应解决方法。一开始使用了em，float自适应后，发现无法形成想要的九宫格，随后使用百分比，但显示的效果图就消失了，然后查出问题是父元素height：auto的原因导致值为0，使得子元素无法获取值。给出了设置为100vw的解决方法。后来在师兄的回答中又发现了设置padding的值用以撑开父元素，从而形成九宫格。下面有两种方式的对比：

<!DOCTYPE html>
<html>
    <head>
        <title>九宫格</title>
         <style>
             .box {
                 height: 100vw;
                 
             }
             .small {
                 float: left;
                 border-radius: 10%;
                 width: 31%;
                 height: 31%;
                 margin: 1%;
                 background-color: cadetblue;
                 
             }
         
         </style>

    </head>
    <body>
        <div class="box">
            <div class="small"></div>
            <div class="small"></div>  
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
        </div>
    </body>

</html>

<!DOCTYPE html>
<html>
    <head>
        <title>九宫格2</title>
         <style>
             div {
                 float: left;
                 border-radius: 16%;
                 padding-top: 31%;
                 padding-right: 31%;
                 margin: 1%;
                 background-color: cadetblue;
                 
             }
         
         </style>

    </head>
    <body>
     
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
    </body>

</html>