CSS中各种布局的背后,实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。
上图为W3C标准盒模型,另外还有一种IE盒模型(IE6以下),唯一的区别就是:前者
width = content
,后者width = content + padding + border
若要将IE盒模型转换为标准盒模型,需要在文档顶部加上<!DOCTYPE html>
声明;很有意思的是,后来CSS3 中也增加了box-sizing
属性,box-sizing: content-box
即标准盒模型,box-sizing: border-box
即IE盒模型(width包含内边距和边框),W3C反过来又承认了微软,也是有意思。
视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制,根据上述的盒模型,为文档元素生成盒(Box)。通俗的说,视觉格式化模型就是文档里的盒子布局呈现的一种规则。
影响布局的因素:
1.盒的尺寸和类型
2.定位方案 Positioning Scheme
(常规流,浮动和绝对定位)
3.文档树中元素之间的关系
4.外部信息(如:视口大小,图片的固有尺寸等)
FC...是谁在说脏话?! Formatting Context -- 格式化上下文,*FC就是视觉格式化模型,用来描述盒子布局规则。
块级元素、块级盒、块容器盒、块盒、匿名块盒、行内级元素、行内级盒、原子行内级盒、原子行内盒、行盒、匿名行内盒、
插入盒......要报警了!!!这些真的不是我YY出来的,W3C 里真的有这么多概念好吗!!!感觉进坑了啊!!!headache...来吧,一个个捋清楚... -_-|||
display:block / list-item / table
时,它就是是块级元素 block-level ,视觉上呈现为块,竖直排列。每个块级元素生成一个主要的块级盒 (Principal Block-level Box) 来包含其后代盒和生成的内容,同时参与定位体系 (Positioning Scheme) 。某些块级元素还会在主要盒之外产生额外的盒: list-item 元素。这些额外的盒会相对于主要盒来摆放。display:inline, inline-block 或 inline-table
时,称它为行内级元素。行内级元素生成行内级盒(inline-level boxes),参与行内格式化上下文(IFC)。display:inline
的非替换元素生成的盒是行内盒。CSS2.1中,常规流包括块级盒的块格式化,行内盒的行内格式化,以及块级盒和行内级盒的相对定位。
在浮动模型中,盒首先根据常规流布局,然后从常规流中脱离并尽可能地向左或向右位移。内容可以布局在浮动周围。
在绝对定位模型中,盒完全从常规流中脱离(对后面的同胞元素无影响)并根据包含块来分配位置。
float: left/right/inherit
position: absolute/fixed
display: inline-block
display: table-cell
display: table-caption
overflow: hidden/scroll/auto/inherit
display: flex/inline-flex
flex
的容器被渲染为一个块级元素inline-flex
的容器则渲染为一个行内元素display
值为grid
的时候,此元素将会获得一个独立的渲染区域。原文链接:https://segmentfault.com/a/1190000013372963