三栏布局只知道圣杯、双飞翼，最终评级是……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.绝对定位法 ...
随机推荐
- Promise和async/await
1.promise对象 promise 对象有三种状态:pending(进行中).fulfilled(已成功)和 rejected(已失败).promise 对象的状态改变,只有两种可能:从 pend ...
- CKEDITOR无缝粘贴word
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...
- 【CF1243B1】Character Swap (Easy Version)【思维】
题意:给你两个字符串,问是否存在交换方案使得两个字符串变成一样的,方案为只交换一次且只交换s1与s2里的一个字符 题解:若一开始就相同,则存在交换方案 若一开始不同的位置为1个或大于2个,则不存在方案 ...
- Nexus Repository OSS 3安装配置使用
Nexus Repository OSS 3是一个开源的仓库管理系统,提供了更加丰富的功能,而且安装.配置.使用起来也更加简单方便.OSS 3版本主要支持的仓库(Repository)包括如下: bo ...
- servlet技术之下载文件演示（DownloadServlet.class）
servlet技术之下载文件演示(DownloadServlet.class) 文件是指把服务器端文件发送到客户端,Servlet能够向客户端发送任意格式的文件数据,例程的DownloadServle ...
- vue子组件获取父组件的数据
- promise以及async、await学习总结
Promise/async.await帮我们解决了什么 它给我们提供了一种新的异步编程解决方案,同时避免了困扰已久的回调地狱 // 异步的处理可能会产生这样的回调地狱(第二个异步操作和第一个异步的结果 ...
- Cookie由谁设置、怎么设置、有什么内容？
Cookie是由服务器生成,保存在客户端本地的一个文件,通过response响应头的set-Cookie字段进行设置,下面是一个示例: Cookie包含什么信息? 它可以记录你的用户ID.密码.浏览过 ...
- PHP 常用算法【总结】
一.声明数组 ini_set("max_execution_time", "12000"); $arr = [2,4,1,7,33,4,5,6,7,11,1,0 ...
- 622FThe Sum of the k-th Powers
题目大意 求$\sum_{i=1}^{n} i^k$ 分析 我们发现这是一个$k+1$次多项式 因此我们求出前$k+2$项然后插值即可 由于$x_i = i$ 因此公式里面的乘机可以通过预处理然后循环 ...