两栏布局、三栏布局、水平垂直居中

embedded/2025/2/3 7:39:54/

文章目录

  • 1 两栏布局
    • 1.1 浮动 + margin
    • 1.2 浮动 + BFC
    • 1.3 flex布局
    • 1.4 左绝父相 + margin
    • 1.5 右绝父相 + 方向定位
  • 2 三栏布局
    • 2.1 子绝父相 + margin
    • 2.2 flex布局
    • 2.3 浮动 + margin
    • 2.4 圣杯布局
    • 2.5 双飞翼布局
  • 3 水平垂直居中
    • 3.1 绝对定位 + translate
    • 3.2 绝对定位 + margin
    • 3.3 绝对定位 + margin
    • 3.4 flex布局

1 两栏布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。

1.1 浮动 + margin

利用浮动，将左边元素宽度设置为200px，并且设置向左浮动，将右边元素的margin-left设置为200px，宽度设置为auto，撑满整个父元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局1</title><style>css">     .left {float: left;width: 200px;height: 100px;background: tomato;}.right {margin-left: 200px;width: auto;height: 100px;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

1.2 浮动 + BFC

利用浮动，左侧元素设置固定大小，并且设置向左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局2</title><style>css">.left {float: left;width: 100px;height: 200px;background: tomato;}.right {overflow: hidden;height: 200px;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

1.3 flex布局

利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex: 1;。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局3</title><style>css">.outer {display: flex;height: 100px;}.left {width: 200px;background: tomato;}.right {flex: 1;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

1.4 左绝父相 + margin

利用绝对定位，将父级元素设置为相对定位。左边元素设置为绝对定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局4</title><style>css">.outer {position: relative;height: 100px;}.left {position: absolute;width: 200px;height: 100px;background: tomato;}.right {margin-left: 200px;height: 100px;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

1.5 右绝父相 + 方向定位

利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局5</title><style>css">.outer {position: relative;height: 100px;}.left {width: 200px;height: 100px;background: tomato;}.right {position: absolute;top: 0;right: 0;bottom: 0;left: 200px;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

2 三栏布局

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。

2.1 子绝父相 + margin

利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局1</title><style>css">.outer {position: relative;height: 100px;}.left {position: absolute;width: 100px;height: 100px;background: tomato;}.right {position: absolute;top: 0;right: 0;width: 200px;height: 100px;background: gold;}.center {margin-left: 100px;margin-right: 200px;height: 100px;background: lightgreen;}</style>
</head><body><div class="outer"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body></html>

2.2 flex布局

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex: 1;。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局2</title><style>css">.outer {display: flex;height: 100px;}.left {width: 100px;background: tomato;}.right {width: 100px;background: gold;}.center {flex: 1;background: lightgreen;}</style>
</head><body><div class="outer"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body></html>

2.3 浮动 + margin

利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局3</title><style>css">.outer {height: 100px;}.left {float: left;width: 100px;height: 100px;background: tomato;}.right {float: right;width: 200px;height: 100px;background: gold;}.center {height: 100px;margin-left: 100px;margin-right: 200px;background: lightgreen;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div><div class="center"></div></div>
</body></html>

2.4 圣杯布局

利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局4--圣杯布局</title><style>css">.outer {height: 100px;padding-left: 100px;padding-right: 200px;}.left {float: left;margin-left: -100%;position: relative;left: -100px;width: 100px;height: 100px;background: tomato;}.right {float: right;margin-left: -200px;position: relative;left: 200px;width: 200px;height: 100px;background: gold;}.center {float: left;width: 100%;height: 100px;background: lightgreen;}</style>
</head><body><div class="outer"><div class="center"></div><div class="left"></div><div class="right"></div></div>
</body></html>

2.5 双飞翼布局

双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局5--双飞翼布局</title><style>css">.outer {height: 100px;}.left {float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;}.right {float: left;margin-left: -200px;width: 200px;height: 100px;background: gold;}.wrapper {float: left;width: 100%;height: 100px;background: lightgreen;}.center {margin-left: 100px;margin-right: 200px;height: 100px;}</style>
</head><body><div class="outer"><div class="wrapper"><div class="center"></div></div><div class="left"></div><div class="right"></div></div>
</body></html>

3 水平垂直居中

3.1 绝对定位 + translate

利用绝对定位，先将元素的左上角通过top: 50%;和left: 50%;定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中1</title><style>css">.parent {position: relative;width: 200px;height: 200px;background: gold;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;background: tomato;}</style>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>

3.2 绝对定位 + margin

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中2</title><style>css">.parent {position: relative;width: 200px;height: 200px;background: gold;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height: 100px;background: tomato;}</style>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>

3.3 绝对定位 + margin

利用绝对定位，先将元素的左上角通过top: 50%;和left: 50%;定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中3</title><style>css">.parent {position: relative;width: 200px;height: 200px;background: gold;}.child {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin-top: -50px;margin-left: -50px;background: tomato;}</style>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>

3.4 flex布局

使用flex布局，通过align-items: center;和justify-content: center;设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中4</title><style>css">.parent {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: gold;}.child {width: 50px;height: 50px;background: tomato;}</style>
</head><body><div class="parent"><div class="child"></div><div class="child"></div></div>
</body></html>

http://www.ppmy.cn/embedded/159125.html

相关文章

FreeRTOS学习 --- 时间管理（相对延时和绝对延时）

FreeRTOS学习 --- 时间管理（相对延时和绝对延时）

延时函数介绍 相对延时&#xff1a;指每次延时都是从执行函数vTaskDelay()开始&#xff0c;直到延时指定的时间结束 绝对延时&#xff1a;指将整个任务的运行周期看成一个整体&#xff0c;适用于需要按照一定频率运行的任务 (1)为任务主体&#xff0c;也就是任务真正要做的工作…
阅读更多...
Maven全解析：第二个项目 IDEA 整合 Maven

Maven全解析：第二个项目 IDEA 整合 Maven

创建Maven 项目目录(注意以下所有引用包路径&#xff0c;设置成自己的包路径)&#xff1a; src/main/java ----存放项目的 .java 文件、 src/main/resoutces ---存放项目资源文件&#xff0c;如 Spring&#xff0c;MyBatis 配置文件 src/test/java ---存放所有测试 .java…
阅读更多...
MATLAB中extractAfter函数用法

MATLAB中extractAfter函数用法

目录 语法 说明 示例 选择子字符串后的文本 使用模式提取路径后的文件名 选择指定位置后的子字符串 选择字符向量中位置之后的文本 extractAfter函数的用法是提取指定位置后的子字符串。 语法 newStr extractAfter(str,pat) newStr extractAfter(str,pos) 说明 new…
阅读更多...
【自学嵌入式（6）天气时钟：软硬件准备、串口模块开发】

【自学嵌入式（6）天气时钟：软硬件准备、串口模块开发】

天气时钟&#xff1a;软硬件准备、串口模块开发 软硬件准备接线及模块划分ESP8266开发板引脚图软件准备 串口模块编写串口介绍Serial库介绍 近期跟着网上一些教学视频&#xff0c;编写了一个天气时钟&#xff0c;本篇及往后数篇都将围绕天气时钟的制作过程展开。本文先解决硬件…
阅读更多...
【网络】传输层协议TCP(重点)

【网络】传输层协议TCP(重点)

文章目录 1. TCP协议段格式2. 详解TCP2.1 4位首部长度2.2 32位序号与32位确认序号&#xff08;确认应答机制&#xff09;2.3 超时重传机制2.4 连接管理机制(3次握手、4次挥手 3个标志位)2.5 16位窗口大小&#xff08;流量控制&#xff09;2.6 滑动窗口2.7 3个标志位 16位紧急…
阅读更多...
性能测试丨分布式性能监控系统 SkyWalking

性能测试丨分布式性能监控系统 SkyWalking

软件测试领域&#xff0c;分布式系统的复杂性不断增加&#xff0c;如何保证应用程序的高可用性与高性能&#xff0c;这是每一个软件测试工程师所面临的重大挑战。幸运的是&#xff0c;现在有了一些强大的工具来帮助我们应对这些挑战&#xff0c;其中之一便是Apache SkyWalking。…
阅读更多...
【蓝桥杯】43692.青蛙跳杯子

【蓝桥杯】43692.青蛙跳杯子

题目描述 X 星球的流行宠物是青蛙&#xff0c;一般有两种颜色&#xff1a;白色和黑色。 X 星球的居民喜欢把它们放在一排茶杯里&#xff0c;这样可以观察它们跳来跳去。 如下图&#xff0c;有一排杯子&#xff0c;左边的一个是空着的&#xff0c;右边的杯子&#xff0c;每个…
阅读更多...
一文大白话讲清楚webpack基本使用——17——Tree Shaking

一文大白话讲清楚webpack基本使用——17——Tree Shaking

文章目录 一文大白话讲清楚webpack基本使用——17——Tree Shaking1. 建议按文章顺序从头看&#xff0c;一看到底&#xff0c;豁然开朗2. 啥叫Tree Shaking3. 什么是死代码&#xff0c;怎么来的3. Tree Shaking的流程3.1 标记3.2 利用Terser摇起来 4. 具体使用方式4.1 适用前提…
阅读更多...
最新文章

Copyright @ 2022~2023