css布局中的BFC问题

news2024/12/23 17:10:01
  1. 什么是边距重叠?

  2. 什么情况下会发生边距重叠?

  3. 如何解决边距重叠?

边距重叠: 两个box如果都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。

有两种边距重叠的情况:

1. 父子关系的边距重叠

父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距

在这里插入图片描述

给父元素添加 overflow:hidden

这样父元素就变为 BFC,不会随子元素产生外边距

在这里插入图片描述

2. 同级兄弟关系的重叠:

同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个

在这里插入图片描述

可通过添加空元素或伪类元素,设置overflow:hidden;解决margin重叠问题

在这里插入图片描述

2. 回答边距重叠—BFC

什么是BFC?

BFC就是“块级格式化上下文”的意思,BFC是一块独立的布局环境,保护其中内部元素不收外部影响,也不影响外部。本身BFC是一种css的布局方式,只是我们可以利用它来解决外边距折叠的问题,BFC并不是专门用来解决这个问题而创的;

如何触发BFC?

在box属性值为这些的情况下,都会让所属的box产生BFC。

  • overflow: auto/ hidden;
  • position: absolute/ fixed;
  • float: left/ right;
  • display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

也可以用排除法:

overflow的值不是visible;

position的值不是static或relative

float的值不是none

display的值是inline-block 或 table-cell 或 flex 或 table-caption 或

inline-flex

BFC的原理?(面试可不说,但要理解)

前端资料汇总

我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。

首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。

更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1857495.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

解锁数据潜力:数据提取技术的无限可能

在当今信息爆炸的时代,数据已经渗透到我们生活的方方面面,成为推动社会进步和经济发展的重要力量。然而,仅仅拥有数据并不足以带来实质性的改变,关键在于如何有效地提取、分析和利用这些数据,以解锁其深藏的潜力。数据…

计算机中丢失vcruntime140_1.dll如何修复?分享7种常用解决方法

vcruntime140_1.dll缺失原因分析 软件卸载或更新不当在软件卸载或更新过程中,如果未能正确处理依赖关系,可能会导致vcruntime140_1.dll文件被错误地删除或损坏。 据统计,约有30%的DLL文件丢失问题是由于不当的卸载或更新操作引起的。 用户…

气体分离膜种类逐渐增多 市场规模不断扩大

气体分离膜种类逐渐增多 市场规模不断扩大 气体分离膜是由高分子材料组成的一种选择性膜。气体分离膜对不同种类的气体分子具有不同的透过率的选择性,可从混合气体中选择性分离某种特殊气体,从而起到分离、提纯等作用。与传统气体分离方法相比&#xff0…

EfficientNet大解析:如何重新定义模型效能?

EfficientNet大解析:如何重新定义模型效能? 1、abstract2、Compound Model Scaling3、EfficientNet Architecture4、results5、conclusion 论文地址: EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks 1、abstract 提出了一…

常见加密方式:MD5、DES/AES、RSA、Base64

16/32位的数据,最有可能就是使用md5加密的 使用对称加密的时候,双方使用相同的私钥 私钥:单独请求/隐藏在前端的隐藏标签当中 二、RSA非对称密钥加密 公钥加密,私钥解密 私钥是通过公钥计算生成的 加密解密算法都在js源文件当…

数据库层持久化

数据持久化层 冷热分离 冷热分离:将常用的“热”数据和不常使用的“冷”数据分开存储 冷热分离就是在处理数据时将数据库分成冷库和热库,冷库存放那些走到终态、不常使用的数据,热库存放还需要修改、经常使用的数据 业务需求出现了以下情况…

计算机毕业设计Python+LSTM+Tensorflow股票分析预测 基金分析预测 股票爬虫 大数据毕业设计 深度学习 机器学习 数据可视化 人工智能

基于TensorFlow-LSTM的股票预测系统开题报告 一、研究背景与意义 随着信息技术的飞速发展,股票市场作为现代经济活动的重要组成部分,其价格波动受到广泛关注。投资者们迫切希望通过科学的方法预测股票价格,以优化投资决策,实现利…

华为数通——链路聚合

链路聚合:又称为端口汇聚,是指两台交换机之间在物理上将两个或多个端口连接起来,将多条链路聚合成一条逻辑链路,从而增大链路带宽,多条物理链路之间能够相互冗余。 作用:增加链路带宽,同时提供…

模型泛化性测试

文章目录 准备工作场景描述训练数据集获取与训练 测试结论测试方案外机进行平移外机进行旋转外机即平移又旋转该螺纹孔位置 准备工作 场景描述 场景搭建如下如所示: 在该场景中,将机器人安置在桌子左上角处(以面对显示器的视野&#xff09…

【Windows】“ONLYOFFICE 桌面编辑器 8.1 新特性大揭秘:全新 PDF 编辑器、幻灯片版式和更多更新“

【Windows】“ONLYOFFICE 桌面编辑器 8.1 新特性大揭秘:全新 PDF 编辑器、幻灯片版式和更多更新” 大家好 我是寸铁👊 【Windows】“ONLYOFFICE 桌面编辑器 8.1 新特性大揭秘:全新 PDF 编辑器、幻灯片版式和更多更新”✨ 喜欢的小伙伴可以点点…

WordPress网创自动采集并发布插件

网创教程:WordPress插件网创自动采集并发布 阅读更新:随机添加文章的阅读数量,购买数量,喜欢数量。 使用插件注意事项 如果遇到404错误,请先检查并调整网站的伪静态设置,这是最常见的问题。需要定制化服…

通过言语和非言语检索线索描绘睡眠中的记忆再激活茗创科技茗创科技

摘要 睡眠通过重新激活新形成的记忆痕迹来巩固记忆。研究睡眠中记忆再激活的一种方法是让睡眠中的大脑再次暴露于听觉检索线索(定向记忆再激活范式)。然而,记忆线索的声学特性在多大程度上影响定向记忆再激活的有效性,目前还没有得到充分探索。本研究通…

2024年G2电站锅炉司炉证模拟考试题库及G2电站锅炉司炉理论考试试题

题库来源:安全生产模拟考试一点通公众号小程序 2024年G2电站锅炉司炉证模拟考试题库及G2电站锅炉司炉理论考试试题是由安全生产模拟考试一点通提供,G2电站锅炉司炉证模拟考试题库是根据G2电站锅炉司炉最新版教材,G2电站锅炉司炉大纲整理而成…

Linux_应用篇(22) 音频应用编程

ALPHA I.MX6U 开发板支持音频,板上搭载了音频编解码芯片 WM8960,支持播放以及录音功能!本章我们来学习 Linux 下的音频应用编程, 音频应用编程相比于前面几个章节所介绍的内容、 其难度有所上升, 但是笔者仅向大家介绍…

基于C# .NET 的数字图像处理系统开发

嗨,我是射手座的程序媛,期待和大家更多的交流与学习,欢迎添加3512724768。 《面向对象程序设计》-基于C# .NET 的数字图像处理系统开发 (一)实习的目的 根据《面向对象程序设计》理论课授课内容,是使学生…

ps基础入门

1.基础 1.1新建文件 1.2创建指定形状 1.4移动工具 1.41移动画布中的任意元素 1.42移动画布 1.43修改画布大小 1.44修改图像大小 1.5框选工具 1.6矩形工具 1.7图层 1.71图层颜色修改 1.72…

【UE5.1 角色练习】12-坐骑——Part2(让角色骑上坐骑)

目录 前言 效果 步骤 一、坐骑的父类 二、将角色附加到坐骑 三、添加坐姿 四、骑上坐骑 五、从坐骑上下来 前言 在上一篇(【UE5.1 角色练习】11-坐骑——Part1(控制大象移动))基础上继续实现角色骑上坐骑的功能。 效果 …

计算机网络期末复习——简明扼要介绍考点及相关知识

期末复习的方法论:一般来说,期末复习都是“理论”结合“实践”。 理论,在于要对期末考点有基本的把握。可以询问老师或者师兄,总之要知道考试的重点在哪里。对照教材,勾画考试重点,删去不重要的琐碎知识点。…

[职场] 护理专业简历怎么写 #经验分享#微信

护理专业简历怎么写 很多想成为一名护理方面的从业者,但是又不知道应该怎么制作一份简历,现在这里分享了一份护理方面的简历模板供大家参考。 蓝山山 年龄:24 号码:12345678910 地址:上海市 邮箱:jianliji…

大学湖北中医药大学法医学试题及答案,分享几个实用搜题和学习工具 #微信#学习方法#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式,可以快速查找问题解析,加深对题目答案的理解。 1.快练题 这是一个网站 找题的网站海量题库,在线搜题,快速刷题~为您提供百万优质题库,直接搜索题库名称,支持多种刷题模式:顺序练习、语…