CSS函数-BFC介绍-原理详解

文章目录

CSS中的函数

在前面我们有使用过很多个CSS函数:

比如rgb/rgba/translate/rotate/scale等;

CSS函数通常可以帮助我们更加灵活的来编写样式的值；

下面我们再学习几个非常好用的CSS函数:

var: 使用CSS定义的变量;

calc: 计算CSS值, 通常用于计算元素的大小或位置;

blur: 毛玻璃(高斯模糊)效果;

gradient：颜色渐变函数；

CSS函数-var

CSS中可以自定义属性

属性名需要以两个减号（–）开始: --变量名: 变量值;

定义的变量只有后代元素可以使用, 属性值可以是任何有效的CSS值;

:root {
  /* 定义了一个变量(存放CSS属性) */
  --main-color: #f00;
}

.box {
  /* 后代元素通过var引用定义的变量 */
  color: var(--main-color);
}

.title {
  color: var(--main-color);
}

规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)

所以推荐将自定义属性定义在html中，也可以使用 :root 选择器;

CSS函数 -calc

calc() 函数允许在声明 CSS 属性值时执行一些计算。

计算支持加减乘除的运算；

+ 和 – 运算符的两边必须要有空白字符。

通常用来设置一些元素的尺寸或者位置；

.item1 {
  /* width的百分比相对于包含块(父元素) */
  width: calc(100% - 100px);
  background-color: #f00;
}

CSS函数 – blur

blur() 函数将高斯模糊应用于输出图片或者元素;

blur(radius)

radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;

通常会和两个属性一起使用：

filter: 将模糊或颜色偏移等图形效果应用于元素;

backdrop-filter: 为元素后面的区域添加模糊或者其他效果;

img {
  filter: blur(5px);
}

CSS函数 – gradient

是一种 <image> CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。

CSS的<image>数据类型描述的是2D图形；

比如background-image、 list-style-image、 border-image、 content等；

<image>常见的方式是通过url来引入一个图片资源；

它也可以通过CSS的函数来设置颜色的渐变；

常见的函数实现有下面几种, 我们主要学习线性渐变和原点渐变：

linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片；

radial-gradient()：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；

repeating-linear-gradient()：创建一个由重复线性渐变组成的 < image>；

repeating-radial-gradient()：创建一个重复的原点触发渐变组成的 < image>；

等等；

linear-gradient：创建一个表示两种或多种颜色线性渐变的图片；

线性渐变, 默认渐变方向从上往下

background-image: linear-gradient(red, blue);

可以自定义渐变方向

/* 设置为从左到右 */
background-image: linear-gradient(to right, red, blue);
/* 从左下角到右上角 */
background-image: linear-gradient(to right top, red, blue);
/* 可以写角度定义渐变方向 */
background-image: linear-gradient(-45deg, red, blue);
/* 可以指定多种颜色和渐变的距离 */
background-image: linear-gradient(to right, red, blue 40px, orange 60%, purple 100%);

radial-gradient：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；

/* 从默认原点向四周渐变 */
background-image: radial-gradient(bule, red);

/* 自定义原点, 从原点向四周渐变 */
background-image: radial-gradient(at 0% 50%, red, yellow);

BFC介绍

讲解BFC之前, 我们先认识一下FC

什么是FC呢？

FC的全称是Formatting Context(格式化上下文)，任何元素在标准流里面都是属于一个FC的；

下面我们看看官方文档的解释:

大致意思是说: 任何元素在标准流里面都是属于一个FC的, 可能是一个块级, 可能是一个行内, 但是不会同时属于这两个。块级元素的盒子都是属于BFC, 行内元素的盒子都是属于IFC。

块级元素的布局属于Block Formatting Context（BFC）

也就是block level box都是在BFC中布局的；

行内级元素的布局属于Inline Formatting Context（IFC）

而inline level box都是在IFC中布局的；

MDN上有整理出在哪些具体的情况下会形成BFC：

根元素（ < html >）会形成BFC

浮动元素（元素的 float 不是 none）会形成BFC

绝对定位元素（元素的 position 为 absolute 或 fixed）会形成BFC

行内块元素（元素的 display 为 inline-block）会形成BFC

表格单元格（元素的 display 为 table-cell， HTM L表格单元格默认为该值），表格标题（元素的 display 为 table-caption， HTM L表格标题默认为该值）会形成BFC

匿名表格单元格元素（元素的 display 为 table、 table-row、 table-row-group、 table-header-group、 table-footer-group（分别是HTML table、 row、 tbody、 thead、 tfoot 的默认属性）或 inline-table）会形成BFC

overflow 计算值(Computed)不为 visible 的块元素, 会形成BFC

弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）会形成BFC

网格元素（display 为 grid 或 inline-grid 元素的直接子元素）会形成BFC

display 值为 flow-root 的元素, 会形成BFC

BFC作用

我们来看一下官方文档对BFC作用的描述：

简单概况如下：

在BFC中， box会在垂直方向上一个挨着一个的排布；

垂直方向的间距由margin属性决定；

在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；

在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

那么这个东西有什么用呢？

解决margin的折叠问题；

解决浮动高度塌陷问题；

作用一：解决折叠问题（权威）

在同一个BFC中，相邻两个box之间的margin会折叠（collapse）

官方文档明确的有说, 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；

那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。

例如有如下两个盒子, 我们给box1设置下外边距30px, box2设置上外边距50px, 因为box1和box2是在同一个BFC中, 因此相邻盒子的外边距会合并, 合并为50px

解决方法, 我们可以给其中一个盒子包裹一层div, 让这个div形成一个新的BFC, 这样就不会出现外边距折叠问题

<div class="container">
  <div class="box1"></div>
</div>
<div class="box2"></div>

.container {
  overflow: auto;
}

.box1 {
  height: 200px;
  width: 400px;
  background-color: orange;

  margin-bottom: 30px;
}

.box2 {
  height: 150px;
  background-color: purple;

  margin-top: 50px;
}

作用二：解决浮动高度塌陷（权威）

网上有很多说法， BFC可以解决浮动高度塌陷，可以实现清除浮动的效果。

但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明；

他们也压根没有办法解释，为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢？

事实上， BFC解决高度塌陷需要满足两个条件：

浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）；

浮动元素的父元素的高度是auto的；

BFC的高度是auto的情况下，官方文档有说明是如下方法计算高度的

大致意思是说

1.如果只有inline-level，是行高的顶部和底部的距离；

2.如果有block-level，是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离

3.如果有绝对定位元素，将被忽略；

4.如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

演示代码如下

<div class="container clear_fix">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  background-color: orange;
  position: relative;

	 /* 形成一个新的BFC, 新的BFC的高度会包含浮动元素 */
  overflow: auto;
}

.item {
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  border: 1px solid #000;
  float: left;
  background-color: #f00;
}