CSS布局（圣杯、双飞翼、flex）
圣杯布局(float + 负margin + padding + position)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>圣杯</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
float: left;
width: 100%;
height: 500px;
background:red;
}
.sub{
position: relative;
float: left;
left: -200px;
width: 200px;
height: 500px;
margin-left: -100%;
background:blue;
}
.extra{
position: relative;
float: left;
right: -180px;
width: 180px;
height: 500px;
margin-left: -180px;
background:green;
}
.content{
padding: 0 180px 0 200px;
}
</style>
</head>
<body>
<!-- 圣杯布局(float + 负margin + padding + position) -->
<div class="content">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
</body>
</html>
双飞翼布局(float + 负margin + margin)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
float: left;
width: 100%;
height: 500px;
background:red;
}
.sub{
float: left;
width: 200px;
height: 500px;
margin-left: -100%;
background:blue;
}
.extra{
float: left;
width: 180px;
height: 500px;
margin-left: -180px;
background:green;
}
.main{
margin: 0 180px 0 200px;
}
</style>
</head>
<body>
<!-- 双飞翼布局(float + 负margin + margin) -->
<div class="content">
<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
</body>
</html>
flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
display: flex;
}
.sub{
width: 200px;
height: 500px;
background:blue;
}
.main{
flex:1;
height: 500px;
background:red;
}
.extra{
width: 180px;
height: 500px;
background:green;
}
</style>
</head>
<body>
<!-- flex布局 -->
<div class="content">
<div class="sub"></div>
<div class="main"></div>
<div class="extra"></div>
</div>
</body>
</html>
一样效果，不一样的布局。如下：
CSS布局（圣杯、双飞翼、flex）的更多相关文章
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
- CSS布局 — 圣杯布局与双飞翼布局
圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- css布局笔记（三）圣杯布局，双飞翼布局
圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- CSS 之 圣杯布局&双飞翼布局
圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...
- CSS布局之圣杯布局和双飞翼布局
其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...
随机推荐
- 005-CSS让页脚始终在底部不论页面内容多少
让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部. 方案一: <!DOCTYPE html> <html> <head> <meta chars ...
- linux 命令 创建 Django 项目 使用路由返回首页界面
1.安装mysql数据库 2.安装pymysql.pip3 install pymysql 3.首先使用cd 命令进入创建的项目文件夹 4.使用django-admin startproject we ...
- 激光三角法点云重建分享——halcon 方法
如今视觉应用方面单纯依靠2D图像解决问题存在很多问题.稳定性差.定位不准确.还有配合机器人抓取方面只能抓高度一致的物品.其实在Halcon算法库有非常强大的三维算法.包括点云重建.激光三角法(2D相机 ...
- maven配置国内阿里云镜像
<mirrors> <mirror> <id>alimaven</id> <mirrorOf>central</mirrorOf> ...
- Linux基础命令---ipcs显示进程通信
ipcs ipcs指令用来显示进程间通信状况.“-i”选项允许指定特定的资源id.将只打印有关此id的信息. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.SUS ...
- CentOS 7Google浏览器
CentOS 7安装并启动Google浏览器(★firecat亲测有效★) 2018年09月23日 12:42:47 libaineu2004 阅读数:3088 版权声明:本文为博主原创文章,未 ...
- CCF CSP 201503-1 图像旋转 （降维）
题目链接:http://118.190.20.162/view.page?gpid=T27 问题描述 试题编号: 201503-1 试题名称: 图像旋转 时间限制: 5.0s 内存限制: 256.0M ...
- PyTorch in Action: A Step by Step Tutorial
PyTorch in Action: A Step by Step Tutorial PyTorch in Action: A Step by Step Tutorial Installation ...
- OGG 18.1 for mysql远程捕获测试
Ogg18.1 remote capture要求mysql为5.7版本,只能从linux远程捕获mysql on windows or linux,且不支持DDL捕获.支持远程mysql为commun ...
- Java8-对map过滤
1.对map按值过滤返回值 public class TestMapFilter { public static void main(String[] args) { Map<Integer, ...