【基础类】—三栏页面布局的方案和优缺点

一、假设高度已知,中间宽度自适应,三栏(列)布局的方案有哪些?

float浮动、absolute绝对定位、flex弹性盒子、table表格布局、grid网格布局

  1. 浮动 float
<style>* {margin: 0;padding: 0;}.container {width: 100%;}.float .left {width: 200px;height: 200px;background-color: red;float: left;}.float .right {width: 200px;height: 200px;background-color: blue;float: right;}.float .center {height: 200px;background-color: green;margin: 0 200px;}</style><!-- 浮动布局 --><div class="container float"><div class="left"></div><div class="right"></div><div class="center">浮动布局实现三栏布局</div></div>

实现总结:
1-1 通过左右浮动,实现左右两栏的占位
1-2 通过内容margin, 实现中间内容宽度自适应
1-3 right的元素必须放在center元素的前面,因为需要有.right元素通过右浮动

  1. 绝对定位 absolute
<style>* {margin: 0;padding: 0;}.container {width: 100%;}/* 绝对定位布局 */.absolute {position: relative;}.absolute > div {position: absolute;}.absolute .left {width: 200px;height: 200px;background-color: red;left: 0;}.absolute .center {left: 200px;right: 200px;height: 200px;background-color: green;}.absolute .right {width: 200px;height: 200px;background-color: blue;right: 0;}</style><!-- 绝对定位布局 --><div class="container absolute"><div class="left"></div><div class="center">绝对定位布局实现三栏布局</div><div class="right"></div></div>

实现总结:
2-1. 通过绝对定位 + 定位两侧 (left: 0 和 right:0), 实现两侧占位
2-2. 通过绝对定位 + 减去两侧的宽度(left:200px.right:200px),实现中间宽度自适应

  1. flex弹性布局
<style>* {margin: 0;padding: 0;}.container {width: 100%;}/* 弹性盒子 */.flexbox {display: flex;}.flexbox .left {width: 200px;height: 200px;background-color: red;}.flexbox .center {flex: 1;height: 200px;background-color: green;}.flexbox .right {width: 200px;height: 200px;background-color: blue;}</style><!-- 弹性盒子布局 --><div class="container flexbox"><div class="left"></div><div class="center">弹性盒子实现三栏布局</div><div class="right"></div></div>

实现总结:
3-1. 通过给父元素设置弹性盒子布局 display: flex,给左右两侧设置宽度,实现两侧占位
3-2. 通过给center元素设置剩余宽度: flex:1, 实现宽度自适应

  1. table 表格布局
<style>
/* table布局 */
.table {display: table;width: 100%;height: 200px;}.table > div {display: table-cell;}.table .left {width: 200px;background-color: red;}.table .center {background-color: green;}.table .right {width: 200px;background-color: blue;}
</style>
<!-- table布局 --><div class="container flexbox"><div class="left"></div><div class="center">table实现三栏布局</div><div class="right"></div></div>

实现总结:
4-1 给父元素设置为表格布局display: table,并设置高度 height: 200px;
4-2 给子元素设置为表格单元格布局display: table-cell,可以继承表格的高度,同时自动计算宽度
4-3 给左右两侧设置宽度,中间宽度会自动计算实现自适应

  1. grid布局
<style>
/* 网格布局 */.grid {/* 网格布局 */display: grid;/* 网格宽度 */width: 100%;/* 网格布局的高度 */grid-template-rows: 200px;/* 网格布局的三栏的宽度 *//* 1fr 表示剩余的空间平分 === flex:1 */grid-template-columns: 200px 1fr 200px;grid-template-columns: 200px auto 200px;}.grid .left {background-color: red;}.grid .center {background-color: green;}.grid .right {background-color: blue;}
</style>
<!-- 网格布局 --><div class="container grid"><div class="left"></div><div class="center">网格布局实现三栏布局</div><div class="right"></div></div>

实现总结:
5-1:给父元素设置网格布局和宽度,display: grid; width: 100%;
5-2:通过父元素设置子元素的高度, grid-template-rows: 200px;
5-3:通过父元素设置三栏或多栏的宽度,使用下列任意方式
grid-template-columns: 200px 1fr 200px;
grid-template-columns: 200px auto 200px;

在这里插入图片描述

二、这五种方案分别有什么优缺点?

  1. float 浮动
    缺点:浮动之后,是脱离文档流的,需要清除浮动,如果处理不好会导致页面错位
    优点:兼容性强
  2. absolute绝对定位
    缺点:因为绝对定位已经脱离文档流了,导致里面的子元素也是脱离文档流的,导致这个方案的可使用性较差
    优点:快捷
  3. flex弹性盒子
    缺点:较老的浏览器不支持,比如IE6-IE9等
    优点:完美的解决方案,没有float和绝对定位的相关的问题
  4. table表格布局
    缺点:对SEO不够友好,不利于搜索引擎收录;当三栏中任意一栏的高度超出,其他两栏的高度也会改变
    优点:兼容性强,支持IE8
  5. grid网格布局
    缺点:兼容性弱
    优点:网格布局可以做复杂的布局,同时代码量较少

三、把高度已知改为未知,需要左右两侧的高度根据中间内容撑开,哪些方案还可以适用,哪些方案不可以适用

在这里插入图片描述

  1. 弹性盒子、表格、网格布局 不改动代码情况下,支持高度自适应
  2. 浮动、绝对定位,原有代码不支持高度自适应

四、这个五种方案的兼容性如何,写实际业务代码,最优的布局方案是哪个

根据每个方案的使用场景的范围, 技术的老旧、以及兼容性强弱来排序
弹性布局 > 网格布局 > 浮动 > 表格 > 绝对定位

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

内网穿透-————SSH远程连接树莓派

前言 文章目录 前言内网穿透实现公网SSH远程连接树莓派1. 在树莓派上安装[cpolar客户端](https://www.cpolar.com/)2. 在树莓派浏览器中输入本地9200端口3. 在公共互联网的电脑的命令行界面输入命令 内网穿透实现公网SSH远程连接树莓派 随着科技的进步和信息技术的发展&#x…

异步javaScript

在本文中&#xff0c;我们将解释什么是异步编程&#xff0c;为什么我们需要它&#xff0c;并简要讨论 JavaScript 历史上异步函数是怎样被实现的。 预备知识&#xff1a;基本的计算机素养&#xff0c;以及对 JavaScript 基础知识的一定了解&#xff0c;包括函数和事件处理程序…

20天学会rust(三)没有object的rust怎么面向对象?

面向对象我们都很熟悉&#xff0c;可以说它是一种软件开发最重要的编程范式之一&#xff0c;它将程序中的数据和操作数据的方法组织成对象。面向对象有几个重要特性&#xff1a; 封装、继承和多态&#xff0c;基于这些特性带来了在可重用性、可维护性、扩展性、可靠性的优点。 …

浅析pom文件标签功能

问题&#xff1a; 对maven项目的pom文件结构和标签不是很清晰 学习笔记&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project><parent><!-- 父项目信息 --></parent><!-- 声明项目描述符遵循哪一个POM模型版…

自然语言处理从入门到应用——LangChain:记忆(Memory)-[基础知识]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 默认情况下&#xff0c;链&#xff08;Chains&#xff09;和代理&#xff08;Agents&#xff09;是无状态的&#xff0c;这意味着它们将每个传入的查询视为独立的&#xff08;底层的LLM和聊天模型也是如此&#xff09;…

用Rust实现23种设计模式之原型模式

在 Rust 中&#xff0c;原型模式可以通过实现 Clone trait 来实现。原型模式是一种创建型设计模式&#xff0c;它允许通过复制现有对象来创建新对象&#xff0c;而无需显式地使用构造函数。下面是一个使用 Rust 实现原型模式的示例&#xff0c;带有详细的代码注释和说明&#x…

shell 入门练习小记

一、hello world #!/bin/bash echo "Hello World !"#! 为约定的标记&#xff0c;告诉系统这个脚本需要什么解释器执行&#xff0c;后接绝对路径 /bin/bash 表示期望 bash去解析并运行shell echo用于向窗口输出文本 chmod x ./test.sh #给脚本赋执行权限 ./test.sh …

Centos7克隆快速复制多台虚拟机|互通互联

背景&#xff1a;有时候&#xff0c;我们在用虚拟机的时候会用到多个进行使用。重新安装会花费大量的时间&#xff0c;此时&#xff0c;我们可以通过vmware虚拟机自带的功能快速克隆出完全相同的系统。 前提&#xff1a;被克隆的虚拟机系统要处于关闭状态 步骤&#xff1a;…

Android入门教程||Android 架构||Android 应用程序组件

Android 架构 Android 操作系统是一个软件组件的栈&#xff0c;在架构图中它大致可以分为五个部分和四个主要层。 Linux内核 在所有层的最底下是 Linux - 包括大约115个补丁的 Linux 3.6。它提供了基本的系统功能&#xff0c;比如进程管理&#xff0c;内存管理&#xff0c;设…

ChatGPT FAQ指南

问:chatgpt 国内不开放注册吗? OpenAI不允许大陆和香港用户注册访问 openai可以的,chatGPT不行 以下国家IP不支持使用 中国(包含港澳台) 俄罗斯 乌克兰 阿富汗 白俄罗斯 委内瑞拉 伊朗 埃及 问:ChatGPT和GPT-3什么关系? GPT-3是OpenAI推出的AI大语言模型 ChatGPT是在G…

spring eurake中使用IP注册

在开发spring cloud的时候遇到一个很奇葩的问题&#xff0c;就是服务向spring eureka中注册实例的时候使用的是机器名&#xff0c;然后出现localhost、xxx.xx等这样的内容&#xff0c;如下图&#xff1a; eureka.instance.perferIpAddresstrue 我不知道这朋友用的什么spring c…

H263压缩码流如何分解为一个一个单元并查询到其宽高?

H263码流尺寸规格有限&#xff0c;只有以下几种&#xff1a; H263码流有四个分层&#xff1a; 1、图像层 2、块组 3、宏块 4、块 下面分别介绍&#xff1a; 具体介绍如下&#xff0c;5.1.3中红色框选部分就是压缩码流的宽高指示&#xff1a; 图像层 上面就是H263的图像层&am…

【回眸】备考PMP考点汇总 四(距离考试还有12天)

目录 前言 【回眸】备考PMP考点汇总 四&#xff08;距离考试还有12天&#xff09; 3、敏捷阶段框架 4、Scrum敏捷实践 5、敏捷交付框架 6、推测阶段 7、用户故事卡片 8、用户故事优先级 9、风险调整代办事项列表 10、用户故事估算 11&#xff1a;Scrum敏捷实践 12、…

使用docker部署一个jar项目

简介: 通过docker镜像, docker可以在服务器上运行包含项目所需运行环境的docker容器, 在线仓库里有很多各个软件公司官方发布的镜像, 或者第三方的镜像. 如果我们需要使用docker把我们的应用程序打包成镜像, 别的机器上只要安装了docker, 就可以直接运行镜像, 而不需要再安装应…

拆分PDBQT文件并将其转换为PDB格式

拆分PDBQT文件转为PDB格式 1. vina_split拆分PDBQT文件 假设你用AutoDock Vina做了对接&#xff0c;那么所有预测的结合构象都被放入一个多构象 PDBQT 文件中&#xff0c;如果需要拆分后进行可视化分析&#xff0c;那么Vina官方自带了vina_split来进行拆分。下面是vina_split…

⛳ Java 枚举

目录 ⛳ 枚举**&#x1f3a8; 例子&#xff1a;使用常量表示线程状态**&#x1f3ed; 例子&#xff1a;使用枚举表示线程状态&#x1f4e2; 例子&#xff1a;订单状态的枚举 ⛳ 枚举 类的对象只有有限个&#xff0c;确定的。 使用场景&#xff1a; 星期&#xff1a; Monday(星…

CentOS 安装 Jenkins

本文目录 1. 安装 JDK2. 获取 Jenkins 安装包3. 将安装包上传到服务器4. 修改 Jenkins 配置5. 启动 Jenkins6. 打开浏览器访问7. 获取并输入 admin 账户密码8. 跳过插件安装9. 添加管理员账户 1. 安装 JDK Jenkins 需要依赖 JDK&#xff0c;所以先安装 JDK1.8。输入以下命令&a…

鸿蒙终于不套壳了?纯血 HarmonyOS NEXT 即将到来

对于移动开发者来说&#xff0c;特别是 Android 开发而言&#xff0c;鸿蒙是不是套壳 Android 一直是一个「热门」话题&#xff0c;类似的问题一直是知乎的「热点流量」之一&#xff0c;特别是每次鸿蒙发布新版本之后&#xff0c;都会有「套娃式」的问题出现。 例如最近 HDC 刚…

Tomcat 编程式启动 JMX 监控

通过这篇文章&#xff0c;我们可以了解到&#xff0c;利用 JMX 技术可以方便获取 Tomcat 监控情况。但是我们采用自研的框架而非大家常见的 SpringBoot&#xff0c;于是就不能方便地通过设置配置开启 Tomcat 的 JMX&#xff0c;——尽管我们也是基于 Tomcat 的 Web 容器&#x…

解决npm ERR! code ERESOLVE -npm ERR! ERESOLVE could not resolve

当使用一份vue源码开发项目时&#xff0c;npm install 报错了 npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: vue-admin-template4.4.0npm ERR! Found: webpack4.46.0npm ERR! node_modules/webpacknpm ERR! webpack"^4.0…