专栏首页coding for loveCSS进阶03-定位体系,格式化上下文,常规流

CSS进阶03-定位体系,格式化上下文,常规流

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. 简介

在CSS2.2中,盒子根据定位体系来布局,其必然处于某个格式化上下文中。

2. 定位体系 Positioning Schemes

在CSS2.2中,盒子可以根据以下三种体系来布局:

  1. 标准流(或者说普通流) Normal Flow 。CSS2.2中,标准流包括块级盒的块格式化和行内级盒的行内格式化,以及块级盒和行内级盒的相对定位。
  2. 浮动 Floats 。在浮动模型中,一个盒子首先根据常规流布局,然后从标准流中脱离并尽可能地向左或向右位移。内容可以漂浮在浮动周围。
  3. 绝对定位 Absolutr Positioning 。在绝对定位模型中,一个盒子完全从标准流中脱离(对后面的同胞元素无影响)并相对于包含块来分配一个位置。

浮动元素、绝对定位元素、根元素都被称为脱离文档流 Out of Flow ;其他没有脱离文档流的元素被称为在文档流内 In-flow 。元素 A 的流是由 A 和在所有文档流内且最近的脱离文档流的祖先是A的元素构成的的集合。

2.1选择定位体系: position属性

“position”和“float”属性决定了使用哪一个CSS 2.2定位算法来计算一个盒子的位置。

CSS2.2文档-position property

position属性值有如下含义:

  1. static:盒为普通盒,根据标准流布局, top 、 right 、 bottom 、 left 属性无效。
  2. relative:盒的定位根据标准流计算(这个位置被称为标准流内的位置)。接着盒相对其标准流中的位置移动。当B盒是相对定位,则B盒之后的盒定位时就当B没有移动一样来计算,也就是相对B盒标准流中的位置来计算。 position:relative对于table-row-group 、 table-header-group 、 table-footer-group 、 table-row 、 table-column-group 、 table-column 、 table-cell 以及 table-caption 元素是无效的。
  3. absolute:盒的位置(还可能包括大小)由 top 、 right 、 bottom 、 left 属性指定。这些属性是相对于盒的包含块来指定移动距离的。绝对定位盒脱离文档流。这意味着它们对之后的同胞盒的布局没有影响。同时,即便绝对定位盒有外边距margin,也不同其他任何外边距折叠。
  4. fixed:盒的定位根据 absolute 模型来计算,但除此之外,盒相对某些参照物保持固定。和 absolute 模型一样,盒的外边距也不同其他任何外边距折叠。在手持 handheld 、投影 projection 、屏幕 screen 、打字机 tty 、电视 tv 媒体类型中,盒相对视口固定且滚动时不会移动。在打印媒体类型中,即便页面是通过视口来访问的(比如打印预览),盒也渲染在所有页,并且根据页盒固定。其他媒体类型中则未定义此表现。开发者可根据依赖媒体来指定 fixed 。比如说,如果想使盒固定在屏幕视口顶部,但不出现在打印页的顶部,这两种设定可以通过使用@media规则来分开,如下:
@media screen { 
   h1#first { position: fixed } 
}
@media print { 
   h1#first { position: static }
}

用户代理不可将固定盒的内容分页显示。注意用户代理可能用其他方法打印不可见内容。

用户代理会将根元素上的 position 视为 static 。

2.2 盒偏移box offset:top,right,bottom,left属性

如果某个元素的“position”属性具有非“static”值,则该元素将被定位。定位元素生成定位盒,根据以下四个属性布局:

  1. top 此属性指定绝对定位盒的top margin edge在其包含块的top edge向下偏移的距离。对于相对定位的盒子,偏移量是相对于盒子本身在标准流中位置的top edge。属性值如果是百分比,则是根据其包含块的height来计算的,如果属性值既不是value,也不是百分比,那么就默认是auto。
  2. right 此属性指定绝对定位盒的right margin edge在其包含块的right edge向左偏移的距离。对于相对定位的盒子,偏移量是相对于盒子本身在标准流中位置的right edge。属性值如果是百分比,则是根据其包含块的width来计算的,如果属性值既不是value,也不是百分比,那么就默认是auto。
  3. bottom 此属性指定绝对定位盒的bottom margin edge在其包含块的bottom edge向上偏移的距离。对于相对定位的盒子,偏移量是相对于盒子本身在标准流中位置的bottom edge。属性值如果是百分比,则是根据其包含块的height来计算的,如果属性值既不是value,也不是百分比,那么就默认是auto。
  4. left 此属性指定绝对定位盒的left margin edge在其包含块的left edge向左偏移的距离。对于相对定位的盒子,偏移量是相对于盒子本身在标准流中位置的left edge。属性值如果是百分比,则是根据其包含块的width来计算的,如果属性值既不是value,也不是百分比,那么就默认是auto。

3. 常规流 Normal flow与格式化上下文formatting context

CSS2.1中规定,常规流中的盒子都属于某个格式化上下文,要么块格式化上下文,要么行内格式化上下文,总之不能二者得兼。块级盒参与块格式化上下文,行内级盒参与行内格式化上下文。 CSS2.2中对这个规定有了新的解释。引入了表格式化上下文。并且声明,在CSS的未来级别,将引入其他类型的格式化上下文。 果不其然,CSS3中,引入了GFC,FFC和RFC

4. 关于格式化上下文FC的简单介绍

首先我们来理解一下,什么是FC。FC的英文全称是:Formatting Contexts,直译为“格式化上下文”,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系与相互作用。

那么,FC包含哪些类型呢?答案是六种类型:BFC、IFC、TFC、GFC 、FFC,RFC。需要注意的是,CSS2.1规范中只有BFC和IFC,CSS2.2中出现TFC,CSS3才有GFC,FFC和RFC。 (以下内容还在逐步比照官方文档解读和修改中,详细内容可以点击“详细了解”)

4.1. BFC(详细了解)

BFC的英文全称是:Block Formatting Contexts,直译为“块格式化上下文”。BFC就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此。

  • BFC拥有如下特性:
  1. 内部的Box会在垂直方向,从顶部往下一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加,即会产生margin折叠。
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box叠加。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  6. 计算BFC的高度时,浮动元素也参与计算。
  • 如何生成BFC:
  1. 根元素,即HTML元素。
  2. float的值不为none。
  3. overflow的值不为visible。
  4. position的值不为relative和static。
  5. display的值为table-cell, table-caption, inline-block中的任何一个。
  • BFC常见用途:
  1. 常见的多栏布局,结合块级别元素浮动,里面的元素则是在一个相对隔离的环境里运行。
  2. 防止margin折叠。
  3. 防止高度塌陷。

4.2. IFC

IFC的英文全称是:Inline Formatting Contexts,直译为"行内格式化上下文"。IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)。

  • IFC拥有如下特性
  1. IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。
  2. IFC中是不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC。每个IFC对外表现为块级元素,与div垂直排列。
  • IFC常见用途:
  1. 水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
  2. 垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

4.3 TFC

TFC的英文全称是:Table Formatting Contexts,直译为“表格式化上下文”。 (待补充...)

4.4 GFC

GFC的英文全称是:Grid Formatting Contexts,直译为“网格格式化上下文”。当为一个元素设置display:grid的时候,此元素将会获得一个独立的渲染区域。我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。 GFC将改变传统的布局模式,他将让布局从一维布局变成了二维布局。简单的说,有了GFC之后,布局不再局限于单个维度了。这个时候你要实现类似九宫格,拼图之类的布局效果显得格外的容易。

4.5. FFC

FFC的英文全称是:Flex Formatting Contexts,直译为“弹性格式化上下文”。display值为flex或者inline-flex的元素将会生成自适应容器(flex container)。 Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或 inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox定义了伸缩容器内伸缩项目该如何布局。 整体来说,FFC与BFC有点儿类似,但有以下几点区别:

  1. Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素。
  2. vertical-align对Flexbox中的子元素是没有效果的。
  3. float 和 clear 属性对Flexbox中的子元素是没有效果的,也不会使子元素脱离文档流(但是对Flexbox 是有效果的!)。
  4. 多栏布局(column-*) 在 Flexbox 中也是失效的,就是说我们不能使用多栏布局在Flexbox 排列其下的子元素。
  5. Flexbox 下的子元素不会继承父级容器的宽度。

4.6 RFC

RFC的英文全称是:Ruby Formatting Contexts。这一块我暂时没去研究。

参考

https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro https://www.w3.org/TR/CSS2/visuren.html CSS规范 > 9 视觉格式化模型 Visual Formatting Model css3中的BFC,IFC,GFC和FFC CSS之BFC、IFC、GFC和FFC 浅析css中的BFC、IFC、GFC和FFC 什么是BFC、IFC、GFC和FFC

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS进阶系列02-JS面向对象的三大特征之封装

    JS 作为面向对象的一门语言,拥有和其他面向对象语言一样的三大特征,即封装(encapsulation)、继承(inheritance )和多态(polymor...

    love丁酥酥
  • 5-10~11 webpack 性能优化(2)

    然后我们修改一下 home.jsx 代码,增加一个三方库,lodash。我们装一下 lodash 然后引入:

    love丁酥酥
  • 2-3 webpack的正确安装方式

    webpack是基于node开发的环境打包工具。首先需要安装node环境。 进入node官网,尽量安装最新版本的稳定版node。因为提高webpack打包速度...

    love丁酥酥
  • 加速全球化布局!AICHAIN全球巡演硅谷站完美落幕!

    随着区块链的大热,一场轰轰烈烈的“区块链运动”正在席卷全球。看看现在的大势,从金融到国家政务,从教育到互联网…几乎每个行业都在努力借助区块链技术,为本行业带来颠...

    区块链领域
  • 每日算法系列【LeetCode 1363】形成三的最大倍数

    给你一个整数数组 digits,你可以通过按任意顺序连接其中某些数字来形成 3 的倍数,请你返回所能得到的最大的 3 的倍数。

    godweiyang
  • springboot maven项目打包SAPJCO3.JAR

    路过君
  • 【Python基础】08、Python模

     可以将代码量较大的程序分割成多个有组织的、彼此独立但又能互相交互的代码片段,这些自我包含的有组织的代码段就是模块

    py3study
  • Go 语言学习之基础数据类型

    整数类型按照有/无符号划分,可分为有符号整数和无符号整数,二者按照大小划分,有 8 位、16 位、32 位和 64 位:

    frankphper
  • 深入探索 Java 热部署

    在 Java 开发领域,热部署一直是一个难以解决的问题,目前的 Java 虚拟机只能实现方法体的修改热部署,对于整个类的结构修改,仍然需要重启虚拟机,对类重新加...

    用户1257393
  • 探索 Java 热部署的奥妙

    在 Java 开发领域,热部署一直是一个难以解决的问题,目前的 Java 虚拟机只能实现方法体的修改热部署,对于整个类的结构修改,仍然需要重启虚拟机,对类重新加...

    Spark学习技巧

扫码关注云+社区

领取腾讯云代金券