zoukankan      html  css  js  c++  java
  • flex九宫格一点小思考

    看到一道面试题,用flex布局九宫格,决定自己实现一下

    基础版

     .father {
                display: flex;
                /*必须给宽高把盒子撑起来,然后调整width可看是否要正方形*/
                 300px;
                height: 300px;
                flex-direction: column;
            }
            
            .mather {
                display: flex;
                flex: 1;
                flex-direction: row;
            }
            
            .son {
                flex: 1;
                border: 1px solid;
            }
             <div class="father">
            <div class="mather">
                <div class="son"></div>
                <div class="son"></div>
                <div class="son"></div>
            </div>
            <div class="mather">
                <div class="son"></div>
                <div class="son"></div>
                <div class="son"></div>
            </div>
            <div class="mather">
                <div class="son"></div>
                <div class="son"></div>
                <div class="son"></div>
            </div>
        </div>
    

    效果如图

    可以看到 这里我是指定了父元素的宽高的,那么我想随着屏幕变化我的宽高怎么办?
    思路:

    • 先将father盒子赋予屏幕宽高,其余与上不变。
     <div class="father" id="father"></div>
            let HTML = document.documentElement,
                winW = HTML.clientWidth,
                winH = HTML.clientHeight,
                father = document.getElementById('father');
            console.log(winW, winH)
            father.style.width = winW+'px';
            father.style.height = winH+'px';
    


    解决!
    再定睛一看,旁边仍有滚动条?

       .son{
        box-sizing:border-box;
    }
    

    竖直还是有!
    a few moments latter...

    • 捣鼓结果:
      我把浏览器窗口缩小后刷新就没有了

    电脑正常开启浏览器高度仍有滚动条

    原因:可能是我的可视高度并非我的屏幕高度
    在我手动将浏览器宽高拉至占满整个屏幕后刷新,滚动条又没有了,此时可视高度与屏幕一致。
    说明我电脑自动开启浏览器时,浏览器高度略比电脑屏幕高,才会导致无法全部显示。

    浏览器普通窗口:

    电脑桌面打开浏览器时浏览器全屏窗口:

    这两种方式高度相差5px左右,所以会导致有滚动条。

    粗暴的解决办法:

            /* //谷歌适用 */
            
             ::-webkit-scrollbar {
                display: none;
            }
    
  • 相关阅读:
    clientHeight、offsetHeight、scrollHeight详解
    JavaScript中常见的字符串操作函数及用法
    获取伪元素的属性和改变伪元素的属性
    HTML和CSS实现左侧固定宽度右侧内容可滚动
    gulp常用插件
    gulp入门详细教程
    Javascript 异步实现机制
    JavaScript:彻底理解同步、异步和事件循环(Event Loop)
    chrome调试,打完断点后关于JS的几个控制介绍
    js断点调试心得
  • 原文地址:https://www.cnblogs.com/xmjs/p/13399279.html
Copyright © 2011-2022 走看看