zoukankan      html  css  js  c++  java
  • css属性应用bug大杂烩(后续继续更新)

    一、Flex布局使用时的坑:

      1、常见的左右分布的flex布局中,左侧给定宽度,右侧占满剩余空间,但当右侧中文字内容很多时,会挤占左侧空间,时左侧不能按照定宽显示。

    <style>
            .father{
                display: flex;
                width: 500px;
                height: 200px;
            }
            .left{
                width: 200px;
                background-color: green;
            }
            .right{
                flex-grow: 1;
                background-color: red;
            }
        </style>
        <body>
            <div class="father">
                <div class="left">左边左边边左边左边</div>
                <div class="right">右边</div>
            </div>
        </body>

      正确宽度显示如下:

        

      但,当右侧红框内文字变多时:

        

    显然当右侧文字增多,挤占剩余空间时左侧会被压缩,解决方法如下:

      1)给右侧添加宽度“0;”,指定宽度0后

     .right{
                flex-grow: 1;
                background-color: red;
            }

      2)给设置了flex-grow属性的元素添加flex-basis属性

     .right{
                flex-grow: 1;
                background-color: red;
                flex-basis: 0%;
            }

       2、flex布局中basis与width的区别,参考链接https://www.jianshu.com/p/17b1b445ecd4

  • 相关阅读:
    k近邻算法
    密码技术小总结
    编码的简单总结
    icmp dos和arp dos 攻击模拟实验
    WPA简单抓包分析
    Iptables实验
    Rabin简单加解密
    response响应数据
    浮动——小米手机案例
    ServletRequest请求详解
  • 原文地址:https://www.cnblogs.com/cassiel/p/9044962.html
Copyright © 2011-2022 走看看