css布局笔记（三）圣杯布局，双飞翼布局
圣杯布局和双飞翼布局都是三列布局，两边定宽，中间自适应布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局如下
<!-- 圣杯布局 -->
<!DOCTYPE html>
<html>
<head>
<style>
.con {
padding-left: 150px;
padding-right: 190px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
position: relative;
left:-150px;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-right: -190px;
position: relative;
right: -190px;
}
</style>
</head>
<body>
<div class="con">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>
圣杯布局和双飞翼布局的区别： 解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局
为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局
为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
多了1个div，少用大致4个css属性（圣杯布局中间div的padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4）.
参考：https://blog.csdn.net/ivana_zyf/article/details/79149455
https://blog.csdn.net/Night_Nine_Leaves/article/details/79660762
css布局笔记（三）圣杯布局，双飞翼布局的更多相关文章
- CSS（五）圣杯，双飞翼布局
双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...
- 三栏布局只知道圣杯、双飞翼，最终评级是……F
三栏布局,面试与工作中的常见布局.分左中右三部分,其中左右宽度已知,中间宽度自适应.根据不同的DOM顺序与CSS处理,这里写下了五类布局方式. 一.浮动布局 1 圣杯布局 L:"我问你,你就 ...
- 你不知道的css各类布局（三）之自适应布局
自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...
- CSS学习笔记（12）--Flex 布局教程：实例篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...
- CSS学习笔记（11）--Flex 布局教程：语法篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- CSS学习笔记三：自定义单选框，复选框，开关
一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...
- css学习笔记三
总结一下水平居中和垂直居中的方法,欢迎交流指正,共同进步! 1.水平居中 1.1):行内元素水平居中,在其父类设置text-align:center; 1.2): 块级元素水平居中有三种 第一种:定宽 ...
- 两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）
demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...
- CSS圣杯布局、双飞翼布局详解
三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...
随机推荐
- Sailing
Sailing 目录 1基本信息 2歌曲简介 3歌词内容 4歌手简介 5专辑介绍 1基本信息编辑 歌曲: Sailing 所属专辑: Atlantic Crossing 艺人:Rod Stewart[ ...
- Java基础面试题（Hibernate）
Hibernate是一个什么样的框架? Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hi ...
- ORACLE数据库入门再在屋里坐会
一.数据库简介 数据库概述 数据库(database)是按照数据结构来组织,存储和管理数据的仓库,它产生与距今五十年前. 简单来说是本身可视为电子化的文件柜--存储电子文件的处所,用户可以对文件中的数 ...
- python第十六课——外部函数and内部函数
1.外部函数&内部函数 内部函数: 定义在某个函数的内部,就是内部函数: [注意事项]: 1).内部函数可以随意使用它外部函数中的内容 2).外部函数不能使用内部函数中的内容 3).内部函数不 ...
- [Java多线程] LinkedBlockingQueue
java.util.concurrent包下的新类.LinkedBlockingQueue就是其中之一,是一个阻塞的线程安全的队列,底层采用链表实现. LinkedBlockingQueue Link ...
- 20165318 2017-2018-2 《Java程序设计》第四周学习总结
20165318 2017-2018-2 <Java程序设计>第四周学习总结 IDEA安装 按照娄老师Intellj IDEA 简易教程,我下载了IDEA但是由于没有注册学校邮箱,我没办法 ...
- 4199. [NOI2015]品酒大会【后缀数组+并查集】
Description 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品 酒家”和“首席猎手”两个奖项,吸引了众多品酒师参加.在大会的晚餐上,调酒师 ...
- Upgrade Oracle Database 12c Release 2(12.2) RAC on RHEL7.3 with RU
Upgrade Oracle Database 12c Release 2(12.2) RAC on RHEL7.3 -- [ RU: 26610291 (GRID INFRASTRUCTURE RE ...
- MySQL无法存储Emoji表情问题
数据插入的时候报错: 1366 - Incorrect string value: '\xF0\x9F\x98\x81' for column 'job' at row 23 解决办法: 1.修改配置 ...
- 【转】Spring Boot干货系列：（六）静态资源和拦截器处理
前言 本章我们来介绍下SpringBoot对静态资源的支持以及很重要的一个类WebMvcConfigurerAdapter. 正文 前面章节我们也有简单介绍过SpringBoot中对静态资源的默认支持 ...