三栏布局只知道圣杯、双飞翼，最终评级是……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.绝对定位法 ...
随机推荐
- elasticsearch6.8.1 x-pack插件破解
一.为什么要破解x-pack? 因为涉及到了ES服务的安全性.ES服务如果被劫持,数据直接会被删除.ES登录账号和密码的设置是通过x-pack来实现的,官方只给了免费的30天的使用权,而且 ...
- python_012
一.内置函数 1.sorted()排序函数 a:语法sorted(Iterable,key = None,reverse = False) Iterable:可迭代对象;key:排序规则(函数) ls ...
- PHP获取时间排除周六、周日的两个方法
//方法一: <?php $now = time(); //指定日期用法 $now = strtotime('2014-01-08') ; $day = 3600*24; $total = 12 ...
- python&数据分析&数据挖掘--参考资料推荐书籍
1.要用python做数据分析,先得对python语言熟悉,推荐一本入门书 :笨方法学python (learn python the hard way),这本书用非常有趣的讲述方式介绍了python ...
- Java网络编程与NIO详解2：JAVA NIO 一步步构建IO多路复用的请求模型
本文转载自:https://github.com/jasonGeng88/blog 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 http ...
- 简易的Web自动化链接测试（Xenu）
1.理解链接需要测试的测试点: [1] 要测试的链接页面是否存在 [2] 确定存在链接页面,然后就考虑跳转后的页面是不是对应需求的页面[3] 保证Web系统上没有孤立的页面(没有链接指向该页面) 2. ...
- python爬虫学习之路-遇错笔记-1
当在运行爬虫时同时开启了Fidder解析工具时(此爬虫并不是用于爬取手机端那内容,而是爬去电脑访问的网页时),访问目标站点会遇到以下错误: File "C:\Users\litao\AppD ...
- jenkins之定时任务配置
jenkins可以配置任务定时执行 1.jenkins配置解释说明 在每个job的配置项里,有一个构建触发器配置,勾选“定时检查版本库选项”,在输入框可根据需求配置时间: 日程表填写格式: 日程表(S ...
- Nginx 实现全站 HTTPS（基于 Let's Encrypt 的免费通配符证书）
单域名证书的生成可以 参考这里. acme.sh 项目中文文档 Let's Encrypt 在 18 年 1 月份推出了 ACME v2,支持通配符域名证书,对小网站.个人站长的友好度进一步增加. 常 ...
- WEB服务端安全---文件上传漏洞
1.简述 文件上传漏洞是指用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务端命令的能力.这种攻击方式是最直接和有效的,而且互联网中我们经常会用到文件上传功能,它本身是没有问题的,正常的业 ...