圣杯布局：经典三栏布局，左右两边宽度固定，中间自适应

圣杯布局在前端构建页面是最常见的一种布局方式，也是前端面试中最常被问到的一问题，下面通过三种方式去实现圣杯布局！附代码！可以一对比一下哪种方式最便捷！个人认为grid布局最好！

效果图：

圣杯布局

（一）float方式

<div>圣杯布局-float方式</div><div id="header">#header</div><div id="container"><div id="center" class="column"></div><div id="left" class="column"></div><div id="right" class="column"></div></div>
<div id="footer">#footer</div>//style样式<style>body,html {padding: 0;}
#header,#footer {width: 100%;height: 100px;background-color: aquamarine;}#footer {clear: both;}#container {padding: 0 200px;}#container .column {float: left;height: 300px;position: relative;}#container #center {width: 100%;background-color: beige;}#container #left {width: 200px;margin-left: -100%;left: -200px;background-color: blanchedalmond;}#container #right {width: 200px;background-color: black;margin-right: -100%;}
</style>

（二）flex方式（比较简单的）

<div>圣杯布局-flex方式</div><div id="header">#eader</div><div id="container"><div id="left" class="column">left</div><div id="center" class="column">center</div><div id="right" class="column">right</div></div>
<div id="footer">#footer</div>//style样式<style>
#header,#footer {width: 100%;height: 100px;background-color: aquamarine;}#container {display: flex;}#container .column {height: 300px;}#container #left,#right {width: 200px;background-color: black;}#container #center {flex: 1;}
</style>

（三）grid布局（最简单的）

<div>圣杯布局-grid方式</div><div id="header">#eader</div><div id="container"><div id="left" class="column">left</div><div id="center" class="column">center</div><div id="right" class="column">right</div></div>
<div id="footer">#footer</div>//style方式
<style>#header,#footer {width: 100%;height: 100px;background-color: aquamarine;}#container {display: grid;grid-template-columns: 200px 1fr 200px;}#container #left,#right {background-color: bisque;height: 200px;}#container #center {background-color: black;height: 200px;}
</style>

flex布局和grid布局都很好理解，没有float方式那么多代码，flex方式是最常用的，grid布局可能用的比较少不熟悉，所以不常用。float可以抛弃，但是面试中可能会被问到它的写法，还是要看一看！

圣杯布局-三种实现方式，css经典布局相关推荐

移动端布局三种视口_移动端布局：视口viewport的理解
移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一 ...
Html CSS的三种链接方式
感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/ ...
简述css样式的三种引入html的方式,css-1,css的三种引入方式基本选择器
css三种引入方式和四种基本选择器 /*内接样式*/ /*1 选择器选中的是 '共性'*/span{color:green;font-size:30px; } /*组合选择器*/ul,ol{lis ...
css三种引入方式以及其优先级的说法
css 三种引入方式方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用分号 : ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
006 CSS三种引入方式
CSS三种引入方式一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
[css] 说下line-height三种赋值方式有何区别？
[css] 说下line-height三种赋值方式有何区别? line-height 可以有带单位及不带单位的写法(感觉其实是两种).div{line-height: 24px;line-height ...
外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明
随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...
CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...

圣杯布局-三种实现方式，css经典布局

圣杯布局

（一）float方式

（二）flex方式（比较简单的）

（三）grid布局（最简单的）

圣杯布局-三种实现方式，css经典布局相关推荐

最新文章

热门文章