前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >前端课程——布局

前端课程——布局

作者头像
Dreamy.TZK
发布于 2020-04-09 14:35:07
4790
发布于 2020-04-09 14:35:07
举报
文章被收录于专栏：小康的自留地小康的自留地

布局

第一步拆解页面布局：按照垂直方向进行划分 第二步拆解页面布局：按照水平方向进行分化 第三步拆解页面局部：垂直方向继续划分

布局名称

说明

块布局

用来布置文件。块布局包含以文档为中心的功能。

行内布局

用来布置文本

表格布局

用来布置表格

定位布局

用来对那些与其他元素五交互的定位元素进行布置

弹性盒子布局

用来布置那些可以顺利调整大小的复杂页面。

网格布局

用来布置那些与一个固定网格相关的元素.

居中布局

  1. 垂直方向
  • vertical-align 前提：为父级元素设置display /* 1. 将父级元素改为 display:table-cell 2. 为父级元素设置 vertical-align：middle */
  • 定位(相对定位) 1. 为父级开启相对定位 2. 为子级元素开启绝对定位 3. 设置属性 top:50% transform:translateX(一半的值) 也可以使用margin-top 真实代码
    1. 第一种 <!-- 第一种方式 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a { height: 600px; width: 700px; border: 1px solid gray; /* 为父级设置vertical-align属性即可 */ display: table-cell; vertical-align: middle; } .b { width: 300px; height: 350px; background-color: lightcoral; } </style> </head> <body> <div class="a"> <div class="b"></div> </div> </body> </html>
    2. 第二种 <!-- 第二种方式 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a { height: 600px; width: 700px; border: 1px solid gray; position: relative; } .b { width: 300px; height: 300px; background-color: lightcoral; position: absolute; top: 50%; /* 此div的高度的50% */ transform: translateY(-150px); } </style> </head> <body> <div class="a"> <div class="b"></div> </div> </body> </html>
  1. 水平方向
  • 外边距（margin: 0 auto）
  • 如果当前容器元素或后代元素中包含文本内容，该文本内容居中显示 text-align属性(可继承)原本的作用就是实现文本居中显示
  • 定位（一般使用相对定位，因为不脱离文档流） 只有在父级容器开启定位后，才是相对于父级进行定位 /* a)将 left 偏移量设置为 50% b)将子级元素向左移动(子级元素宽度的1/2) */ transform: translateX(-150px) - CSS3新增属性 margin-left: -150px

真实代码：

  1. 第一种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a { height: 300px; width: 400px; border: 1px solid gray; } .b { width: 200px; height: 150px; background-color: lightcoral; margin: 0 auto; } </style> </head> <body> <div class="a"> <div class="b"></div> </div> </body> </html>
  2. 第二种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a { height: 300px; width: 400px; border: 1px solid gray; /* 为父级设置text-align属性 - 子级必须是行内块级元素 - 因为此属性具有遗传性，因此会将子元素中的元素也居中 */ text-align: center; } .b { width: 200px; height: 150px; background-color: lightcoral; display: inline-block; /* 解决子级元素居中问题 */ text-align: left; } </style> </head> <body> <div class="a"> <div class="b">测试文字</div> </div> </body> </html>
  3. 第三种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a { height: 300px; width: 400px; border: 1px solid gray; position: relative; } .b { width: 200px; height: 150px; background-color: lightcoral; left: 50%; /* 父级元素必须开启定位 此值为此元素宽度的一半（50%） */ transform: translateX(100px); } </style> </head> <body> <div class="a"> <div class="b">测试文字</div> </div> </body> </html>
  1. 同时垂直水平居中:
  1. 第一种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a { height: 300px; width: 400px; border: 1px solid gray; position: relative; } .b { width: 200px; height: 150px; background-color: lightcoral; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div class="a"> <div class="b"></div> </div> </body> </html>
  2. 第二种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a { height: 300px; width: 400px; border: 1px solid gray; display: table-cell; vertical-align: middle; text-align: center; } .b { width: 200px; height: 150px; background-color: lightcoral; margin: 0 auto; } </style> </head> <body> <div class="a"> <div class="b"></div> </div> </body> </html>
  3. 第三种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .a { height: 300px; width: 400px; border: 1px solid gray; display: table-cell; vertical-align: middle; text-align: center; } .b { width: 200px; height: 150px; background-color: lightcoral; display: inline-block; text-align: left; } </style> </head> <body> <div class="a"> <div class="b"></div> </div> </body> </html>

多列布局

两列布局

一列定宽，一列自适应 关键在于自适应列

  1. 第一种 这种方式存在的问题：如果改变左边div的宽度，则需要同时改变右边div的左外边距(margin-left)。 解决方案 ：可以将margin-left修改为overflow:hidden （但依然存在问题：内容溢出隐藏） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 600px; height: 400px; border: 1px solid black; margin: 0 auto; } .left { width: 200px; height: 100%; background-color: lightcoral; /* 为左边div设置浮动 */ float: left; } .right { height: 100%; background-color: lightskyblue; /* 可以将外边距设置为 overflow:hidden */ margin-left: 200px; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
  2. 第二种 table-cell属性说明
    • 设置定宽 则自适应
    • 不设置则自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 600px; height: 400px; border: 1px solid black; margin: 0 auto; display: table; table-layout: fixed; } .left,.right{ display: table-cell; } .left { width: 200px; height: 100%; background-color: lightcoral; } .right { height: 100%; background-color: lightskyblue; margin-left: 200px; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>

三列布局

两列定宽，一列自适应

等分布局

  1. 通过浮动实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ width: 800px; height: 400px; border: 1px solid gray; margin: 0 auto; } .column{ width: 25%; height: 100%; float: left; box-sizing: border-box; } .box1{ background-color: lightcoral; } .box2{ background-color: lightgreen; } .box3{ background-color: lightskyblue; } .box4{ background-color: lightpink; } </style> </head> <body> <div class="container"> <div class="column box1"></div> <div class="column box2"></div> <div class="column box3"></div> <div class="column box4"></div> </div> </body> </html>
  2. 通过表格实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 800px; height: 400px; border: 1px solid gray; margin: 0 auto; display: table; table-layout: fixed; } .column { height: 100%; box-sizing: border-box; display: table-cell; } .box1 { background-color: lightcoral; } .box2 { background-color: lightgreen; } .box3 { background-color: lightskyblue; } .box4 { background-color: lightpink; } </style> </head> <body> <div class="container"> <div class="column box1"></div> <div class="column box2"></div> <div class="column box3"></div> <div class="column box4"></div> </div> </body> </html>
  3. 通过无序列表实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { margin: 0 auto; padding: 0; border: 1px solid gray; width: 800px; height: 400px; } .column { list-style: none; float: left; width: 25%; height: 100%; } </style> </head> <body> <ul class="container"> <li class="column">示例样式</li> <li class="column">示例样式</li> <li class="column">示例样式</li> <li class="column">示例样式</li> </ul> </body> </html>

等高布局

  1. 通过表格实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 800px; height: 400px; border: 1px solid gray; margin: 0 auto; display: table; table-layout: fixed; } .left, .right { /* 表格中的单元格默认时等高的 */ display: table-cell; } .left { width: 300px; background-color: lightcoral; } .right { width: 300px; background-color: lightskyblue; } </style> </head> <body> <div class="container"> <div class="column left"></div> <div class="column right"></div> </div> </body> </html>

全屏布局

没有滚动条，布局根据窗口大小改变。

  • 宽度问题 直接设置成100%即可
  • 高度问题
    • 为body设置height:100%,为子级元素设置height:100%
    • vh单位，即设置height:100vh即可

实现方案1

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;

            overflow: hidden;
        }

        .top,
        .content,
        .bottom {
            position: absolute;
        }

        .top {
            width: 100%;
            height: 50px;
            background-color: lightcoral;

            left: 0;
            top: 0;
            right: 0;
        }

        .content {
            width: 100%;
            /* height: 100px; */
            background-color: lightgreen;

            left: 0;
            right: 0;
            top: 50px;
            bottom: 50px;
        }

        .left,
        .right {
            float: left;
            position: relative;
        }

        .left {
            width: 300px;
            height: 100%;
            background-color: lightskyblue;

            z-index: 9999;
        }

        .right {
            width: 100%;
            height: 100%;
            background-color: mediumorchid;
            margin-left: -300px;
            z-index: 0;
        }

        .bottom {
            width: 100%;
            height: 50px;
            background-color: lightgray;

            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <!-- 全屏布局容器 -->
    <div class="container">
        <!-- 顶部栏 -->
        <div class="top"></div>
        <!-- 主体: 菜单+内容区 -->
        <div class="content">
            <!-- 菜单 -->
            <div class="left"></div>
            <!-- 内容区 -->
            <div class="right"></div>
        </div>
        <!-- 底部栏 -->
        <div class="bottom"></div>
    </div>
</body>

</html>

实现方案2

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化边距 */
        body,
        p {
            margin: 0;
        }
        /* 初始化高度 */
        body,
        html,
        .parent {
            height: 100%;
        }
        /* 将上部 中部 下部 水平铺满 */
        .top,
        .middle,
        .bottom {
            position: absolute;
            left: 0;
            right: 0;
        }
        /* 顶部始终在上 */
        .top {
            top: 0;
            height: 50px;
        }
        /* 底部始终在下 */
        .bottom {
            bottom: 0;
            height: 50px;
        }
        /* 中部位置 */
        .middle {
            top: 50px;
            bottom: 50px;
        }

        .left,
        .right {
            position: absolute;
            top: 0;
            bottom: 0;
        }
        /* 左 */
        .left {
            width: 100px;
        }
        /* 右 */
        .right {
            left: 120px;
            right: 0;
            overflow: auto;
        }

        .right-in {
            height: 1000px;
        }
    </style>
</head>

<body>
    <div class="parent" id="parent" style="background-color: lightgrey;">
        <div class="top" style="background-color: lightblue;">
            <p>top</p>
        </div>
        <div class="middle" style="background-color: pink;">
            <div class="left" style="background-color: orange;">
                <p>left</p>
            </div>
            <div class="right" style="background-color: lightsalmon;">
                <div class="right-in">
                    <p>right</p>
                </div>
            </div>
        </div>
        <div class="bottom" style="background-color: lightgreen;">
            <p>bottom</p>
        </div>
    </div>
</body>

</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-02-26，如有侵权请联系 cloudcommunity@tencent.com 删除
html

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

html
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 布局
    • 居中布局
      • 多列布局
        • 两列布局
          • 三列布局
            • 等分布局
              • 等高布局
                • 全屏布局
                相关产品与服务
                容器服务
                腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
                产品介绍产品文档
                618年中盛惠，限时抢
                领券

                腾讯云开发者

                扫码关注腾讯云开发者

                扫码关注腾讯云开发者

                领取腾讯云代金券

                热门产品

                热门推荐

                更多推荐

                Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

                深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

                腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

                Copyright © 2013 - 2024 Tencent Cloud.

                All Rights Reserved. 腾讯云 版权所有

                登录 后参与评论