圣杯布局和双飞翼布局的区别
相同点和不同点
两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,并且中间部分在HTML代码中要写在前边,这样它就会被优先加载渲染。
主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容,在给这个中间的div设置margin-left和margin-right 。
- 两种布局方式都是把主列放在文档流最前面,使主列优先加载。
- 两种布局方式在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局。
- 两种布局方式的不同之处在于如何处理中间主列的位置:
- 圣杯布局是利用父容器的左、右内边距+两个列的相对定位;
- 双飞翼布局是把主列嵌套在一个新的父级块中并利用主列的左、右外边距进行布局调整。
效果图:
圣杯布局代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>11.圣杯布局</title><style>* {margin: 0;padding: 0;}.header {background-color: cyan;height: 10vh;text-align: center;}.container {background-color: gray;overflow: hidden;padding: 0 200px 0 300px;}.container div {float: left;height: 80vh;}.middle {width: 100%;background-color: red;text-align: center;}.left {width: 300px;background-color: #ff4d4f;margin-left: -100%;position: relative;left: -300px;}.right {width: 200px;background-color: #2e6da4;margin-left: -200px;position: relative;right: -200px;}.footer {background-color: green;height: 10vh;text-align: center;}</style>
</head>
<body><div class="header">header</div>
<div class="container"><div class="middle">middle</div><div class="left">left</div><div class="right">right</div>
</div>
<div class="footer">footer</div></body>
</html>
双飞翼布局代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>10.双飞翼布局</title><style>* {margin: 0;padding: 0;}.header {background-color: cyan;height: 10vh;text-align: center;}.container {background-color: gray;overflow: hidden;}.container .column {float: left;height: 80vh;}.center {width: 100%;background-color: red;text-align: center;}.left {width: 300px;background-color: #ff4d4f;margin-left: -100%;}.right {width: 200px;background-color: #2e6da4;margin-left: -200px;}.content {margin-left: 300px;margin-right: 200px;}.footer {background-color: green;height: 10vh;text-align: center;}</style>
</head>
<body><div class="header">header</div>
<div class="container"><div class="center column"><div class="content">middle</div></div><div class="left column">left</div><div class="right column">right</div>
</div>
<div class="footer">footer</div></body>
</html>
本文没有介绍详细的实现过程,如果需要,请阅读:
圣杯布局的原理
css经典布局——双飞翼布局
CSS 圣杯布局和双飞翼布局的理解与思考 - 知乎
前端学习交流QQ群,群内学习讨论的氛围很好,大佬云集,期待您的加入:862748629 点击加入
圣杯布局和双飞翼布局的区别相关推荐
- [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现
[css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 一: section{height: 100%; overflow: hidden;clear:both; } .left{ height: ...
- 大厂面试必考题:三行布局之圣杯布局和双飞翼布局的区别
前言 今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别,这两个三行布局一直是一些大厂前端面试的高频考点,带你走进大厂面试题,活不多说,冲冲冲~ 布局效果 这两个种三行布局效果是一样的,实现的效果 ...
- 圣杯布局与双飞翼布局全解
圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的 ...
- 双飞翼布局内容不换行_web前端入门到实战:圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...
- css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言 我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
- css - 圣杯布局和双飞翼布局
参考: Flex 布局教程:语法篇 Flex布局 那些年,奇妙的圣杯与双飞翼,还有负边距 CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里? CSS布局奇淫巧计之-强大的负边距 聊聊为什么淘宝要提 ...
- 圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left.right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应. 要求:允许增 ...
- 前端必经之路:CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
- JavaScript和圣杯布局、双飞翼布局
JavaScript JavaScript概述 发展历史 组成 第一个JavaScript程序 三种引入方式 基本语法 语法规范 数据类型 常量和变量 运算符 语句 选择语句 循环语句 数组.对象和函 ...
最新文章
- 负起责任、审慎对待论文创新和性能指数,ACM Fellow罗杰波教授分享他的审稿经验...
- MacOS下打包Python应用
- ant读书之使用ant进行java开发--第二章
- 《编译与反编译技术实战》——第2章编译器实践概述
- Java基础教程:面向对象编程[2]
- Python爬虫基础:常用HTML标签和Javascript入门
- sql中截取字符串函数_SQL Server 2017中的顶级SQL字符串函数
- Xshell中文乱码怎么处理?
- 2021-08-02 表的增删改查
- python画图代码讲解_python画图例子代码
- VSCode调试JavaScript代码方法
- 仿链家地图找房_【前端-自如/链家/安居客-地图找房】地图api如何获取浏览器视野范围内的经纬度区间?...
- 【蓝桥杯单片机(18)】第七届省赛-模拟风控制系统
- C#实现简单的加密防止拷贝复制软件
- iOS中-Qutarz2D详解及使用
- 做自媒体如何写好一个标题获得更多的流量
- 基于SSM实现汽车配件商城系统
- 怎样做优化才能提升网站的SEO排名?
- 读《MacTalk·人生元编程》及Mac常用软件
- 拼多多崛起背后的电商新版图