01-HTML+CSS/21-HTML5新增內(nèi)容-CSS函數(shù)-BFC-媒體查詢

HTML5新增內(nèi)容-CSS函數(shù)-BFC-媒體查詢

HTML5語義化元素

HTML5之前

div
span
p
h1 ~ h6
a

未使用的弊端

過多的使用div，通過id或者class區(qū)分元素
對于瀏覽器來說這些元素不夠語義化
對于搜索引擎來說，不利于seo優(yōu)化

HTML5新增的語義化元素

header 頭部元素
nav 導(dǎo)航元素
section 定義文檔某個區(qū)域的元素
article 內(nèi)容元素
aside 側(cè)邊欄元素
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端事實(shí)上一直希望可以更好的嵌入音頻和視頻，特別是21世紀(jì)以來，用戶帶寬的不斷提高梦谜，瀏覽器因?yàn)楹鸵曨l變得非常容易
- 在HTML5之前是通過flash或者其他插件實(shí)現(xiàn)的，但是會有很多的問題
- 比如無法很好的支持html/css特性，兼容性問題

HTML5增加了對媒體類型的支持

音頻
- audio
視頻
- video

Video和Audio使用方式有兩個

一方面我們可以直接通過元素使用video和audio
另一方面我們可以通過JavaScript的API對齊進(jìn)行控制

Video

行內(nèi)可替換元素

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>當(dāng)前您的瀏覽器不支持視頻的播放思恐，請更換更好用的瀏覽器</p>
    </video>
  </body>
</html>

audio

行內(nèi)可替換元素

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 最多輸入的內(nèi)容

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-*

用于自定義數(shù)據(jù)屬性
通常用于html和JavaScript數(shù)據(jù)之間的傳遞

<!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

用于設(shè)置空白處理和換行規(guī)則
- white-wrap
  - 合并所有連續(xù)的空白，允許單詞超屛時自動換行
- nowrap
  - 合并所有連續(xù)的空白膊毁，不允許單詞超屏?xí)r自動換行
- pre
  - 阻止合并所有連續(xù)的空白胀莹，不允許單詞超屛時自動換行
- pre-wrap
  - 阻止合并所有連續(xù)的空白，允許單詞超屛時自動換行
- pre-line
  - 合并所有連續(xù)的空白(但保留換行)婚温，允許單詞超屛時自動換行

<!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

用來設(shè)置文字溢出時的行為
- 前提
  - text-overflow生效的前提是overflow不為visible
- clip
  - 溢出的內(nèi)容直接裁減掉(字符可能會顯示不完整)
- elipsis
  - 溢出那行的結(jié)尾處用省略號表示

<!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中的函數(shù)

rgb
rbga
translate
rotate
scale

其他的css的函數(shù)

var 使用css定義的變量
calc 計(jì)算css值描焰，通常用于計(jì)算元素的大小或位置
blur 毛玻璃(高斯模糊)效果
gradient 顏色漸變函數(shù)

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()函數(shù)將高斯模糊應(yīng)用于輸出圖片或者元素

blur(radius)
radius 模糊的半徑，用于定義函數(shù)的偏差值栅螟，偏差值越大荆秦，圖片越模糊
filter 將模糊或顏色偏移等圖形效果應(yīng)用于元素
backdrop 為元素后面的區(qū)域添加模糊或者其他效果

<!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>

瀏覽器前綴

供應(yīng)商特定擴(kuò)展

常見瀏覽器前綴

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

為什么需要瀏覽器前綴

css屬性剛開始沒有成為標(biāo)準(zhǔn)，瀏覽器為了后續(xù)會修改名字給信的屬性添加了瀏覽器前綴

瀏覽器私有前綴

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

后續(xù)學(xué)習(xí)了模塊化打包工具自動添加瀏覽器前綴

FC

格式化上下文

Formatting Context

元素在標(biāo)準(zhǔn)流里面都是屬于一個FC的
塊級元素的布局屬于BFC
- 也就是block level box都是在BFC中布局的
行內(nèi)級元素的布局屬于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>

高度塌陷解決需要觸發(fā)兩個條件

觸發(fā)BFC
父元素的height: auto;

媒體查詢

媒體查詢是一種提供給開發(fā)者對不同設(shè)備需求進(jìn)行定制化開發(fā)的一個接口

媒體查詢的三種方式.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>

媒體類型

默認(rèn)隱式的使用all類型

all 適用于所有設(shè)備
print 適用于在打印模式下在屏幕上查看的分頁材料和文檔
screen 主要用于屏幕
speech 主要用于語音合成工具

媒體特性

媒體特性.png

描述了瀏覽器吃媒，輸出設(shè)備，或者是預(yù)覽環(huán)境的具體特征
- 通常會將媒體特性描述為一個表達(dá)式
- 每條媒體特性表達(dá)式都必須用括號括起來

<!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>

媒體查詢的表達(dá)式最終會獲得一個Boolean值，也就是真或者假
多個條件
- and 操作符用于將多個媒體查詢規(guī)則組合成單條媒體查詢
- not 運(yùn)算符用于否定媒體查詢砸抛，如果不滿足這個條件則返回true失息，否則返回false。
- only 運(yùn)算符僅在整個查詢匹配時才用于應(yīng)用樣式
- 募舟，逗號用于將多個媒體查詢合并為一個規(guī)則

常見的移動端設(shè)備

設(shè)備類型.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>

內(nèi)容回顧

一祠斧、HTML5新增的內(nèi)容

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函數(shù)補(bǔ)充

3.1.var

自定義屬性 - main-color
var();

3.2.calc

計(jì)算

3.3.blur

filter
backdrop-filter

3.4.gradient

image子類型
background-image
兩個函數(shù)
- linear-gradient
- radial-gradient

三梁肿、瀏覽器前綴

w3c制定標(biāo)準(zhǔn)
瀏覽器廠商
- -ms-
- -webkit-
開發(fā)者
- 自動化打包工具幫助我們完成

五、BFC

5.1.FC概念

BFC
- block Formating context
IFC
- inline Formatting context

5.2.BFC官方文檔解讀

從頂部在垂直方向一個挨著一個擺放
他們的之間間距是通過margin設(shè)置觅彰，在同一個BFC吩蔑，如果相鄰兩個之間有margin會折疊

5.3.BFC的應(yīng)用

折疊

5.4.BFC的應(yīng)用浮動高度塌陷

height: auto;
啟動BFC

六、媒體查詢

6.1.媒體查詢?nèi)N使用方法

@import
link
@media

6.2.媒體查詢的概念

媒體類型
媒體特性
- 表達(dá)式必須有括號
邏輯操作符
- and
- or

6.3.案例練習(xí)

<!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>

課后作業(yè)

一. 完成上課所有的代碼練習(xí)

二. 說說你對BFC的理解（面試題）

三. 整理<王者榮耀>用到的CSS知識點(diǎn)

定位:

flex布局:

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末填抬，一起剝皮案震驚了整個濱河市烛芬，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖赘娄，帶你破解...
沈念sama閱讀 217,185評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件仆潮，死亡現(xiàn)場離奇詭異，居然都是意外死亡遣臼，警方通過查閱死者的電腦和手機(jī)性置，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,652評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來揍堰，“玉大人鹏浅，你說我怎么就攤上這事∑链酰” “怎么了隐砸？”我有些...
開封第一講書人閱讀 163,524評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長蝙眶。經(jīng)常有香客問我季希，道長，這世上最難降的妖魔是什么幽纷？我笑而不...
開封第一講書人閱讀 58,339評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任式塌，我火速辦了婚禮，結(jié)果婚禮上霹崎，老公的妹妹穿的比我還像新娘珊搀。我一直安慰自己，他們只是感情好尾菇，可當(dāng)我...
茶點(diǎn)故事閱讀 67,387評論 6贊 391
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布境析。她就那樣靜靜地躺著，像睡著了一般派诬。火紅的嫁衣襯著肌膚如雪劳淆。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,287評論 1贊 301
城市分裂傳說
那天默赂，我揣著相機(jī)與錄音沛鸵，去河邊找鬼。笑死缆八，一個胖子當(dāng)著我的面吹牛曲掰，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播奈辰，決...
沈念sama閱讀 40,130評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼栏妖，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了奖恰？” 一聲冷哼從身側(cè)響起吊趾，我...
開封第一講書人閱讀 38,985評論 0贊 275
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤宛裕，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后论泛，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體揩尸，經(jīng)...
沈念sama閱讀 45,420評論 1贊 313
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,617評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年屁奏，在試婚紗的時候發(fā)現(xiàn)自己被綠了岩榆。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,779評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡了袁，死狀恐怖朗恳，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情载绿，我是刑警寧澤，帶...
沈念sama閱讀 35,477評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布油航，位于F島的核電站崭庸，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏谊囚。R本人自食惡果不足惜怕享，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,088評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望镰踏。院中可真熱鬧函筋，春花似錦、人聲如沸奠伪。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,716評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽绊率。三九已至谨敛，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間滤否，已是汗流浹背脸狸。一陣腳步聲響...
開封第一講書人閱讀 32,857評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留藐俺，地道東北人炊甲。一個月前我還...
沈念sama閱讀 47,876評論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像欲芹，于是被迫代替她去往敵國和親卿啡。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,700評論 2贊 354

01-HTML+CSS/21-HTML5新增內(nèi)容-CSS函數(shù)-BFC-媒體查詢

HTML5新增內(nèi)容-CSS函數(shù)-BFC-媒體查詢

HTML5語義化元素

HTML5新增媒體元素

Video

audio

input

data-*

white-space

text-overflow

css中的函數(shù)

var

calc

blur

gradient

linear-gradient

radial-gradient

瀏覽器前綴

FC

BFC

媒體查詢

媒體查詢方式一

媒體查詢方式二

媒體查詢方式三

媒體類型

媒體特性

常見的移動端設(shè)備

內(nèi)容回顧

一祠斧、HTML5新增的內(nèi)容

1.1.語義化元素

1.2.video/audio

1.3.input新增特性

1.4.全局屬性 data-*

二、white-space/text-overflow

三胃珍、常見的css函數(shù)補(bǔ)充

3.1.var

3.2.calc

3.3.blur

3.4.gradient

三梁肿、瀏覽器前綴

五、BFC

5.1.FC概念

5.2.BFC官方文檔解讀

5.3.BFC的應(yīng)用

5.4.BFC的應(yīng)用 浮動高度塌陷

六、媒體查詢

6.1.媒體查詢?nèi)N使用方法

6.2.媒體查詢的概念

6.3.案例練習(xí)

課后作業(yè)

一. 完成上課所有的代碼練習(xí)

二. 說說你對BFC的理解（面試題）

三. 整理<王者榮耀>用到的CSS知識點(diǎn)

推薦閱讀更多精彩內(nèi)容

5.4.BFC的應(yīng)用浮動高度塌陷