小猿杂谈

IFC详解

2017/05/04 CSS

行内格式化上下文 （Inline Formatting Contexts）

水平放置

  • 在IFC中，盒是从包含块顶部，按相应文本方向，一个挨一个水平放置的。这些盒之间的水平外边距，边框和内边距都有效，而垂直外边距不起作用。

垂直对齐

  • 盒在行内可以不同的方式垂直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线（baseline）对齐。（line-height与vertical-align ）

IFC布局规则

  • 子元素水平方向横向排列，并且垂直方向起点为元素顶部。
  • 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
  • 在垂直方向上，子元素会以不同形式来对齐（vertical-align）
  • 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
  • IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
  • IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
  • 当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
  • 当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

包含块”的定义

盒的位置和大小有时是根据一个特定矩形计算的，叫做该元素的包含块（containing block）。元素包含块的定义如下：

  • 根元素所在的包含块是一个被称为初始包含块（initial containing block）的矩形。初始包含块是视口大小的一个矩形。

  • 对于其它元素，如果该元素的position是’relative’或者’static’，包含块由其最近的块容器祖先盒的内容边界形成
  • 如果元素具有’position: fixed’，包含块由视口（viewport）建立，即初始包含块。
  • 如果元素具有’position: absolute’，包含块由最近非的static祖先建立，按照如下方式：
  • 如果该祖先是一个行内元素，包含块就是环绕着为该元素生成的第一个和最后一个行内盒的内边距框的边界框。
  • 若祖先为块元素，则包含块由该祖先的内边距边界形成
  • 如果没有这样的祖先，包含块就是初始包含块

行框

在IFC中，每个框都是一个接一个地水平排列，起点是包含块的顶部，水平方向上的margin、border、和padding在框之间得到保留。框在垂直方向上以不同的方式对齐，通过vertical设置。框的每一行称为行框。 行框的宽度由它的包含块和其中的浮动元素决定，高度由line-height决定

行高

行框总是足够高，能够容纳它包含的所有盒。当若干行内级盒在水平方向上不能共存于一个行框时，它们会被分到多个垂直堆叠的行框里。行框间并无垂直间隔，并且它们不会重叠。

在计算行框高时，不考虑非替换元素的内边距和边框，而替换元素和inline-block则以外边距盒（margin box）参与计算。

元素是文档结构的基础，在css里面，每个元素生成了包含内容的框（box）,大家都叫“盒子”。但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。比如：div 与span的方式不一样。

行宽

一般来说，一个行框的左右边界均贴靠包含块。

浮动字围

但当存在浮动盒时，浮动盒可能会跑到包含块边界与行框边界之间。行框的可用水平空间会因为浮动而减少，呈现出“字围”效果。

溢出与分割

  • 当一行的行内级盒的总宽度小于所在行框的宽度时，它们在行框里的水平分布由’text-align’属性决定。
  • 当行内盒超出行框宽度时，它会被分成几个盒，并且这些盒会跨多行框分布。如果一个行内块无法分割（如仅包含单个超出行宽的单词），那么该行内盒会从行框溢出。
  • 当一个行内盒被分割后，外边距，边框和内边距在分割处不会有视觉效果。

通俗的讲，如果一个块元素中，只有一个行内元素，那么默认情况下，当它宽度超过父元素的时候将会溢出。当块元素中有多个元素的时候，如果第一行可以排的下第一行但排不下第二个行内元素的话第二个行内元素就会自动排在下一行。如果能排下第二个行内元素就排在第一行，然后再看能不能排第三个行内元素（如果有的话）

替换元素与非替换元素

1.替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。比如： type=”text” 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样。HTML中的、、

2.非替换元素：

(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

比如 <p>wanmei.com</p>

浏览器将把这段内容直接显示出来。

除了这两字，还有两种非常属性的元素，显示元素，他分为两种情况，一种是‘块及元素’ ‘block’，还有一种是“行内元素”inline，大家也叫“内联元素”。

相关链接：https://blog.csdn.net/qq_36145914/article/details/87009453

Search

    Table of Contents