01-HTML+CSS/21-HTML5新增内容-CSS函数-BFC-媒体查询

HTML5新增内容-CSS函数-BFC-媒体查询

HTML5语义化元素

HTML5之前

div
span
p
h1 ~ h6
a

未使用的弊端

过多的使用div，通过id或者class区分元素
对于浏览器来说这些元素不够语义化
对于搜索引擎来说，不利于seo优化

HTML5新增的语义化元素

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <div class="header"></div> -->
    <header></header>
    <!-- <div class="nav"></div> -->
    <nav></nav>
    <section>
      <article>1</article>
      <article>2</article>
      <article>3</article>
    </section>
    <footer></footer>
  </body>
</html>

HTML5新增媒体元素

Web早期

Web端事实上一直希望可以更好的嵌入音频和视频，特别是21世纪以来，用户带宽的不断提高，浏览器因为和视频变得非常容易
- 在HTML5之前是通过flash或者其他插件实现的，但是会有很多的问题
- 比如无法很好的支持html/css特性，兼容性问题

HTML5增加了对媒体类型的支持

音频
- audio
视频
- video

Video和Audio使用方式有两个

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

Video

行内可替换元素

video常见的属性.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video src="./media/fcrs.mp4" width="600" controls autoplay muted></video>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video
      src="./media/fcrs.mp4"
      width="600"
      controls
      poster="./images/a5a7f75012a2a5d95c779db4edd20872.jpeg"
      muted
    ></video>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video
      src="./media/fcrs.mp4"
      width="600"
      controls
      poster="./images/a5a7f75012a2a5d95c779db4edd20872.jpeg"
      muted
    ></video>
    <!-- 兼容性写法 -->
    <video src="./media/fcrs.mp4">
      <source src="./media/fcrs.ogg" />
      <source src="./media/fcrs.webm" />
    </video>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video
      src="./media/fcrs.mp4"
      width="600"
      controls
      poster="./images/a5a7f75012a2a5d95c779db4edd20872.jpeg"
      muted
    ></video>
    <!-- 兼容性写法 -->
    <video src="./media/fcrs.mp4">
      <source src="./media/fcrs.ogg" />
      <source src="./media/fcrs.webm" />
      <p>当前您的浏览器不支持视频的播放，请更换更好用的浏览器</p>
    </video>
  </body>
</html>

audio

行内可替换元素

audio常见的属性.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <audio src="./media/yhbk.mp3" controls autoplay muted></audio>
  </body>
</html>

input

placeholder 输入框的占位文字
multiple 多个值
autofocus 最多输入的内容

type

date
time
number
tel
color
email

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="占位文本" />
    <select name="" id="" multiple>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橘子</option>
    </select>
    <input type="text" autofocus />
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 表单的属性 -->
    <input type="text" placeholder="占位文本" />
    <select name="" id="" multiple>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橘子</option>
    </select>
    <input type="text" autofocus />
    <!-- 表单type -->
    <input type="color" name="" id="" />
    <input type="time" name="" id="" />
    <input type="date" name="" id="" />
    <input type="range" name="" id="" min="0" max="1000" />
  </body>
</html>

data-*

用于自定义数据属性
通常用于html和JavaScript数据之间的传递

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box" data-name="why" data-age="18" data-height="1.88"></div>
    <h1 class="title"></h1>
    <script>
      const boxEl = document.querySelector(".box");
      console.log(boxEl.dataset);
    </script>
  </body>
</html>

white-space

white-space.png

用于设置空白处理和换行规则
- white-wrap
  - 合并所有连续的空白，允许单词超屛时自动换行
- nowrap
  - 合并所有连续的空白，不允许单词超屏时自动换行
- pre
  - 阻止合并所有连续的空白，不允许单词超屛时自动换行
- pre-wrap
  - 阻止合并所有连续的空白，允许单词超屛时自动换行
- pre-line
  - 合并所有连续的空白(但保留换行)，允许单词超屛时自动换行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        background: orange;
        /* white-space属性 */
        /* white-space: normal; */
        /* white-space: nowrap; */
        /* white-space: pre; */
        /* white-space: pre-wrap; */
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是coderwhy          kobe   hy_why_coderwhy
      哈哈哈哈      呵呵呵呵和 my name is why
    </div>
  </body>
</html>

text-overflow

用来设置文字溢出时的行为
- 前提
  - text-overflow生效的前提是overflow不为visible
- clip
  - 溢出的内容直接裁减掉(字符可能会显示不完整)
- elipsis
  - 溢出那行的结尾处用省略号表示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        overflow: hidden;
        white-space: nowrap;
        width: 150px;
        background-color: #f00;
        /* text-overflow: clip; */
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div class="box">my name is why, nickname is coderwhy, age is 18</div>
  </body>
</html>

css中的函数

rgb
rbga
translate
rotate
scale

其他的css的函数

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

var

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        --main-color: #f00;
      }

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

      .title {
        color: var(--main-color);
      }
    </style>
  </head>
  <body>
    <div class="box">我是box</div>
    <h1 class="title">我是title</h1>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --main-color: #f00;
      }

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

      .title {
        color: var(--main-color);
      }
    </style>
  </head>
  <body>
    <div class="box">我是box</div>
    <h1 class="title">我是title</h1>
  </body>
</html>

calc

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .box {
        width: 500px;
        height: 100px;
        font-size: 0;
        background-color: orange;
      }

      .item {
        height: 50px;
        display: inline-block;
      }

      .item1 {
        width: calc(100% - 100px);
        background-color: #f00;
      }

      .item2 {
        width: 100px;
        background-color: #0f0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item item1"></div>
      <div class="item item2"></div>
    </div>
  </body>
</html>

blur

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

blur(radius)
radius 模糊的半径，用于定义函数的偏差值，偏差值越大，图片越模糊
filter 将模糊或颜色偏移等图形效果应用于元素
backdrop 为元素后面的区域添加模糊或者其他效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        filter: blur(10px);
      }
    </style>
  </head>
  <body>
    <img src="./images/kobe01.jpg" alt="" />
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: relative;
        display: inline-block;
      }

      .cover {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
      }
    </style>
  </head>
  <body>
    <!-- <img src="./images/kobe01.jpg" alt="" /> -->
    <div class="box">
      <img src="./images/kobe01.jpg" alt="" />
      <div class="cover"></div>
    </div>
  </body>
</html>

gradient

gradient.png

linear-gradient

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-image: linear-gradient(red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* background-image: linear-gradient(red, blue); */
        background-image: linear-gradient(to right, red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* background-image: linear-gradient(red, blue); */
        /* background-image: linear-gradient(to right, red, blue); */
        background-image: linear-gradient(to right top, red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* background-image: linear-gradient(red, blue); */
        /* background-image: linear-gradient(to right, red, blue); */
        background-image: linear-gradient(-45deg, red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* background-image: linear-gradient(red, blue); */
        /* background-image: linear-gradient(to right, red, blue); */
        /* background-image: linear-gradient(-45deg, red, blue); */
        background-image: linear-gradient(
          to right,
          red 40px,
          blue 60%,
          purple 100%
        );
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

radial-gradient

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* background-image: linear-gradient(red, blue); */
        /* background-image: linear-gradient(to right, red, blue); */
        /* background-image: linear-gradient(-45deg, red, blue); */
        /* background-image: linear-gradient(
          to right,
          red 40px,
          blue 60%,
          purple 100%
        ); */
        background-image: radial-gradient(red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* background-image: linear-gradient(red, blue); */
        /* background-image: linear-gradient(to right, red, blue); */
        /* background-image: linear-gradient(-45deg, red, blue); */
        /* background-image: linear-gradient(
          to right,
          red 40px,
          blue 60%,
          purple 100%
        ); */
        background-image: radial-gradient(at 0% 50%, red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

浏览器前缀

供应商特定扩展

常见浏览器前缀

-o-
-xv-
-ms-
-mso-
-moz-
-wekbit-

为什么需要浏览器前缀

css属性刚开始没有成为标准，浏览器为了后续会修改名字给信的属性添加了浏览器前缀

浏览器私有前缀

-o- -xv- Opera
-ms- -mso- IE
-moz- Firefox
-webkit- Safari Google

后续学习了模块化打包工具自动添加浏览器前缀

FC

格式化上下文

Formatting Context

元素在标准流里面都是属于一个FC的
块级元素的布局属于BFC
- 也就是block level box都是在BFC中布局的
行内级元素的布局属于IFC
- 而inline level box都是在IFC中布局的

BFC.png

BFC

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        background-color: orange;
      }

      .box2 {
        height: 150px;
        background-color: purple;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        background-color: orange;
        margin-bottom: 30px;
      }

      .box2 {
        height: 150px;
        background-color: purple;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 400px;
        height: 200px;
        background-color: orange;
        margin-bottom: 30px;
      }

      .box2 {
        height: 150px;
        background-color: purple;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

简单概括

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

BFC解决margin折叠问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        overflow: auto;
      }

      .box1 {
        width: 400px;
        height: 200px;
        background-color: orange;
        margin-bottom: 30px;
      }

      .box2 {
        height: 150px;
        background-color: purple;
        margin-top: 50px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
    </div>
    <div class="box2"></div>
  </body>
</html>

BFC解决高度塌陷问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
      }

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

      .clear_fix::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="container clear_fix">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
        overflow: hidden;
      }

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

      /* .clear_fix::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        overflow: hidden;
      } */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

高度塌陷解决需要触发两个条件

触发BFC
父元素的height: auto;

媒体查询

媒体查询是一种提供给开发者对不同设备需求进行定制化开发的一个接口

媒体查询的三种方式.png

媒体查询方式一

body_bgc.css

body {
  background-color: orange;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @import url("./15-body_bgc.css") (max-width: 800px);
    </style>
  </head>
  <body></body>
</html>

媒体查询方式二

body {
  background-color: orange;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      media="(max-width: 800px)"
      href="./16-body_bgc.css"
    />
  </head>
  <body></body>
</html>

媒体查询方式三

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @media (max-width: 800px) {
        body {
          background-color: orange;
        }
      }
    </style>
  </head>
  <body></body>
</html>

媒体类型

默认隐式的使用all类型

all 适用于所有设备
print 适用于在打印模式下在屏幕上查看的分页材料和文档
screen 主要用于屏幕
speech 主要用于语音合成工具

媒体特性

媒体特性.png

描述了浏览器，输出设备，或者是预览环境的具体特征
- 通常会将媒体特性描述为一个表达式
- 每条媒体特性表达式都必须用括号括起来

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @media (min-width: 500px) and (max-width: 800px) {
        body {
          background-color: orange;
        }
      }
    </style>
  </head>
  <body></body>
</html>

媒体查询的表达式最终会获得一个Boolean值，也就是真或者假
多个条件
- and 操作符用于将多个媒体查询规则组合成单条媒体查询
- not 运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。
- only 运算符仅在整个查询匹配时才用于应用样式
- ，逗号用于将多个媒体查询合并为一个规则

常见的移动端设备

设备类型.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @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;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">我是box</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @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;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">我是box</div>
  </body>
</html>

内容回顾

一、HTML5新增的内容

1.1.语义化元素

header
nav
section
article
aside
footer

1.2.video/audio

基本使用src
其他属性
- controls
- width/height
- autoplay
- muted
- preload
支持的格式
- 浏览器支持的视频格式
适配性写法

1.3.input新增特性

新增的属性
type新增的属性
- color
- date
- time
- ...

1.4.全局属性 data-*

二、white-space/text-overflow

其他值

三、常见的css函数补充

3.1.var

自定义属性 - main-color
var();

3.2.calc

计算

3.3.blur

filter
backdrop-filter

3.4.gradient

image子类型
background-image
两个函数
- linear-gradient
- radial-gradient

三、浏览器前缀

w3c制定标准
浏览器厂商
- -ms-
- -webkit-
开发者
- 自动化打包工具帮助我们完成

五、BFC

5.1.FC概念

BFC
- block Formating context
IFC
- inline Formatting context

5.2.BFC官方文档解读

从顶部在垂直方向一个挨着一个摆放
他们的之间间距是通过margin设置，在同一个BFC，如果相邻两个之间有margin会折叠

5.3.BFC的应用

折叠

5.4.BFC的应用浮动高度塌陷

height: auto;
启动BFC

六、媒体查询

6.1.媒体查询三种使用方法

@import
link
@media

6.2.媒体查询的概念

媒体类型
媒体特性
- 表达式必须有括号
逻辑操作符
- and
- or

6.3.案例练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @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;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">我是box</div>
  </body>
</html>

课后作业

一. 完成上课所有的代码练习

二. 说说你对BFC的理解（面试题）

三. 整理<王者荣耀>用到的CSS知识点

定位:

flex布局:

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,271评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,275评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,151评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,550评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,553评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,559评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,924评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,580评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,826评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,578评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,661评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,363评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,940评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,926评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,156评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,872评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,391评论 2赞 342

01-HTML+CSS/21-HTML5新增内容-CSS函数-BFC-媒体查询

HTML5新增内容-CSS函数-BFC-媒体查询

HTML5语义化元素

HTML5新增媒体元素

Video

audio

input

data-*

white-space

text-overflow

css中的函数

var

calc

blur

gradient

linear-gradient

radial-gradient

浏览器前缀

FC

BFC

媒体查询

媒体查询方式一

媒体查询方式二

媒体查询方式三

媒体类型

媒体特性

常见的移动端设备

内容回顾

一、HTML5新增的内容

1.1.语义化元素

1.2.video/audio

1.3.input新增特性

1.4.全局属性 data-*

二、white-space/text-overflow

三、常见的css函数补充

3.1.var

3.2.calc

3.3.blur

3.4.gradient

三、浏览器前缀

五、BFC

5.1.FC概念

5.2.BFC官方文档解读

5.3.BFC的应用

5.4.BFC的应用 浮动高度塌陷

六、媒体查询

6.1.媒体查询三种使用方法

6.2.媒体查询的概念

6.3.案例练习

课后作业

一. 完成上课所有的代码练习

二. 说说你对BFC的理解（面试题）

三. 整理<王者荣耀>用到的CSS知识点

推荐阅读更多精彩内容

5.4.BFC的应用浮动高度塌陷