DaZeng：圣杯布局、双飞翼布局（超详细）

最新推荐文章于 2023-04-26 21:45:31 发布

Da Zeng

最新推荐文章于 2023-04-26 21:45:31 发布

阅读量1.9k

点赞数 12

分类专栏： web总栏文章标签：大学前端 WEB 圣杯布局

本文链接：https://blog.csdn.net/Z269571627/article/details/102744530

版权

web总栏专栏收录该内容

62 篇文章 1 订阅

订阅专栏

10.21-10.25之 WEB任务（一）

1、一周复习hcj,HTML一般用的也就那些东西，了解一下行内元素、块级元素、行内块元素。
2、清除浮动（好像是五种还是六种方式）
3、BFC（概念、触发、作用、应用）
4、居中问题（水平垂直居中方法，大概有十来种，你自己总结一下）
5、圣杯布局（flex、float、position要会，尤其前两种，gird和table了解就行）
6、轮播图:js原生做弄清楚原理有箭头，实现了写导航点自动播放然后无缝

注:就是不是让你全背下来，但是常用的要会，不能写什么都要翻文档，菜鸟或者w3c都可以。

上一篇：居中问题方法总结

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

圣杯布局的三大特点：

三列布局，中间宽度自适应，两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高

具体示例 left宽200px，right宽300px，main在中间，宽度自适应，允许增加额外的DOM节点，但不能修改现有的节点顺序。
HTML：

<div class="container">
			<div class="main"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>

CSS:

.main,.left,.right{
			min-height: 130px;
		}
		
		.main{
			background-color: blue;
		}
		.left{
			background-color: aqua;
			width: 200px;
		}
		.right{
			background-color: aquamarine;
			width: 300px;
		}

图示：

现在我们开始做布局吧！！！

首先给container加一个css的padding: 0 300px 0 200px;
再给这三个加一个float:left
main被挤压了，给main加一个width:100%
现在要做的就是把left、right移上去到两边就好了。技巧：left增加一个margin-left：-100%，right增加一个margin-left:-300px（解释一下-100%，会让本来就在第二行左边界的left继续向左移动就跳到了上一行，-100%就到了上一行最左边，-300px又为什么到了上一行末尾呢？是因为当left走了之后right自动到第二行开头因为float嘛，然后有了-300px和自身宽度相同就也向左移动，到上一行末尾刚好300px）
会发现main被遮住了，用相对位置定义一下就可以解决啦！给这三个块块加一个position:relative，再给left单独加left:-200px，right单独加right:-300px，就成功啦！！！

完整代码呈上：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>圣杯布局</title>
    <style type="text/css">
    .container {
        padding: 0 300px 0 200px;
		
    }
    .main,.left,.right{
			min-height: 130px;
			float: left;
			position: relative;
		}
		
		.main{
			background-color: blue;
			width: 100%;
		}
		.left{
			background-color: aqua;
			width: 200px;
			margin-left: -100%;
			left: -200px;
		}
		.right{
			background-color: aquamarine;
			width: 300px;
			margin-left: -300px;
			right: -300px;
		}

    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

双飞翼布局
与圣杯布局差别不大，效果相同
HTML:

<div class="container"> 
　　<div class="main">
			<div class="inner">
				inner
			</div>
		</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

CSS：不用相对定位，container最初的留白也可以注释掉

    .container {
        /* padding: 0 300px 0 200px; */
    }
    .main,.left,.right{
			min-height: 130px;
			float: left;
		}
		
		.main{
			background-color: blue;
			width: 100%;
		}
		.left{
			background-color: aqua;
			width: 200px;
			margin-left: -100%;
		}
		.right{
			background-color: aquamarine;
			width: 300px;
			margin-left: -300px;
		}
		.inner{
			margin: 0 300px 0 200px;
		}

绝对定位布局

绝对定位就好比暴力输出，简单易懂，直接上代码

HTML:

<div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

CSS:

.container{
			position: relative;
		}
		
		.main,.left,.right{
			top: 0;
			min-height: 130px;
		}
		
		.main{
			margin: 0 300px 0 200px;
			background-color: aqua;
		}
		
		.left{
			position: absolute;
			left: 0;
			width: 200px;
			background-color: aquamarine;
		}
		
		.right{
			position: absolute;
			right: 0;
			width: 18.75rem;
			background-color: antiquewhite;
		}

flex布局
建议在不熟悉flex的朋友点击链接复习一下，这篇flex的介绍很是详细Flex布局教程我在学习之后再写的如下的圣杯布局。
首先老规矩给出HTML：

<div id="flex">
		<div id="center">我在右边，自适应</div>
        <div id="left">我在左边,width: 200px;</div>

        <div class="right">我在右边，width：300px</div>
    </div>

CSS:

 #flex{
            display: flex;//首先设置为flex布局
            background-color: skyblue;//也可以单独设置子元素颜色
            height: 100px;//定高
            line-height: 100px;//让文字垂直居中
        }

        .right{
            width: 300px;
        }
		#left{
			width: 200px;
			order: -1;//让这个flex-item移动到最左边
		}
        #center{
            background:pink;
            flex-grow: 1;因为left和right定宽了有剩余空间，1就可以铺满剩余空间，默认是0
           text-align: center;//文字水平居中
        }

效果图：

下一篇：原生JS轮播图实现

Da Zeng

关注

12
点赞
踩
32

收藏

觉得还不错? 一键收藏
打赏
2
评论
DaZeng：圣杯布局、双飞翼布局（超详细）

10.21-10.25之 WEB任务（一）1、一周复习hcj,HTML一般用的也就那些东西，了解一下行内元素、块级元素、行内块元素。2、清除浮动（好像是五种还是六种方式）3、BFC（概念、触发、作用、应用）4、居中问题（水平垂直居中方法，大概有十来种，你自己总结一下）5、圣杯布局（flex、float、position要会，尤其前两种，gird和table了解就行）6、轮播图:js原生...
复制链接

扫一扫