三栏布局只知道圣杯、双飞翼，最终评级是……F
三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。
根据不同的DOM顺序与CSS处理，这里写下了五类布局方式。
一、浮动布局
1 圣杯布局
L：“我问你，你就是我的Master吗？”
……
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
padding:0px 200px;
overflow: hidden;
}
.left, .center, .right {
position:relative;
min-height:160px;
}
.left{
width:200px;
margin-left:-100%;
float:left;
left:-200px;
background-color:deepskyblue;
}
.center {
width:100%;
float:left;
background-color:gray;
}
.right {
width:200px;
margin-left:-100%;
float:right;
right:-200px;
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="center">
<h1>圣杯布局</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</section>
</body>
</html>
2 双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
}
.left, .center, .right {
min-height:160px;
}
.left{
width:200px;
margin-left:-100%;
float:left;
background-color:deepskyblue;
}
.center {
width:100%;
float:left;
background-color:gray;
}
.right {
width:200px;
margin-left:-100%;
float:right;
background-color:pink;
}
.center-inner {
margin:0px 200px
}
</style>
</head>
<body>
<section class="content">
<div class="center">
<div class="center-inner">
<h1>双飞翼布局</h1>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</section>
</body>
</html>
3 浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Float布局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.left,
.center,
.right {
min-height: 160px;
}
.left {
width: 200px;
float: left;
background-color: deepskyblue;
}
.center {
background-color: gray;
}
.right {
width: 200px;
float: right;
background-color: pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>中间部分的内容</h1>
</div>
</section>
</body>
</html>这样会有个问题，就是center高度大于两侧的时候，会duang的蔓延到两侧，像这样：
相应的，为了让页面成为我们需要的样子，引入了两个解决方案。
BFC修正
L：“我问你，你这里是不是有什么问题？(指着脑袋)”
……
BFC(Block Fromatting Context),直译就是块级格式化上下文。
先知其然吧，概念差不多又需要整理一篇文章。用了它，内外部元素渲染互不影响，center就不会蔓延到两侧了。
具体代码：
.center{
overflow:hidden;
background-color: gray;
}
Margin修正
.center{
margin: 0 200px;
background-color: gray;
}
二、Flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex布局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
width:100%;
display:flex;
min-height:160px;
}
.left{
flex-basis: 200px;
background-color:deepskyblue;
}
.center {
flex-grow:1;
background-color:gray;
}
.right {
flex-basis: 200px;
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="center">
<h1>Flex布局</h1>
</div>
<div class="right"></div>
</section>
</body>
</html>
三、绝对定位布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位布局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
position:relative;
overflow: hidden;
}
.left, .center, .right {
min-height:160px;
}
.left{
position:absolute;
width:200px;
top:0px;
left:0px;
background-color:deepskyblue;
}
.center {
margin:0px 200px;
background-color:gray;
}
.right {
position:absolute;
width:200px;
top:0px;
right:0px;
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="center">
<h1>绝对定位布局</h1>
</div>
<div class="right"></div>
</section>
</body>
</html>
四、Table布局
现在很少人用的table标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table布局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
width:100%;
}
.left{
width:200px;
background-color:deepskyblue;
}
.center {
background-color:gray;
}
.right {
width:200px;
background-color:pink;
}
</style>
</head>
<body>
<table class="content" border="0" cellspacing="0" cellpadding="0" height="160px">
<tr>
<td class="left"></td>
<td class="center">Table布局</td>
<td class="right"></td>
</tr>
</table>
</body>
</html>
display:table-cell与上面一个意思
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table-cell</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
display:table;
width:100%;
height:160px;
}
.left, .center, .right {
display:table-cell;
}
.left{
width:200px;
background-color:deepskyblue;
}
.center {
background-color:gray;
}
.right {
width:200px;
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="center">
<h1>table-cell</h1>
</div>
<div class="right"></div>
</section>
</body>
</html>
五、网格布局
如果说flex用于一维，grid就是用于二维的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网格布局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
display: grid;
width: 100%;
grid-template-rows: 160px;
grid-template-columns: 200px 1fr 200px;
}
.left{
background-color:deepskyblue;
}
.center {
background-color:gray;
}
.right {
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="center">
<h1>网格布局</h1>
</div>
<div class="right"></div>
</section>
</body>
</html>
好了，后续再来说一下各自的优缺点。
你一赞，我一赞，开开心心去吃饭~
三栏布局只知道圣杯、双飞翼，最终评级是……F的更多相关文章
- CSS布局——三栏布局
说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...
- css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等
1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- 三栏布局的三个典型方法（圣杯、双飞翼、flex）
聊聊三栏布局----左右定宽,中间自适应. 效果图: 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- CSS三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
- 详解 CSS 七种三栏布局技巧
作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...
- css中常用的七种三栏布局技巧总结
三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...
- CSS系列，三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
随机推荐
- Python_009(函数,命名空间)
一.函数 1.函数格式: #定义函数: def function(): 函数体 return 返回值 #调用函数: function() ret = function() 这是得到返回值. 这里是用关 ...
- PHPExcel笔记
PHPExcel可是个好东东,功能强大,下面这是一个phpExcel简易中文帮助手册,列举了各种属性,以及常用的操作方法,是每一个都用实例加以说明,希望对大家有所帮助. 引用PHPExcel incl ...
- [CSP-S模拟测试]:Median（暴力+模拟）
题目描述 定义两个数列: $$S=\{S(1),S(2),...,S(n)\}\text{和}S_2\{S_2(1),S_2(2),...,S_2(n)\}$$ $$S(k)=(p_k\times k ...
- mysql中 key 、primary key 、unique key 和 index 有什么不同
mysql中 key .primary key .unique key 和 index 有什么不同 key 是数据库的物理结构,它包含两层意义和作用, 一是约束(偏重于约束和规范数据库的结构完整性), ...
- LintCode之移动零
题目描述: 分析:由于要使非零元素保持原数组的顺序,我只能想出在找到一个0时,逐个移动数组元素使得后一个元素覆盖前一个元素,再将这个0移到后头去. 我的代码: public class Solutio ...
- python 数字系列-无穷大与NaN
无穷大与NaN 问题 你想创建或测试正无穷.负无穷或NaN(非数字)的浮点数. 解决方案 Python并没有特殊的语法来表示这些特殊的浮点值,但是可以使用 float() 来创建它们.比如: > ...
- 【FICO系列】SAP FICO模块-财务账期的打开和关闭
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FICO模块-财务账期的 ...
- 排序算法四：快速排序(Quicksort)
快速排序(Quicksort),因其排序之快而得名,虽然Ta的平均时间复杂度也是O(nlgn),但是从后续仿真结果看,TA要比归并排序和堆排序都要快. 快速排序也用到了分治思想. (一)算法实现 pr ...
- OSPF协议——原理及实验
首先命令部分: ospf 1 进入ospf协议 area 0 划定自治区域 因为实验只用了1个区域所以参数就为0 也就是骨干区域 network +网段+反写掩码(0.0.0.255)指定运行OSPF ...
- iintellij IDEA运行环境使用教程
1.官网:https://www.jetbrains.com 链接: https://pan.baidu.com/s/10QKLn1bGEW9W0pXEp6WR1A 提取码: vt2b 看官觉得有用留 ...