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外连接…...
【VUE·疑难问题】定义 table 中每行的高度（使用 element-UI）
一、如何定义 table 中每一行的 height ？ 1.table例子 <!-- 二、table --><div style"overflow: hidden;display: block;height: 68vh;width: 100%;"><el-table stripe show-header style"width: 100%" :data"tableData&q…...
【重拾C语言】四、循环程序设计（后判断条件循环、先判断条件循环、多重循环；典例：计算平均成绩、打印素数、百钱百鸡问题）
目录 前言 四、循环程序设计 4.1 计算平均成绩——循环程序 4.1.1 后判断条件的循环 a. 语法 b. 典例 4.1.2 先判断条件的循环 a. 语法 b. 典例 4.1.3 for语句 a. 语法 b. 典例 4.2 计算全班每人平均成绩—多重循环 4.2.1 打印100以内素数 4.2.2 百钱百…...
Linux 安装 Gitlab
1、到官网下载Gitlab安装包 (如果是Centos，到el目录下载)。下载GitLab 2、安装依赖软件 sudo yum install -y policycoreutils-python3、安装gitlab sudo rpm -i gitlab-jh-16.3.4-jh.0.el7.x86_64.rpm 4、修改 gitlab.rb sudo vi /etc/gitlab/gitlab.rb 5、g…...
stm32-SPI协议
SPI协议详解（图文并茂超详细） SPI通讯协议 于是我们想有没有更好一点的串行通讯方式；相比较于UART，SPI的工作方式略有不同。 SPI是一个同步的数据总线，也就是说它是用单独的数据线和一个单独的时钟信号来保证发送端和…...
想要精通算法和SQL的成长之路 - 并查集的运用和案例（省份数量）
想要精通算法和SQL的成长之路 - 并查集的运用 前言一. 并查集的使用和模板1.1 初始化1.2 find 查找函数1.3 union 合并集合1.4 connected 判断相连性1.5 完整代码 二. 运用案例 - 省份数量 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 并查集的使用和模板 先说一下并查集…...
解决内网拉取企微会话存档代理问题的一种办法
问题：客户的服务都是内网的，不能直接访问外网；访问外网的话需要走kong网关才能出去。 会话存档官网说可以使用socket5、http方式拉取会话存档；我这边尝试了直接使用kong网关的ip和端口配置进去，是访问不了的 我后面就…...
二十二，加上各种贴图
使用pbr的各种贴图，albedo,金属度，ao,法线，粗糙度，可以更好的控制各个片元 1，先加上纹理坐标 texCoords->push_back(osg::Vec2(xSegment, ySegment)); geom->setVertexAttribArray(3, texCoords, osg::Array::BI…...
新版校园跑腿独立版小程序源码 多校版本，多模块，适合跑腿，外卖，表白，二手，快递等校园服务
最新校园跑腿小程序源码 多校版本，多模块，适合跑腿，外卖，表白，二手，快递等校园服务 此版本为独立版本，不需要** 直接放入就可以 需要自己准备好后台的服务器，已认证的小程序…...
SpringBoot banner 样式 自动生成
目录 SpringBoot banner 样式 自动生成 图案网站： 1.第一步创建banner.txt文件 2.访问网站Ascii艺术字实现个性化Spring Boot启动banner图案，轻松修改更换banner.txt文件内容，收集了丰富的banner艺术字和图，并且支持中文banner下…...
回收站里面删除的照片如何恢复？
现在拍照已经成为人们生活中的一种方式，照片为我们保留了许多珍贵而美好的回忆。大家通常会把重要的照片保存在硬盘里，但当不小心把照片移入回收站并彻底删除时，情况就有点糟糕了。那么，回收站里删除的照片还有办法恢复吗…...
网站模板上传到那个目录/网站建设技术
session在web开发中是一个非常重要的概念，这个概念很抽象，很难定义，也是最让人迷惑的一个名词，也是最多被滥用的名字之一，在不同的场合，session一次的含义也很不相同。这里只探讨HTTP Session。为了说明问题…...
深圳流感疫情最新消息今天/关键词优化方法有什么步骤
前言 很裸的一个 拓扑排序题 传送门 : 思路 一开始考虑了一下感觉可以直接走拓扑序, 不过需要使用 stackstackstack 来替换队列,并且还需要一开始逆序求 入度为0的点,后面只过了一半的样例,还是我太年轻了 其实对于字典序的输出,我们可以使用 小根堆小根堆小根堆 来很好的…...
商丘三合一网站建设/网店推广方案范文
截包-放入回放，在参数内容后加入内容提交，如果在返回包可以显示输入的内容，则可以加入标签使其被解析 转载于:https://www.cnblogs.com/domokma/p/11250483.html...
做网站开发学什么/成功的网络营销案例
#include<stdio.h> int max_flow(int n,int s,int t,int cap[][],int flow[][]) { int pre[n],que[n],d[n],p,q,t,i,j; for(i0;i<n;i) for(j0;j<n;j) flow[i][j]0; while(true) { for(i0;i<n;i) pre[i]-1; pre[s]s; d[s]INF;...
荥阳市网站建设/免费的行情软件网站下载
GDB 是GNU开源组织发布的一个强大的UNIX下的程序调试工具。或许，各位比较喜欢那种图形界面方式的，像VC、BCB等IDE的调试，但如果你是在 UNIX平台下做软件，你会发现GDB这个调试工具有比VC、BCB的图形化调试器更强大的功能。所谓“寸…...
wordpress安装后只有英文版/南京百度seo代理
一、概述 java程序在执行过程中所发生异常事件可分为两类 Error：Java虚拟机无法解决的严重问题。如：JVM内部错误，资源耗尽等严重情况，比如：StackOverflowError，一般不编写针对性的代码进行处理 public s…...