双飞翼布局和圣杯布局比较

最新推荐文章于 2023-05-08 10:10:46 发布

一李

最新推荐文章于 2023-05-08 10:10:46 发布

阅读量197

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43641432/article/details/106361252

版权

前端专栏收录该内容

102 篇文章 1 订阅

订阅专栏

圣杯布局和双飞翼布局的对比

1.都是把主列放在文档流最前面，使主列优先加载

2.三列浮动，通过负外边距形成三列布局

3.不同之处在于如何处理中间主列的位置

3.1圣杯利用父容器的左右内边距+两个从列相对定位

3.2双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左右外边距进行布局调整

双飞翼布局


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--两组实现的对比:
		1.俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
		2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
		3.两种布局方式的不同之处在于如何处理中间主列的位置：
				圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
				双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
		-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			
			
			/*头部 脚部样式*/
			#header,#footer{
				border: 1px solid;
				background: gray;
				text-align: center;
			}
			
			/*三列的伪等高布局*/
			#content .middle,#content .left,#content .right{
				/*padding-bottom:10000px ;
				margin-bottom: -10000px;*/
				height: 50px;
				line-height: 50px;
				float: left;
			}
			
			/*双飞翼布局*/
			#content{
				overflow: hidden;
			}
			#content .middle{
				width: 100%;
				background: deeppink;
			}
			#content .middle .m_inner{
				padding: 0 200px;
			}
			#content .left,#content .right{
				background: pink;
				width: 200px;
				text-align: center;
			}
			#content .left{
				margin-left: -100%;
			}
			#content .right{
				margin-left: -200px;
			}
			
		</style>
	</head>
	<body>
		<div id="header">
			<h4>header</h4>
		</div>
		<div id="content">
			<div class="middle">
				<div class="m_inner">
					middle
				</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">
			<h4>footer</h4>
		</div>
	</body>
</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header, .footer{
            height: 20px;
            text-align: center;
            border:1px solid deeppink;
            background-color: deepskyblue;
        }
        .content .left{
            position: relative;
            left: -200px;
            float: left;
            width: 200px;
            background-color: yellow;
            margin-left: -100%;
        }
        .content .right{
            position: relative;
            float: left;
            right: -200px;
            width:200px;
            background-color: yellow;
            margin-left: -200px;
        }
        .content .middle{
            float: left;
            background-color: blue;
            width:100%;
            
        }
        .clearfix{
            /* //清除浮动 */
            *zoom: 1;
        }
        .clearfix:after{
            content:"";
            display: block;
            clear: both;
        }
        .content{
            padding: 0 200px;
        }
    </style>
</head>
<body>
     <!-- 两边固定，中间自适应 -->
     <!-- 当中列要完整显示 -->
     <!-- 当中列要优先加载 -->
    <div class="header">header</div>
    <div class="content clearfix" >
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

一李

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双飞翼布局和圣杯布局比较

圣杯布局和双飞翼布局的对比1.都是把主列放在文档流最前面，使主列优先加载2.三列浮动，通过负外边距形成三列布局3.不同之处在于如何处理中间主列的位置3.1圣杯利用父容器的左右内边距+两个从列相对定位3.2双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左右外边距进行布局调整双飞翼布局<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>&l
复制链接

扫一扫