CSS布局

最新推荐文章于 2024-07-25 08:14:42 发布

Persiguiendo

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量134

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Persiguiendo/article/details/107904608

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

三列布局

圣杯布局

两边固定，当中自适应
当中列要完整显示
当中列要优先加载

浮动：搭建完整的布局框架
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>