CSS实现比翼双飞和圣杯布局模型效果
1.首先加载的是中间部分,其次是左边,然后是右边
2.中间是自适应,二边是定宽
实现方法
1.grid
2.margin float position:releative父亲加padding 挤进去
3.margin float box-size:border-box
1.grid
html:
<div class="wrap"><div class="header">header</div><div class="middle">middle</div><div class="left">left</div><div class="right">right</div><div class="footer">footer</div></div>
css:
.middle {grid-area: middle;background-color: pink;}.left {grid-area: left;background-color: red;}.right {grid-area: right;background-color: blue;}.header {grid-area: header;background-color: yellow;}.footer {grid-area: footer;background-color: gray;}.wrap {display: grid;grid-template-areas: "header header header" "left middle right" "footer footer footer";grid-template-columns: 150px 1fr 150px;grid-template-rows: 150px 1fr 150px;text-align: center;height: 500px;width: 500px;}
实现效果:
2.margin float position:releative父亲加padding 挤进去
html:
<div class="header">header</div><div class="wrap"><div class="middle">middle</div><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div>
css:
.header,.footer {height: 30px;text-align: center;background: gray;}.wrap {overflow: hidden;padding: 0 200px;}.middle,.left,.right {float: left;min-height: 130px;position: relative;}.middle {width: 100%;background: pink;}.left {margin-left: -100%;background: blue;width: 200px;left: -200px;}.right {background: yellow;margin-left: -200px;width: 200px;right: -200px;}.footer {clear: both;}
效果:
3. margin float box-size:border-box
html:
<div class="header">header</div><div class="wrap"><div class="middle">middle</div><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div>
css:
.header,.footer {height: 30px;text-align: center;background: gray;}.wrap {overflow: hidden;}.middle,.left,.right {float: left;min-height: 130px;}.middle {width: 100%;background: pink;box-sizing: border-box;padding: 0 200px;}.left {margin-left: -100%;background: blue;width: 200px;}.right {background: yellow;margin-left: -200px;width: 200px;}.footer {clear: both;}
效果:
分析:
1.grid 兼容性的的问题,面试只能作为一个亮点来吸引面试官,gird 很多新属性可以查文旦了解更多。
2.方法2最大亮点在于父容器的padding: 0 200px; 以及margin:-100%;
3.方法3和方法2很像,处理不同的就是main加上box-sizing:boeder-box;在用padding:0 200px;从而到达效果。
CSS实现比翼双飞和圣杯布局模型效果相关推荐
- 圣杯布局与双飞翼布局的理解
圣杯布局与双飞翼布局是前端开发中是经常用到的一种布局方式,掌握该方式对开发是非常有用的. 圣杯布局与双飞翼布局最终要实现的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 实现效果图 ...
- Web前端之布局模型
一.css布局模型 在传统的网页中,css可以设置元素有三种布局模型:Flow.Float.Layer (1)流动模型(Flow) 概念:流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下 ...
- html布局图解,web前端之布局模型详解
一.css布局模型 在网页中,css可设置元素有三种布局模型:Flow,Float,Layer 1.流动模型(Flow) 概念:流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTM ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"><div class="main ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- css学习笔记(三)——布局模型
布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末 ...
- css flex布局 模型(CSS justify-content 属性) - 代码案例
css flex布局 模型(CSS justify-content 属性) - 代码案例 效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
- css布局模型详细介绍
文章出自个人博客https://knightyun.github.io/2018/05/04/css-layout-model转载请申明 HTML中元素有三种布局模型:流动模型.浮动模型.层模型. 流 ...
- css布局模型(摘抄自慕课)
css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...
最新文章
- 双击打开excel时提示:向程序发送命令时出现问题
- 操作系统(十五)调度算法的评价指标
- bool类型_C语言编程第11讲——C语言的布尔类型
- python 中间件
- 2014 传播一点正能量
- 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法
- SQL Server 存储(5/8):理解IAM 页
- 使用Atlas进行元数据管理之Glossary
- 【PIMF】OpenHarmony啃论文俱乐部:拼音输入法原理_从触摸事件到汉字
- ReportNG测试报告的定制修改
- Python 基于 uiautomator2 实现《全民开喵铺》自动收币,自动签到,自动浏览得喵币
- Hadoop:Browse Directory Couldn‘t upload the file
- 8000字34张图史诗级介绍同轴电缆、双绞线、光纤等线缆,超级详细!
- sourcetree提交报错 git -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks ······
- 短视频seo获客系统,短视频SEO,短视频seo推广
- 实战|用 Python 轻松制作好看的心型照片墙
- 机器学习经典算法---EM算法(一文秒懂极大释然估计和EM算法)
- html怎么导出电子杂志,名编辑电子杂志大师教程 | 制作好的电子杂志如何输出以及发布?...
- python-网络图片下载(两种方式)
- 设计完美的PCB,这些细节要注意
热门文章
- oracle转换当前时间,oracle数据库中时间转化方法分享
- easyexcel分页导出多个excel
- WideNet:让网络更宽而不是更深
- python基于机器学习模型开发实践kaggle旧金山犯罪案件分类预测模型
- go http.Post 指定 body 单次读取的大小(32k?)
- 有返回值的函数,一定要定义变量来接收吗
- 碳量子点负载抗癌药索拉菲尼|介孔二氧化硅纳米材料包裹碳量子点掺杂孟加拉玫瑰红光敏剂|纳米四氧化三铁包裹钴硫化镉量子点
- 人工智能 之 NLP的Precision(查准率,精确率),Recall(查全率,召回率),Accuracy(准确率)以及综合评价指标(F1-Measure)
- 十大热销HR软件实施优势和风险比较
- 我们能用zookeeper做什么