CSS流体布局计算 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>fluid流体布局,横向百分比,竖向固定数值</title>
    <style>
        body{
            margin: 0;
        }
        .box a{
            width: calc(25% - 4px);
            /*    使用calc()函数计算长度的时候,需要注意语法.
                计算符号两边数字之间应有空格留白.
                用以区分.
                */
            border: 2px solid #000;
            line-height:200px; 
            height: 200px;
            float: left;
            background: coral;
        }
        .box2 a{
            width: 25%;
            height: 200px;
            border: 2px solid #000;
            line-height: 200px;
            text-align: center;
            float: left;
            background: khaki;
            box-sizing: border-box;
        }
        /*
            在使用流体布局的时候:
            1.calc计算减去边框
            2.直接设置盒子大小 box-sizing:border-box;(意为盒子大小包含边框大小)
            
            两种方法相比较, 第二种方法更为方便,且兼容性更好.
            多数应该使用第二种方法.
            当使用第一种方法的时候要查看border对整体大小的影响,以及margin叠加.
        */
    </style>
</head>
<body>
    <div class="box">
        <a href="#">网址:1</a>
        <a href="#">网址:2</a>
        <a href="#">网址:3</a>
        <a href="#">网址:4</a>
    </div>
    <div class="box2">
        <a href="#">网址:(1)</a>
        <a href="#">网址:(2)</a>
        <a href="#">网址:(3)</a>
        <a href="#">网址:(4)</a>
    </div>
</body>
</html>

 

posted @ 2019-08-13 16:58  Jrri  阅读(361)  评论(0)    收藏  举报