三栏布局——面试/笔试题

目录

  • 三栏布局(两端指定宽度，中间自适应)
  • 三栏布局(平均分布)

三栏布局(两端指定宽度，中间自适应)

只介绍简单的写法，圣杯布局之类的比较复杂，实际上越简单越好，所以复杂的就不介绍了

  1. flex布局
<!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{
            display: flex;
        }
        .left {
            width: 200px;
            background-color: orange;
        }

        .right {
            width: 200px;
            background-color: green;
        }

        .main {
            /* 中间栏占据所有剩余空间 */
            flex: 1;
            border: 5px solid #000;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">左侧</div>
        <div class="main">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

在这里插入图片描述
2. grid布局

<!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{
            display: grid;
            grid-template-columns: 200px auto 200px;
            /* 设置列间距为5px */
            column-gap: 5px;
        }
        .left {
            background-color: orange;
        }

        .right {
            background-color: green;
        }

        .main {
            /* margin值大于左右侧栏的宽度即可 */
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">左侧</div>
        <div class="main">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

在这里插入图片描述

  1. 浮动：左侧左浮动，右侧右浮动，左侧栏和右侧栏都脱离了文档/标准流，所以中间栏会顶上去，然后设置左右的magin避免左侧和右侧的栏将中间的栏遮挡
<!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>
        /* .outer{
            columns: 3;
        } */
        .left{
            float: left;
            width: 200px;
            background-color: orange;
        }
        .right{
            float: right;
            width: 200px;
            background-color: green;
        }
        .main{
            /* margin值大于左右侧栏的宽度即可 */
            margin-left: 210px;
            margin-right: 210px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="main">中间</div>
</body>

</html>

在这里插入图片描述
4. 浮动+BFC

<!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>
        .left {
            float: left;
            width: 200px;
            background-color: orange;
        }

        .right {
            float: right;
            width: 200px;
            background-color: green;
        }

        .main {
            /* margin值大于左右侧栏的宽度即可 */
            border: 2px solid #000;
            /* 开启BFC，中间栏会围绕浮动的盒子，而不是被其遮盖。overflow: hidden;只是开启BFC的一种方式，还可以用其他语句开启，如display: flex; */
            overflow: hidden;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="main">中间</div>
</body>
</html>

在这里插入图片描述
5. table布局

<!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{
            display: table;
            /* 注意table布局中父容器设置宽度100%，否则父容器的宽度是内容撑开的宽度 */
            width: 100%;
        }
        .left {
            display: table-cell;
            width: 200px;
            background-color: orange;
        }

        .right {
            display: table-cell;
            width: 200px;
            background-color: green;
        }

        .main {
            /* 中间栏占据所有剩余空间 */
            display: table-cell;
            border: 5px solid #000;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">左侧</div>
        <div class="main">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

父容器未设置width:100%的情况，父容器的宽度是内容撑开的宽度
在这里插入图片描述
设置后
在这里插入图片描述
6. 定位：左右2栏均设置绝对定位，左栏left:0;，右栏right:0;，左栏和右栏都脱离了文档/标准流，所以中间栏会顶上去，然后设置左右的magin避免左侧和右侧的栏将中间的栏遮挡

<!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{
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            width: 200px;
            background-color: orange;
        }

        .right {
            position: absolute;
            right: 0;
            width: 200px;
            background-color: green;
        }

        .main {
            /* margin值大于左右侧栏的宽度即可 */
            margin: 0 205px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- <div class="container"> -->
        <div class="left">左侧</div>
        <div class="right">右侧</div>
        <div class="main">中间</div>
    <!-- </div> -->
</body>

</html>

在这里插入图片描述

三栏布局(平均分布)

  1. flex布局
<!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>
        .outer {
            display: flex;
        }

        .item {
            flex: 1;
            /* 或如下一行，如果没有设置换行，那么只要width的百分比大于33.33%即可，因为超出部分会平均地压缩，最后的效果还是一样的3栏均分 */
            /* width: 33.33%; */
            /* 或 */
            /* flex: 0 0 33.33%; */
            background: #eee;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="item">1/3</div>
        <div class="item">1/3</div>
        <div class="item">1/3</div>
    </div>
</body>
</html>

在这里插入图片描述
2. grid布局

<!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>
        .outer {
            display: grid;
            /* 设置3列，fr表示份数 */
            grid-template-columns: 1fr 1fr 1fr;
            gap: 5px;
        }
        .item {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="item">1/3</div>
        <div class="item">1/3</div>
        <div class="item">1/3</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>
        .item {
            /* 设置border-box是为了不让边框占额外的宽度，否则会把盒子挤到另一行 */
            box-sizing: border-box;
            /* 设置边框时为了能看清这是3列 */
            border: 1px solid #000;
            float: left;
            width: 33.3%;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="item">1/3</div>
    <div class="item">1/3</div>
    <div class="item">1/3</div>
</body>

</html>

在这里插入图片描述
4. 父容器设置columns: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>
        .outer{
            columns: 3;
        }
        .item {
            /* 这个宽度的百分比是相对于每一栏的宽度，每栏之间默认有一些间距 */
            width: 100%;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="item">1/3</div>
        <div class="item">1/3</div>
        <div class="item">1/3</div>
    </div>

</body>

</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/506142.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vultr ubuntu 服务器远程桌面安装及连接

vultr ubuntu 服务器远程桌面安装及连接

一. 概述 vultr 上开启一个linux服务器&#xff0c;都是以终端形式给出的&#xff0c;默认不带 ui 桌面的&#xff0c;那其实对于想使用服务器上浏览器时的情形不是很好。那有没有方法在远程服务器安装桌面&#xff0c;然后原程使用呢&#xff1f;至少ubuntu的服务器是有的&am…
阅读更多...
HTTP/1.1、HTTP/2、HTTP/3 演变（计算机网络）

HTTP/1.1、HTTP/2、HTTP/3 演变（计算机网络）

HTTP/1.1 相比 HTTP/1.0 提高了什么性能&#xff1f; HTTP/1.1 相比 HTTP/1.0 性能上的改进&#xff1a; 使用长连接改善了短连接造成的性能开销。支持管道网络传输&#xff0c;只要第一个请求发出去了&#xff0c;不必等其回来&#xff0c;就可以发第二个请求出去&#xff0c…
阅读更多...
数据库----数据类型正确选择

数据库----数据类型正确选择

mysql支持的数据类型&#xff1a; 数值型&#xff0c;如INT&#xff0c;BIGINT&#xff0c;FLOAT和decimal 日期和时间类型&#xff0c;如DATE,TIME和TIMESTAMP等 字符串类型&#xff0c;如VARCHAR,CHAR和BLOB 空间数据类型&#xff0c;如GEOMETRY&#xff0c;POINT和POLYGON J…
阅读更多...
解决创建springboot项目时，无法选中java8的问题

解决创建springboot项目时，无法选中java8的问题

主要原因是springboot3.0.0以上版本需要jdk17. 问题描述&#xff1a; 解决办法&#xff1a; 在Server url上点击齿轮&#xff0c;把http://start.springboot.io/更改为https://start.aliyun.com/ 效果如下
阅读更多...
速通汇编（三）寄存器及汇编mul、div指令

速通汇编（三）寄存器及汇编mul、div指令

一&#xff0c;寄存器及标志 AH&ALAX(accumulator)&#xff1a;累加寄存器BH&BLBX(base)&#xff1a;基址寄存器CH&CLCX(count)&#xff1a;计数寄存器DH&DLDX(data)&#xff1a;数据寄存器SP(Stack Pointer)&#xff1a;堆栈指针寄存器BP(Base Pointer)&#…
阅读更多...
C#调用FreeSpire.Office读取word数据的基本用法

C#调用FreeSpire.Office读取word数据的基本用法

FreeSpire.Office是Spire.Office的免费版本&#xff0c;后者支持全面、复杂的office文件操作功能&#xff0c;包括文件格式转换、文档操作、文档打印等&#xff0c;详细介绍见下图及参考文献1。本文学习FreeSpire.Office的基本用法并用其获取word文档的基本信息。   新建Win…
阅读更多...
python统计分析——双样本均值比较

python统计分析——双样本均值比较

参考资料&#xff1a;python统计分析【托马斯】 1、配对样本t检验 在进行两组数据之间的比较时&#xff0c;有两种情况必须区分开。在第一种情况中&#xff0c;同一对象在不同时候的两个记录值进行相互比较。例如&#xff0c;用学生们进入初中时的身高和他们一年后的身高&…
阅读更多...
学习transformer模型-Positional Encoding位置编码的简明介绍

学习transformer模型-Positional Encoding位置编码的简明介绍

今天介绍transformer模型的positional encoding 位置编码 背景 位置编码用于为序列中的每个标记或单词提供一个相对位置。在阅读句子时&#xff0c;每个单词都依赖于其周围的单词。例如&#xff0c;有些单词在不同的上下文中具有不同的含义&#xff0c;因此模型应该能够理解这…
阅读更多...
鸿蒙OS开发实例：【ArkTS 实现MQTT协议】

鸿蒙OS开发实例：【ArkTS 实现MQTT协议】

介绍 MQTT是物联网中的一种协议&#xff0c;在HarmonyOS API9平台&#xff0c;解决方案以C库移植为实现方案。 遥遥领先的平台&#xff0c;使用MQTT怎能不遥遥领先呢&#xff01; 新年快乐&#xff0c;本篇将带领你手把手实现HarmonyOS ArkTS语言的MQTT协议。 准备 阅读…
阅读更多...
LLM--提示词Propmt的概念、作用及如何设计提示词

LLM--提示词Propmt的概念、作用及如何设计提示词

文章目录 1. 什么是提示词&#xff1f;2. 提示词的作用3. 如何设计提示词&#xff1f;3.1. 提供详细的信息3.2. 指定角色3.3. 使用分隔符和特殊符号3.4. 提供示例3.5. 少量示例的思维链&#xff08;COT&#xff09;模型3.6. 思维树&#xff08;TOT&#xff09;模型3.7. 自洽性 …
阅读更多...
【4】单链表（有虚拟头节点）

【4】单链表（有虚拟头节点）

【4】单链表&#xff08;有虚拟头节点&#xff09; 1、虚拟头节点2、构造方法3、node(int index) 返回索引位置的节点4、添加5、删除6、ArrayList 复杂度分析(1) 复杂度分析(2) 数组的随机访问(3) 动态数组 add(E element) 复杂度分析(4) 动态数组的缩容(5) 复杂度震荡 7、单链…
阅读更多...
【Linux 10】环境变量

【Linux 10】环境变量

文章目录 &#x1f308; Ⅰ 命令行参数⭐ 1. main 函数的参数⭐ 2. main 函数参数的意义⭐ 3. 查看 argv 数组的内容⭐ 4. 命令行参数结论⭐ 5. 为什么要有命令行参数⭐ 6. 命令行参数传递由谁执行 &#x1f308; Ⅱ 环境变量基本概念⭐ 1. 常见环境变量 &#x1f308; Ⅲ 查看…
阅读更多...
LeetCode_876(链表的中间结点)

LeetCode_876(链表的中间结点)

//双指针//时间复杂度O(n) 空间复杂度O(1)public ListNode middleNode(ListNode head) {ListNode slowhead,fast head;while (fast!null && fast.next!null){slow slow.next;fast fast.next.next;}return slow;} 1->2->3->4->5->null 快指针移动两个…
阅读更多...
9款免费云服务器，最长永久免费使用

9款免费云服务器，最长永久免费使用

随着云计算技术的快速发展&#xff0c;越来越多的企业和个人开始选择使用云服务器。云服务器提供了灵活、可扩展且易于管理的资源&#xff0c;使得用户可以根据需求随时调整计算能力。本文将分享9款免费云服务器&#xff0c;其中最长可永久免费使用&#xff0c;为用户提供了更多…
阅读更多...
flutter官方案例context_menus

flutter官方案例context_menus

1&#xff1a;根据项目中的案例进行部署 2&#xff1a;运行查看有什么用&#xff0c;可不可以直接复制粘贴 案例地址 https://github.com/flutter/samples/tree/main/context_menus案例展示方法 直接把这个文件夹中的文件复制到lib文件夹中 3&#xff0c;19&#xff0c;4的fl…
阅读更多...
HTML常用的图片标签和超链接标签

HTML常用的图片标签和超链接标签

目录 一.常用的图片标签和超链接标签&#xff1a; 1.超链接标签&#xff1a; 前言: 超链接的使用&#xff1a; target属性: 1)鼠标样式&#xff1a; 2)颜色及下划线: 总结: 2.图片标签&#xff1a; 前言: img的使用: 设置图片&#xff1a; 1.设置宽度和高度: 2.HTM…
阅读更多...
内网渗透之黄金票据的制作

内网渗透之黄金票据的制作

1、黄金票据是用来留后门的也叫做未知权限&#xff0c;前提条件是你已经拿到了域控的最高权限 一、开始之前我们先来了解一下kerberos Kerberos是一种由MIT&#xff08;麻省理工大学&#xff09;提出的一种网络身份验证协议。它旨在通过使用密钥加密技术为客户端/服务器应…
阅读更多...
基于muduo网络库实现的集群聊天服务器

基于muduo网络库实现的集群聊天服务器

目录 项目内容开发环境安装说明技术介绍项目目录数据库设计项目介绍启动服务器启动客户端注册账号登录成功一对一聊天业务创建群聊业务加入群聊业务群聊业务添加好友业务离线消息存储业务 特殊说明 &#xff01;&#xff01;&#xff01;项目是照着腾讯课堂施磊老师的视频学习&…
阅读更多...
【QT+QGIS跨平台编译】054：【exiv2lib_int+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

【QT+QGIS跨平台编译】054：【exiv2lib_int+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

点击查看专栏目录 文章目录 一、exiv2lib_int介绍二、文件下载三、文件分析四、pro文件五、编译实践一、exiv2lib_int介绍 exiv2lib_int是 exiv2 这个开源的图像元数据库中的一个组件。 Exiv2是一个开源的C++库，用于读取、编辑和写入图片和视频文件的元数据。它可以处理各种类…
阅读更多...
01-XML-04XML处理

01-XML-04XML处理

XML处理 DOM DOM解析要求解析器将整个XML文件全部加载到内存中&#xff0c;生成一个Document对象。 优点&#xff1a;元素和元素之间保留结构&#xff0c;关系&#xff0c;可以针对元素进行增删改查操作。 缺点&#xff1a;如果XML文件过大&#xff0c;可能会导致内存溢出。SA…
阅读更多...
最新文章

Copyright @ 2022~2023