css圣杯布局 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

CSS-圣杯布局

圣杯布局和双飞翼布局, 两者实现的功能都一样, 都是用于实现两侧的宽度不变, 中间的宽度自适应的三栏布局的圣杯布局的实现步骤搞一个容器, 里面放三个盒子设置两侧盒子的宽度(固定)设置中间盒子的宽度等于容器的宽度...DOCTYPE html> 圣杯布局

4352 0

CSS布局 -- 圣杯布局 & 双飞翼布局

按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。但在这里实现起来还是有一些区别的【圣杯布局】 ?... 圣杯布局... css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header...其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧）恩，这里有一只鸟~ 左翅sub有200px,右翅extra..220px.....占满 width:100% 4.此时main占满了，所以要把sub拉到最左边，使用margin-left:-100% 同理 extra使用margin-left:-220px （这时可以直接继续上边圣杯布局的步骤

2.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

前言我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。...圣杯布局&双飞翼布局所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。...他俩的区别就是：圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。...圣杯布局以下面html为例： main 布局就好理解得多 html和圣杯布局一样 css： * { box-sizing: border-box;

2.3K3 0

前端面试【CSS】— CSS 如何实现“圣杯”布局？

“圣杯” 布局是一种典型的网页布局结构，如下所示：实现方式有多种，下面一一给出代码实现。 1. Flex布局来实现布局来实现（全部float:left）布局来实现（左边 float: left, 右边 float: right）布局来实现 <!

7382 0

css布局记录之双飞翼布局、圣杯布局

双飞翼布局和圣杯布局是比较常用的布局方式，都是为了实现一行三列，并且两侧列固定宽度，中间列宽度自适应的效果：直接上代码记录下： css...main_content{ width: 100%; float: left; } /* 双飞翼布局...left; margin-left: -200px; height: 60px; } /* 圣杯布局

8381 0

你知道css圣杯布局与双飞翼布局吗？

圣杯布局圣杯布局...width: 200px; height: 200px; background-color: #da4242; /* 产生布局效果的属性

3673 0

day010:CSS如何进行圣杯布局

day010:CSS如何进行圣杯布局圣杯布局如图: ? 而且要做到左右宽度固定，中间宽度自适应。 1.利用flex布局右边这里是底部 2.float布局...3.float布局(左边float: left, 右边float: right) right footer 看看grid布局...当然，还有table布局，年代比较久远了，而且对SEO不友好，知道就可以，这里就不浪费篇幅了。

6232 0

圣杯布局与双飞翼布局

上一篇文章介绍了三种方法实现CSS三栏布局，本文则在此基础上，进一步介绍常用的圣杯布局与双飞翼布局。一．圣杯布局圣杯布局的要求： 1. header和footer占屏幕全部高度，高度固定 2....2.中间的三栏布局，可参考三种方法实现CSS三栏布局，这里采用margin负值法来实现先直接实现下三栏布局：圣杯布局 css....png 三．小结本文主要介绍了如何一步步地实现圣杯布局和双飞翼布局。...圣杯布局相较于双飞翼布局，样式设置稍有些复杂。双飞翼布局样式设置比较简单，但需要修改html布局结构。建议在阅读本文前，可以先阅读下三种方法实现CSS三栏布局，便于加深理解。如有问题，欢迎指正。

3.8K23 0

圣杯布局的原理

圣杯布局的起源 In Search of the Holy Grail 圣杯布局解决的问题两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。...圣杯布局的原理 HTML代码 CSS代码第一步：定义容器content的样式padding: 0 100px...此时我们可以清晰的看到center的左右两边都被left和center遮挡，此时圣杯布局如何处理呢？第三步：用相对定位来解决 1....margin-right .left{right:100px;} 当左右设置同方向负边距margin-left .left{right:100px;} .right{left:100px;} 最终效果和CSS

7711 0

圣杯布局与双飞翼布局

圣杯布局实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 将三者都设置 float:left, position:relative (因为相对定位后面会用到...DOCTYPE HTML> 圣杯布局 css"> body { text-align: center;; } #demo {...DOCTYPE HTML> 双飞翼布局 css"> body { text-align: center;; } #header, #footer

1.1K5 0

圣杯布局，双飞翼布局，和自己独创的布局

圣杯布局：圣杯布局...position: relative; left: 200px; } 圣杯布局...，利用了，margin的负边距属性移动，这里要注意由于是浮动所以，margin是负边距时能够移动，当不是浮动时，负边距会吃点元素本身的宽度他与圣杯最大的区别在于没有用到position属性，html结构上也有区别...device-width, initial-scale=1.0"> 圣杯布局

7682 0

grid之经典12列栅格布局组件,经典示例-圣杯布局

记录grid完成简单的经典12栅格布局，并完成经典的圣杯布局效果，同时完成一个典型的图片列表展示。...建立布局组件建立12列栅格布局组件的好处就是，只要你想布局，可以随时利用里面的小组件，按照你自己的想法来实现布局。...6 3 9 2 8 2 ... grid-layout.css...圣杯布局如果使用传统flex方式或者定位来做这个布局的话，非常的麻烦，而使用grid不到10行代码就可以把这个布局给写出来。利用上面写好的组件，即可完成经典的圣杯布局。...基础html代码 (圣杯布局)用12列的栅格布局组件来完成一个3列布局页眉12列左侧2列内容区8列右侧2列

8911 0

圣杯布局和双飞翼布局的理解和区别，并用代码实现

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 ...区别：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right...两者都是为了不让左右俩不遮住middle，经典圣杯布局通过父亲padding给左右俩腾位置从而不会遮住middle内容，而双飞翼是middle设置margin，限制内部内容区域，从而左右俩遮的地方不会影响到...middle内容对于三栏布局，modern solution是 flex box/ grid 布局，这两者可以轻松实现 mobile-friendly的方案，也可以控制顺序，middle依然可以先渲染...，9012年兼容性不错了，如果APP无视IE，这是优选圣杯布局代码： header <div id="middle"

1.6K2 0

CSS布局

CSS有三种基本的定位机制：普通流，浮动和绝对定位。...绝对定位相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。...浮动布局首先介绍一些浮动模型的基本知识：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。...> 可以看出浮动后虽然黄色div布局不受浮动影响，正常布局，但是文字部分却被挤到了紫色浮动div下边。...参考文档 CSS布局 ——从display，position， float属性谈起.:

1.8K2 0

CSS 布局

#什么是 BFC Box：Box 是 CSS 布局的对象和基本单位，你可以理解一个页面就是由很多的 Box 组成的 Formatting Context：即格式化上下文，它是存在页面中的一块独立的渲染区域...这里的元素不会在布局上影响到外面的元素（比如浮动/定位的元素等等）。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论怎样翻江倒海，都不会影响到外部。...不和浮动元素重叠在一个BFC中使用两个BFC可以做两列布局时使用 #水平居中布局 #空间居中布局 Grid 布局 .container { display: grid; place-items

1.8K2 0

CSS布局

一、基础 1.position 这是由于float和绝对定位都是使用块框架（block layout）来显示，所以会隐式地改变display的值。二、居中 1...

1.6K3 0

【春节日更】经典布局题 — 圣杯和双飞翼

面试题中，经典的布局题，如何实现两边固定中间自适应实现方式有很多种，本文主要介绍圣杯布局和双飞翼布局这两种方法，实现上述布局的方法与区别 01 圣杯布局优点：不需要添加dom节点缺点：正常情况下是没有问题的...DOCTYPE html> 圣杯布局...优点：不会像圣杯布局那样变形缺点：多加了一层dom节点分析： html代码，如下： middle...left right ‍ 03 总结相同作用：圣杯布局和双飞翼布局解决的问题是相同的...双飞翼与圣杯的主要差异双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。

4352 0

CSS布局(三) 布局模型

布局模型在网页中，元素有三种布局模型： 1、流动模型（Flow）默认的 2、浮动模型 (Float) 3、层模型（Layer） 1、流动模型（Flow）流动（Flow）模型是默认的网页布局模式。...流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。...（内联元素可不像块状元素这么霸道独占一行） 2、浮动模型 (Float) 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动 div{float:left;}　　div{float:right...;} 可以为不同的div设置不同的浮动方式来布局。...绝对定位使元素脱离文档流，因此不占据空间，普通文档流中元素的布局就当绝对定位的元素不存在时一样，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

3.4K7 1

css布局使用

parent"> child .parent { display: flex; align-items: center; } css....main{ margin-left: 100px; margin-right: 200px;} **一些说明**: 注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列（圣杯布局和双飞翼布局都会用到...圣杯布局(float + 负margin) **原理说明**：主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。...双飞翼布局(float + 负margin ) **原理说明**：双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin...圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。双飞翼布局不用设置相对布局，以及对应的left和right值。

3K9 0

CSS布局(二)

CSS布局(二) 等高布局等高布局，顾名思义，就是指子元素在父元素中高度相等的布局。开始之前，先看一个情境。... css代码 main { color: #eee; } main>div { display: inline-block; width: 300px...html 主体内容 css html, body {...有flex布局的地方怎么能没有grid布局(×?)。...、grid布局真nb 参考链接：常用的多列等高布局收藏 css实现上下固定中间自适应布局实现粘连布局

1.7K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭