CSS2.1常规流(包含BFC,IFC)

常规流中的盒可能是块,可能是行内,块级盒参与块格式话上下文(BFC),行内级盒参与行内格式化上下文(IFC)

一、BFC(Block Formatting contexts)

BFC就是我们常说的块级格式化上下文。

  • 哪些元素会建立新的块级格式化上下文?
  1. 浮动元素
  2. 绝对定位元素
  3. 非块盒的块容器(display为inline-blocks、table-cells和table-captions)
  4. overflow不为 “ visible ” 的块盒
  • BFC有哪些特点?
  1. 在同一个块格式化上下文中,垂直方向上的块级盒上下margin会合并(collapse),见《深入研究外边距合并(collapse)》
  2. 一个块级格式化上下文中,每个盒的左外边界(指的margin外边界)挨着包含块的左外边界(指的border外边界)(从右向左的格式化则相反)。
    即使存在浮动也成立。除非该盒建立了新的块级格式化上下文。
  3. 匿名块盒(很重要
二、IFC(Inline Formatting contexts)

IFC是行内格式化上下文。
IFC的特点:

  1. 内部盒水平挨个放置,并且水平上的margin、padding、border都有效
  2. 内部盒的对齐方式有:底部或者顶部对齐,以这些盒子内部的文本基线进行对齐。
  3. 行框:包含来自同一行的盒的矩形区域。它总是能容纳下它包含的所有盒。
  4. 当行框中一个盒的高度小于它所在的行框的高度时,它的对齐方式由 “vertical-align” 属性决定。当行的内容超出容器的宽度时,他会被分隔成几个行框换行排列。行框垂直排列时总是紧挨着。
  5. 行内盒如果超出行框的宽度时,可以分成几个盒跨多个行框显示。但是行内盒不一定能被拆分(如果该行内盒只含单一字符,或者特定的语言单词分隔规则不允许在该行内盒里分隔,或者该行内盒受到一个值为nowrap或者pre的white-space的影响)

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Documenttitle>
		<style>
			.p {
				width: 10em;
				border: solid aqua;
			}
			span{
				float: left;
				width: 5em;
				height: 5em;
				border: solid blue;
			}
		style>
	head>
	<body>
		<p class="p">
			Supercalifragilisticexpialidocious
            <span>span>
		p>
	body>
html>

效果:
CSS2.1常规流(包含BFC,IFC)_第1张图片
这个例子中的英文字母所形成的行内盒因为英文的换行规则,所以不能换行,于是溢出了容器盒子
如果将上方的英文换成中文就会被分隔:
CSS2.1常规流(包含BFC,IFC)_第2张图片

  1. 当一个行内盒被分割后,外边距,边框和内边距在发生分割的地方(或者在任何分割处,如果有多处的话)没有视觉效果
三、相对定位(Relative Positioning)

当一个盒根据常规流或者浮动摆放好后,它可能会相对于该位置移动,称之为相对定位。

  • 相对定位的特点
  1. 相对定位只是在相对于原位置进行偏移,但任然占据原位置。
  2. 如果相对定位导致具有 “ overflow:auto | scroll ” 的盒溢出的话,UA(UserAgency)必须让用户访问到这部分内容

你可能感兴趣的:(css)