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

【前端面试题】前端中的两个外边距bug以及什么是BFC

外边距合并问题

兄弟组件中,如果一个设置margin-bottom,另一个设置margin-top,会导致外边距出现合并的问题,例如box1设置下边距50px,box2设置上边距20px,那么二者之间的外边距进行合并取最大值,所以二者之间相距只有50px。

解决办法:

给两个兄弟组件加一个父组件,让父组件开启flex布局

.father{
display:flex;

flex-direction:column;
}

外边距塌陷问题

父子组件中,子组件设置margin-top会导致父组件掉下来

解决办法:
第一种方法:父组件开启flex布局
第二种方法:父组件设置 overflow:hidden

设置overflow:hidden即设置文本溢出隐藏,创建一个BFC,格式化上下文。

面试题:什么是BFC?

BFC又叫格式化上下文,创建一个独立的区域,不受父级的影响也不受子级的影响。


http://www.kler.cn/a/469100.html

相关文章:

  • 前端访问一个图片URL时,浏览器默认会尝试下载文件而不是直接显示它
  • C语言:枚举类型
  • 基于GAN和RL的思想来训练对话生成
  • 【JVM】总结篇-类的加载篇之 类的加载器 和ClassLoader分析
  • Kotlin 数据类与密封类
  • Markdown中类图的用法
  • Linux驱动开发:深入理解I2C时序(二)
  • 深入学习 Spring `@PostMapping` 处理表单参数与 JSON 参数
  • PyQt开发界面环境搭建
  • 【FlutterDart】页面切换 PageView PageController(9 /100)
  • 常用的数据结构API概览
  • LeetCode -Hot100 - 73. 矩阵置零
  • 瑞吉外卖项目学习笔记(十)修改套餐、删除套餐、起售和停售套餐
  • 云原生监控与日志管理:确保云原生应用的可靠性与性能
  • Spring MVC和servlet
  • 【2025最新计算机毕业设计】基于SSM的医院挂号住院系统(高质量源码,提供文档,免费部署到本地)【提供源码+答辩PPT+文档+项目部署】
  • 西安电子科技大学初/复试笔试、面试、机试成绩占比
  • 初学stm32 --- RTC实时时钟
  • Pytest钩子函数,测试框架动态切换测试环境
  • 《Rust权威指南》学习笔记(二)
  • Node.js中使用Joi 和 express-joi-validation进行数据验证和校验
  • Win32汇编学习笔记04.重定位与汇编引擎
  • ubuntu 创建服务、查看服务日志
  • Linux-Ubuntu之RTC实时时钟显示
  • 使用 ThinkPHP 和 Vue.js 开发现代 Web 应用的指南
  • Swift Protocols(协议)、Extensions(扩展)、Error Handling(错误处理)、Generics(泛型)