前端面经 两栏布局

两栏布局 float实现

1.给父盒子加float:hidden实现BFC

2.给左盒子加浮动float:left 给宽度

flex布局

1父盒子 display:flex

2左盒子 固定宽度

3.右盒子 flex:1

三栏布局

法1:浮动实现

1 父盒子overflow:hidden 实现BFC

2左盒子:float:left

3右盒子 :float:right

法2:绝对定位

父盒子相对定位

左盒子 绝对定位top0 left 0

右盒子 相对定位top0 right 0

法3:弹性布局

1父盒子display :flex

2.左右盒子固定宽度

3.中间盒子 flex:1 或者width:100%

相关推荐
Carlos_sam3 分钟前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录12 分钟前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录33 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区43 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路2 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9492 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8682 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie2 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端