摘要：并且这种过程遵循标准的描述只要不是和绝对定位方式布局的，都在普通流里面。定位相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先相对绝对元素决定的。
视觉格式化模型
页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。
哪些因素控制了这些布局 1. 盒的尺寸和类型
2. 定位体系 Positioning Scheme （常规流，浮动和绝对定位）
3. 文档树中元素之间的关系
4. 外部信息（如：视口大小，图片的固有尺寸等）
下文讲针对性的解释这些影响布局的因素，先来解释些概念~
元素框包含块css假设每个元素都会生成一个或者多个Box，称为元素框，元素框中心有内容区，内容区外周围包括了padding，border，margin，盒模型就是用来处理这些内容的一个模型
每个元素都是相对于包含块摆放，包含块就是一个元素的“布局上下文”,
p的包含块是div
//div的包含块是body
替换/非替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
通过 CSS content 属性来插入的对象 被称作 匿名可替换元素
如果元素的内容包含在文档之中，则为非替换元素
非替换元素的所有规则同样适用于替换元素，只有一个例外，width如果是auto,元素的高宽就是内容的固有高宽，比如img就是图片的原始大
例如浏览器会根据
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
CSS Box(盒模型/框模型)
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式，我们常见的盒模型大致有两种，一种是块级的盒子（Block Box），一种是行级的盒子（Line Box）
详细盒子的规则见下篇想要清晰的明白（二）CSS 盒模型Block box与Line box，但是我们至少可以知道盒子模型，在整个视觉模型中做到的是一个什么角色，盒子模型是处理盒子本身内部属性，像比如边距，边框的，而视觉格式化模型是来处理这些盒子摆放的
Block Box
display ： block 、 list-item 以及 table 会让一个元素成为块级元素。
Line Box
每一行称为一条Line Box，它又是由这一行的许多inline-box组成
display：inline会让一个元素称为行内元素
inline-block
将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
Formatting context
每个元素，或者说每个Box会根据设置的display值，去选择渲染它的方式，不同的display有不同层级：block-level box（块级）inline-level box(行级)，run-in box(插入型框 css3)，不同的层级会参与不同的环境（formatting context）去渲染
上文提到的环境就是这个Formatting context（格式化上下文），他是一个有渲染规则的渲染区域，不同的层级有不同的渲染规则，比如BFC和IFC
BFC
什么是BFC
块级格式化上下文，Block formatting context(简称BFC)，规定了块级盒子的渲染布局方式，他在计算盒子高度，margin值计算等地方有区别于其他环境。
BFC有什么特点
内部盒子会在垂直方向排列
同一个BFC中的元素可能会发生margin collapse；
BFC就是页面上的一个隔离的独立容器，里外互相不影响
计算BFC的高度时，考虑BFC所包含的所有子元素，连浮动元素也参与计算；
当元素不是BFC的子元素的时候，浮动元素高度不参与BFC计算（既是常见的盒子塌陷问题）
什么元素会触发产生一个新的BFC
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
再认真理解下这张图
我们可以用BFC来干嘛
清除浮动
阻止边距折叠
用于布局，什么两栏自适应高度之类的
BFC兼容性
IE6-7不支持BFC，而是使用私有属性hasLayout。表现上来看hasLayout和BFC相似，触发hasLayout条件与BFC相似，另外需要为元素设置IE特有的CSS属性zoom:1; zoom用于设置或检索元素的缩放比例，值为1即使用元素实际尺寸，使用zoom既可以触发hasLayout又不会对元素产生其他影响，相对来说更加方便
CSS定位方案
css布局宏观上来说是受定位方案影响，定位方案包括普通流，浮动，定位
普通流
元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述
只要不是float和绝对定位方式布局的，都在普通流里面。
浮动
浮动框不在文档的普通流中，浮动的流会漂浮在普通的流上面。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
定位
1. 相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置
2. 绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。
3. 固定定位，相对于浏览器窗口定位，脱离普通流，不占据空间
剩下的下篇见！！！(*￣3￣)╭
参考资料
caopen.net
CSS三种基本定位机制
css之BFC详解
inline-boxd的前世今生
《CSS.The.Definitive.Guide》
CSS float浮动的深入研究、详解及拓展
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115233.html
相关文章
-
想要清晰的明白（二）CSS 盒模型Block box与Line box
摘要：垂直格式化，有一个很重要的方面是会造成垂直相邻外边距合并，解决这个的方式见想要清晰的明白一中的部分。参考资料权威指南第三版为负值产生的影响和常见布局应用布局圣杯布局双飞翼布局深入理解和的基友关系深入理解中的行高
在上一篇想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用，接下来就详细的介绍两种盒子的具体细节
Block Box
show...
-
CSS中各种布局的背后(*FC)
摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。
CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。
盒模型(Box M...
-
视觉格式化模型之BFC
摘要：详见权威指南块级元素即块级元素是源文档中被格式化为块的元素，或者属性为的元素。概念顾名思义块级格式化上下文。每个元素的的左边，与包含块的左边相接触对于从左往右的格式化，否则相反。
情景：浮动的高度塌陷时，使用overflow：hidden可使父元素将浮动的子元素包含起来，解决问题。但背后的原理是什么？这就是今天要谈的BFC。
在将BFC之前需要先了解几个概念：
盒子模型（Box mo...
-
前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？
摘要：官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块，同时又是的包含块，不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为，则其使用的值来自相等。
作者：陈大鱼头
github： KRISACHAN
盒模型
The CSS box model describes the rectangular b...
-
BFC，包含块，文档流，浮动，定位是个啥关系---CSS视觉格式化模型
摘要：视觉格式化模型浏览器在解析渲染我们所写的内容，顺序渲染普通文档流。渲染结果如下图这儿有一个知识点文档流按我的理解就是在浏览器渲染显示的一个模式，这个模式的特点自上而下，从左到右排列规则。如果不特殊指定，浏览器会默认当前的渲染是按文档流模式。
CSS视觉格式化模型
浏览器在解析渲染我们所写的html内容，顺序渲染（普通文档流）。
1
2
3
4
...
发表评论
0条评论
阅读 1440·2021-10-25 09:44
阅读 2739·2021-09-04 16:48
阅读 1315·2019-08-30 15:44
阅读 2205·2019-08-30 15:44
阅读 1619·2019-08-30 15:44
阅读 2704·2019-08-30 14:14
阅读 2813·2019-08-30 13:00
阅读 1989·2019-08-30 11:09
