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

ゝ一世哀愁。 2023-09-28 17:05 10阅读 0赞

#### 文章目录 ####

*   *  CSS中的函数
     *   *  CSS函数-var
         *  CSS函数 -calc
         *  CSS函数 - blur
         *  CSS函数 – gradient
     *  BFC介绍
     *   *  BFC介绍
         *  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);

![在这里插入图片描述][14601eb794bd4774ab63ca38edb569b1.png_pic_center]

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

![在这里插入图片描述][0395fd2682024641a2768201bd9cfab3.png_pic_center]

### BFC介绍 ###

#### BFC介绍 ####

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

**什么是FC呢**？

> **FC的全称是Formatting Context(格式化上下文)，任何元素在标准流里面都是属于一个FC的**；
> 
> 下面我们看看官方文档的解释:

![在这里插入图片描述][00ed0c34e9f747109139825079af2351.png_pic_center]

> 大致意思是说: 任何元素在标准流里面都是属于一个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作用的描述**：

![在这里插入图片描述][e3ef12fd8ee84867bdc474c2e1578516.png_pic_center]

**简单概况如下**：

> 在BFC中， box会在垂直方向上一个挨着一个的排布；
> 
> 垂直方向的间距由margin属性决定；
> 
> 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
> 
> 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

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

> 解决margin的折叠问题；
> 
> 解决浮动高度塌陷问题；

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

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

> 官方文档明确的有说, 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
> 
> 那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。

![在这里插入图片描述][cc5a5ec018cf4adba0b1c14de4a9d772.png_pic_center]

> 例如有如下两个盒子, 我们给box1设置下外边距30px, box2设置上外边距50px, 因为box1和box2是在同一个BFC中, 因此相邻盒子的外边距会合并, 合并为50px
> 
> 解决方法, 我们可以给其中一个盒子包裹一层div, 让这个div形成一个新的BFC, 这样就不会出现外边距折叠问题

.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的情况下，官方文档有说明是如下方法计算高度的**

![在这里插入图片描述][9b832df1955d416896c269cdb208176f.png_pic_center]

> 大致意思是说
> 
> 1.如果只有inline-level，是行高的顶部和底部的距离；
> 
> 2.如果有block-level，是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离
> 
> 3.如果有绝对定位元素，将被忽略；
> 
> 4.如果有浮动元素，那么会增加高度以包括这些浮动元 素的下边缘

**演示代码如下**

.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;
    }

[14601eb794bd4774ab63ca38edb569b1.png_pic_center]: https://img-blog.csdnimg.cn/14601eb794bd4774ab63ca38edb569b1.png#pic_center
[0395fd2682024641a2768201bd9cfab3.png_pic_center]: https://img-blog.csdnimg.cn/0395fd2682024641a2768201bd9cfab3.png#pic_center
[00ed0c34e9f747109139825079af2351.png_pic_center]: https://img-blog.csdnimg.cn/00ed0c34e9f747109139825079af2351.png#pic_center
[e3ef12fd8ee84867bdc474c2e1578516.png_pic_center]: https://img-blog.csdnimg.cn/e3ef12fd8ee84867bdc474c2e1578516.png#pic_center
[cc5a5ec018cf4adba0b1c14de4a9d772.png_pic_center]: https://img-blog.csdnimg.cn/cc5a5ec018cf4adba0b1c14de4a9d772.png#pic_center
[9b832df1955d416896c269cdb208176f.png_pic_center]: https://img-blog.csdnimg.cn/9b832df1955d416896c269cdb208176f.png#pic_center