圣杯布局、双飞翼布局、flex布局

最新推荐文章于 2023-03-31 19:40:43 发布
最新推荐文章于 2023-03-31 19:40:43 发布
阅读量111 收藏
点赞数
分类专栏： css 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41157351/article/details/120988754
版权 
<!--圣杯布局-->
<style type="text/css">
	body {
		min-width: 550px;
	}
	.header , .footer {
		width: 100%;
		height: 60px;
		line-height: 60px;
		background: grey;
		text-align: center;
		clear: both;

	}
	.container {
		padding: 0 200px;
		overflow: hidden;
	}
	.item {
		height: 200px;
		float: left;
		position: relative;
	}
	.left {
		width: 200px;
		background: skyblue;
		margin-left: -100%;
		left: -200px;
	}
	.right {
		width:  200px;
		background: yellow;
		margin-left: -200px;
		right: -200px;

	}
	.center {
		width: 100%;
		background: red;

	}
</style>
<body>
	<div class="header">#header</div>
		<div class="container">
			<div class="center item">#center</div>
			<div class="left item">#left</div>
			<div class="right item">#right</div>
		</div>
		<div class="footer">#footer</div>
		<div class="header">#header</div>
</body>

<!--双飞翼布局-->
<style type="text/css">
	body {
			min-width: 550px;
		}
		.header , .footer {
			height: 60px;
			background: grey;
			line-height: 60px;
			text-align: center;
			clear: both;
		}
		.container {
		}
		.item {
			height: 200px;
			float : left;
		}
		.left {
			width: 200px;
			background: skyblue;
			margin-left: -100% ;
		}
		.right {
			width: 200px;
			background: yellow;
			margin-left: -200px;
		}
		.center {
			width: 100%;
			background: red;
		}
		.child {
			margin: 0 200px 0 200px;
			}
</style>
<body>
	<div class="container">
			<div class="center item">
				<div class="child">#center</div> 
			</div>
			<div class="left item">#left</div>
			<div class="right item">#right</div>
		</div>
		<div class="footer">#footer</div>
</body>

<!--flex布局-->
<style type="text/css">
	.container {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.header , .footer {
			height: 60px;
			line-height: 60px;
			text-align: center;
			background: grey;
		}
		.body {
			display: flex;

		}
		.left {
			width: 200px;
			height: 400px;
			background: skyblue;

		}
		.right {
			width: 200px;
			height: 400px;
			background: red;
		}
		.center {
			flex: 1;
			background: yellow;
		}
</style>
<body>
	<div class="container">
			<div class="header">#header</div>
			<div class="body">
				<div class="left">#left</div>
				<div class="center">#center</div>
				<div class="right">#right</div>
			</div>
			<div class="footer">#footer</div>
		</div>
</body>
等待戈多啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
圣杯布局和双飞翼布局的实现过程
Sunshine_ZCC的博客
06-09 4572
第一次写博客，语言组织不好，请大家谅解！ 相信很多人都搜过圣杯布局和双飞翼布局，也知道他们的由来，在这里我就不一一赘述了，今天主要讲的是当我遇到两个布局时，我是怎样一步一步从开始到实现的过程，例如：刚开始我也不懂为什么圣杯布局和双飞翼布局的区别，不懂圣杯布局为什么会有相对定位等一些问题，在这里给大家讲下我的理解，如有错误，欢迎批评指正。 好了，接下来开始今天的写文章之旅！ 圣
CSS3 - Flexible Box （Flex）
LIN的博客
09-27 452
目录 一、概念 二、容器属性 1、flex-direction 属性 ​2、flex-wrap 属性  3、flex-flow 属性 ​ 4、justify-content （内容对齐）属性 5、​align-items 属性 6、​align-content 属性 三、项目属性 ① order 属性  ② flex-grow 属性 ③ flex-shrink 属性 ④ ...
css 圣杯布局、双飞翼布局、flex布局
swallow_y的博客
08-01 710
css布局 1、通过圣杯布局、双飞翼布局、flex布局实现左中右3栏布局（左右固定，中间流动布局） 产生原因：以前实现左中右必须按照源顺序（在 DOM 中表现为先写 Left，然后 Middle，最后，Right）等，它将可能导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不能被首先加载。 如何实现： 结构申明：声明一个容器.container，并同时声明.middle，...
flex布局实现双飞翼
xuemoKingDeath的博客
05-12 713
html> html lang="en"> head> meta charset="UTF-8"> style> .div1{ width: 200px; height: 200px; background-color: red; display: flex;
前端三栏布局：双飞翼、圣杯、flex
xiaopiaoliang777的博客
07-28 151
文章目录1、圣杯布局2、双飞翼布局3、flex布局4、总结 1、圣杯布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圣杯布局</title> <style> #header, #footer {background: gray; .
双飞翼布局和圣杯布局
01-08
双飞翼布局和圣杯布局  网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。  首先三...
如何做出双飞翼布局与圣杯布局
01-08
说起网站布局，之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样，把各种需要的组件一摆，然后设个宽高给个定位不就...而今天我们的主题，“双飞翼布局”与“圣杯布局”就是一个两边固定，中间宽度自适应，并
圣杯双飞翼布局.zip
05-04
圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局，感兴趣的朋友一起学习吧
双飞翼布局
kaixinnijiutiaowu的博客
06-05 3683
双飞翼布局一、什么是双飞翼布局双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。一起来看看淘宝的头部实现：就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。 二、HTML布局首先设置一个container容器，里面放置左中右三个盒子，父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染。&lt;div class="container"&gt;    &lt;d...
圣杯/双飞翼/flex三栏布局
Haley6的博客
04-19 99
圣杯/双飞翼/flex布局三栏 代码 ​```html <!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-
HTML5中margin属性的使用案例
大数据-攻城狮
08-08 6836
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt
实现双飞翼布局
CSDN_156的博客
12-06 811
说到圣杯布局和双飞翼布局，始终都是面试的高频考点，问题方式也大同小异，比如，实现一个左右固定，中间自适应的布局；实现一个中间部分优先加载的布局…… 现如今，很多web端的应用，他们的布局方式都是圣杯布局和双飞翼布局，既然用到的这么多，那么，双飞翼布局是如何实现的呢？带着这个问题，咱们一起把他说道说道 双飞翼布局的实现方式一、（position+margin+float） 首先我们从上面简介部分得知，双飞翼布局是一个两边固定，中间自适应的布局，并且中间部分...
圣杯布局与双飞翼布局还有flex布局实现两边固定宽度中间自适应布局
WaiKam_Lau的博客
03-16 375
圣杯布局、双飞翼布局 这两个布局的功能都是相同的，都是两侧宽度固定，中间宽度自适应的三栏布局。 他们都有一些相同的特点： 两侧的宽度固定，中间宽度自适应 中间一栏在DOM结构上优先于两个侧栏，为了以便优先渲染中间栏 允许三列任意一列称为最高列 只需要一个额外的div标签包裹 圣杯布局 1、DOM结构 <div class="header"></div> <div ...
css 三栏布局 圣杯布局 双飞翼 flex
wangjun5159的专栏
12-10 2186
前言三栏布局是常见的布局方式，应用场景：左、右两侧是定宽的导航栏，中间内容自适应。在参考了详解 CSS 七种三栏布局技巧 后，我对三栏布局有了更深刻的认识，本文是我对上文的解读，是自己消化理解的过程，此文是为了加深理解知识而写，希望可以帮到你。 示意图 简单的实现方式（流式布局和BFC三栏布局）实现三栏布局，我们可以采用比较简单的实现方式，也就是详解 CSS 七种三栏布局技巧提到的流式布局和BF
css中的flex布局细节总结，如何用5行核心代码实现双飞翼
chloexxx的博客
03-31 427
双飞翼模型一般是左右两侧宽度固定，中间内容部分宽度自适应。双飞翼模型一般把内容部分，即mid，放在第一个定义，可以使得在dom树构建时先加载内容部分，用户体验更好。可以说是强迫症福音，flex可以轻松实现等间距的整齐排列，且父级盒子自行撑开不会塌陷。就是所谓的弹性布局，比较灵活。就是与之垂直的方向。两个轴主要是用来确定元素排列的方向。主要按照该属性定义在父级元素样式中or子级元素样式中。是默认值，表示主轴为水平方向。此时子元素水平排列。此时子元素垂直排列。给定一个body结构，对此进行flex布局。
实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现
好好学习天天向上
06-04 848
本质:三列布局，左右两边固定，中间自适应且优先加载 优先加载:主区域标签写在最前面 float + margin负值+relative/添加盒子 前期准备 1.三个区域的盒子向左浮动:三栏在一行显示 问题:出现高度塌陷 原因:父元素的高度默认被子元素撑开。当子元素浮动后，完全脱离文档流，子元素将无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失后，其下的元素会自动上移，影响布局。 解决办法:清除浮动 清除浮动是指该元素恢复浮动元素没有浮动之前的位置 给受影响的盒子添加clear属性，clear元
实现双飞翼布局（圣杯布局）的三种方式
weixin_52976120的博客
12-29 879
【代码】实现双飞翼布局（圣杯布局）的三种方式。
如何实现双飞翼(圣杯)布局(前端面试题系列)
hjp991028的博客
11-30 218
如何实现双飞翼(圣杯)布局(前端面试题系列)
圣杯布局 双飞翼布局
最新发布
09-11
而双飞翼布局与圣杯布局类似，也是左右两栏固定宽度，中间栏自适应宽度，但它在DOM结构上有所不同。 圣杯布局的DOM结构如下： ``` <div class="main">Main Content <div class="left">Left Sidebar ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值