background背景图片自适应_一侧定宽、一侧自适应,尽量多的方案实现?「前端剑指offer」...
# 问题
一侧定宽、一侧自适应,尽量多的方案实现。
# 回答
有下面几种方案能实现一侧定宽一侧自适应。
- 使用flex布局,这也是目前主流方式。父容器设置display:flex,定宽字元素设置flex-basis或者width,自适应的子元素设置flex: 1,或者flex-grow: 1。
- 使用grid布局。父容器设置 display: grid,使用grid-template-rows 和 grid-template-columns 设置格子;子项使用grid-column 和 grid-row 设置在格子中的位置。 grid布局对浏览器的版本要求比较苛刻,IE基本不支持。
- 如果需要适配低端IE,可使用下面的传统的浮动布局。如果不但要适配低端IE,在布局时对DOM的结构顺序也有要求,比如对于侧边栏在左侧的布局希望自适应的元素DOM位置更靠前,则可以考虑使用圣杯布局或者双飞翼布局。
- 传统的浮动布局。定宽元素设置左浮动或者右浮动,自适应的元素响应的设置左margin或者右margin预留空间。需要注意的是为了避免父元素高度塌陷需要给父元素加清除浮动.clearfix::after{ content: ''; display: block; clear: both; }
- 圣杯布局。定宽元素和自适应元素都设置左浮,自适应元素设置宽度100%,定宽元素设置固定宽度,定宽元素因为DOM位置靠后会被挤下去。给定宽元素加上margin:-100%,此时定宽元素会上去和自适应元素的左侧重叠。给容器设置padding-left值为定宽元素宽度,给定宽元素设置position:relative,left设置负的自己的宽度。即可实现两栏布局。圣杯布局本质上利用了浮动和负margin的特性。但圣杯布局有个要求,就是自适应元素的宽度最小不能小于固定宽度侧边栏的宽度,否则就会出现错乱。
- 双飞翼布局。为了解决圣杯布局自适应元素宽度小于固定宽度侧边栏时样式出现错落的bug。原理是给自适应宽度内再多加一层div。定宽元素和自适应元素都设置左浮,自适应元素设置宽度100%,定宽元素设置固定宽度,定宽元素因为DOM位置靠后会被挤下去。给定宽元素加上margin:-100%,此时定宽元素会上去和自适应元素的左侧重叠。给自适应元素内的div加margin来规避重叠。
总结:圣杯布局和双飞翼布局都太老了,并且为了让自适应宽度DOM顺序靠前用了各自复杂操作既增加了代码的复杂度,也没有完美解决问题。推荐使用flex或者传统的两栏浮动方案。
# 解析
这种题目其实难在用口述的方式讲清楚这布局的使用方式,特别是老古董圣杯布局和双飞翼布局。当场动手写代码反而更友好。 不过不用过分担心自己的表达,面试官如果对这几种布局都很熟悉,你即使表达不清楚面试官也知道你是其实是会用的。如果面试官自己也仅仅熟悉一两种,你怎么回答都是对的。
flex两栏布局
<section><main>main</main><aside>aside</aside>
</section><style>section { display: flex; }aside { width: 200px; background: blue;}main { flex-grow: 1; order: 1; background: red;}
</style>
https://codepen.io/jirengu/pen/rNMVdaL
grid 两栏布局
使用grid布局,先用grid-template-columns/grid-template-rows 给容器画虚拟格子,再把元素通过 grid-column/grid-row 塞到格子里。
<section><main>main</main><aside>aside</aside>
</section><style>section { display: flex; }aside { width: 200px; background: blue;}main { flex-grow: 1; order: 1; background: red;}
</style>
https://codepen.io/jirengu/pen/PoGqRGV
传统浮动布局
老浏览器适用。需要注意的是浮动的侧边栏aside
的DOM位置需要在自适应宽度的正常元素main
的上方。
<section><aside>aside</aside><main>main</main>
</section><style>section::after { content: '';display: block;clear: both;}aside { float: left;width: 200px;background: red;}main { margin-left: 200px;background: blue;}
</style>
圣杯布局
- 特点:main在aside的DOM元素位置上方
- 缺点:main的宽度不能小于aside
- 演示:按照下方代码注释的step顺序,一行行复制并查看效果变化
<div class="section"><div class="main">main</div><div class="aside">aside</div>
</div><style>
.section {padding-left: 100px; /*step 4*/*zoom: 1;/*兼容IE6/7*/
}.section:after {/*IE8不支持::*/content: '';display: block;clear: both;
}.main {width: 100%;height: 80px; /*step 1*/background: blue; /*step 1*/
}.aside {width: 100px; /*step 1*/background: red; /*step 1*/
}.main, .aside {float: left; /*step 2*/
}.aside {margin-left: -100%; /*step 3*/position: relative; /*step 5*/left: -100px; /*step 5*/
}
</style>
https://codepen.io/jirengu/pen/vYXORdQ
双飞翼布局
- 特点:main在aside的DOM元素位置上方
- 缺点:main 里面还得加一层wrap
- 演示:按照下方代码注释的step顺序,一行行复制并查看效果变化
<div class="section"><div class="main"><div class="wrap">main</div></div><div class="aside">aside</div>
</div><style>
.section {*zoom: 1; /*兼容IE6/7*/
}.section:after { /*IE8不支持::*/content: '';display: block;clear: both;
}.main {width: 100%; /*step 3*/
}.main .wrap {margin-left: 100px; /*step 5*/background: yellow; /*step 5*/min-height: 200px; /*step 5*/
}.aside {width: 100px; /*step 1*/background: red; /*step 1*/
}.main, .aside {float: left; /*step 2*/
}.aside {margin-left: -100%; /*step 4*/
}
</style>
https://codepen.io/jirengu/pen/mdrJxKo
前端剑指offer系列已更文章mp.weixin.qq.com
关注公众号 【编程公子】,早7天获取文章更新,每日更新一篇,刷遍大厂题。下图是更新预告
background背景图片自适应_一侧定宽、一侧自适应,尽量多的方案实现?「前端剑指offer」...相关推荐
- 8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...
# 提问 物理像素.逻辑像素.CSS像素.PPI.设备像素比是什么? # 回答 物理像素代表屏幕上有多少个点,比如1080x2340表示屏幕一排包含1080个物理像素点. 逻辑像素表示屏幕展示物体的视 ...
- vue中向数组去重_「前端剑指offer第3期」来,手写一下数组去重
数组去重一般来说就这么几种方法,理解代码,记住就好!Map.Set.reduce.filter~ 方法1 .Map 创建一个Map对象,把数组的值作为Map对象的索引,再获取所有的索引. const ...
- 【CSS】一侧定宽,另一侧自适应的布局该如何去做
一侧定宽,一侧自适应的页面布局在现在用的很多,有哪些实现方式呢? (个人总结,这个要看是左定右适.还是左适右定.视情况而定) 1, 左边固定,右边自适应:通过浮动和margin取正值来实现: 这里的原 ...
- table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
- android背景图拉伸,解决android:background背景图片被拉伸问题
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
- vue项目登录页背景图百分百铺满屏幕宽高自适应
vue项目背景图百分百铺满屏幕宽高自适应 .login{background: url(../../../static/img/login/beijing@2x.png);background-siz ...
- 单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- 两栏布局之右定宽左自适应,上定高下自适应,下定高上自适应
这三种布局其实都是大同小异,今天就全部总结成一篇文章. 1.右定宽左自适应 <!DOCTYPE html> <html lang="en"> <hea ...
- leetcode 打印_剑指 Offer 32 - III 从上到下打印二叉树 III - leetcode 剑指offer
题目难度: 中等 原题链接 今天继续更新剑指 offer 系列, 这道题相比昨天那道题多了个每层打印方向不同的需求, 聪明的你想到应该如何实现了吗? 老样子晚上 6 点 45 分准时更新公众号 每日精 ...
最新文章
- 图像处理池化层pooling和卷积核
- JAVA架构师面试题and如何成为架构师
- 8 分钟入门 K8s | 详解容器基本概念
- Mac上使用nginx访问本地文件夹报403的问题
- 文件操作模式扩展、游标操作
- Linux C++线程池实例
- 皮尔洛和c罗讲什么语言,皮尔洛:如果我跟C罗是队友 我可能能成历史助攻王
- Maven 系列 1:Maven 安装与环境变量的配置完整步骤及需要注意的问题(以 jdk1.8、Maven 3.6.2 和 win10 为例,附下载地址)
- 计算机房防火要求,信息机房如何进行防火设计
- pku 1463 Strategic game 树形DP
- VC++多线程工作笔记0002---线程的运行状态
- JavaScript 编码规范大全-Eslint(持续更新,欢迎关注点赞加评论)
- 0610PHP基础:运算符、字符串处理函数、解析符号、数组
- 简化document.createElement(div)动态生成层方法
- 读《图解HTTP》有感-(HTTP报文内的HTTP消息)
- Fragment-传递参数
- android kl文件编辑,Android手机固件的简单修改教程
- 判断手机设备是否支持5G无线频段
- 什么是Arduino
- mvdbos php spider,Scrapy-Redis分布式爬取自如网(一)
热门文章
- oracle中正则表达式相关函数regexp_like简介
- php学语法,PHP入门学习——PHP语法
- 基于JAVA+SpringMVC+MYSQL的社区交友平台
- 一个java程序_从另一个java程序运行java程序
- IntelliJ IDEA 2018.2.2远程调试Tomcat的配置方法
- Codeforces Gym101473 F.Triangles-前缀和 (2013-2014 ACM-ICPC Brazil Subregional Programming Contest)...
- (1)Deep Learning之感知器
- java 获取日期的几天前,几个月前和几年前
- wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
- typescript索引类型_复杂场景下的 typescript 类型锚定 (1) ----- 对象索引提取-阿里云开发者社区...