当前位置: 首页 > article >正文

前端面经 两栏布局

两栏布局 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%

http://www.lryc.cn/news/2395384.html

相关文章:

  • 2,QT-Creator工具创建新项目教程
  • 《深入解析SPI协议及其FPGA高效实现》-- 第一篇:SPI协议基础与工作机制
  • 2025年5月6日 飞猪Java一面
  • ​​技术深度解析:《鸿蒙5.0+:AI驱动的全场景功耗革命》​
  • Nodejs+http-server 使用 http-server 快速搭建本地图片访问服务
  • Zsh/Bash Conda设置延迟启动,启动速度优化
  • 【AI论文】推理语言模型的强化学习熵机制
  • Java中的JSONObject详解:从基础到高级应用
  • Ubuntu22.04 安装 IsaacSim 4.2.0
  • 子串题解——和为 K 的子数组【LeetCode】
  • 深入理解设计模式之访问者模式
  • Java代码重构:如何提升项目的可维护性和扩展性?
  • 《Python语言程序设计》2018 第4章第9题3重量和价钱的对比,利用第7章的概念来解答你
  • Nginx安装操作命令
  • 在IIS上无法使用PUT等请求
  • Codeforces Round 1028 (Div. 2) B. Gellyfish and Baby‘s Breath
  • 数据基座觉醒!大数据+AI如何重构企业智能决策金字塔(上)
  • 前端八股HTTP和https大全套
  • 使用 DeepSeek API 搭建智能体《无间》- 卓伊凡的完整指南 -优雅草卓伊凡
  • 量子语言模型——where to go
  • flutter使用html_editor_enhanced: ^2.6.0后,编辑框无法获取焦点,无法操作
  • FPGA纯verilog实现MIPI-DSI视频编码输出,提供工程源码和技术支持
  • 手写字魔法消除3:深度学习PmrNet神经网络实现图片修复(含训练代码、数据集和GUI交互界面)
  • 大数据运维过程中常见的一些操作
  • opencv使用经典bug
  • 劫持进程注入
  • 计算机基础——宏病毒防御与网络技术
  • 深度解析互联网区(Internet ):架构、风险与防护全攻略
  • 2024Flutter面试题
  • C++内存学习