zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    如何把两个查询语句合成一条 语句
    SpringBoot之springfox(Swagger) (ApiDoc接口文档)
    springboot + swagger
    高等数学(上)第2章——导数与微分
    oracle 常用 sql
    线性代数基础知识(三)—— 矩阵乘法
    Neo4j(一)
    医学知识图谱(二)——应用
    医学知识图谱一
    数学基本概念
  • 原文地址:https://www.cnblogs.com/jrri/p/11346978.html
Copyright © 2011-2022 走看看