【前端中css基础——系列5】BFC与IFC；绝对定位与相对定位和固定位置

系列文章总结

【前端中css基础——系列1】盒模型与flex布局
【前端中css基础——系列2】css中浮动与垂直居中显示
【前端中css基础——系列3】css中模块化；css动画；css单位
【前端中css基础——系列4】css实现固定宽高比；css中伪元素
【前端中css基础——系列5】BFC与IFC；绝对定位与相对定位和固定位置
【前端中css基础——系列6】单行多行文本截断；实现三角形圆形

---

---

FC（格式化上下文）是指w3c规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及其他元素的关系和相互作用

一、BFC与IFC

1.1 BFC

BFC（块级格式化上下文）的话则是一个块级元素的渲染显示规则，可以理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，可以用来消除浮动overflow：hidden。

BFC布局规则：

1. 内部盒子会在垂直方向一个个放置
2. BFC时页面上一个隔离的独立容器
3. 属于同一个BFC的两个相邻Box的上下margin会发生重叠
4. 计算BFC的高度时，浮动元素也参与计算
5. 每个元素的左边与包含盒子的左边相接触
6. BFC的区域不会和float重叠

触发BFC条件

1. body根元素
2. 浮动元素：float不为none的属性值
3. 绝对定位元素
4. display为：inline-block、table-cells、flex
5. overflow里除了visible以外的值（hidden、auto、scroll）

1.2 IFC

IFC即为内联格式化上下文。

IFC布局规则：

• 子元素水平方向横向排列，垂直方向起点为元素顶部。
• 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向不会被计算，【padding、border、margin】
• 在垂直方向上，子元素不会以不同形式来对齐（vertical-align）

触发IFC条件

块级元素中仅包含内联级别元素。

---

二、绝对定位与相对定位和固定位置

	static（默认）	relative（相对）	absolute（绝对）	fixed（固定）
含义	默认定位	相对于自身进行定位	相对于浏览器或是父元素定位	固定一个位置进行定位
方法	没有定位	不设置便宜量时对元素没有任何影响，可以提升层级关系	无父元素时，以浏览器的左上角为基准；有父元素时，设置成’父相子绝‘	设置固定位置后，当前元素不会发生改变，可以做小广告

---

相对定位（relative）

相对于自身进行定位 不设置偏移量的时候 对元素没有任何影响，设置了偏移量，则基于自身初始的位置进行偏移可以提升层级关系

如下，初始三个盒子，设置第一个盒子相对定位，设置偏移，效果如下：

---

绝对定位（relative）

如果啥也不设置是这样的：

当我设置子元素为absolute后，子元素以浏览器为基准移动：

如果父元素设置了相对位置的话，子元素就是以父元素为基准移动：

---

固定定位（relative）

设置固定定位后：

---

z-index：

z-index属性设置元素的堆叠顺序（层级关系），拥有更高的堆叠顺序的元素总是处于堆叠顺序较低的元素前面（从父原则：从父元素，子级的永远大于父级的）。

---

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~