三栏布局只知道圣杯、双飞翼，最终评级是……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.绝对定位法 ...
随机推荐
- [luogu]P1016 旅行家的预算[贪心]
[luogu]P1016 旅行家的预算 题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D1.汽车油箱的容量C(以升为单位).每升汽油能 ...
- CodeForces - Path Queries (并查集+离线查询)
题目:https://vjudge.net/contest/323699#problem/A 题意:给你一棵树,然后有m个查询,每次查询问一条路径最大边小于给定查询的数量 思路:首先我们看到,我们其实 ...
- spring+JdbcTemplate简单使用(一)
目录 @ 1. 环境配置 maven(项目管理) idea(编译器) jdk1.8(Java环境) MySQL5.6(MySQL数据库) 2. 创建项目 在 idea 中创建普通的 maven 项目 ...
- xiugai完了
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- HDU6672 Seq（找规律）
HDU6672 Seq 对于递推式 \(a_n = (\sum_{i = 1}^{n-1}a_i * i)\%n\) 打表列出 \(a_i\) 的前 \(100\) 项,发现有以 \(6\) 为循环的 ...
- MySQL5.7.21报错：[Err] 1055
[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated c ...
- STM32 I2C 难点---这个不错，留着慢慢研究
来自:http://bbs.ednchina.com/BLOG_ARTICLE_2154168.HTM I2C 总线在所有嵌入式系统中用得极广, 是一个工业级别的总线, 但由于STM32 是一个32位 ...
- Tomcat各个版本的下载地址包括源码
Tomcat各个版本的下载地址包括源码: http://archive.apache.org/dist/tomcat **************** 选择版本 **************** ** ...
- POJ - 3176 Cow Bowling 动态规划
动态规划:多阶段决策问题,每步求解的问题是后面阶段问题求解的子问题,每步决策将依赖于以前步骤的决策结果.(可以用于组合优化问题) 优化原则:一个最优决策序列的任何子序列本身一定是相当于子序列初始和结束 ...
- 爬虫之requests 请求
1.发送不同的请求 import requests r = requests.get('https://www.baidu.com/') r = requests.post('http://httpb ...