实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现
文章目录
- 实现圣杯布局和双飞翼布局
- float + margin负值+relative/添加盒子
- 前期准备
- 圣杯布局 margin负值+relative
- 双飞翼布局 margin负值+添加盒子
- flex实现圣杯布局
- grid实现圣杯布局
实现圣杯布局和双飞翼布局
本质:三列布局，左右两边固定，中间自适应且优先加载
优先加载:主区域标签写在最前面
<header>头部</header>
<div class="box"><div class="center">主区域</div><div class="left">左区域</div><div class="right">右区域</div>
</div>
<footer>底部</footer>
float + margin负值+relative/添加盒子
前期准备
1.三个区域的盒子向左浮动:三栏在一行显示
.box div{float:left;
}
问题:出现高度塌陷
原因:父元素的高度默认被子元素撑开。当子元素浮动后，完全脱离文档流，子元素将无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失后，其下的元素会自动上移，影响布局。
解决办法:清除浮动
清除浮动是指该元素恢复浮动元素没有浮动之前的位置
给受影响的盒子添加clear属性，clear元素的原理是设置清除浮动以后，浏览器会自动为元素添加上外边距，所以添加了clear的属性不可以手动添加margin-top。
2.清除浮动 不影响后面区域
原理:在父元素的后面添加一个空标签(行内元素)，清除浮动对其的影响并使其为块元素，浏览器自动改变margin-top使其可以撑开父元素。
需要一个子元素占位，清除浮动的影响，回到应该从撑起来的状态。
.box::after{content:"";display:block;clear:both;
}
3.中间元素自适应
中间元素自适应:width:100%
.center{background-color: pink;width: 100%
}
float 使他们处在了同一行， 只是center把一行都占据了， 把其他两个都挤下去了。
圣杯布局 margin负值+relative
box设置一个padding：0 100px,将左右两边各腾出100px宽度。
①这里就是圣杯布局和双飞翼布局不一样的地方！通过padding设置中间区域的实际大小是不包含左右区域的。
②给左右区域固定栏腾出位置，我们这里假设左右区域固定的大小是100px。margin负值移动，将三列布局显示在一行
left、right都是被挤下去的，那么将left向左移动一行的距离，left就可以显示在这一行的最开始了，right只需要向左移动100px就可以在一行显示了。
.left{background-color: red;width: 100px;margin-left: -100%;/*100%相对于父元素来说*/
}
.right{background-color: blue;width: 100px;margin-left: -100px;
}
- 将左右区域定位到固定位置
relative是参照于元素A原来的位置(开启相对定位的元素A)在文档流中的位置进行定位的
.left{background-color: red;width: 100px;margin-left: -100%;position: relative;left: -100px;
}
.right{background-color: blue;width: 100px;margin-left: -100px;position: relative;left: 100px;
}
双飞翼布局 margin负值+添加盒子
- margin负值移动，将三列布局显示在一行 --这一步相同的
.left{background-color: red;width: 100px;margin-left: -100%;/*100%相对于父元素来说*/
}
.right{background-color: blue;width: 100px;margin-left: -100px;
}
中间区域的内容不见了,在中间区域里面添加的一个盒子，并给盒子设置margin：0 200px
所以说双飞翼布局，中间区域center占的还是一行的空间，只是inner占据到了中间位置
<div class="header">header</div><div class="box"><div class="center"><div class="inner">主区域</div></div><div class="left">左区域</div><div class="right">右区域</div></div><div class="footer">footer</div>
//css
.inner{margin: 0 100px;
}
flex实现圣杯布局
- 先准备好布局
<style>
/* 设置颜色为了方便看见效果 */
.header,.footer{background-color: blanchedalmond;width: 100%;
}
.center{background-color: pink;
}.left{background-color: red;width: 100px;
}
.right{background-color: blue;width: 100px;
}</style>
<body><div class="header">header</div><div class="box"><div class="center">主区域 </div><div class="left">左区域</div><div class="right">右区域</div></div><div class="footer">footer</div></body>
2. 中间区域flex:1实现自适应
.box{display: flex;
}
.center{background-color: pink;flex:1;/*自适应*/
}
- 移动位置使得center到中间
.center{background-color: pink;flex:1;/*自适应*/order:2;/*移动到中间*/
}.left{background-color: red;width: 100px;order:1;
}
.right{background-color: blue;width: 100px;order:3;
}
grid实现圣杯布局
<style>
.header,.footer{background-color: blanchedalmond;width: 100%;
}
.box{display: grid;grid-template-columns:100px 1fr 100px;grid-template-areas: "a b c";
}
.center{background-color: pink;grid-area:b ;
}.left{background-color: red;width: 100px;grid-area:a
}
.right{background-color: blue;width: 100px;
}
</style><body><header>头部</header><div class="box"><div class="center">主区域</div><div class="left">左区域</div><div class="right">右区域</div></div><footer>底部</footer>
</body>
实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现相关推荐
- 圣杯布局与双飞翼布局全解
圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的 ...
- 八十九、常见的圣杯布局和双飞翼布局
@Author:Runsen 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式. 圣杯布局 圣杯布局是经典的css布局,左右两栏的宽度固定不变,中间那一栏是自适应. 使用弹性盒子布局实现圣杯 ...
- 经典的三栏布局：圣杯布局，双飞翼布局，flex布局
需求: 两边栏固定宽度,中间宽度自适应,一般左边栏为导航,右边栏为广告,中间栏为主要内容的展示,div块上中间栏放在第一位,重要的东西放在文档流前面可以优先渲染. 圣杯布局和双飞翼布局的共同特点都是利 ...
- [css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
[css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 一: section{height: 100%; overflow: hidden;clear:both; } .left{ height: ...
- 双飞翼布局内容不换行_web前端入门到实战：圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...
- css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言 我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
- 对于圣杯布局和双飞翼布局的新认识
今天刷题的时候碰见了一道要求使用双飞翼布局的题.于是便对比了一下圣杯布局得到了点新认识. 我们都知道圣杯布局和双飞翼布局都实现了中间宽度自适应,两边定宽的效果.这样做的优势是重要的东西放在文档流前面可 ...
- css圣杯布局与双飞翼布局_CSS布局研讨会已于2018年更新
css圣杯布局与双飞翼布局 Yesterday I made live fourteen brand new videos, plus a bunch of updates to existing m ...
- 大厂面试必考题：三行布局之圣杯布局和双飞翼布局的区别
前言 今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别,这两个三行布局一直是一些大厂前端面试的高频考点,带你走进大厂面试题,活不多说,冲冲冲~ 布局效果 这两个种三行布局效果是一样的,实现的效果 ...
最新文章
- Elasticsearch——Search的基本介绍
- java 安装后找不到文件_(已解决)jdk安装 系统找不到文件C:\ProgramData\Oracle\Java\javapath\java.exe...
- pytorch基础知识整理（五） 优化器
- [数论]拓展中国剩余定理
- 一块网卡设置多个IP地址
- mysql六:索引原理与慢查询优化
- Nginx七层负载均衡的案例
- MySQL入门之存储过程与存储函数
- 【高效能人士的七个习惯】 第二部分 个人的成功：从依赖到独立（史蒂芬·柯维）...
- 读《人月神话》有感2
- CCFollow和ActionCallFunc
- 深度学习论文TOP10，2019一季度研究进展大盘点
- scp 免输入密码的方法
- Linux emacs考场配置及对拍脚本
- python入口文件详解_Python基础系列讲解——那些py文件中容易忽略的细节
- 爬虫python下载视频_利用python爬虫通过m3u8文件下载ts视频
- Matlab的自相关函数corr
- NLP学习笔记「第二章」2.2 N-gram Language Models(N元语言模型)
- Pygame 官方文档 - pygame.display
- 最全的软件测试面试题（含答案）