圣杯布局、双飞翼布局、Flex布局、绝对定位布局总结

最新推荐文章于 2022-07-07 00:41:39 发布

加勒比海_带

最新推荐文章于 2022-07-07 00:41:39 发布

阅读量655

点赞数 2

文章标签：布局

本文链接：https://blog.csdn.net/weixin_43413602/article/details/89788961

版权

圣杯布局、双飞翼布局、Flex布局、绝对定位布局总结

1、圣杯布局

页面结构：两边的边栏宽度固定，中间的主体在一定范围内自适应，主体优先被加载出来（写代码的时候把主体部分放上面），就是在一定范围内，缩小窗口，侧边栏不会缩小，中间的主体适当的缩小。
为了防止页面缩放的太小，影响浏览，一般会为页面设置最小宽度min-width。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo2圣杯</title>
	<link rel="stylesheet" href="css/style2.css">
</head>
<body>
	<div class="header">header</div>
	<article class="wrapper">
		<section class="main">main</section>
		<aside class="left">left</aside>
		<aside class="right">right</aside>
	</article>
	<div class="footer">footer</div>
</body>
</html>

CSS代码：

@charset "utf-8";
* {
	margin:0;
	padding:0;
	text-align: center;
}
.container {
	width:100%;
}
/*父容器：溢出后隐藏；设置内边距放左右两个侧边栏*/
.wrapper {
	overflow: hidden;
	padding:0 200px;
	min-width: 300px;
	border:1px solid #ccc;
}
/*主体：宽度自适应；向左浮动；*/
.main {
	width:100%;
	background-color:green;
	height:300px;
	float: left;
}
/*给两个侧边栏一起设置宽度（比主体内边距小10px，与主体隔开）、高度、浮动*/
aside {
	width:190px;
	height:300px;
	background-color: blue;
	float: left;
	position:relative;
}
/*穿越main的宽度：100%（他本来在main右边，要相对于main的右边框往左移动100%）；然后利用相对定位移动到左边*/
.left {
	margin-left:-100%; 
	left:-200px;
}
/*自身宽度190px，相对于左边移动-190px，可以正好位于main里面；利用相对定位移动出去。*/
.right {
	margin-left:-190px;
	/*left:200px;*/
	right:-200px;
}
/*设置头部和底部*/
.header , .footer{
	width:100%;
	height:150px;
	background-color:yellow;
}

2、双飞翼布局

源自于淘宝，和圣杯布局实现的效果一样，思路不很一样。
在main中，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin为侧边栏留出位置。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo3双飞翼</title>
	<link rel="stylesheet" href="css/style3.css">
</head>
<body>
	<div class="header">header</div>
	<article id="wrapper">
		<section class="main">
		/*多设置一个div*/
			<div class="main-wrapper">main</div>
		</section>
		<aside class="left">left</aside>
		<aside class="right">right</aside>
	</article>
	<div class="footer">footer</div>
</body>
</html>

CSS代码

@charset "utf-8";

#wrapper {
	overflow: hidden;
	min-width:600px;
	margin:10px 0;
}

.main {
	width:100%;
	float:left;
}
/*使用margin空出两个边栏的空间*/
.main-wrapper {
	height:200px;
	background-color:green;
	margin:0 200px;
}
aside {
	width:190px;
	height:150px;
	background-color: blue;
	float: left;
}
/*直接相对于main移动100%到最左边*/
.left {
	margin-left:-100%;
}
/*相对于main移动190px就可以到达指定位置*/
.right {
	margin-left:-190px;
}
.header,.footer{
	width:100%;
	height:50px;
	background-color:yellow;
}

圣杯布局与双飞翼布局的区别：双飞翼布局main多创建一个div存放内容；双飞翼布局也不用设置边栏的相对定位，也不用设置偏移量；双飞翼使用margin控制两边的空间，圣杯布局使用的大的wrapper的padding空出两边距离。

3、Flex布局

Flex简介：CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
更多关于Flex请看Flex Box弹性盒子（CSS3）

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
排序order: 用整数值来定义排列顺序，数值小的排在前面。可以为负值。
对齐，设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全集中。
flex 属性用于指定弹性子元素如何分配空间。
各个值解析:
none：none关键字的计算值为: 0 0 auto
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。

HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo4Flex</title>
	<style>
		/*确定最小宽度，溢出后隐藏，且设置为flex容器*/
		.container {
			display: flex;
			height:400px;
			text-align: center;
			overflow: hidden;
			min-width: 400px;
		}
		/*三个order确定先后顺序；flex-grow确定扩展比率；flex-basis确定基准值*/
		.main {
			flex-grow:1;
			background-color:blue;
			order: 2;
			min-width: 100px;
		}
		.left{
			order:1;
			flex-basis:200px;
			background-color:gray;
		}
		.right{
			flex-basis:200px;
			background-color:cyan;
			order: 3;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="main">main</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</body>
</html>

4、绝对定位布局

比较简单粗暴，直接确定元素位置并固定。
不论什么样的布局，使用绝对定位都能实现。

HTML代码（内联CSS）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo1绝对定位</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.container{
			padding:0 auto;
		}
		.left{
			/*绝对定位确定左边的宽度和位置*/
			left:0;
			top:50px;
			position:absolute;
			background: green;
			width:20%;
			height: 400px;
		}
		.right {
			/*确定右边的宽度和位置*/
			right: 0;
			top:50px;
			background-color: red;
			width:30%;
			position:absolute;
			height:400px;
		}
		.main {
			/*剩下的作为中间，用margin确定位置*/
			background-color: blue;
			margin:0 30% 0 20%;
			height:400px;
		}
		.footer,.header {
			background: yellow;
			width:100%;
			height:50px;
		}
	</style>
</head>
<body>
	<div class="header">Header</div>
	<div class="container">
		<div class="main">Main</div>
		<div class="left">Left</div>
		<div class="right">Right</div>
	</div>
	<div class="footer">Footer</div>
</body>
</html>

加勒比海_带

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局、双飞翼布局、Flex布局、绝对定位布局总结

圣杯布局、双飞翼布局、Flex布局、绝对定位布局总结1、圣杯布局页面结构：两边的边栏宽度固定，中间的主体在一定范围内自适应，主体优先被加载出来（写代码的时候把主体部分放上面），就是在一定范围内，缩小窗口，侧边栏不会缩小，中间的主体适当的缩小。为了防止页面缩放的太小，影响浏览，一般会为页面设置最小宽度min-width。HTML代码：<!DOCTYPE html><...
复制链接

扫一扫