2019-02-26-CSS的可视化格式模型

CSS 的可视化格式模型

简介

CSS 中规定每个元素都有自己的盒子模型
可视化格式模型则是把这些盒子按照规则摆放到页面上布局
盒子模型规定了怎么在页面上布局盒子和盒子之间的相互作用

CSS 的可视化格式模型规定了浏览器在页面中如何处理文档树

其中包括了

包含块（Containing Block)
控制框（Controlling Box）
BFC（Block Formatting Context）
IF（Inline Formatting Context）
定位体系
浮动

CSS 包含了三种定位机制：普通，浮动，决定定位

包含快（Containing Block）

一个元素的 box 的定位尺寸，会与某个矩形框有关，这个框就称之为包含块。元素会为他的子孙元素创建包含块，但是并不是说元素的包含块就是它的父元素，元素的包含块与它的祖先元素的样式等有关系

通俗的讲，就是定位参考框或者定位左边参考系

比如：

根元素是最顶端的元素，它没有父节点，它的包含块就是初始包含块
static 和 relative 的包含块是由它最近的块级、单元格或者行内块祖先元素的内容框（content）创建的。
fixed 的包含块是当前的可是窗口
absolute 的包含块由他最近的 position 属性为abosolute，relative，fixed的祖先元素创建
- 如果其祖先元素是行内元素，则包含块取决于其祖先元素的 direction 特性
- 如果祖先元素不是行内元素，那么包含块的区域应该为祖先元素的内边距边界

direction: 设置文本方向

div{
    direction: rtl;

    rtl //文本方向从右到左。
    ltl //默认。文本方向从左到右。
    inherit //规定应该从父元素继承 direction 属性的值。
  }

控制框（Controlling Box）

块级元素和块框以及行内元素和行框的相关概念

块框

块级元素会生成一个块框（Block Box），块框会占据一整行，用来包含子 box 和生成的内容
块框同时也是一个块包含框（Containing Box），里面要么只包含块框，要么只能包含行内块（不能混淆），如果块框内部有块级元素也有行内元素，那么行内元素会被匿名块框包围

匿名块框

<div>
    Some text
    <p>More text</p>
</div>

div 生成一个块框，包含了另外一个块框 p 以及文本内容「Sometext」，此时「Some text」文本会被强制加上一个匿名的块框里面，被 div 生成的块框包含

如果一个块框在其中包含了另外一个块框，那么我们强迫它只能包含块框，因此其他文本内容生产出来的都是匿名块框

行内框

一个行内元素生成一个行内框
行内元素能排在一行，允许左右有其他元素

关于匿名行内框的生成：

1	<P>Some <EM>emphasized</EM> text</P>

p 元素生成一个块框，其中有几个行内框（如 EM），以及文本「Some」「text」，此时会专门为这些文本生成匿名行内狂

display 属性影响

display 的几个属性也可以影响不同框的生成：

block：元素生成一个块框
inline：元素生成一个或多个行内框
inline-block：元素生成一个行内块级框，行内块级的内部会被当做块级来格式化，因此元素本身会被当做行内框来格式化
none：不生成框，不在格式化结构中

visibility:hidden 产生一个不可见的框

总结

1.如果一个框内有一个块级元素，那么这个框里的内容都会被当做块框来进行格式化，因为只要出现块级元素，就会将里面的内容分块几块，每一块独占一行（出现行内，则用匿名块框包含） 2.如果一个框内，没有任何块级元素，那么这个框里的内容会被当做行内框来格式化，因为里面的内容按照顺序成行的排列

BFC（Block Formatting Context）

块级格式化上下文，浮动元素和绝对定位元素，非块级盒子的块级，以及 overflow 不为「visiable」的块级盒子，都会为他们的内容创建新的 BFC

在块级格式化上下文中，每个元素左边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使寸浮动也是如此（所以浮动元素正常会直接贴近它的包含块的左边，与普通元素重合）

除非这个元素也创建一个新的 BFC

特点：

1.内部 box 在垂直防线，一个接一个的放置
2.box 的垂直方向由 margin 决定，属于同一个 BFC 的两个 box 间的 margin 会重叠（这个比较重要）
3.BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外卖的元素。 4.计算 BFC 的高度时候，浮动元素也会计算（不会浮动坍塌）

如何触发 BFC？

1.根元素
2.float 不为 none
3.position 为 absolute 或者 fixed
4.dispaly 为 inline-block、flex、inline-flex、table、tablec-cell、table-caption
5.overflow 不为 visible

ps:「display:table」，它本身不产生 BFC，但是它会产生匿名框（包含 display:table-cell 的框），而这个匿名框产生 BFC