CSS布局

三列布局

三列布局

圣杯布局
  • 两边固定,当中自适应
  • 当中列要完整显示
  • 当中列要优先加载

浮动:搭建完整的布局框架
margin:调整旁边两列的位置(使三列布局到一行上)
相对定位:调整旁边两列的位置(使两列位置调整到两头)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圣杯布局</title>		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			#content{
				overflow: hidden;
				padding: 0 200px;
			}
			#header,#footer{
				height: 20px;
				text-align: center;
				border: 1px solid  deeppink;
				background: gray;
			}
			#content .middle,
			#content .left,
			#content .right {
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
			#content .middle{
				float: left;
				width: 100%;
				background: pink;
			}
			#content .left{
				position: relative;
				left: -200px;
				margin-left: -100%;
				float: left;
				width: 200px;
				background: yellow;
			}
			#content .right{
				position: relative;
				right: -200px;
				margin-left: -200px;
				float: left;
				width: 200px;
				background: yellow;
			}
			.clearfix{
				*zoom: 1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="content" class="clearfix">
			<div class="middle">
				<h4>middle</h4>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">footer</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;
        }
        .clearfix {
            *zoom: 1;
        }
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        #wrap {
            border: 1px solid saddlebrown;
            width: 750px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            overflow: hidden;
        }
        #wrap .left,
        #wrap .right {
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        #wrap .left {
            float: left;
            width: 400px;
            background: #94dbc9;
        }
        #wrap .right{
            float: left;
            width: 350px;
            background: #4c56e2;
        }
    </style>
</head>

<body>
    <div id="wrap" class="clearfix">
        <div class="left">
            left <br />
            left <br />
        </div>
        <div class="right">
            right <br />
        </div>
    </div>
</body>

</html>
双飞翼布局
  • 两边固定,当中自适应
  • 当中列要完整显示
  • 当中列要优先加载
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>dfdfd</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            min-width: 600px;
        }
        #header,
        #footer {
            height: 20px;
            text-align: center;
            border: 1px solid deeppink;
            background: gray;
        }
        #content {
            overflow: hidden;
        }
        #content .middle,
        #content .left,
        #content .right {
            float: left;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        #content .middle {
            width: 100%;
            background: rgb(214, 144, 214);
        }
        #content .left {
            margin-left: -100%;
            background: rgb(54, 212, 62);
        }
        #content .right {
            margin-left: -200px;
            background: rgb(230, 204, 88);
        }
        #content .left,
        #content .right {
            width: 200px;
        }
        #content .middle .middle-inner {
            padding: 0 200px;
            width: 100%;
        }
        .clearfix {
            *zoom: 1;
        }
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="content" class="clearfix">
        <div class="middle">
            <div class="middle-inner">
                <h4>middle</h4>
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">
            right<br />
            right<br />
            right<br />
            right<br />
        </div>
    </div>
    <div id="footer">footer</div>
</body>

</html>
双飞翼布局和圣杯布局的对比
  • 相同点

    1. 两种布局方式都是把主列放在文档流最前面,使主列优先加载
    2. 两种布局方式在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局
  • 不同点:在于如何处理中间主列的位置

    1. 圣杯布局是利用父容器的左、右内边距 + 两个从列相对定位;
    2. 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

粘连布局(stickyFooter)

在这里插入图片描述

  • 当内容容器没有超出时,footer 底部盒子是紧贴在底部的,当内容超出的时候,footer 紧跟在内容容器之后,并不会超出容器
<!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;
        }
        html,
        body {
            height: 100%;
        }
        #wrap {
            min-height: 100%;
            background: #9d6ee9;
        }
        #footer {
            margin-top: -40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #54ca93;
        }
        #wrap .main {
            padding-bottom: 40px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="main">
            main<br />
            main<br />
            main<br />
            main<br />
        </div>
    </div>
    <div id="footer">
        footer
    </div>
</body>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值