解析 CSS 格式化上下文
⭐️ 更多前端技术和知识点,搜索订阅号
JS 菌
订阅
✴️ BFC 块级格式化上下文
BFC(Block Formatting Contexts),块级格式化上下文。BFC 实际上就是页面中一块渲染区域,该区域与其他区域隔离开来。容器里面子元素不会影响到外部,外部的元素也不会影响到容器里面的子元素。 ?
规范
BFC 内部的盒子会从上至下一个接着一个顺序排列。BFC 内的垂直方向的盒子距离以 margin 属性为准,上下 margin 会叠加。每个元素的左侧最外层边界与包含块 BFC 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。BFC 的区域不会与 float box 折叠。BFC 的高度也会受到浮动元素的影响,浮动元素参与计算。 ?
主要作用
- 创建独立的渲染环境
- 防止因浮动导致的高度塌陷
- 防止上下相邻的外边距折叠
如何创建 BFC
- html 元素本身就是 BFC
- display === flow-root/inline-block/table-cell/table-caption/table/table-row/table-row-group/table-header-group/table-footer-group/inline-table/flex/inline-flex/grid/inline-grid
- position === absolute/fixed
- contain === strict/layout/paint/content
- float !== none
- overflow !== visible ✔️ 最常用
- column-count !== auto
- column-width !== auto
- column-span === all
display 为 table 会产生一个匿名的 table-cell;display 为 flow-rot 是一种 flow 布局,在 CSS2 中被引入。contain 属性可以更有效率的渲染元素,但兼容性差,详情见:developers.google.com/web/updates… 布局、grid 布局产生的格式化上下文,有时也被人称为 FFC/GFC
几个例子
防塌陷 ?
div {border: 1px solid gray;/* overflow: hidden; */
}
p {float: left;
}
复制代码
<div><p>✈</p>
</div>
复制代码
创建 BFC 后
避免折叠 ?
div:nth-of-type(2) {background: red;/* overflow: hidden; */
}
.this {border: 1px solid gray;margin: 20px 0;
}
复制代码
<div class="this">1️⃣</div>
<div><div class="this">2️⃣</div>
</div>
复制代码
创建 BFC 后
✳️ IFC 内联格式化上下文
IFC(Inline Formatting Contexts),内联格式化上下文。IFC 中的 line-box (也称行盒)的高度是根据包含行内元素中最高的实际高度计算而来。(不受垂直方向的 padding/margin 的影响) ?
相关知识点
顶点、中线、基线、底线,以及行距、半行距、font-size 大小、line-height 大小见图:
- inline-box 行内框,高度由 font-size 决定
- line-box 行框,高度由该行框内最大高度的行内框决定
- content area 内容区域,高度是 font-size 和 padding 的和
- containing box 包含框,最外层的包裹盒子
line-height 的计算方法:
- 固定值,如果设置了固定的值,如 20px,那么行高即为 20px
- 百分比,当前
font-size * 百分比
,即为行高 - normal 或数字,normal 则是浏览器默认设置的值,一般为 1.2,如果是自定义的数值,比如 1.5,那么行高即为
font-size * 1.5
有关 line-height 的计算方法见这篇文章 segmentfault.com/a/119000000…
规范
行内元素从包含块顶端水平方向上逐一排列,水平方向上的 margin/border/padding 生效。行内元素在垂直方向上可按照顶部、底部或基线对其。
当几个行内元素不能在一个单独的行盒中水平放置时,他们会被分配给两个或更多的(vertically-stacked line boxes)垂直栈上的行盒,因此,一个段落是很多行盒的垂直栈。这些行盒不会在垂直方向上被分离(除非在其他地方有特殊规定),并且他们也不重叠。
- 垂直方向上,当行内元素的高度比行盒要低,那么
vertical-align
属性决定垂直方向上的对齐方式。 - 水平方向上,当行内元素的总宽度比行盒要小,那么行内元素在水平方向上的分部由
text-align
决定。 - 水平方向上,当行内元素的总宽度超过了行盒,那么行内元素会被分配到多个行盒中去,如果设置了不可折行等属性,那么行内元素会溢出行盒。
- 行盒的左右两边都会触碰到包含块,而 float 元素则会被放置在行盒和包含快边缘的中间位置。
折行:
<p>balabala ...<span class="hl">hello world</span> inline formating context</p>
复制代码
空间不足的折行:
主要作用
- 行内元素按照
text-align
进行水平居中 - 行内元素撑开父元素高度,通过
vertical-align
属性进行垂直居中
水平垂直居中 ?
<p>hello <span class="big">world</span> inline formating context</p>
复制代码
p {border: 1px solid gray;text-align: center;
}.big {font-size: 60px;vertical-align: middle;
}
复制代码
其他还有 GFC、FFC 就是二维的网格布局和自适应的 Flex 布局。两种布局产生网格布局格式化上下文和自适应格式化上下文。
参考:
- developer.mozilla.org/en-US/docs/…
- segmentfault.com/a/119000000…
- www.w3.org/TR/CSS2/vis…
请关注我的订阅号,不定期推送有关 JS 的技术文章,只谈技术不谈八卦 ?
转载于:https://juejin.im/post/5cb527aee51d456e671c7da7
解析 CSS 格式化上下文相关推荐
- CSS 格式化上下文详解
CSS格式化上下文 CSS 中很重要的一环就是 BFC 块级格式化上下文,本文整理了 CSS BFC 的相关知识,建议沐浴更衣后食用. 在正式讲解BFC之前,先了解一下浏览器外边距重叠的问题. 外边距 ...
- CSS中块级格式化上下文(BFC)的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
- html5边框顶格,CSS 三种定位方式以及格式化上下文详解 》 html5jscss
常规流( Normal flow ) 之称之为常规流,是因为这是相对于后面的浮动和绝对定位的一个概念,浮动和绝对定位元素都脱离了当前的常规流. 在 CSS2.1中,常规流包括块框( block box ...
- 一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文
CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...
- CSS 块格式化上下文 BFC
块级框参与的格式化上下文,称作块格式化上下文(Block Formatting Contexts,简称BFC),它规定了内部的块级框如何排列. 块格式化上下文看似抽象,其实比较简单,它实际上就是页面上 ...
- CSS 普通流 和 行格式化上下文 IFC
默认情况下,所有框都在普通流中定位,普通流包括块级框的块格式化.行内级框的行格式化.块级框和行内级框的相对定位. 在普通流中,不同类型的框,会参与不同的格式化上下文(Formatting Contex ...
- 深入css布局 (3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- CSS进阶(2)- 块级格式化上下文
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录 块级格式化上下文 常规流块盒的布局的一些规则 BFC渲染区域 BFC的独立性 BFC的具体 ...
- 关于对CSS中BFC (块级格式化上下文) 的理解
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML.CSS的基本布局技能, ...
最新文章
- Java中的实现马赛克效果以及灰度效果----整张图片
- 第一阶段站立会议08
- Java实现海明距离简单计算
- pythorch基本信息查询
- 最新Butterknife集成 全部方法(完整版)
- 【Windows 命令行】CMD 在资源管理器中打开当前路径
- 按Sybase的PowerDesigner工具设计的数据库模型 --- 解析生成能兼容多种数据库的相应的C#底层代码...
- mysql索引详解(转)
- 电脑键盘打字手法_电脑快速打字技巧,送个每一位初学者
- 爬虫:Python爬虫学习笔记之网页解析基础——爬取360导航栏目
- 在线视频移动化迁徙加速,UGC待开发
- 农场阳光 (simpson)
- 计算机建立excel文件,我的电脑不能新建excel!电脑excle无法使用
- Proxmox VE7.3+Ceph超融合私有云建设案例(低成本高价值,拿走不谢)
- 《格兰杰计量经济学文集(第一卷)》
- Easy EDA #学习笔记06# | L9110S H桥2路直流电机驱动板设计(附.4056 充电、过充过放保护电路设计)
- java许愿墙_许愿墙的实现
- 高德地图实现多点标注marker和动态信息窗体
- 变革家五步投资法学习体会
- 500 Casual Expressions Commonly Used