CSS——可视化格式模型

CSS的可视化格式模型

  • CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示);
  • 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局;
  • 换句话说,盒子模型规定了怎么在页面上摆放盒子,盒子的相互作用等等;
  • CSS的可视化格式模型就是规定了浏览器在页面中如何处理文档树

1、关键字:

  • 包含块(Containing Block)、
  • 控制框(Controlling Box)、
  • BFC(Block Formatting Context)、
  • IFC(Inline Formatting Context)、
  • 定位体系、
  • 浮动等

2、CSS三种定位机制:普通流、浮动流、绝对定位

3、包含块

  • 一个元素的box的定位和尺寸,会与某一矩形框有关,这个框就称之为包含块。
  • 元素h会为它的子孙元素创建包含块,但是,并不是说元素的包含块就是它的父元素,元素的包含块与它的祖先元素的样式有关:
  • 譬如:
    • 根元素是最顶端的元素,他没有父节点,它的包含块就是初始化包含块;
    • static和relative的包含块由他最近的块级、单元格或者行内块祖先元素的内容框(content)创建;
    • fixed的包含块就是当前可视窗口;
    • absolute的包含块由他最近的position属性值不为static的祖先元素创建:
      • 如果其祖先元素是行内元素,则包含块取决于其祖先元素的direction特性;
      • 如果祖先元素不是行内元素,那么包含块的区域应该是祖先元素的内边距边界。

4、控制框(Controlling Box)

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

  1. 块框
    • 块级元素会生成一个块框(Block Box),块框会占据一整行,用来包含子box和生成的内容;
    • 块框同时也是一个块包含框(Containing Box),里面要么只包含块框,要么只包含行内框(不能混杂);
    • 如果块框内部有块级元素也有行内元素,那么行内元素会被匿名块框包围
    • 匿名块框的生成:

    <div> some inline text <p>more text</p> </div>

    • div生成了一个块框,包含了另一个块框p以及文本内容some inline text,此时文本内容会被强制加到一个匿名的块框里面,被div生成的块框包含;
    • 换句话说:如果一个块框在其中包含另一个块框,那么我们强迫它只能包含块框,因此其他文本内容生成出来的都是匿名块框(而不是匿名行内框)
  2. 行内框
    • 一个行内元素生成一个行内框;
    • 行内元素能排在一行,允许左右有其他元素。
    • 匿名行内框的生成:

    <div> some <em>more text</em> text </div>

    • div元素生成一个块框,其中有几个行内框(如em)以及文本some和text,此时会专门为这些文本生成匿名行内框;
  3. display属性的影响
    • display的几个属性也可以影响不同框的生成:
      • block,元素生成一个块框;
      • inline,元素产生一个或多个的行内框;
      • inline-block,元素产生一个行内级块框,行内块框的内部会被当做块框来格式化,而此元素本身会被当作行内级框来格式化(这也是为什么会产生BFC);
      • none,不生成框,不再格式化结构中,而另一个visibility:hidden则会产生一个不可见的框
  4. 总结:
    • 如果一个框里,有一个块级元素,那么这个框里的内容都会被当作块框来进行格式化,因为只要出现了块级元素,就会将里面的内容分成几块,每一块独占一行(出现行内可以用匿名块框解决);
    • 如果一个框里,没有任何块级元素,那么这个框里的内容会被当成行内框来格式化,因为里面的内容时按照顺序成行的排列。
  5. FC(Formatting Context)
    • FC即格式化上下文,它定义框内部的元素渲染规则,比较抽象,譬如:
      • FC就像是一个大箱子,里面装有很多元素;
      • 箱子可以隔开里面的元素和外面的元素(所以外部并不会影响FC内部的渲染);
      • 内部的规则可以是:如何定位、宽高计算、margin折叠等等
    • 不同类型的框参与的FC类型不同,譬如块级框对应BFC,行内框对应IFC
    • 注意:并不是说所有的框都会产生FC,而是符合特定的条件才会产生,只有产生了对应的FC后才会应用对应的FC渲染规则
  6. BFC渲染规则
    • 在块格式化上下文中,每一个元素左外边与包含块的左边解除(对于从右到左的格式化,右外边接触右边),即使存在浮动也是如此(所以浮动元素正常会直接贴近它的包含块的左边,与普通元素重合),除非这个元素也创建了一个新的BFC;
    • BFC特点:
      1. 内部box在垂直方向,一个接一个的放置;
      2. box的垂直方向由margin决定,属于同一个BFC的两个box间的margin会重叠;
      3. BFC区域不会与float box重叠(可用于排版)
      4. BFC就是页面上的一个隔离的独立容器,容器里的子元素不会影响到外面的元素,反之也是如此;
      5. 计算BFC的高度时,浮动元素也参与计算(不会浮动塌陷如overflow:hidden清除浮动就是这个原理);
    • 如何触发BFC
      1. 根元素;
      2. float属性不为none;
      3. position为absolute或fixed;
      4. display为inline-block、flex、inline-flex、table、table-cell、table-caption
      5. overflow不为visible
      6. display:table,本身不会产生BFC,但是他会产生匿名框(包含display:table-cell的框),而这个匿名框产生BFC。
  7. IFC规则
    • 在行内格式化上下文中,框一个接一个地水平排列,起点是包含块的顶部。水平方向上的margin,border和padding在框之间得到保留,框在垂直方向上可以以不同的方式对齐;
    • 它们的顶部或底部对齐,或根据其中文字的基线对齐
    • 行框:
      • 包含那些框的长方形区域,会形成一行,叫做行框。行框的宽度有它的包含块和其中的浮动元素决定,高度的确定由行高度计算规则决定;
    • 行框的规则:
      • 如果几个行内框在水平方向上无法放入一个行框内,它们可以分配在两个或多个垂直堆叠的行框中(即行内框的分割)
      • 行框在堆叠是没有垂直方向上的分割且永远不重叠;
      • 行框的高度总是足够容纳所包含的所有框,不过他可能高于他包含的最高的框(例如,框对齐会引起基线对齐)
      • 行框的左边接触到其包含块的左边,右边接触到其包含块的右边。
  • 总结: 1. 行内元素总是会应用IFC渲染规则; 2. 行内元素会应用IFC规则渲染,譬如text-align可以用来居中等; 3. 块框内部对于文本这类的匿名元素,会产生匿名行框包围,而行框内部就应用IFC渲染规则 4. 行内框内部,对于那些行内元素,一样应用IFC渲染规则; 5. 另外,inline-block,会在元素外层产生IFC(所以这个元素可以通过text-align水平居中),当然,它的内部则按照BFC规则渲染

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

2095
来自专栏向治洪

android动画之interpolator和typeEvaluator用法详解

Interpolator (插值器) 我们在写动画的时候为了达到某种效果往往需要设置插值器,用来真实的模拟生活中的场景。  Interpolator (插值器)...

2199
来自专栏菩提树下的杨过

Flash/Flex学习笔记(48):反向运动学(下)

先要复习一下三角函数与余弦定理: 对于直角三角形,三边长a,b,c与三个角A,B,C的关系如下: ? 正弦函数: ? 余弦函数: ? 正切函数: ? 反正切函数...

24610
来自专栏阿凯的Excel

巧妙完成二维表的数据匹配

接下来我将每周分享一个广大网友向我提问的经典问题。 本周问题,如何对二维表进行匹配! 原表格! ? 备注:以上人名,均属虚构,如有雷同!说明有缘!!! 咳...

2833
来自专栏HansBug's Lab

3359: [Usaco2004 Jan]矩形

3359: [Usaco2004 Jan]矩形 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 8  Solv...

3596
来自专栏数据小魔方

查询与引用函数——offset函数

今天要跟大家分享的是一个强大的查询与引用函数——offset函数! OFFSET函数的语法参数相对比较多,但是因为参数位置和函数都比较固定,所以只要能够理解各自...

3297
来自专栏曾大稳的博客

OpenGLES通过SurfaceTexture预览摄像头画面

比如美颜相机那些,处理摄像头数据展示出来,为了提高预览的效率,所以这里使用了VBO和FBO,如果不知道这个,请看上面的文章。

6082
来自专栏天天

background、转换、过渡

1013
来自专栏每日一篇技术文章

OPenGL ES _ 着色器_实战2

1.使用AVPlayer 获取视频每一帧的YUV 像素数据 2.通过CoreVideo 框架中的几个方法,将Y分量和UV 分量进行分离 3.创建着色器,对Y...

1351
来自专栏Android知识点总结

看得见的数据结构Android版之栈篇

进入和弹出动画为了好区分,用两个 ValueAnimator 控制,下面是成员变量

1152

扫码关注云+社区

领取腾讯云代金券