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

前端面经 两栏布局

两栏布局 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.dtcms.com/a/225527.html

相关文章:

  • 逆向入门(1)
  • DFS每日刷题
  • Mac电脑上本地安装 redis并配置开启自启完整流程
  • pikachu通关教程-CSRF
  • 使用langchain实现五种分块策略:语义分块、父文档分块、递归分块、特殊格式、固定长度分块
  • 【论文阅读 | PR 2024 |ICAFusion:迭代交叉注意力引导的多光谱目标检测特征融合】
  • 一天搞懂深度学习--李宏毅教程笔记
  • 财管8-企业价值评估
  • 【位运算】两整数之和(medium)
  • 过滤攻击-聚合数据
  • Spring Boot 全局配置文件优先级
  • “人单酬“理念:财税行业的自我驱动革命
  • CCPC dongbei 2025 F
  • 神经网络-Day42
  • 针对 Harmony-Cordova 性能优化,涵盖原生插件开发、线程管理和资源加载等关键场景
  • Codeforces Round 1028 (Div. 2)(ABC)
  • MMRL: Multi-Modal Representation Learning for Vision-Language Models(多模态表示学习)
  • 【MFC】初识MFC
  • Redis缓存落地总结
  • 2025年计算机领域年度主题:融合创新与技术突破
  • 如何使用 Docker 部署grafana和loki收集vllm日志?
  • Flask文件处理全攻略:安全上传下载与异常处理实战
  • 使用Docker-NVIDIA-GPU开发配置:解决 Docker NVIDIA 运行时错误方法
  • 基于微信小程序的scratch学习系统
  • Redis分布式锁实现指南
  • 软考-数据库系统工程师-程序设计语言知识要点
  • 【Go】2、Go语言实战
  • Rust 学习笔记:自定义构建和发布配置
  • AUTOSAR图解==>AUTOSAR_SWS_DIODriver
  • 【渲染】拆解三国:谋定天下场景渲染技术