圣杯布局图解

最新推荐文章于 2022-05-22 20:59:49 发布
最新推荐文章于 2022-05-22 20:59:49 发布
阅读量2.5k 收藏 5
点赞数 1
分类专栏： 布局  文章标签： BFC机制与浮动定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ivana_zyf/article/details/79149455
版权
本文详细介绍了圣杯布局的实现原理，包括如何通过设置宽度、浮动、内外边距以及相对定位，来达到三列布局，两边定宽，中间自适应的效果。同时对比了圣杯布局与双飞翼布局的区别，指出双飞翼布局在结构和样式上的简洁性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

圣杯布局图解

圣杯布局和双飞翼布局实现的问题都是三列布局，两边定宽，中间自适应布局，中间栏要在放在文档流前面以优先渲染。

1、给middle部分设 width:100%，给left、right设宽度，三者都 float:left。
第一步
2、给外面最大的块all设左右padding，把middle拉出来，这样left和right去了自己的位置之后就不会把middle内容盖住了。
然后腾位置
3、因为middle宽度为100%，left应该在最左边所以往左拉宽度100%（margin-left:-100%）,而right只需要往回拉自己的宽度大小就可以（margin-left: number px）。这样就在一行了。

最低0.47元/天 解锁文章
【CSS】看了C站CSDN源码，这次带你彻底搞清楚经典的 双飞翼布局 与 圣杯布局 - margin负值 - 浮动 - padding
YK菌的博客
07-06 420
双飞翼布局 圣杯布局
CSS Flex布局 （弹性布局）(圣杯布局)
m0_69793485的博客
05-14 640
Flex布局（弹性布局）的特点 1.浏览器提倡的布局模型，页面渲染性很高。 2.布局简单，方便。 3.可以避免浮动脱标的问题。 4.兼容性高（不兼容低版本的浏览器） Flex布局模型构成 设置方式： 给父元素设置display:flex,子元素可以自动的挤压或拉伸； 组成部分 1.弹性容器（父级，添加了display:flex的盒子） 2.弹性盒子（子级） 3.主轴（默认水平） 4.侧轴 / 交叉轴（默认垂直） 主轴对齐方式 justify-content： flex-star
学习笔记之传说中的圣杯布局
weixin_30618985的博客
09-20 160
　　有时觉得看那些国外教程感觉还挺好的，英文不多，大部分都是代码多，了解个思路就好的了。然而最难啃的是那些学术性的论文呢，里面专业名词多，难懂，代码又少，最主要我这个先天英文差，死啃烂啃才把六级啃过的人，看到一大堆英文免不了还是一阵发晕。言归正传，圣杯布局我听就听了很久很久啦，而且每次看到圣杯布局总会离不开一篇文章，那就是a list apart里面的In Search of the HolyG...
步骤比较细致的 圣杯布局说明
liuboman的博客
03-18 488
圣杯布局的实现过程 圣杯布局和双飞翼布局，他们的都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良，下一篇文章会讲到。 圣杯布局：用到浮动、负边距、相对定位，不添加额外标签 DOM结构： div class="header">Headerdiv> div class="bd"> div
圣杯布局
weixin_30632899的博客
06-27 217
圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点： 三列布局，中间宽度自适应，两边定宽； 中间栏要在浏览器...
圣杯布局详解--浮动
果车的博客
12-13 6008
圣杯布局是什么： 圣杯布局是两边固定宽度，中间自适应的三栏布局。 中间栏放到文档流前面，先行渲染。 目的是为了解决三栏布局。 浮动实现： 实现效果： 首先HTML： 头部<header></header>标签， 内容区域<div class="container"></div>里面包含中、左、右三个 div 标签。 底部<footer></footer>标签 HTML代码： //标题 <header>&l
详解圣杯布局
技术无止境，人生仍探索。
04-30 1077
圣杯布局 html结构： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc...
html 伸缩盒子布局,详解CSS3伸缩布局盒模型Flex布局
weixin_42127937的博客
06-17 2130
一、Flex 布局是什么？CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目...
【前端面试课程重点总结】
weixin_44934478的博客
05-22 345
前端知识体系 如何写简历？ HTML&CSS 面试题 CSS面试题 JS 原型和原型链 作用域和闭包 异步和单线程 JS 异步 - 进阶 从JS基础知识到JS Web API ajax 存储 http 面试题 https 关于开发环境 运行环境
牛客网-精华专题-前端校招面试题目合集
qq_41254204的博客
02-01 3089
前端校招面试题目合集 501HTML HTML 浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层(structural layer)、表示层(presentation layer)、行为层 (behavior layer) 分别是：HTML、CSS、JavaScript 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务 H...
圣杯布局详解
dyb2440492276的博客
03-21 2994
作用： 圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 原理： 圣杯布局为了让中间div内容不被遮挡，将中间div设置了padding-left和padding-right后，将左右两个div用margin和相对定位布局，position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。 css代码： .header,.footer{ height: 200px;
圣杯布局详解（中间盒子宽度自适应，两边盒子固定宽度）
weixin_41796631的博客
04-22 2741
总结： 主要通过设置 margin: -100%，使本来浮动在第二行的盒子，回到第一行，使这个元素可以和 width: 100% 的浮动盒子并列； 浮动 float 的原理： （float，浮动，使元素的边界和相邻的同一个方向浮动的元素边界紧贴，如果没有相邻浮动元素，就和父元素边界紧贴。也就是说，设置了 float：left 的元素，会向左浮动，直到左边缘和同样设置了 float：left...
史上最全圣杯布局(转自前端神三元)
qq_42288851的博客
08-18 1400
圣杯布局如图: 而且要做到左右宽度固定，中间宽度自适应。 #1.利用flex布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .header,.footer{
RTX3090显卡公版PCB布局图解
- 公板指的是NVIDIA官方提供的参考设计（Reference Design），通常包含了标准的散热解决方案、电路设计以及接口布局。 - 公板设计往往被显卡制造商作为基础，然后根据需要进行定制化改进。这些改进包括但不限于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值