zoukankan      html  css  js  c++  java
  • calc

    calc 和flexbox搭配,用来写流式布局非常好;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3 Calc</title>
        <style type="text/css" media="screen">
            html{
                font-size:62.5%;
            }
            .wrapper{
                width:100%;
                border:5px solid #f00;
                margin:10px ;
                box-sizing:border-box;
                height:200px;
                clear:both;
            }
            .items{
                height:calc(100% - 40px);
                display:inline-block;
                border:1px solid #f70;
                text-align:center;
            }
    
            .w1 .items{
    
                float:left;
                margin-top:calc( 5 * 4px  );
                border:3px solid #0F16C6;
                width:calc(100% / 3 - 6px)
            }
    
            .w2 .items{
                float:left;
                margin-top:calc(200px - 20px * 9);
                width:calc(100% / 3 - 2px)
            }
    
            .w3 .items{
                float:left;
                width:calc(100% / 3 - (3 * 6px));
                margin:calc(2px * 4 );
            }
    
            .w3 .items:first-child{
                padding:calc(5 * 1rem - 3rem);
                box-sizing:border-box;
            }
    
        </style>
    </head>
    
    <body>
    <div class="wrapper w1">
        <div class="items">margin-top:calc( 5 * 4px  );</div>
        <div class="items">margin-top:calc( 5 * 4px  );</div>
        <div class="items">margin-top:calc( 5 * 4px  );</div>
    </div>
    <div class="wrapper w2">
        <div class="items">margin-top:calc(200px - 20px * 9);</div>
        <div class="items">margin-top:calc(200px - 20px * 9);</div>
        <div class="items">margin-top:calc(200px - 20px * 9);</div>
    </div>
    <div class="wrapper w3">
        <div class="items">calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</div>
        <div class="items">calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
        <div class="items">calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    C调用C++的动态库
    记“gorm查询没报错,但结果为空”的解决
    Android学习之路(一) Android Studio创建项目
    Windows程序消息机制浅析
    2021.5.1 学习小目标
    微信测试流程
    mysql使用正则表达式匹配中文所遇到的问题
    关于mysql的distinct用法
    一次性能测试的网络层面总结
    mongodb中直接根据某个字段更新另外一个字段值
  • 原文地址:https://www.cnblogs.com/wang715100018066/p/6292526.html
Copyright © 2011-2022 走看看