bfc|css常见函数

一、H5新增元素

1、HTML5新增了语义化的元素：

1.1、在HMTL5之前，我们的网站分布层级通常包括哪些部分呢？

header、nav、main、footer、section、aside、article内容文章

1.2、但是这样做有一个弊端：

• 我们往往过多的使用div, 通过id或class来区分元素；
• 对于浏览器来说这些元素不够语义化；
• 对于搜索引擎来说, 不利于SEO的优化；

1.3H5新增语义化元素(6)

<header>：头部元素 <nav>：导航元素 <section>：定义文档某个区域的元素 <article>：内容元素 <aside>：侧边栏元素 <footer>：尾部元素

2、H5新增其他元素

Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易.

• 在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题;
• 比如无法很好的支持HTML/CSS特性, 兼容性问题等等;

Video和Audio使用方式有两个：

• 一方面我们可以直接通过元素使用video和autio；
• 另一方面我们可以通过JavaScript的API对其进行控制；

2.1、video

HTML<video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

video常见属性（7个）布尔4个，其他4个

常见属性	值的方式	属性作用
src	url资源地址	视频播放的url地址
width/height	pixels（像素）	设置video的宽/高
poster	url地址	海报一帧的URL
preload	none/metadata/auto	是否需要预加载视频.metadata表示预加载元数据（比如视频时长等）- 一般浏览器会选择auto默认
controls	boolean	是否显示控制栏、音量、跨帧、暂停/播放
autoplay	boolean	是否自动播放视频(某些浏览器 需要添加muted，例如chrome)
muted	boolean	是否静音播放
loop	boolean	循环播放

video支持的视频格式

HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式，但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持。不是所有的浏览器都支持MP3 OGG之类的，每个浏览器因为版权的问题支持的格式都是不一样的。

video的兼容性写法

在 <video> 元素中间的内容，是针对浏览器不支持此元素时候的降级处理。

• 内容一：通过 <source> 元素指定更多视频格式的源
• 内容二：通过p/div等元素指定在浏览器不支持 video 元素的情况, 显示的内容;

  <video src="./assets/fcrs.mp4" width="600" controls muted>
    <source src="./asset/fcrs.ogg">
    <source src="./asset/fcrs.webm">
    <p>当前您的浏览不支持视频的播放, 请更换更好用的浏览器!</p>
  </video>

2.1、audio

HTML <audio> 元素用于在文档中嵌入音频内容, 和video的用法非常类似

<audio src="./assets/yhbk.mp3" controls autoplay muted></audio>

audio常见属性

常见属性	值的方式	属性作用
src	URL地址	音频播放的URL地址
controls	Boolean类型	是否显示控制栏,包括音量，进度，暂停/恢复播放。
autoplay	Boolean类型	是否视频自动播放(某些浏览器需要添加muted, 比如Chrome)
muted	Boolean类型	是否静音播放
preload	one/metadata/auto	是否需要预加载视频. metadata表示预加载元数据(比如视频时长等)

audio支持的音频格式

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs

音频格式	Chrome	Firefox	IE9	Opera	Safari
OGG	支持	支持	支持	不支持	不支持
MP3	支持	不支持	支持	不支持	支持
WAV	不支持	支持	不支持	支持	不支持

audio兼容性写法同video

二、CSS中的函数

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

• 比如rgb/rgba/translate/rotate/scale等;
• CSS函数通常可以帮助我们更加灵活的来编写样式的值；
• 补充CSS函数:
  • var: 使用CSS定义的变量;
  • calc: 计算CSS值, 通常用于计算元素的大小或位置;
  • blur: 毛玻璃(高斯模糊)效果;
  • gradient：颜色渐变函数；
  • brightness：亮度

1. var函数使用自定义属性

• 属性名需要以两个减号（—）开始;

• 属性值则可以是任何有效的CSS值

  • 定义属性

      :root {
        /* 定义了一个变量(CSS属性) */
        /* 只有后代元素可以使用 */
        --main-color: #f00;
      }

  • 通过var函数来使用使用属性

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

2. calc函数允许在声明 CSS 属性值时执行一些计算

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

calc使用注意事项：

1. + 和 - 运算符的两边必须要有空白字符。
2. 当 calc() 被用于控制文本/元素的长度时，确保值中包含一个相对长度单位
3. 加减，两边都需要有单位，否则失效
4. 乘除，只要一边有单位，都存在单位失效
5. 可以嵌套变量 var（—i）

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

    .item1 {
      /* width的百分比相对于包含块(父元素)
        注意：这里的运算符两端要留有空格的
        */
      width: calc(100% - 100px);
      height: calc( var(--i) * 20px );
      background-color: #f00;
    }

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

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

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

• filter: 将模糊或颜色偏移等图形效果应用于元素 模糊度不会被cover全部覆盖;

 .box {
      display: inline-block;
      position: relative;
      filter: blur(5px);
    }
 .cover{
      background-color: rgba(255,255,255,0.2);
  }
<div class="box">
  <img class="img1" src="../../images/kobe01.jpg" alt="">
  <div class="cover"></div>
</div>

• backdrop-filter: 为元素后面的区域添加模糊或者其他效果，这个效果更好一点
• backdrop-filter：会根据透明度，来适配模糊度的
• 模糊度不会溢出覆盖层

.cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
}
<div class="box">
  <img class="img1" src="../../images/kobe01.jpg" alt="">
  <div class="cover"></div>
</div>

4. gradient梯度渐变

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

• CSS的<image>数据类型描述的是2D图形；
  • 所以这里要设置的是图片属性例
  • 比如background-image、list-style-image、border-image、content等；
• <image>常见的方式是通过url来引入一个图片资源；
• 它也可以通过CSS的<gradient> 函数来设置颜色的渐变；

4.1 gradient常见属性

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

4.2 linear-gradient的使用

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

• 参数(可变参数），to [方向，或者deg]，[颜色百分比]

  .box{
       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%
       );
  }

  不多做阐述，参数忘记的话查看下mdn




##### 重点使用技巧

- “先透明`transparent`”  和后放  “透明`transparent`”，是有区别的
- 如果将 `rgba` 放在前面，覆盖度是`100%`，这样全都是 `#000` 了
- `transparent`， 在前的话会有透明到 `#000`

~~~css
 background: linear-gradient(to left,  transparent 0%, rgba(0, 0, 0, .25) 100%);
~~~







#### radial-gradient 径向渐变的使用：



> 创建了一个图像，该图像是由从  **原点 **(默认在中新的位置) 向四周的两种或者多种颜色之间的逐步过渡组成；



- `linear-gradient` 用的是`to` `radial-gradient`用的是`at`(在...位置)

​```css
background-image: radial-gradient(at 0% 50%, red, blue);

使用的时候看下文档

brightness() 亮度

元素高亮结合 filter：brightness() 使用1是自身亮度

三、浏览器前缀

浏览器前缀，官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）

• CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字，会给新的属性添加了浏览器前缀；

  之后有所改动的时候 浏览器可以获取带有前缀的元素进行统一的操作

• 添加浏览器前缀主要是适用低版本的浏览器

常见的私有化前缀

• -o-、-xv-：Opera等

• -ms-、mso-：IE等

• -moz-：Firefox等

• -webkit-：Safari、Chrome等

注意：不需要手动添加，后面学习了模块化打包工具会自动添加浏览器前缀

四、FC – Formatting Context

FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的；

• 块级元素的布局属于Block Formatting Context（BFC）
  • 也就是block level box都是在BFC中布局的；
• 行内级元素的布局属于Inline Formatting Context（IFC）
  • 而inline level box都是在IFC中布局的；
  • 可以理解为行盒

1.什么是bfc

块级格式化上下文：可以理解为块级元素格式化的环境范围

BFC是指浏览器中创建了一个独立的渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。

• 给父级元素设置bfc的时候，父元素是一个bfc独立渲染区域

2.会创建bfc的css属性

• 根元素（<html>）
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）和标准流不在统一的布局里，
  • (个人问题)所以margin不存在折叠的问题，应该不管bfc的事情
  • 绝对定位元素和普通元素不存在折叠
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
• overflow 计算值(Computed)不为 visible 的块元素
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
• display 值为 flow-root 的元素(这个很少有人在用了)

3.BFC的作用

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

3.1 bgc解决高度塌陷

个人理解：在标准流下排布下，元素进行浮动脱离标准流在html的bgc里浮动

这个时候给外层包裹一个bgc，让其元素在外层的bgc里浮动

• 官方理解：BFC解决高度塌陷需要满足两个条件：

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

• BFC的高度是auto的情况下，是如下方法计算高度的

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

3.2 解决margin的折叠问题

同样讲子元素放在自己bfc里面这样就不会接触到，包含块就不会折叠

父元素创建bfc

3.3 bfc不能解决绝对定位元素的高度塌陷问题

官方文档写的是：如果有绝对定位元素，将被忽略；

五、媒体查询Media

• 媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。
• 你可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改你的页面。

• 媒体查询的使用方式主要有三种： 方式一：通过 @media 和 @import 使用不同的CSS规则（常用）；

  @import url(./css/body_bgc.css) (max-width: 800px);

  方式二：使用media属性为<style>, <link>, <source>和其他HTML元素指定特定的媒体类型；

  <link rel="stylesheet" media="screen and (max-width: 800px)" href="./css/body_bgc.css">

  方式三：使用 Window.matchMedia() 和 MediaQueryList.addListener() 方法来测试和监控媒体状态；

• 比较常用的是通过@media来使用不同的CSS规则，目前掌握这个即可；

      @media screen and (min-width:1200px) {
        body{
          background-color: #990055;
        }
       }

1.媒体类型（Media types）

• 在使用媒体查询时，你必须指定要使用的媒体类型
  • 媒体类型是可选的，并且会（隐式地）应用 all 类型。
• 常见的媒体类型值如下：
  • all：适用于所有设备。
  • print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。
  • screen（掌握）：主要用于屏幕。
  • speech：主要用于语音合成器。
• 被废弃的媒体类型：
  • CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)；
  • 但是他们在Media Queries 4 中已经被废弃，并且不应该被使用；
  • aural类型被替换为具有相似效果的speech。

2.媒体特性（Media features）

媒体特性（Media features）描述了 浏览器、输出设备，或是预览环境的具体特征；

• 通常会将媒体特性描述为一个表达式；
• 每条媒体特性表达式都必须用括号括起来；

特征	价值	最小/最大	描述
width/height, min/max-width/height	长度	是的	渲染表面的宽度/高度
高度高度	整数	是的	每个颜色分量的位数
设备比例device-aspect-ratio	整数/整数	是的	长宽比
设备高度device-width	长度	是的	输出设备的高度
设备宽度device-height	长度	是的	输出设备的宽度
方向orientation	“portrait”或“landscape”	不	屏幕方向
分辨率resolution	分辨率（“ dpi”，“ dpcm”或“ dppx”）	是的	解析度

• 使用例子：

      @media (max-width: 800px) {
        body {
          background-color: orange;
        }
      }

3.媒体查询的逻辑操作符（logical operators）

• 媒体查询的表达式最终会获得一个Boolean值，也就是真（true）或者假（false）。

  • 如果结果为真（true），那么就会生效；
  • 如果结果为假（false），那么就不会生效；

• 如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询：

  • and：and 操作符用于将多个媒体查询规则组合成单条媒体查询
  • not：not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。
  • only：only运算符仅在整个查询匹配时才用于应用样式。
  • , (逗号)：逗号用于将多个媒体查询合并为一个规则。

• 例子：适配常见的移动端的设备

 /* @media (min-width: 320px) and (max-width: 375px) {
      .box { font-size: 15px; }
    }
    @media (min-width: 375px) and (max-width: 414px) {
      .box { font-size: 18px; }
    }
    @media (min-width: 414px) and (max-width: 480px) {
      .box { font-size: 21px; }
    }
    @media (min-width: 480px) {
      .box { font-size: 24px; }
    } */

    /* CSS层叠性 效果和上面的相同*/
    @media (min-width: 320px) {
      .box { font-size: 15px; }
    }
    @media (min-width: 375px) {
      .box { font-size: 18px; }
    }
    @media (min-width: 414px) {
      .box { font-size: 21px; }
    }
    @media (min-width: 480px) {
      .box { font-size: 24px; }
    }

4、媒体查询的max/min-width

媒体的范围特征

许多媒体特征是范围特征，这意味着它们可以以“min-”或“max-”为前缀来表示“最小条件”或“最大条件”约束。例如，仅当浏览器的视口宽度等于或小于 12450 像素时，此 CSS 才会应用样式：

@media (max-width: 12450px) { ... }

mdn文档

• 在媒体查询中设置max-width，会在小于max-width的时候生效，而不是大于max-width时生效
• 在媒体查询中设置min-width，会在大于min-width的时候生效，而不是小于max-width时生效

注意：不要和元素的最大/最小宽度搞混