常见的布局实现

本章主要介绍常见的布局实现,包括:


[1] 两列布局

[2] 三列布局

[3] 弹性 (Flex) 布局


[1] 两列布局

  • 子列固定宽度(设置 absolutefloat),主列自适应屏幕(调整margin)。
  • absolute + marginfloat + marginfloat + 负margin 等方式。
<!DOCTYPE html>
<html>
<head>
    <title>两列布局</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 方法1: absolute + margin 方式 */
        /* 优点: 可以优先渲染主元素 main 中的内容*/
        /* 缺点: aside 列脱离了文档流, 当 aside 列比 main 列高时会覆盖后面的布局 */
        .container1 {   
            position: relative;   
            margin: 10px;
            border: 1px solid #000;
        }   
        .aside1 {   
            position: absolute;  
            top: 0;  /* 优先渲染 main 中内容时不可以省略,因为 main1 中的 margin-left 占据了 200px 的大小 */
            left: 0;
            width: 200px;   
            height: 100px;   
            background-color: rgba(255, 0, 0, .5);   
        }   
        .main1 {   
            height: 100px;   
            margin-left: 200px;    /* 左侧 200px 被侧边栏覆盖 */
            background-color: rgba(0, 255, 0, .5);   
        }  

        /* 方法2: float + margin 方式 */
        /* 优点和缺点与方法 1 前者相反 */
        .container2 {   
            position: relative;   
            margin: 10px;
            border: 1px solid #000;
        }   
        .aside2 {   
            float: left; 
            width: 200px;   
            height: 100px;   
            background-color: rgba(255, 0, 0, .5);   
        }   
        .main2 {   
            height: 100px;   
            margin-left: 200px;    /* 左侧 200px 被侧边栏覆盖 */
            background-color: rgba(0, 255, 0, .5);   
        }  
        /*  方法3: float + 负margin 方式 (即双飞翼布局) */
        /*  浮动 container 和 aside 列, 通过 负margin 正确定位 aside 列
         *  container 宽度值设为 100%
         *  main 列的 margin-left 消除被 aside 覆盖的部分
         *  aside 不包括在 container 中
         */
        /*  优点: 解决了 float + margin 不能优先渲染 main 中的内容 */
        .container3 {   
            float: left;   /* 浮动 */
            width: 100%;
            border: 1px solid #000;
        }   
        .aside3 {   
            float: left;  
            margin-left: -100%;  /* 调整到合适位置 */
            width: 200px;   
            height: 100px;   
            background-color: rgba(255, 0, 0, .5);   
        }   
        .main3 {   
            height: 100px;   
            margin-left: 200px;    /* 左侧 200px 被侧边栏覆盖 */
            background-color: rgba(0, 255, 0, .5);   
        }  
    </style>
</head>
<body>
    <!-- 能优先渲染 main -->
    <div class="container1">  
        <div class="main1">主列</div>   <!-- 如果想要交换两列, 需要将 .aside1 中的 left 改成 right, .main1 中的 margin-left 改成 margin-right -->
        <div class="aside1">子列</div>  
    </div> 
    <!-- 不能优先渲染 main -->
    <div class="container2">  
        <div class="aside2">子列</div>  
        <div class="main2">主列</div>   <!-- 如果想要交换两列, 需要将 .aside2 中的 float 改成 right, .main2 中的 margin-left 改成 margin-right -->
    </div>  
    <!-- 能优先渲染 main, 注意: aside 不包括在 container 中-->
    <div class="container3">  
        <div class="main3">主列</div>   <!-- 如果想要交换两列, 需要将 .aside3 中的 float 改成 right, .main3 中的 margin-left 改成 margin-right -->
    </div> 
    <div class="aside3">子列</div>  
</body>
</html>

两列布局.png

[1] 三列布局

  • 两侧固定宽度(设置 absolutefloat),主列自适应屏幕(调整margin)。
  • absolute + marginfloat + marginfloat + 负margin 等方式。
<!DOCTYPE html>
<html>
<head>
    <title>三列布局</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 方法1: absolute + margin 方式 */
        /* 优点: 可以优先渲染主元素 main 中的内容*/
        /* 缺点: leftSide 和 rightSide 列脱离了文档流, 当 leftSide 和 rightSide 列比 main 列高时会覆盖后面的布局 */
        .container1 {   
            position: relative;   
            margin: 10px;
            border: 1px solid #000;
        }   
        .leftSide1 {   
            position: absolute;  
            top: 0;   /* 优先渲染 main 中内容时不可以省略,因为 main1 中的 margin 占据了 左、右的大小 */
            left: 0;
            width: 200px;   
            height: 100px;   
            background-color: rgba(255, 0, 0, .5);   
        }   
        .rightSide1 {   
            position: absolute;  
            top: 0;   /* 优先渲染 main 中内容时不可以省略,因为 main1 中的 margin 占据了 左、右的大小 */
            right: 0;
            width: 300px;   
            height: 100px;   
            background-color: rgba(255, 0, 0, .5);   
        }   
        .main1 {   
            height: 100px;   
            margin: 0 300px 0 200px;    /* 左侧 200px 被侧边栏覆盖 */
            background-color: rgba(0, 255, 0, .5);   
        }  

        /* 方法2: float + margin 方式 */
        /* 优点和缺点与方法 1 前者相反 */
        .container2 {   
            position: relative;   
            margin: 10px;
            border: 1px solid #000;
        }   
        .leftSide2 {   
            float: left; 
            width: 200px;   
            height: 100px;   
            background-color: rgba(255, 0, 0, .5);   
        }  
        .rightSide2 {   
            float: right; 
            width: 300px;   
            height: 100px;   
            background-color: rgba(255, 0, 0, .5);   
        }   
        .main2 {   
            height: 100px;   
            margin: 0 300px 0 200px;    /* 左侧 200px 被侧边栏覆盖 */
            background-color: rgba(0, 255, 0, .5);   
        }  

        /*  方法3: float + 负margin 方式 (即双飞翼布局) */
        /*  浮动 container 和 side 列, 通过 负margin 正确定位 side 列
         *  container 宽度值设为 100%
         *  main 列的 margin-left 消除被 side 覆盖的部分
         *     side 不包括在 container 中
         */
        /*  优点: 解决了 float + margin 不能优先渲染 main 中的内容 */
        .container3 {   
            float: left;   /* 浮动 */
            width: 100%;
            border: 1px solid #000;
        }   
        .leftSide3 {   
            float: left;  
            margin-left: -100%;  /* 调整到合适位置 */
            width: 200px;   
            height: 100px;   
            background-color: rgba(255, 0, 0, .5);   
        }   
        .rightSide3 {   
            float: right;  
            margin-left: -100%;  /* 调整到合适位置 */
            width: 300px;   
            height: 100px;   
            background-color: rgba(255, 0, 0, .5);   
        }   
        .main3 {   
            height: 100px;   
            margin: 0 300px 0 200px;  /* 左侧 200px 被侧边栏覆盖 */
            background-color: rgba(0, 255, 0, .5);   
        }  
    </style>
</head>
<body>
    <!-- 能优先渲染 main -->
    <div class="container1">  
        <div class="main1">主列</div>  
        <div class="leftSide1">左列</div>  
        <div class="rightSide1">右列</div>  
    </div> 
    <!-- 不能优先渲染 main -->
    <div class="container2">  
        <div class="leftSide2">左列</div>  
        <div class="rightSide2">右列</div>  
        <div class="main2">主列</div>   
    </div>  
    <!-- 能优先渲染 main, 注意: side 不包括在 container 中-->
    <div class="container3">  
        <div class="main3">主列</div> 
    </div> 
    <div class="leftSide3">左列</div>  
    <div class="rightSide3">右列</div>  
</body>
</html>

三列布局.png

[3] 弹性 (Flex) 布局

  • 弹性布局:采用 Flex 布局的元素,称为 Flex 容器(flex container),它的所有子元素自动成为容器成员,称为 Flex 项目(flex item)。
    • 用法:display:flex (不能与 floatposition 混用);
    • (父)容器属性:flex-flow (包括 flex-directionflex-wrap)、justify-content(水平)、align-items(垂直)、align-content
    • (子)项目属性:orderflex-growflex-shrinkflex-basisflexalign-self
接下来是几个应用 Flex 布局的例子:
  • 三列等宽布局
<style type="text/css"> 
    #main {
        width: 220px;
        border: 1px solid black;
        display: flex;  /* 使用弹性布局 */
    }
    #main div {
        flex: 1;  /* 所有弹性盒模型对象的子元素都有相同的长度, 忽略它们内部的内容 */
    }
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
</body>

三列等宽布局.png

  • 随机变换盒子颜色
<style type="text/css"> 
    #main {
        width: 800px;
        height: 400px;
        border: 1px solid black;
        display: flex;  /* 使用弹性布局 */
        flex-flow: row wrap;  /* flex-direction (规定 Flex 项目按行分布) 和 flex-wrap (Flex 项目自动换行) */
        justify-content: space-between;  /* 水平等距 */
        align-items: center;  /*  垂直居中 */
    }
    #main div {   /* 定义 Flex 项目 */
        width: 100px;
        height: 100px;
        margin: 2px;
    }
</style>
</head>
<body>
<div id="main">
    <!-- Js 生成的 Flex 项目 -->
</div>
<script>
    var color = ["#FFD700", "#FF4040", "#D1EEEE", "#CAFF70", "#C1CDCD", "#B03060", "#9ACD32", "#7CFC00", "#FF8C00"];
    for (var i=0; i < 13; i++) {
        var div = document.createElement('div');
        var pos = Math.floor(Math.random() * color.length);
        div.style.background = color[pos];
        var num = Math.floor(Math.random() * 100);  /* 生成一个 [0, 100) 大小的整数 */
        div.style.order = num;   /* Flex 项目按照从小到大的顺序显示 */
        div.innerHTML= num;
        document.getElementById('main').appendChild(div);
    }
</script>
</body>

随机变换盒子颜色.png

更多关于 Flex 用法,可以参考文章 Flex 布局语法教程

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web项目聚集地

50道CSS面试题(附答案)

标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽度=内容宽度(content+bo...

16730
来自专栏程序员互动联盟

【专业技术】CSS作用及用法

层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...

37370
来自专栏HenCoder

HenCoder Android 开发进阶:自定义 View 1-3 文字的绘制

之前的内容在这里: HenCoder Android 开发进阶 自定义 View 1-1 绘制基础 HenCoder Android 开发进阶 自定义 View...

22420
来自专栏前端知识分享

第162天:canvas中Konva库的使用方法

43810
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——解构Border

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

23680
来自专栏偏前端工程师的驿站

javascript实例:逐条记录停顿的走马灯

效果: ? 需求: 1.记录循环滚动; 2.每组记录之间不能有留白; 3.每条记录上移到容器的顶部时要停顿一下; 4.鼠标移入容器时停止滚动,移出时继续滚动。 ...

24050
来自专栏非典型技术宅

iOS动画系列之九:实现点赞的动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

17520
来自专栏前端新视界

网页中添加下划线的方法汇总及优缺点

本文主要介绍了添加下划线样式的几乎所有方法,并且比较了每一种方法的优缺点。没想到之前一直没有注意的下划线还有这么多玄机奥秘! 本文由 nzbin 翻译,艾凌风...

232100
来自专栏进击的君君的前端之路

CSS常见样式(二)

19720
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

3K80

扫码关注云+社区

领取腾讯云代金券