对 BFC 规范(块级格式化上下文:block formatting context)的理解?
相关知识点:
块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒
子的区域,也是浮动元素与其他元素的交互限定区域。
通俗来讲
•BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
•如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。
创建BFC
(1)根元素或包含根元素的元素
(2)浮动元素float=left|right或inherit(≠none)
(3)绝对定位元素position=absolute或fixed
(4)display=inline-block|flex|inline-flex|table-cell或table-caption
(5)overflow=hidden|auto或scroll(≠visible)
回答:
BFC指的是块级格式化上下文,一个元素形成了BFC之后,那么它内部元素产生的布局不会影响到外部元素,外部元素的布局也
不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域,和其他区域互不影响。
一般来说根元素是一个BFC区域,浮动和绝对定位的元素也会形成BFC,display属性的值为inline-block、flex这些
属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。
对 BFC 规范(块级格式化上下文:block formatting context)的理解?相关推荐
- BFC(块级格式化上下文)【面试】
BFC(块级格式化上下文) 块级格式化上下⽂,是⼀个独⽴的渲染区域,让处于 BFC 内部的元素与外部 的元素相互隔离,使内外元素的定位不会相互影响. IE下为 Layout ,可通过 zoom:1 触 ...
- 点击箭头 切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具 移动工具 移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具 快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具 放大镜工具可 ...
- CSS中块级格式化上下文(BFC)的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
- 块级格式化上下文(Block Formatting Context)
前言 在 CSS 2.1 中,有三种定位方案--普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一 ...
- 关于对CSS中BFC (块级格式化上下文) 的理解
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML.CSS的基本布局技能, ...
- 常规流之块级格式化上下文(Block Formatting Contexts)
在css2.1中,常规流包括块框(block boxes)的块格式化(block formatting),行内框(inline boxes)的行内格式化(inline formatting),块级框( ...
- Block Formatting Contexts(块级格式化上下文)
前几天看到kejun's blog里面的一篇文章:"近期面试感受", 里面提到面试时的一道题的不同的解决方案,比较它们之间的优缺点,其中出现了一个概念:Block Formatti ...
- css三大特性权重计算BFC(块级格式化上下文)盒子模型
系列文章目录 文章目录 系列文章目录 前言 一.css三大特性 1.继承性 2.层叠性 3.优先级 二.权重计算 1.引入库 2.读入数据 三.BFC(块级格式化上下文) 1.引入库 2.读入数据 总 ...
- CSS进阶(2)- 块级格式化上下文
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录 块级格式化上下文 常规流块盒的布局的一些规则 BFC渲染区域 BFC的独立性 BFC的具体 ...
最新文章
- linux线程的实现【转】
- Linux网站服务Apache+php+mysql的安装
- java json 去除空_详解Java去除json数据中的null空值问题
- Atitit sift匹配度计算 图片连线 oepncv sift java匹配
- RPM的原理及rpm命令常用参数
- 【阿里云盘】2022付费考研课程
- iOS Mach-O文件
- 友情链接加nofollow_如何在WordPress中添加Nofollow链接(适用于初学者的简单指南)
- UVM--单向通信、双向通信、多向通信和通信管道
- leetCode 357. Count Numbers with Unique Digits | Dynamic Programming | Medium
- debian ELK6.2.2安装教程
- 点击链接新窗口打开页面
- 阿龙学堂-启动spark任务的两种方式
- 详解图像二值化 函数threshold
- python3群控手机_带你用 Python 实现自动化群控(入门篇)
- 戴尔inspiron14 5000系列拆机图解教程
- OpenGL 基于OpenGL的三维机器人仿真
- PPT基础(十七)背景音乐
- 体验 WebFont,网页上的艺术字
- 十几万专科毕业生走向职场,平均月起薪不足4000元,那么你呢?
热门文章
- 软考新生必看!高项备考经验分享
- java技术晨讲可以讲什么内容,晨讲和晨测都是提升郑州达内小伙们技能的好方法...
- 基于UA-DETRAC车辆数据集在windows10系统下yolov3模型训练
- linux查看端口pvid,交换机端口及常见问题定位(二)
- char matlab中,matlab中char什么意思
- codeforces 628.div2
- 威锋VIA VL150 e-marker芯片
- 金庸的小说人生(1)
- 局域网中的两台主机共享一台显示器
- 【软考系统架构设计师】复盘架构设计师真题知识点第八章---Web架构设计