CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局
虽然两者的实现方法略有差异，不过都遵循了以下要点：
1.两侧宽度固定，中间宽度自适应
2.中间部分在DOM结构上优先，以便先行渲染
3.允许三列中的任意一列成为最高列
4.只需要使用一个额外的<div>标签
圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
.header{
height:50px;
background: #666;
text-align: center;
}
.main{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
.middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
.left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative;
left:-180px;
}
.right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position:relative;
right:-200px;
}
.footer{
height:50px;
background: #666;
text-align: center;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="main">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style type="text/css">
.header {
height: 100px;
background: bisque;
}
.left {
width: 200px;
height: 300px;
background: coral;
float: left;
margin-left: -100%;
margin-right: -200px;
}
.center {
background: palegreen;
float: left;
width: 100%;
}
.inside{
margin-left: 200px;
margin-right: 180px;
}
.right {
width: 180px;
height: 200px;
background: darkorange;
float: left;
margin-left: -180px;
}
.footer {
height: 200px;
background: salmon;
clear: both;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="main">
<div class="center">
<div class="inside">
中间自适应区域
</div>
</div>
<div class="left">左边固定区域</div>
<div class="right">右边固定区域</div>
</div>
<div class="footer">footer</div>
</body>
</html>
CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局的更多相关文章
- css高度已知，左右定宽，中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- css中常用的七种三栏布局技巧总结
三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...
- 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- CSS布局——三栏布局
说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...
- 三栏布局只知道圣杯、双飞翼，最终评级是……F
三栏布局,面试与工作中的常见布局.分左中右三部分,其中左右宽度已知,中间宽度自适应.根据不同的DOM顺序与CSS处理,这里写下了五类布局方式. 一.浮动布局 1 圣杯布局 L:"我问你,你就 ...
- 三栏布局的三个典型方法（圣杯、双飞翼、flex）
聊聊三栏布局----左右定宽,中间自适应. 效果图: 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> ...
- css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等
1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...
- 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
随机推荐
- day 18 random模块 时间模块 sys模块 os模块
import random 利用random模块可以进行从一个列表或者数字范围之间随机取出一个数字 # 取随机小数 : 数学计算 print(random.random()) # 取0-1之间的小数 ...
- mysql如何设置主从（读写分离），redis发布功能，以及redis的持久化存储（rdb,aof）
1 mysql基本命令 1.启动mysql systemctl start mariadb 2.linux客户端连接自己 mysql -uroot -p -h 127.0.0.1 3.远程链接mysq ...
- 如何使用Selenium来计算自动化测试的投资回报率？
跨浏览器测试是一种测试,需要大量的精力和时间.通过不同的浏览器,操作系统,设备,屏幕分辨率测试Web应用程序,以评估针对各种受众的Web内容呈现的过程是一项活动.特别是如果手动处理.使用Seleniu ...
- easywechat微信开发SDK之小微商户进件（一）
微信本身不提供小微商户进件的SDK,偶然发现easywechat这么个东西,官网地址是https://www.easywechat.com/ 整合了微信开发中常用的接口,包括微信公众号相关接口,微信 ...
- django-migrate一败再败
python3 manage.py makemigrations # 生成数据库迁移文件 python3 manage.py migrate # 迁移数据库 简简单单两条命令就完成了django的数据 ...
- 如何提高 PHP 代码的质量？第二部分 单元测试
在“如何提高 PHP 代码的质量?”的前一部分中:我们设置了一些自动化工具来自动检查我们的代码.这很有帮助,但关于我们的代码如何满足业务需求并没有给我们留下任何印象.我们现在需要创建特定代码域的测试. ...
- CSS 使用id属性的规则
html中的id属性是什么?本篇文章给大家带来的内容是介绍html中的id属性,让大家了解id属性的使用方法,希望对大家有所帮助. html的id属性是什么? html的id属性其实就是一个HTML元 ...
- js抽奖概率随机取出数据(简单示例)
在平常活动开发当中,经常会碰到抽奖等类似的js功能,那么下面我们随机取数组中的一条来展示出来. ( 一 ) 无概率问题 var gift_ = ['apple pro一台','iphoneX一台',' ...
- luogu P1356 数列的整数性 |动态规划
题目描述 对于任意一个整数数列,我们可以在每两个整数中间任意放一个符号'+'或'-',这样就可以构成一个表达式,也就可以计算出表达式的值.比如,现在有一个整数数列:17,5,-2,-15,那么就可以构 ...
- python数据挖掘第一篇：正则表达式
正则表达式 re 模块 re.match(pattern,string[,flag]) match方法 从首字母开始匹配,如果包含pattern字符串,则匹配成功,返回match对象,失败则返回Non ...