一、圣杯布局基本概论

圣杯布局指的是左右两栏固定宽度，中间部分自适应。如下

二、圣杯布局的原理

首先写出整体的布局（header+content+footer）,其中content中包括center、left、right。一定是center在前，left在中，right在后。

    <header>header</header><div id="content"><div id="center" class="cloumn">center</div><div id="left" class="cloumn">left</div><div id="right" class="cloumn">right</div></div><footer>footer</footer>

构思left，right、center的宽度，并且给content设置上响应的左右边距。left中的width一定是和content的padding-left的大小一致；right中的width一定是和content的padding-right的大小一致;center的宽度为100%。

        #content {padding-left: 300px;padding-right: 200px;}#center {width: 100%;}#left {width: 300px;}#right {width: 200px;}

要给center、left，right加上一个左浮动

        .cloumn {float: left;}

把eft移动到center的左边。分为2个步骤:
a、把left移上去（margin-left: -100%是固定的，把left移动到content里面的最左边，%相对于父级定位）

       #left {width: 300px;margin-left: -100%;background-color: darkcyan;}

b、把left移到center的左边（right中定位距离与left盒子的宽度一致）

       #left {position: relative;width: 300px;margin-left: -100%;right: 300px;background-color: darkcyan;}

把right移动到center的右边边。（margin-right与right盒子的宽度一致）

       #right {width: 200px;margin-right: -200px;background-color: yellow;}

三、圣杯布局的完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圣杯布局</title><style>* {margin: 0;padding: 0;}header {background-color: #ccc;}#content {padding-left: 300px;padding-right: 200px;}#center {width: 100%;background-color: cyan;}#left {position: relative;width: 300px;background-color: darkcyan;margin-left: -100%;right: 300px;}#right {width: 200px;background-color: yellow;margin-right: -200px;}.cloumn {float: left;}footer {clear: both;background-color: #ccc;}</style>
</head><body><h1>圣杯布局</h1><header>header</header><div id="content"><div id="center" class="cloumn">center</div><div id="left" class="cloumn">left</div><div id="right" class="cloumn">right</div></div><footer>footer</footer>
</body></html>

01-css经典布局整理-圣杯布局相关推荐

HTML经典布局之圣杯布局详解
圣杯布局预览如下在遇到以下两个要求时(也是圣杯布局的特点),就需要使用到圣杯布局三栏布局中,左栏和右栏需要固定宽,中间栏自动占满剩余宽度要求中间栏优先渲染示例代码如下,为了方便快速阅读和理解, ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
DIV+CSS布局之圣杯布局与双飞翼布局
圣杯布局 & 双飞翼布局简单介绍一下什么是双飞翼布局和圣杯布局: 它们俩都是为了解决三栏布局问题,左右栏宽度固定,中间栏自适应(随着父盒子大小改变而改变).中间栏要放在中间以优先渲染.它们的 ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
双飞翼布局与圣杯布局完全解读
一.两种布局的目的使得左右两边的宽度不随着浏览器窗口的变化而变化,是固定的,只有中间的部分才可以随着窗口变化而变化. 二.两种布局的要点经典圣杯布局通过父亲padding给左右俩腾位置从而不会遮住 ...
双飞翼布局和圣杯布局
双飞翼布局和圣杯布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局.(中间先加载渲染) 双飞翼的布局与实现原理(推荐使用双飞翼布局) 双 ...
你不知道的三列布局之圣杯布局和双飞翼布局（超详细）
前言三列布局相信大家都见过,像上面淘宝.豆瓣等很多平台界面都有使用.他们用到的是圣杯布局和双飞翼布局.圣杯布局和双飞翼布局是一些大厂可能问的问题,圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边 ...
双飞翼布局与圣杯布局再理解
CSS系列之圣杯布局与双飞翼布局文章目录 CSS系列之圣杯布局与双飞翼布局前言一.为什么提出圣杯布局? 二.圣杯布局 1.html代码 2.样式设置三.双飞翼布局 html代码 css样式前 ...
【三栏式布局、双飞翼布局、圣杯布局】09
三栏式布局文章目录三栏式布局 1. 用calc函数实现三栏式布局 2. 双飞翼布局 3. 圣杯布局两边盒子固定宽度,中间盒子自适应的布局. 1. 用calc函数实现三栏式布局 <div c ...

01-css经典布局整理-圣杯布局

圣杯布局

一、圣杯布局基本概论

二、圣杯布局的原理

三、圣杯布局的完整代码

01-css经典布局整理-圣杯布局相关推荐

最新文章

热门文章