CSS中各种布局的背后,实质上是各种*FC的组合。CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC。

盒模型(BoxModel)

上图为W3C标准盒模型,另外还有一种IE盒模型(IE6以下),唯一的区别就是:前者width= content,后者width= content + padding + border

若要将IE盒模型转换为标准盒模型,需要在文档顶部加上<!DOCTYPEhtml>声明;很有意思的是,后来CSS3中也增加了box-sizing属性,box-sizing:content-box即标准盒模型,box-sizing:border-box即IE盒模型(width包含内边距和边框),W3C反过来又承认了微软,也是有意思。

视觉格式化模型(VisualFormatting Model)

视觉格式化模型(visualformattingmodel)是用来处理文档并将它显示在视觉媒体上的机制,根据上述的盒模型,为文档元素生成盒(Box)。通俗的说,视觉格式化模型就是文档里的盒子布局呈现的一种规则。

影响布局的因素

  1. 盒的尺寸和类型
  2. 定位方案 PositioningScheme(常规流,浮动和绝对定位)
  3. 文档树中元素之间的关系
  4. 外部信息(如:视口大小,图片的固有尺寸等)

FC– Formatting Context

FC…是谁在说脏话?!FormattingContext – 格式化上下文,*FC就是视觉格式化模型,用来描述盒子布局规则。

前方大波概念来袭!

块级元素、块级盒、块容器盒、块盒、匿名块盒、行内级元素、行内级盒、原子行内级盒、原子行内盒、行盒、匿名行内盒、插入盒…要报警了!!!这些真的不是我YY出来的,W3C里真的有这么多概念好吗!!!感觉进坑了啊!!!headache…来吧,一个个捋清楚…-_-|||

  • 块级元素(Block-levelelements):当元素的CSS属性 display:block/ list-item / table 时,它就是是块级元素block-level,视觉上呈现为块,竖直排列。每个块级元素生成一个主要的块级盒(PrincipalBlock-level Box) 来包含其后代盒和生成的内容,同时参与定位体系(PositioningScheme) 。某些块级元素还会在主要盒之外产生额外的盒:list-item元素。这些额外的盒会相对于主要盒来摆放。
  • 块级盒(Block-levelboxes):由块级元素生成,参与块级格式化上下文(BFC)。描述元素跟它的父元素与兄弟元素之间的表现。
  • 块容器盒(Blockcontainer box):只包含其它块级盒,或生成一个行内格式化上下文(inlineformattingcontext),只包含行内盒。有些块级盒,比如表格,不是块容器盒。相反,一些块容器盒,比如非替换行内块及非替换表格单元格,不是块级盒。描述元素跟它的后代之间的影响。
  • 块盒(Blockboxes):同时是块容器盒的块级盒。

  • 匿名块盒(Anonymousblock boxes):没有名字,不能被CSS选择符选中。块容器盒要么只包含行内级盒,要么只包含块级盒,但通常文档会同时包含两者,在这种情况下,将创建匿名块盒来包含毗邻的行内级盒。

  • 行内级元素(Inline-levelelements):当元素的CSS属性 display:inline,inline-block 或inline-table时,称它为行内级元素。行内级元素生成行内级盒(inline-levelboxes),参与行内格式化上下文(IFC)。
  • 行内级盒(Inline-levelboxes):所有 display:inline的非替换元素生成的盒是行内盒。
  • 原子行内级盒(atomicinline-level boxes):不参与生成行内格式化上下文的行内级盒称为原子行内级盒(atomicinline-level boxes)。
  • 原子行内盒(atomicinline boxes):注意:起初原子行内级盒(atomicinline-level boxes)被称为原子行内盒(atomicinlineboxes)。很不幸,它们并非行内盒。规范的勘误表修正了这个错误。不管怎样,当再看到原子行内盒时可以放心的当成原子行内级盒,因为只是改了名字。原子行内盒在行内格式化上下文里不能分成多行。
  • 行盒(Lineboxes):行盒由行内格式化上下文(IFC)产生的盒,用于表示一行。在块盒里面,行盒从块盒一边排版到另一边。当有浮动时,行盒从左浮动的最右边排版到右浮动的最左边。

  • 匿名行内盒(Anonymousinline boxes):匿名行内盒最常见的例子是块盒直接包含文本。
  • 插入盒(Run-inboxes):插入盒(Run-inboxes)从CSS2.1 标准中移除了,因为可操作的实现定义不足。可能 CSS3会引入,但是这是实验性质,不能用于生产环境。

定位方案(Positioningschemes)

-常规流(Normalflow)

CSS2.1中,常规流包括块级盒的块格式化,行内盒的行内格式化,以及块级盒和行内级盒的相对定位。

-浮动(Floats)

在浮动模型中,盒首先根据常规流布局,然后从常规流中脱离并尽可能地向左或向右位移。内容可以布局在浮动周围。

-绝对定位(Absolutepositioning)

在绝对定位模型中,盒完全从常规流中脱离(对后面的同胞元素无影响)并根据包含块来分配位置。

BFC– Block Formatting Context

触发条件

  1. 根元素或其它包含它的元素
  2. 浮动 float:left/right/inherit
  3. 绝对定位元素 "western" style="margin-bottom: 0in; ; page-break-inside: auto; orphans: 2; widows: 2; page-break-after: auto">行内块 display:inline-block
  4. 表格单元格 display:table-cell
  5. 表格标题 display:table-caption
  6. 溢出元素 overflow:hidden/scroll/auto/inherit
  7. 弹性盒子 display:flex/inline-flex

布局规则

  1. 内部的Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  3. 每个元素的marginbox的左边,与包含块borderbox的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与floatbox重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算

应用场景

  • 闭合浮动:浮动区域不叠加到BFC区域上
  • 防止与浮动元素重叠
  • 防止margincollapse
  • float元素高度塌陷

IFC– Inline Formatting Contexts

触发条件

一个块级元素中仅包含内联级别元素

布局规则

  • 内部的盒子会在水平方向,一个接一个地放置。
  • 这些盒子垂直方向的起点从包含块盒子的顶部开始。
  • 摆放这些盒子的时候,它们在水平方向上的padding、border、margin所占用的空间都会被考虑在内。
  • 在垂直方向上,这些框可能会以不同形式来对齐(vertical-align):它们可能会使用底部或顶部对齐,也可能通过其内部的文本基线(baseline)对齐。
  • 能把在一行上的框都完全包含进去的一个矩形区域,被称为该行的行框(linebox)。行框的宽度是由包含块(containingbox)和存在的浮动来决定。
  • IFC中的linebox 一般左右边都贴紧其包含块,但是会因为float元素的存在发生变化。float元素会位于IFC与与linebox 之间,使得linebox 宽度缩短。
  • IFC中的linebox 高度由CSS行高计算规则来确定,同个IFC下的多个linebox 高度可能会不同(比如一行包含了较高的图片,而另一行只有文本)
  • 当inline-levelboxes 的总宽度少于包含它们的linebox 时,其水平渲染规则由text-align属性来确定,如果取值为justify,那么浏览器会对inline-boxes(注意不是inline-table和inline-blockboxes)中的文字和空格做出拉伸。
  • 当一个inlinebox 超过linebox 的宽度时,它会被分割成多个boxes,这些boxes被分布在多个linebox 里。如果一个inlinebox 不能被分割(比如只包含单个字符,或word-breaking机制被禁用,或该行内框受white-space属性值为nowrap或pre的影响),那么这个inlinebox 将溢出这个linebox。

应用场景

  • 水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过设置父容器text-align:center则可以使其水平居中。
  • 垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

FFC– Flex Formatting Contexts

触发条件

当display的值为flex或inline-flex时,将生成弹性容器(FlexContainers),一个弹性容器为其内容建立了一个新的弹性格式化上下文环境(FFC)

布局规则

  • 设置为 flex的容器被渲染为一个块级元素
  • 设置为 inline-flex的容器则渲染为一个行内元素
  • 弹性容器中的每一个子元素都是一个弹性项目。弹性项目可以是任意数量的。弹性容器外和弹性项目内的一切元素都不受影响。简单地说,Flexbox定义了弹性容器内弹性项目该如何布局

GFC– GridLayout Formatting Contexts

触发条件

当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域

布局规则

通过在网格容器(gridcontainer)上定义网格定义行(griddefinition rows)和网格定义列(griddefinition columns)属性各在网格项目(griditem)上定义网格行(gridrow)和网格列(gridcolumns)为每一个网格项目(griditem)定义位置和空间。

CSS中各种布局的背后(*FC)的更多相关文章

  1. 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

    前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...

  2. 理解css中Grid布局,在项目中如何实现grid页面布局

    简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的 ...

  3. 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  4. CSS中网格布局实战(初级)

    大家好,网格布局是我们在网页布局中经常用到的,那这里我就给大家分享一篇简单的网格布局,让大家能简单明了的了解网格布局的基本内容.闲话不多说,直接进入主题! 第一步,基本的框架结构.这里直接一个div来 ...

  5. 前端知识点回顾之重点篇——CSS中flex布局

    flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...

  6. css中flex布局

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; ...

  7. 图文详解前端CSS中的Grid布局,你真的可以5分钟掌握

    前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...

  8. css+div页面布局

    div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...

  9. css的flex布局调试

    学习经验-css的flex布局 今天遇到一个小问题 在给三个div布局时,设置父元素display:flex 此时三个div的宽度均为50%,他们并没有超出屏幕的宽度,还是撑满了父元素. 为什么呢? ...

随机推荐

  1. Netty源码分析 (九)----- 拆包器的奥秘

    Netty 的解码器有很多种,比如基于长度的,基于分割符的,私有协议的.但是,总体的思路都是一致的. 拆包思路:当数据满足了 解码条件时,将其拆开.放到数组.然后发送到业务 handler 处理. 半 ...

  2. springboot---redis缓存的使用

    1.下载redis安装包,解压到电脑 2.启动redis 3.springboot  application.properties中配置redis缓存 spring.redis.host=127.0. ...

  3. 单点登录(Single Sign On)解决方案

    单点登录(Single Sign On)解决方案 需求 多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. A 网站和 B 网站是同一家公司的关联服务.现在要求,用户只要在其中一个网 ...

  4. Visual Studio Code安装以及C/C++运行环境搭建

    众所周知VSCode是全宇宙最好用的编辑器 (雾 配置了很久,今日终于配置完成了,还是有点麻烦的,本文是为了方便一些不懂怎么配置的小白,以及还有一些美化教程. 一.安装 Visual Studio C ...

  5. ACM讲课之字符串

    本次讲课讲全面介绍字符串以及如何使用字符串解决具体问题. 一.什么是字符串 1.如何存储字符串 平时我们使用的变量有很多,int代表整型变量,double代表浮点型变量,char代表字符型变量,那么对 ...

  6. 记一次 JavaScript 浮点型数字误差引发的问题

    需求 车间的工人在生产出来产品后,需要完成初步的自检,并通过手机上报.在实际生产中,用户(工人)不方便进行数值的输入,因而表单中的一些项设计成 picker 模式以供选取数值.数值的取值范围,根据允许 ...

  7. JVM 内存区域大小参数设置

    JVM内存包括区域 Heap(堆区) New Generation(新生代) Eden 伊甸园 Survivor From Survivor To Old Generation(老年代) 方法区 Pe ...

  8. 下载腾讯VIP视频

    1.找到自己想看的VIP视频网页地址,比如我就喜欢看一周一更的天行九歌,链接地址:https://v.qq.com/x/cover/rm3tmmat4li8uul/i0031xd1vjf.html 2 ...

  9. Spring Boot 整合 Web 开发

    这一节我们主要学习如何整合 Web 相关技术: Servlet Filter Listener 访问静态资源 文件上传 文件下载 Web三大基本组件分别是:Servlet,Listener,Filte ...

  10. selenium实现百度图片爬取

    因为是百度图片是瀑布流ajax异步上传的数据,所以这里用到抓包工具来抓取链接(fiddler) 好了直接上代码, from selenium import webdriver from seleniu ...