几种常见的CSS三栏布局？介绍下粘性布局（sticky）？自适应布局？左边宽度固定，右边自适应？两种以上方式实现已知或者未知宽度的垂直水平居中？

2024-01-07 04:28
文章标签 常见 布局 介绍 css 方式 两种 frontend 几种 固定 三栏 适应 居中 垂直 水平 已知 未知 宽度 左边 右边 粘性 sticky

本文主要是介绍几种常见的CSS三栏布局？介绍下粘性布局（sticky）？自适应布局？左边宽度固定，右边自适应？两种以上方式实现已知或者未知宽度的垂直水平居中？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

几种常见的CSS三栏布局

流体布局

效果：
请添加图片描述

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流体布局</title><style>.left {float: left;width: 100px;height: 200px;background: lightcoral;}.right {float: right;width: 200px;height: 200px;background: lightblue;}.main {margin-left: 120px;margin-right: 220px;height: 200px;background: lightgreen;}</style>
</head><body><div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div>
</body></html>

圣杯布局

效果：
请添加图片描述

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圣杯布局</title><style>.container {margin-left: 120px;margin-right: 220px;}.main {float: left;width: 100%;height: 300px;background: lightgreen;}.left {position: relative;left: -120px;float: left;height: 300px;width: 100px;margin-left: -100%;background: lightcoral;}.right {position: relative;right: -220px;float: right;height: 300px;width: 200px;margin-left: -200px;background: lightblue;}</style>
</head><body><div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>
</body></html>

双飞翼布局

效果：
请添加图片描述

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双飞翼布局</title><style>.content {float: left;width: 100%;}.main {height: 200px;margin-left: 110px;margin-right: 220px;background: lightgreen;}.main::after {content: '';display: block;font-size: 0;height: 0;zoom: 1;clear: both;}.left {float: left;height: 200px;width: 100px;margin-left: -100%;background: lightcoral;}.right {float: right;height: 200px;width: 200px;margin-left: -200px;background: lightblue;}</style>
</head><body><div class="content"><div class="main"></div></div><div class="left"></div><div class="right"></div>
</body></html>

灵活布局（Flexbox）

效果：
请添加图片描述
代码参考：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>灵活布局（Flexbox）</title><style>.container {display: flex;}.left, .right {flex: 0 0 200px; /* 不放大，不缩小，初始宽度 200px */}.left {background-color: lightblue;}.right {background-color: lightcoral;}.center {flex: 1; /* 自适应宽度 */background-color: lightgreen;}</style>
</head>
<body><div class="container"><div class="left">Left</div><div class="center">Center</div><div class="right">Right</div></div>
</body>
</html>

灵活布局：使用flex布局，设置display: flex，左右两栏flex: 0 0 200px，中间自适应。

定位布局

效果：
请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位布局 </title><style>.container {position: relative;width: 100%;}.left, .right {position: absolute;width: 200px;top: 0;bottom: 0;}.left {left: 0;background-color: lightblue;}.right {right: 0;background-color: lightcoral;}.center {margin: 0 200px; /* 左右两栏宽度之和 */background-color: lightgreen;}</style>
</head>
<body><div class="container"><div class="left">Left</div><div class="right">Right</div><div class="center">Center</div></div>
</body>
</html>

定位布局：使用position属性，左右两栏设置为position: absolute，中间自适应。

Grid 布局

效果：
请添加图片描述
代码参考：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid 布局</title><style>.container {display: grid;grid-template-columns: 200px auto 200px;}.left {background-color: lightblue;}.right {background-color: lightcoral;}.center {background-color: lightgreen;}</style>
</head>
<body><div class="container"><div class="left">Left</div><div class="center">Center</div><div class="right">Right</div></div>
</body>
</html>

使用 CSS Grid 属性，定义网格布局，可以轻松实现三栏布局。

介绍下粘性布局（sticky）

粘性布局（sticky）是 CSS3 中新增的一种定位方式。当一个元素被设置为 sticky 时，它会在页面滚动时保持在特定位置，直到滚动到指定的偏移值之后，此时元素将变成固定定位（fixed），并保持在屏幕上的位置。这样可以确保用户在浏览网页时能够轻松访问重要的导航或其他相关信息，提供更好的用户体验。

这里有几个要点需要注意：

  1. 文档流和定位影响：与 fixed 定位不同，sticky 元素并不脱离文档流，仍然保留元素原本在文档中的位置。

  2. 相对偏移计算：元素的固定位置是相对于离它最近的具有滚动功能的祖先元素计算的。如果没有滚动的祖先元素，那么偏移量将相对于视口（viewport）进行计算。

  3. 滚动过程中的行为：当页面滚动时，sticky 元素会固定在特定位置，直到滚动到指定的偏移值，然后它将变成固定定位。

自适应布局

自适应布局是指网页能够根据不同设备的屏幕尺寸和分辨率进行自动调整，以确保页面内容完整显示，而不会因为屏幕尺寸过小而导致出现滚动条。

在两栏布局中，常见的一种做法是将左侧栏设置为固定宽度，而右侧栏则会自动填充剩余空间。这可以通过以下方式实现：

  1. 将左侧栏使用浮动或者绝对定位固定在左侧，然后给右侧栏添加边距使其自动填充空间。
  2. 使用一个包裹性的 <div> 标签将两栏包裹起来，然后给右侧栏添加负边距来创建块级格式化上下文（BFC），从而实现两栏自动排列。
  3. 使用 CSS 弹性盒子布局（Flexbox），可以简单地实现一栏固定宽度，一栏自动填充的两栏布局。

以上是一些常见的自适应布局方法，但具体实现还需根据实际情况选择合适的技术方案。总的来说，自适应布局可以让网页内容能够自动适应不同屏幕，从而给用户带来更好的阅读体验。

左边宽度固定，右边自适应

左边固定宽度，右边自适应的布局可以通过使用 float 或者 Flexbox 来实现。左侧元素设置固定宽度，而右侧元素则会根据剩余空间自动调整宽度。

HTML结构如下：

<div class="outer"><div class="left">固定宽度</div><div class="right">自适应宽度</div>
</div>

在外层 div（类名为 outer）中，有两个子 div，类名分别为 left 和 right。其中 left 为固定宽度，而 right 为自适应宽度。

以下是几种常见的实现方法：

方法1: 使用浮动

效果：
请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.outer {width: 100%;height: 200px;background-color: yellow;}.left {width: 200px;height: 200px;background-color: red;float: left;}.right {height: 200px;background-color: blue;overflow: hidden; /* 清除浮动 */}</style>
</head>
<body><div class="outer"><div class="left">固定宽度</div><div class="right">自适应宽度</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"><style>.outer {width: 100%;height: 200px;background-color: yellow;position: relative;}.left {width: 200px;height: 200px;background-color: red;position: absolute;}.right {height: 200px;background-color: blue;margin-left: 200px;}</style>
</head>
<body><div class="outer"><div class="left">固定宽度</div><div class="right">自适应宽度</div></div>
</body>
</html>

方法3: 使用绝对定位和 margin

效果：
请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.outer {width: 100%;height: 200px;background-color: yellow;position: relative;}.left {width: 200px;height: 200px;background-color: red;position: absolute;}.right {height: 200px;background-color: blue;margin-left: 200px;}</style>
</head>
<body><div class="outer"><div class="left">固定宽度</div><div class="right">自适应宽度</div></div>
</body>
</html>

方法4: 使用Flexbox布局

效果：
请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.outer {width: 100%;height: 200px;background-color: yellow;display: flex;}.left {width: 200px;height: 200px;background-color: red;}.right {height: 200px;background-color: blue;flex: 1;}</style>
</head>
<body><div class="outer"><div class="left">固定宽度</div><div class="right">自适应宽度</div></div>
</body>
</html>

这四种方法的优缺点：

方法1: 使用浮动

  • 优点： 浏览器兼容性较好，适用于较为古老的浏览器。
  • 缺点： 需要清除浮动以避免影响其他元素布局，可能导致一些意外的显示问题。

方法2: 使用绝对定位

  • 优点： 可以精确地控制元素的位置，适合一些特定的布局需求。
  • 缺点： 如果页面结构发生变化，需要手动调整绝对定位元素的位置，不够灵活。

方法3: 使用绝对定位和 margin

  • 优点： 具有一定的灵活性，可以在保持左侧固定宽度的同时让右侧自适应。
  • 缺点： 当页面结构复杂时，可能需要更多的调整来确保布局的稳定性。

方法4: 使用Flexbox布局

  • 优点： 简单、直观，能够轻松实现左右布局，且支持响应式设计。
  • 缺点： 对于一些较老版本的浏览器支持不够完善，需要额外处理兼容问题。

两种以上方式实现已知或者未知宽度的垂直水平居中

已知宽度的垂直水平居中、未知宽度的垂直水平居中（使用 Flexbox 布局）和未知宽度的垂直水平居中（使用表格布局）

效果：
请添加图片描述

以下HTML 文件，包括已知宽度和未知宽度的垂直水平居中效果的示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 已知宽度的垂直水平居中 */.wrapper {position: relative;width: 200px; /* 假设容器宽度为 200px */height: 200px; /* 假设容器高度为 200px */background-color: #f0f0f0;}.box {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin-top: -50px; /* 将上边距设为自身高度的一半 */margin-left: -50px; /* 将左边距设为自身宽度的一半 */background-color: #ff0000;text-align: center;line-height: 100px;}/* 未知宽度的垂直水平居中 - Flexbox 布局 */.wrapper-flex {display: flex;justify-content: center;align-items: center;width: 300px; /* 假设容器宽度为 300px */height: 200px; /* 假设容器高度为 200px */background-color: #f0f0f0;}.box-flex {background-color: #00ff00;padding: 10px;}/* 未知宽度的垂直水平居中 - 表格布局 */.wrapper-table {display: table;width: 100%;height: 200px; /* 假设容器高度为 200px */background-color: #f0f0f0;}.box-table {display: table-cell;text-align: center;vertical-align: middle;background-color: #0000ff;}</style><title>垂直水平居中示例</title>
</head>
<body><h2>已知宽度的垂直水平居中</h2><div class="wrapper"><div class="box">已知宽度</div></div><h2>未知宽度的垂直水平居中 - Flexbox 布局</h2><div class="wrapper-flex"><div class="box-flex">未知宽度 - Flexbox</div></div><h2>未知宽度的垂直水平居中 - 表格布局</h2><div class="wrapper-table"><div class="box-table">未知宽度 - 表格布局</div></div>
</body>
</html>

说出 space-between 和 space-around 的区别？

space-between 和 space-around 是 Flexbox 布局中的两种对齐方式，它们的区别在于间距的分配方式。

space-between：这个值会使得项目沿着主轴均匀分布，并且首个元素位于起始位置，末尾元素位于结束位置，中间的元素则平均分布在主轴上，没有额外的空白间隔。

space-around：该值会使得项目沿着主轴均匀分布，并且在每个项目周围均匀留有相等的空白空间，使得项目之间和项目与容器边界之间的空白空间大小相等。

这两种对齐方式的主要区别在于 space-around 在每个项目周围均匀留有空白空间，而 space-between 则只在首尾没有额外的空白空间。

持续学习总结记录中，回顾一下上面的内容：
几种常见的CSS三栏布局？介绍下粘性布局（sticky）？自适应布局？左边宽度固定，右边自适应？两种以上方式实现已知或者未知宽度的垂直水平居中？

这篇关于几种常见的CSS三栏布局？介绍下粘性布局（sticky）？自适应布局？左边宽度固定，右边自适应？两种以上方式实现已知或者未知宽度的垂直水平居中？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/578716。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
内核启动时减少log的方式

内核启动时减少log的方式

内核引导选项 内核引导选项大体上可以分为两类：一类与设备无关、另一类与设备有关。与设备有关的引导选项多如牛毛，需要你自己阅读内核中的相应驱动程序源码以获取其能够接受的引导选项。比如，如果你想知道可以向 AHA1542 SCSI 驱动程序传递哪些引导选项，那么就查看 drivers/scsi/aha1542.c 文件，一般在前面 100 行注释里就可以找到所接受的引导选项说明。大多数选项是通过"_
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2