〖大前端 - 基础入门三大核心之CSS篇⑮〗- BFC和浏览器差异
2023-09-14 09:05:18 时间
- 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
- 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外,还可以通过加入星荐官共赢计划 加入私域社区。
- 当前子专栏 基础入门三大核心篇 也是免费开放阶段。推荐他人订阅,可获取扣除平台费用后的35%收益。
- 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,目前任某金融品类App负责人。
- 荣誉:2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师,“星荐官共赢计划” 发起人。
- 现象级专栏《白宝书系列》作者,文章知识点浅显易懂且不失深度;TFS-CLUB社区创立者,旨在以“赋能 共赢”推动共建技术人成长共同体。
- 🏆 白宝书系列
下面我们了解一个非常重要的概念——BFC规范。
⭐️ BFC规范和浏览器差异
接下来我们就了解一下 BFC规范
吧。
🌟 BFC的基本概念
BFC是一个非常重要的概念!
BFC(Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
没有形成BFC会出现一些现象,比如一个盒子不设置height,当内容子元素都浮动时, 无法撑起自身:
但是如果子盒子设置了浮动,效果就变成下面这样:
这就是因为父盒子没有形成BFC,所以子盒子从父盒子里面“跑”出来了,会对我们的网页的显示产生不好的影响。
🌟 如何创建BFC?
创建BFC的方法:
- 方法一:父盒子的float的值不是none
- 方法二:position(定位)的值不是static或者relative
- 方法三:display的值是inline-block、flex或者inline-flex
- 方法四:overflow: hidden;
我们依次介绍这几种方法。(方法二的定位和方法三中的flex、inline-flex后面才学到,这里先不做介绍。)
方法一:父盒子设置浮动。这种方法不靠谱,因为父盒子也要根据需求来设置浮动的,不能平白无故的给它设置个浮动。
方法三:display属性设置成inline-block。这种方式也不太靠谱,我们的父盒子本来是块级元素,也不能平白无故的给它设置成行内块。
方法四:设置overflow: hidden;
表示溢出隐藏,溢出盒子边框的内容将会被隐藏。
overflow: hidden;
是非常好用的使盒子形成BFC的方法。
注意:overflow:hidden;
是使溢出盒子“边框”的部分被隐藏,padding部分还是会覆盖的,下面看个例子:
🌟 BFC的其他作用
- BFC可以取消盒子margin塌陷
- BFC可以阻止元素被浮动元素覆盖
⭐️ 浏览器差异
IE6IE7浏览器使用haslayout机制,和BFC规范略有差异,比如IE浏览器可以使用zoom:1属性,让盒子拥有layout(布局规范)。
如果要制作兼容到IE6\7的网页时,尽量让网页布局变得简单,内容有浮动的盒子要设置height属性,规范编程,不要“玩杂技”。
相关文章
- Unity3D_(游戏)甜品消消乐01_游戏基础界面
- 在IE8的基础上安装IE11
- js逆向8+9-浏览器指纹和node指纹,webpack,jsdom---基础结束,下面是进阶
- django框架基础-路由系统-长期维护
- 谷歌Chrome浏览器开发者工具的基础功能
- Android 基础课堂 - Lesson.5
- 【目标检测】MMDetection的安装与基础使用
- 正则表达式基础语法
- 编程零基础应当如何开始学习 Python?
- 基础算法练习200题16、打印质数
- 100天精通Python(可视化篇)——第78天:matplotlib绘图模块基础入门大全
- 100天精通Python(爬虫篇)——第47天:selenium自动化操作浏览器(基础+代码实战)
- Selenium基础 — 拓展:使用浏览器加载项配置实现用户免登陆
- 【每日1刷系列】软件测试常见面试题—测试基础(概念)
- 【0基础转行测试的看过来】一个初级测试工程师(能找到工作的水平就行)1、学多久2、学什么?
- 【小程序】微信小程序基础语法讲解(一)
- 史上最简SLAM零基础解读(10.3) - g2o(图优化)→边(Edge)编程细节
- 【第01天】A + B | 基础输入输出,开启学习Java旅程