系列文章总结
【前端中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布局规则:
- 内部盒子会在垂直方向一个个放置
- BFC时页面上一个隔离的独立容器
- 属于同一个BFC的两个相邻Box的上下margin会发生重叠
- 计算BFC的高度时,浮动元素也参与计算
- 每个元素的左边与包含盒子的左边相接触
- BFC的区域不会和float重叠
触发BFC条件
- body根元素
- 浮动元素:float不为none的属性值
- 绝对定位元素
- display为:inline-block、table-cells、flex
- 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属性设置元素的堆叠顺序(层级关系),拥有更高的堆叠顺序的元素总是处于堆叠顺序较低的元素前面(从父原则:从父元素,子级的永远大于父级的)。
码字不易~, 各位看官要是看爽了,可不可以三连走一波,点赞皆有好运!,不点赞也有哈哈哈~~~