css圣杯布局和双飞翼布局
圣杯布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>实现圣杯布局</h1><div id="header">Header</div><div id="content"><!-- 这里注意要将middle即中间区域放在左边和右边前面，因为我们的需求是中间一栏最先加载、渲染出来，根据执行顺序所以把middle放在第一个。 --><div id="center" class="column">center</div><div id="left" class="column">left</div><div id="right" class="column">right</div></div><div id="footer">footer</div>
</body>
<style>body {/* 设置最小宽度，防止挤压使中间内容消失 */ min-width: 500px;}div {text-align: center;}#header {background-color: #f1f1f1;}#content {padding-left: 300px;padding-right: 200px;}#content #center {background-color: #ddd;width: 100%;}#content #left {position: relative;width: 300px;background-color: orange;margin-left: -100%;right: 300px;}#content #right {background-color: green;width: 200px;margin-right: -200px;}
/* 这里当我们给每中间内容的每一栏都加上float:left之后容易导致高度塌陷，解决办法 clear: both; overflow:hidden */#content .column {float: left;}#footer {/* 清除浮动 */clear: both;background-color: #f1f1f1;}
</style>
</html><!-- 问题:高度塌陷 是什么意思
怎么解决:
overflow:hidden 【这里触发了BFC——BFC是一个独立的布局环境，可以理解为一个看不见的盒子，盒子内部的物品摆放不受外界环境影响。】
clear:both -->
<!-- 圣杯布局：将中间的三个模块实现成为三栏布局，中间栏自适应，两侧内容宽度固定，三栏布局，中间一栏最先加载，渲染出来
1.由于中间栏自使用，所以宽度设置为100%，
2.左右两栏使用 float:left 同时使用clear:both 解决高度塌陷的问题
3.将左右两栏的盒子移动上去 【这里通过相对定位我们可以看到是一行挤不下换成了两行，所以想左移动相应的位置就行了向左移动的位置是100%+盒子的宽度】
4.注意设置设置最小宽度，防止挤压使中间内容消失
圣杯布局就是将基本布局之后使用向左浮动，middle栏留出两边位置，然后使用相对定位将左右两栏通过margin-left定位到相应位置。
-->
双飞翼布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双飞翼布局</title>
</head><body><div class="container"><div class="wrapper"><div class="center">mid</div></div><div class="left">left</div><div class="right">right</div></div>
</body>
<style>.container {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></html>总结
相同点：
都实现了三栏布局，都使用了浮动
不同点：
圣杯布局是通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。
双飞翼布局是通过float+margin，没有使用相对定位。
对于两列的处理：
圣杯布局是给外部容器加padding，通过相对定位把两边定位出来。
双飞翼布局是靠在中间这层外面套一层div加padding将内容挤出来中间。
相关文章：
css圣杯布局和双飞翼布局
圣杯布局 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, in…...
机器学习笔记 - 深入研究spaCy库及其使用技巧
一、简述 spaCy 是一个用于 Python 中高级自然语言处理的开源库。它专为生产用途而设计，这意味着它不仅功能强大，而且快速高效。spaCy 在学术界和工业界广泛用于各种 NLP 任务，例如标记化、词性标注、命名实体识别等。 安装，这里使用阿里的源。 pip install spacy…...
网站强制跳转至国家反诈中心该怎么办？怎么处理？如何解封？
在互联网环境中，网站安全是非常重要的。然而，在实际操作过程中，不少网站可能因内容问题、技术安全漏洞等原因被迫下线甚至跳转至国家反诈骗中心网址。面对这一严峻问题，我们如何有效解决，让网站恢复运行并解除强制跳转…...
2023年10月4日
服务器 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//实例化一个服务器server new QTcpServer(this);//此时，服务器已经成功进入监听状态&…...
MacBook 录制电脑内部声音
MacBook 录制电脑内部声音 老妈喜欢跳广场舞，现在广场舞音频下载都收费了！没办法，只能自己录歌了，外录有杂音大家也都知道，所以就只能采用内录的方式然后再用 Audition 调整一下音量大小。 一、（前置条件&a…...
mysql主从复制和读写分离
在企业应用中，成熟的业务通常数据量都比较大 单台MySQL在安全性、高可用性和高并发方面都无法满足实际的需求 配置多台主从数据库服务器以实现读写分离 所以要做主从服务器，保证安全性 做一写一读服务器，将提升性能 1、什么是读写分离 …...
【计算机网络】网络层-数据平面（学习笔记）
一、网络层提供的服务 1、虚电路服务 通讯前建立虚电路，发送前认为选择路径，所以分组沿着同一条虚电路。 特点：带宽固定 2、数据报服务 数据可能沿着不同路径传输 3、网络层的两个层面 数据层面：源主机到目标主机 控制层面&…...
el-collapse 嵌套中 el-checkbox作为标题，选中复选框与el-tree联动
<el-drawertitle"应用授权":visible.sync"menuDrawer"><el-collapse accordion style"padding: 15px"><el-collapse-item v-for"item in platList"><template slot"title"><el-checkbox v-model…...
Ubuntu中还换源 sudo apt-get update更新失败
sudo apt-get update更新失败 1 前提2 编辑3 换源 1 前提 浏览器可以访问百度 如下文章： VMware 中虚拟机没网 2 编辑 输入如下命令，进入换源文件： sudo gedit /etc/apt/sources.list 3 换源 中科大 deb http://mirrors.ustc.edu.cn/ub…...
flutter播放rtmp视频
安装 dependencies:fijkplayer: ^0.11.0使用方法 import package:fijkplayer/fijkplayer.dart; import package:flutter/material.dart;class RtmpPlayerPage extends StatefulWidget {const RtmpPlayerPage({super.key});overrideState<RtmpPlayerPage> createState()…...
stm32 - 中断
stm32 - 中断 概念中断向量表NVIC 嵌套中断向量控制器优先级 中断EXTI概念基本结构例子- 对射式红外传感器计次例子 - 旋转编码器 概念 stm32 支持的中断资源（都属于外设） EXTITIMADCUSARtSPII2C stm32支持的中断 内核中断 外设中断 中断通道与优先级 一…...
【洛谷 P1216】[USACO1.5] [IOI1994]数字三角形 Number Triangles 题解（动态规划）
[USACO1.5] [IOI1994]数字三角形 Number Triangles 题目描述 观察下面的数字金字塔。 写一个程序来查找从最高点到底部任意处结束的路径，使路径经过数字的和最大。每一步可以走到左下方的点也可以到达右下方的点。 在上面的样例中，从 7 → 3 → 8 →…...
十四天学会C++之第四天（面向对象编程基础）
类和对象是什么？ 在C中，类是一种用户定义的数据类型，它可以包含数据成员（也就是属性）和成员函数（也就是方法）。类是一种模板或蓝图，用于创建具体的对象。 对象是类的实例ÿ…...
复习Day09：哈希表part02:141.环形链表、142. 环形链表II、454.四数相加II、383赎金信
之前的blog：https://blog.csdn.net/weixin_43303286/article/details/131765317 我用的方法是在leetcode再过一遍例题，明显会的就复制粘贴，之前没写出来就重写，然后从拓展题目中找题目来写。辅以Labuladong的文章看。然后刷题不用…...
Internet通过TCP/IP协议可以实现多个网络的无缝连接
Internet通过TCP/IP（Transmission Control Protocol/Internet Protocol，传输控制协议/互联网协议）协议实现多个网络的无缝连接。 TCP/IP是Internet的基础通信协议套件，它定义了数据如何在不同网络之间传输和路由，使得…...
互联网Java工程师面试题·Dubbo 篇·第二弹
目录 18、Dubbo 用到哪些设计模式？ 19、Dubbo 配置文件是如何加载到 Spring 中的？ 20、Dubbo SPI 和 Java SPI 区别？ 21、Dubbo 支持分布式事务吗？ 22、Dubbo 可以对结果进行缓存吗？ 23、服务上线怎么兼容旧版本&…...
（c语言）经典bug
#include<stdio.h> //经典bug int main() { int i 0; int arr[10] {1,2,3,4,5,6,7,8,9,10}; for (i 0; i < 12; i) //越界访问 { arr[i] 0; printf("hehe\n"); } return 0; } 注：输出结果为死循…...
用于工业物联网和自动化的 Apache Kafka、KSQL 和 Apache PLC4
由于单一系统和专有协议，数据集成和处理是工业物联网（IIoT，又名工业 4.0 或自动化工业）中的巨大挑战。Apache Kafka、其生态系统（Kafka Connect、KSQL）和 Apache PLC4X 是以可扩展、可靠和灵活的方式实现端…...
1.1.1开发基础-硬件-万用表
1 万用表 万用表又叫多用表、三用表、复用表，是一种多功能、多量程的测量仪表，一般万用表可测量直流电流、直流电压、交流电压、电阻和音频电平等，有的还可以测交流电流、电容量、电感量及半导体的一些参数，是最常用、最简单的测试设备。 万用表是一种多功能多量程的便…...
Mysql内置函数、复合查询和内外连笔记
目录 一、mysql内置函数 1.1.日期函数 1.2.字符串函数 1.3.数学函数 1.4.其他函数 二、复合查询 2.2 自连接 2.3 子查询 2.3.1单行自查询 2.3.2 多行子查询 2.3.3 多列子查询 2.3.4在from子句中使用子查询 2.3.5合并查询 三、表的内连和外连 3.1内连接 3.2外连接…...
基于本地LLM与多智能体架构的DD游戏引擎实现与优化
1. 项目概述：一个本地化、多智能体驱动的龙与地下城游戏引擎最近在折腾一个挺有意思的项目，叫 TD-LLM-DND。简单来说，这是一个让你能在自己电脑上，用本地运行的大语言模型（LLM）来跑一场“龙与地下城”&…...
Perplexity Nature检索实战手册：9类典型查询失败场景+对应Prompt工程模板（含IEEE/ACS/Nature交叉验证结果）
更多请点击： https://intelliparadigm.com 第一章：Perplexity Nature文章检索实战手册导论 Perplexity Nature 是面向科研人员与技术从业者设计的智能学术检索增强工具，它融合了语义理解、引用图谱分析与跨源文献聚合能力，专为高…...
终极NDS游戏资源编辑器Tinke：免费开源工具轻松提取和修改任天堂DS游戏文件
终极NDS游戏资源编辑器Tinke：免费开源工具轻松提取和修改任天堂DS游戏文件 【免费下载链接】tinke Viewer and editor for files of NDS games 项目地址: https://gitcode.com/gh_mirrors/ti/tinke 你是否曾经好奇任天堂DS游戏内部包含了哪些精美的图像、动听…...
移动端数据抓取实战：基于Capacitor插件实现自动化采集
1. 项目概述：一个为移动端设计的“数据抓手”最近在做一个移动端的数据采集项目，需要从一些应用里提取特定的信息。直接写原生代码去解析页面结构，不仅开发周期长，而且一旦目标应用的界面更新，我们的代码就得跟着改&am…...
Perplexity无法解析Springer LaTeX公式？2024.06最新MathJax兼容补丁+3类数学文献精准摘要生成术
更多请点击： https://intelliparadigm.com 第一章：Perplexity解析Springer文献的底层机制与失效归因 Perplexity 作为衡量语言模型预测能力的关键指标，在学术文献解析场景中常被误用为“质量代理”，尤其在处理 Springer 出版集团…...
工业电气安全：电弧闪爆防护与Rittal机柜解决方案
1. 电弧闪爆现象的本质解析电弧闪爆（Arc Flash）是工业电气系统中最具破坏性的安全隐患之一。作为一名在电力行业工作15年的安全工程师，我亲眼见证过多次由电弧闪爆引发的严重事故。最令人震惊的是2008年某化工厂的案例：一位电工在…...
开源机械爪智能增强：计算机视觉与运动规划赋予抓取超能力
1. 项目概述：当“机械爪”遇上“超能力”如果你玩过抓娃娃机，或者关注过工业自动化，对机械爪（Claw）这个概念一定不陌生。它的核心任务简单直接：识别、定位、抓取。但现实往往骨感——面对形状不规则、材质光…...
终极UE4SS游戏Mod开发指南：从零开始掌握虚幻引擎脚本系统
终极UE4SS游戏Mod开发指南：从零开始掌握虚幻引擎脚本系统 【免费下载链接】RE-UE4SS Injectable LUA scripting system, SDK generator, live property editor and other dumping utilities for UE4/5 games 项目地址: https://gitcode.com/gh_mirrors/re/RE-UE4S…...
Docker 部署 XiuXianGame 文字修仙游戏：极空间 NAS 上随时挂机刷资源
前言 挂机刷资源，躺平修成仙。 这类文字修仙游戏，说白了就是佛系养成为主，不用时刻盯着，挂着就行。但问题是——大多数要么得在本地电脑跑，要么依赖第三方平台，体验受限。把这套东西跑在自己的 NAS 上&am…...
黄仁勋CMU演讲：取代你的是会AI的人，所有人同一起跑线，奔跑吧
老黄又当博士了。这是他的第7个荣誉博士学位，而且英特尔CEO陈立武亲自为其授袍。卡内基梅隆大学（CMU）最新一届毕业典礼上，黄仁勋向5800多名毕业生发表演讲。面对AI浪潮的冲击，所有人都在焦虑、都在担心会不会被AI取代&…...