CSS 中的函数

在前面我们有使用过很多个CSS函数，比如rgb/rgba/translate/rotate/scale等，CSS 函数通常可以帮助我们更加灵活的来编写样式的值；

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

var: 使用CSS 定义的变量;
calc: 计算CSS值, 通常用于计算元素的大小或位置;
blur: 毛玻璃(高斯模糊)效果;
gradient：颜色渐变函数；

var

css 变量

css 变量其实是 css 的自定义属性，只是使用时表现的和变量一样，所以通俗的称为变量。

变量以两个减号--开头，属性值则可以是任何有效的CSS值。
var 函数
var 函数可以读取自定义属性的属性值。

自定义属性只能在后代元素中使用，所以一般将它定义在根标签中。
根标签有两种写法：

标签：html {}
伪元素：:root {}

实践中，为了方便更改主要颜色，颜色的值就可以用变量：

:root {
  --main-color: red;
}
div {
  color: var(--main-color);
}

calc

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

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

注意：+ 和- 运算符的两边必须要有空白字符。

通常用来设置一些元素的尺寸或者位置。calc 中的百分比，就是属性中的百分比。

div {
  width: calc(100% - 50px); /* 这个 100% 就是 width 的 100%，也就是包含块的宽度 */
}

blur

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

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

函数是设置属性值的，blur 函数的值一般是作为这两个属性的属性值：

filter: 将模糊或颜色偏移等图形效果应用于元素及其后代。
backdrop-filter: 使透过该层的底部元素模糊化，所以这玩意特别契合蒙板的使用，比如毛玻璃效果。

什么是高斯模糊？简单点说，高斯模糊常常用来模拟人眼中的物体变远、变快的效果。在照片处理中，我们常常将背景施以高斯模糊，使得背景仿佛变远了，从而突出前景的人物或物体。一些所谓“先拍照，后对焦”的技术利用的也是高斯模糊这个效果。若想弄出视点飞快移动的效果，也可以对背景使用高斯模糊。

蒙板

做过 PPT 就知道，蒙板就是一个图层蒙在内容图层上面，形成遮罩，突出高级感。
蒙板肯定是有颜色的，要不然蒙个透明的在上面，那不是蒙了寂寞，颜色一般为黑色；并且蒙板一定要半透明，不透明把底下内容盖住了，那也是蒙了个寂寞。

实现蒙板的关键要点：脱标。蒙板也是一个元素，元素要叠在另一个元素上面，这明显要脱标。这就要用到定位，子绝父相。
另外蒙板大小可以调整，如果蒙板要将底下元素刚好全盖住，也就是蒙板宽高要自动撑满为底下元素的宽高。那刚好可以利用绝对定位元素撑满父元素的宽高的特点。

5. 定位 position

需要注意个细节：
绝对定位元素将外界设为 0，撑满的是父元素的宽高，如果想要覆盖的是兄弟元素。那就要让兄弟元素的宽高就是父元素的宽高，也就是要让兄弟元素撑起父元素。高度没问题，本来就是子元素撑起父元素。但是宽度不一样，假如父元素是块级元素，块级元素直接占满一整行，哪里管你子元素撑不撑。所以为了让父元素的宽度也是子元素撑起来的，就要让父元素变成行内非替换元素。这样子元素的大小就是父元素的大小，后面的兄弟元素蒙板就能刚好覆盖子元素了。

<div class="box">
  <div class="content"></div>
  <div class="mask"></div>
</div>
<style>
  .box {
    position: relative;
    display: inline-block; // 行内非替换元素
  }
  .content {
    width: 500px;
    height: 400px;
  }
  /* 蒙版 */
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.2);
  }
</style>

毛玻璃效果

毛玻璃效果就是将蒙板底下的区域进行高斯模糊。

我们不一般不直接使用 filter 属性，因为它直接将内容模糊并不美观。一般是盖一层蒙板，然后将蒙板底下的区域进行高斯模糊，形成毛玻璃的效果，这样更美观。

其中backdrop-filter属性就是使透过该层的底部元素模糊化，只要被这层盖住，底部就会模糊化，这就非常契合蒙板实现毛玻璃效果。
但是目前兼容性没有 filter 好。

<div class="box">
  <div class="content">
    <img src="" alt="图片">
  </div>
  <div class="mask"></div>
</div>
<style>
  .box {
    position: relative;
    display: inline-block; // 行内非替换元素
  }
  .content {
    width: 500px;
    height: 400px;
  }
  /* 蒙版 */
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
  }
</style>

点击查看【codepen】

gradient

CSS的 CSS 中的函数、BFC、浏览器前缀 - 图1 数据类型描述的是2D图形；比如 background-image、list-style-image、border-image、content等；
是 CSS 中的函数、BFC、浏览器前缀 - 图2 CSS 数据类型的子类型，主要用于表现两种或多种颜色的过渡转变。

CSS 中的函数、BFC、浏览器前缀 - 图3 常见的方式是通过url来引入一个图片资源；它也可以通过CSS的函数来设置颜色的渐变。看起来是在设置颜色的渐变，其实是在设置一张图片。渐变会生成一张图片。

常见的函数实现有下面几种：

linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片；
radial-gradient()：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；
repeating-linear-gradient()：创建一个由重复线性渐变组成的；
repeating-radial-gradient()：创建一个重复的原点触发渐变组成的；
等等

线性渐变 linear-gradient( )

线性渐变是我们用的最多的渐变。
默认渐变的方向是从上到下。
我们可以设置渐变的方向还可以设置两个以上的颜色进行渐变，并控制每个颜色渐变的距离。

中心散射渐变 radial-gradient()

浏览器前缀

其实就是浏览器对属性支持的一个过度性方案。比如 IE 没正式支持 flex，但 IE 提供了对 flex 的过渡性支持，那在 IE 中使用 flex 就需要添加 IE 的前缀。

FC – Formatting Context

FC 是什么？

FC 为格式化上下文，这个翻译很生硬。我们可以理解为执行环境，执行环境决定了你能有什么行为，比如社会环境禁止烧杀抢掠，允许你学习读书。

FC 就是 HTML 元素的执行环境。它规定了元素的各种行为，比如块级元素独占一行，元素默认从左往右排布等等。

FC 可以分成两类，Block Formatting Context（BFC）和 Inline Formatting Context（IFC）。也就是块元素执行环境，行元素执行环境。

FC 环境来自哪里？

元素会生成对应的 FC 执行环境。比如 html 标签就会生成一个 BFC。而我们网页所有的内容都在 html 标签中，也就是所有的元素其实都是在 BFC 执行环境中运行，这其实就是标准流。
为什么块级元素从上往下挨着排布？为什么块级元素占满一行？这些都是 BFC 执行环境的规定。

这里你可能产生一个疑问，整个文档都在 BFC 中执行，那岂不是行内级元素的行为也是被 BFC 所控制，那为什么行内级元素没有和块级元素一样占满一整行，说好的 IFC 控制行内级元素的行为，IFC 又在哪里？
答案就是 IFC 在块级元素包裹行内级元素时形成，比如 div 包裹了 span，那 div 之间就形成了 IFC，开始控制行内级元素 span 的行为，控制它不让它占满一整行等等。

除了 html 标签创造了一个 BFC 环境，还有很多其他的地方也会创建 BFC。
比如 overflow 属性值不为 visible 的元素以及浮动和绝对定位。
这也解释了为什么浮动或绝对定位元素之间，它们的排布也是从左往右，元素和元素挨在一起。因为里面形成了 BFC 执行环境。

BFC 执行环境规定了什么行为？

知道 BFC 规定的行为，能有什么作用？
通过 BFC 的行为我们知道了有些问题是怎么来的，比如 margin 折叠和浮动高度塌陷。知其所以然，才能找到解决问题的办法。

BFC的作用一：解决折叠问题

官方文档： The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

为什么会折叠？因为 BFC 规定，在同一个BFC中，相邻两个box之间的margin会折叠（collapse）

那就让折叠的盒子处于不同 BFC 中，不就是不会折叠了吗？
我们可以让其中一个盒子被包裹一层，然后这层盒子里添加 overflow 属性形成 BFC。

overflow 的值为 auto，因为 auto 在其他方面影响小。

点击查看【codepen】

BFC的作用二：解决浮动高度塌陷

问题回顾：
浮动高度塌陷：父元素包裹子元素，当子元素全部浮动后，父元素拿不到子元素的高度了，就坍缩为一条线。
为了解决这个问题，以前我们是添加一个看不到子元素来把父元素高度撑起来，比如伪元素。

BFC 解决高度坍缩：

父元素高度必须是 auto
给父元素添加**overflow: auto;**形成 BFC。
为什么 BFC 能解决浮动的高度坍缩而不能解决绝对定位元素的坍缩问题？

10.6.7 BFC 下的“auto”高度 在某些情况下(例如见上文第10.6.4节和第10.6.6节)，建立在块级上下文中的元素的高度计算如下：如果它的子元素全是行内级元素，则高度是最顶线框的顶部与最底层线框的底部之间的距离。（也就是行高）如果它有块级子元素，则高度是顶层块级子元素边框的上边缘与最底层块级子元素边框的底部边缘之间的距离。 绝对定位的子元素会被忽略，并且相对定位的盒子被认为没有他们的偏移。注意，子元素可能是匿名块级元素。此外，如果父元素有任何浮动子元素，并且父元素底部边缘低于浮动子元素的底部边缘，则父元素高度将增加以包裹这些浮动子元素。只有在这个父元素 BFC 中的浮动子元素才会被计算在内，例如，绝对定位中的浮动子元素，这些浮动子元素是在绝对定位的 BFC 中，所以他们就不会被计算到父元素的高度中。

文档很好的解释了为什么 BFC 能解决父元素高度坍缩和为什么 BFC 无法解决绝对定位导致的父元素高度坍缩的问题。
核心在于 auto 高度和下，BFC 高度的计算方式：

高度计算父元素要包裹浮动元素，所以高度就回来了。
而绝对定位元素计算高度直接忽略。

CSS 中的函数、BFC、浏览器前缀