圣杯模型（圣杯布局）

最新推荐文章于 2024-09-04 02:27:32 发布
最新推荐文章于 2024-09-04 02:27:32 发布
阅读量212 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mandarin_blog/article/details/132051613
版权
本文介绍了前端开发中常用的圣杯布局模型，旨在帮助开发者理解其工作原理。内容包括圣杯布局的组成部分及特点，提供了两种实现方法，一种基于传统浮动，另一种利用Flex布局。通过详细步骤解析，帮助读者掌握这一重要布局技巧。
摘要由CSDN通过智能技术生成

1。圣杯模型

圣杯模型是工作中经常可以用到的一种模型，分为三部分，左边，右边和中间三个部分，中间内容先渲染且自适应窗口，两边固定宽度。

办法有两种，学过flex布局的小伙伴可以直接看方法二，没学过flex布局的我稍后几天就会马上更新。

方法一：

   <div class="box">
        <!-- 浏览器解析代码是从上到下解析，要想先渲染，就要把先渲染的元素内容写在上面 -->
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
最低0.47元/天 解锁文章
mandarin_blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
圣杯模型和双飞翼模型
y_hh_的博客
07-14 291
概述 圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 圣杯布局 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
圣杯模型
Paranoid_truggle的博客
07-14 266
浮动布局 </div>
圣杯模型_寻找软件开发的圣杯
06-29 179
如今的开发人员可以使用通用的3GL语言（如Java）通过该语言以编程方式解决问题，也可以在抽象级别上用模型描述这些问题，然后将其用于自动生成代码。 这种模型驱动的软件开发（MDSD）在欧洲引起了轰动，但美国的开发人员似乎对MDSD持怀疑态度。 只需单击几下即可生成完全可执行的应用程序的概念，这是软件开发无法企及的圣杯吗？ 在有时激烈的代码生成辩论中，反对MDSD的论点始终是相同的：学习曲线...
css-布局-圣杯模型布局
hety119的专栏
02-28 438
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;css-布局-圣杯模型布局&lt;/title&gt; &lt;style&gt; * {
HTML-圣杯布局
小头Sophia
12-15 1336
1.BFC：Block Formating Context（块级格式化上下文）   它是一个独立的渲染区域 BFC的作用： 1）用来清除浮动的问题 2）Margin合并的问题 3）多栏布局 2.圣杯布局和双飞翼布局实现的是同一种效果，但是实现方式有一点不同。 都实现的效果是：两侧盒子的宽度始终保持不变，中间的盒子自适应（三栏式的布局） 左右盒子相对定位 首先写中间的main盒子，
圣杯布局图解
Ivana_zyf的博客
01-24 2384
圣杯布局图解 圣杯布局和双飞翼布局实现的问题都是三列布局，两边定宽，中间自适应布局，中间栏要在放在文档流前面以优先渲染。 1、给middle部分设 width:100%，给left、right设宽度，三者都 float:left。 2、给外面最大的块all设左右padding，把middle拉出来，这样left和right去了自己的位置之后就不会把middle内容盖住了。 ...
圣杯布局的三种实现
qq_58511059的博客
12-30 518
【代码】圣杯布局的三种实现。
圣杯布局和双飞翼布局的原理探究
请叫我二狗哥
11-25 2216
浮动布局并不是再是流行的布局方式，不过基于浮动的经典布局还是经常出现在前端面试中，圣杯布局和双飞翼布局就是其中常考核的知识点。圣杯布局和双飞翼布局都是前端中三列设计布局方式，要求主要中间内容优先渲染，左右内容宽度固定，中间主要内容宽度自适应排布。圣杯布局和双飞翼布局都没有使用绝对定位，而是应用浮动、负外边距以及相对定位这几个核心知识点来实现。 圣杯布局 圣杯布局是让左右固定栏和中间自适应的主内容栏处于同一容器包裹中，容器（#container）设置padding-left、padding-right值，其
CSS Flex布局 （弹性布局）(圣杯布局)
m0_69793485的博客
05-14 585
Flex布局（弹性布局）的特点 1.浏览器提倡的布局模型，页面渲染性很高。 2.布局简单，方便。 3.可以避免浮动脱标的问题。 4.兼容性高（不兼容低版本的浏览器） Flex布局模型构成 设置方式： 给父元素设置display:flex,子元素可以自动的挤压或拉伸； 组成部分 1.弹性容器（父级，添加了display:flex的盒子） 2.弹性盒子（子级） 3.主轴（默认水平） 4.侧轴 / 交叉轴（默认垂直） 主轴对齐方式 justify-content： flex-star
圣杯双飞翼布局.zip
05-04
4. **CSS3 Flexbox**：现代浏览器支持Flexbox布局模型，可以更简洁地实现圣杯布局，通过设置`flex-grow`, `flex-shrink`和`flex-basis`属性调整各栏的尺寸。 **双飞翼布局**： 双飞翼布局是中国前端开发者为了应对...
圣杯模型和双飞翼模型浅析（高度）
PethZhang的博客
10-23 2292
圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。 特别注意的是查找了许多资料发现竟然几乎没有资料提到过这两个模型的高度问题，即使是网上给的代码也几乎没有实现高度自适应的问题，也许大家都觉得太简单甚至不值一提，但是我却为此纠结了很久，所以下面我也会提到如何实现高度自适应。 两者的区别我总结为三点： 1、DOM结构不同，相对于圣杯，双飞翼为中间内容单独加了一个容器以便ma
CSS实现圣杯布局（双飞翼布局）的四种方式
一个普通人的博客
08-29 1294
总结了原生JS实现圣杯（双飞翼）布局的四种方式
实现双飞翼布局（圣杯布局）的三种方式
weixin_52976120的博客
12-29 909
【代码】实现双飞翼布局（圣杯布局）的三种方式。
使用flex实现圣杯布局
前端小伙子的博客
06-12 3126
使用flex实现经典的圣杯布局。
flex 实现的圣杯布局
一起学习一起进步~
10-08 151
【代码】flex 实现的圣杯布局。
CSS行元素的截断样式box-decoration-break属性，有点儿意思！
流绪@微梦
09-03 618
在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。常用行内元素：a、span、i、em、strong、img等。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
最新发布
Hanbuhuic的博客
09-04 1575
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值