HTML5 部分

HTML5是新一代标准，新增一些语义化和多媒体标签，侧重于seo优化!

兼容性

HTML5 必须是 IE9以上版本才兼容，且兼容HTML5部分内容!

Chrome(谷歌) Safari Opera Firefox(火狐)等主流浏览器支持!

新增布局标签

关于 article 和 section

article 中可有多个section

section是主要强调分段和分块，如果想把一段文字分成多段，可以通过section进行分块!

article 在内容中更强调独立，一块完整的内容，文章区，评论区，新闻区等!

新增的状态标签

meter

状态标签，meter ，表示数值区间的一个状态表示!

手机电池: <meter value="10" max="100" min="0" low="20" high="80" optimum="90"></meter>

optimum 当前值如果大于等于该属性值时，则显示绿色, 若低于 high 最高值时 且大于 low 最低值时，显示黄色，若低于最低值，则显示红色!

progress

显示进度的一个标签!

当前进度: progress: <progress value="50" max="100"></progress>

value 是当前值， max是进度最大值!

新增的列表标签

datalist

列表展示，可以配合 input 带有 list 属性来过滤搜索数据!

<input type="text" list="names"/> <button>搜索</button>
<datalist id="names">
  <option value="马冬梅"></option>
  <option value="周杰伦"></option>
  <option value="周星驰"></option>
  <option value="张大仙"></option>
</datalist>  

details

类似于 collapse 折叠框，点击标题问题后展示问题的答案内容!

<details>
  <summary>如何一夜暴富?</summary>
  <p>1. 找一个靠谱的工作</p>
  <p>2. 养成早起的习惯</p>
</details>

新增的文本标签

ruby 注音标签

可以给一段文字，加入注音!

<ruby>
  <span>魑魅魍魉</span>
  <rt>chī mèi wǎng liǎng </rt>
</ruby>

mark 文字标记

可以在一段文字中，标记某个关键字，被标记的关键字，会显示高亮色!

<p>我是一段<mark>文字</mark></p>

表单控件相关

新增的属性

新增的type属性值

新增的视频标签

视频标签 video ，可以在浏览器中嵌入视频连接，进行视频播放!

属性值

<video src = "./xxx.mp4" controls muted autoplay loop poster = "./xxx.png" preload = "auto"></video>

新增的音频标签

视频标签 audio ，可以在浏览器中嵌入音频连接，进行音频播放!

audio标签属性于video属性类似!

<audio src = "./xxx.mp4" controls muted autoplay loop  preload = "auto"></audio>

注意: autoplay 属性为自动播放，但可能会因为浏览器媒体限制的问题，导致无法自动播放问题!

新增的全局属性

兼容性

html5shiv

在 小于 ie9 的浏览器，HTML5标签是不支持，可以使用html5shiv.js 插件来帮我们解决HTML5标签兼容问题!

<!-–[if lt IE 9]-->
    <script src="./js/html5shiv.js "></script >
<!--[endif]–- > 

!-–[if lt IE 9]-- 这种语法，只有在ie浏览器下认识，意思只有ie需要兼容的浏览器，才会加载 html5shiv.js 模块!

lt 是 &lt; < 小于的符号!

meta

<meta http-equiv="X-UA-Compatible" content="ie=edge">

如果是 ie 浏览器，则使用最优渲染模式(edge)!

<meta name="render" content="webkit" />

国产浏览器，大部分都是双核模式，以上配置，则让浏览器优先使用 chrome 和 Safari去渲染!

CSS3 部分

CSS前缀

前缀就是各大浏览器厂商内核所代表的前缀，前缀主要用来测试w3c新出的一些特性 ，如果该特性被广泛使用时，则浏览器各大厂商新版本中可能就不需要加入前缀了!

can i use 以上链接可以查询某些属性的兼容性，是否需要加前缀的一个网址!

新增的长度单位

新增的颜色设置

色相就是颜色值，会在一个颜色圆盘上以度数为取值范围。0 - 360°为红色!

新增的盒子属性

opacity与 rgba

opacity: 设置整个元素的不透明度!

rgba: 设置颜色的不透明度!

新增的背景属性

新增的边框属性

新增的文本属性

text-overflow 使用时。前提必须设置元素 overflow 的值不为 visbile!

div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} /* 超出的文本内容显示省略号 */

新增渐变属性

渐变的本质上也属于背景图片!

线性渐变

线性渐变使用 linear-gradient() 函数来实现!

径向渐变

径向渐变 使用radial-gradient() 函数来实现，表现方式，颜色由中间向四处散射!

重复渐变

repeating-linear-gradient 和 repeating-radial-gradient 可以帮我们实现重复渐变，

重复渐变只有，设置颜色范围区域时，并且某区域的颜色值，没有过度颜色时，才会生效!

案例

稿纸

.box1{
  width: 400px;
  height: 600px;
  padding: 20px;
  border: 1px solid #000;
  margin: 0 auto;
  background-clip: padding-box;
  background-image: repeating-linear-gradient(transparent 0px, transparent 29px, gray 30px);
}

实体球

.box2{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: radial-gradient(at 80px 80px, white, gray);
}

web字体和字体图标

web字体

在css中使用字体是通过font-family属性来设置的，该属性设置的字体前提必须在本地电脑上有安装相关字体才可以使用，

如果其他用户在使用网站时，且没有安装类似字体，则就会无法正常显示 ，那么就需要使用web字体来处理该问题!

以上链接是用来自定义字体的，可以针对某类文字来定制字体格式

@font-face {
  font-family: "iconfont";
  src: url("./font/xxx.ttf");
}

font-face 是用来引入自定义字体的，font-family是字体使用的名称， src则是引入字体的路径!

定制字体有个好处，就是只需要关注部分字体需要格式即可，通常比较全面的字体文件，其文件大小都是比较大的，对页面加载影响还是比较吃不消的！

阿里在线定制字体后，下载到本地，在demo.html文件中打开，会有使用案例!

@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

每个浏览器对字体文件格式识别不一致，所以ttf woff等后缀格式都是用来兼容对应各大浏览器的!

然后通过font-family属性直接引入即可

font-family: 'webfont'

字体图标

以字体的形式显示的小型图标，放大不失真，不会影响清晰度!

以上链接，可以下载想要的字体图标，下载后可以根据demo.html来查看具体如何使用!

2D变换

变换，就是对元素的移动，扭曲，旋转，缩放等一系列操作!

transform 变换属性，根据这个属性可以实现 2d和 3d等一系列有关变换的操作!

transform 只能针对 块级元素使用，行内元素无效!

位移

translate() css 函数，配合 transform 可以实现元素的位移!

1. 位移与相对定位类似，都不会脱离文档流，同时也不会影响其他元素!

2. 位移效率比定位来说，位移的效率更高!

3. 位移: 不会改变元素在文档流中的位置，而是通过GPU加速来移动元素。这使得它在视觉上看起来像是元素被移动了，但实际上元素在文档流中的位置没有变化。

4. 定位: 会改变元素在文档流中的位置来实现移动。relative 定位会保持元素在文档流中的空间，而 absolute 和 fixed会将元素从文档流中移除。

5. 定位通常会出发 重绘与重排，对性能方面是有影响的!

配合绝对定位实现居中效果

.parent{
  width: 200px;
  height: 200px;
  background-color: #ff0;
  position: relative;
}
.sub{
  width: 50px;
  height: 50px;
  background-color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  /* -50% 相对于 parent 宽高度的一半 */
  transform: tranlate(-50%, -50%);
}

缩放

通过scale()函数可以实现缩放效果!

当值为1 代表不缩放，且默认，小于1缩小，大于1则放大，可以为小数点！

借助缩放可以实现小于12px字体大小，在常规浏览器中，且支持最小字体为12px！

t

旋转

通过rotate()函数可以实现旋转效果!

transform: rotate(30deg); /* 沿着元素中心点 顺时针旋转30° */

倾斜

通过skew()函数可以实现倾斜效果! 对应的还有 skewX() 以及 skewY();

transform: skew(30deg, 30deg); /* x y 方向倾斜角度 */

多重变换

多重变换，就是将位移 旋转 缩放组合一起使用!

transform: scale(1.2) translate(10px, 10px); /* 放大 0.2倍 然后 x位移10px y位移10px */

transform: rotate(30deg) translate(10px, 10px); /* 旋转 30° 然后 x位移10px y位移10px */

旋转rotate会改变元素的坐标值，影响位移的位置!

位移时，会沿着x和y的方向进行位移!

注意: 最好将破坏性的值(rotate)放到后面表示，破坏性会破坏 坐标轴的表示，影响其它属性效果展示!

transform: translate(10px, 10px) rotate(30deg); /* 旋转 30° 然后 x位移10px y位移10px */

变换原点

变换原点，就是改变变换的中心点，如 rotate 旋转时，会默认元素中心点进行旋转，但是我们可以控制原点的位置，不在绕着中心点旋转!

变换对 rotate 旋转 和 scale是有影响的!

rotate 会沿着原点进行旋转，而scale 放大和缩小都会随着原点过去!

transform-origin: left top; /* 中心点改为 左上角 */

使用像素值 和 百分比来控制原点位置！

transform-origin: 50px 50px; /* x 50px y 50px */
transform-origin: 25% 25%; /* x 25% y 25% */

如果 origin 只有一个值的时候，比如 left，原点则会选择左侧 y 轴的中心点来作为原点!

transform-origin: left;

3D变换

3D景深

在使用3D变换前，需要了解下 3D景深， 只有开启景深效果后，才能对3D变换有明显的变化!

1. transform-style 设置变换风格 开启3d空间，有两个参考值一种是，flat(扁平的2维) 还有一种是preserve-3d(以3d的空间形式保持)!

2. perspective 设置透视效果，近大远小，值可为像素值，值越小就越离着近! 不能为负值，需要给父元素添加!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3d变换</title>
  <style>
    .parent{
      width: 200px;
      height: 200px;
      margin: 15px auto;
      border: 2px solid black;
      transform-style: preserve-3d;
      perspective: 60px;
    }
    .sub{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      transform: rotateX(30deg);
    }
  </style>
</head>
<body>
  <div class="parent"> 
    <div class="sub"></div>
  </div>
</body>
</html>

透视点的位置

透视点，就是我们所观察的地方，默认是父元素(开启3d空间的元素)交叉的中心点，我们可以通过perspective-origin 属性来设置透视点的位置!

perspective-origin: 100px 100px; /* x 和 y */

x 和 y 方向各自偏移100像素!

通俗的说，就是靠右边蹲下进行观察!

位移

translate()

3d 位移就是在2d的基础上，在z轴上进行位移!

transform: translateZ(100px);

旋转

rotate()

transform: rotate3d(1,1,1, 30deg); x y z 同时旋转 30deg

缩放

过度

过度，就是一个元素特性在变化的逐渐过程! 比如元素的宽度 或者高度 在从原始值变化为新的值时，一个变化通过时间描述的过程!

transition 该属性可以帮我们完成过度效果!

注意: 只有属性值带有数字特性的属性值，都可以过度，或者是可以转换为数值的属性也具有过度的特性!

backgrond-color: yellow; 也可以过度，原因是该颜色值可以转换为特有的数值(16进制)来表达，因此具有过度因素!

基本属性

高级使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过度</title>
  <style>
    .parent{
      width: 90vw;
      border: 1px solid #000;
    }
    .parent:hover .box{
      width: 90vw;
    }
    .box{
      width: 200px;
      height: 100px;
      text-align: center;
      padding-top: 15px;
      /* line-height: 1; */
      font-size: 16px;
      color: #fff;
      font-weight: bold;
      transition-property: all;
      transition-duration: 1s;
      /* 延迟 1 秒钟后执行过度*/ 
      /* transition-delay: 1s; */
    }
    .box1{
      background-color: #f00;
      transition-timing-function: ease;

    }
    .box2{
      background-color: #0f0;
      transition-timing-function: linear;
    }
    .box3{
      background-color: #00f;
      transition-timing-function: ease-in;
    }
    .box4{
      background-color: #fed;
      transition-timing-function: ease-out;
    }
    .box5{
      background-color: #f0f;
      transition-timing-function: ease-in-out;
    }
    .box6{
      background-color: #0ff;
      transition-timing-function: steps(10, end);
    }
    .box7{
      background-color: #f00;
      transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="box box1">ease(默认效果 平滑过度 慢 快 慢)</div>
    <div class="box box2">linear( 匀速 速度保持不变 )</div>
    <div class="box box3">ease-in( 慢 快 )</div>
    <div class="box box4">ease-out( 快 慢 )</div>
    <div class="box box5">ease-in-out( 慢 快 慢 )</div>
    <div class="box box6">steps(10) 步长函数</div>
    <div class="box box7">cubic-bezier() 贝塞尔曲线函数</div>
  </div>
</body>
</html>

复合属性

复合属性，就是将以上属性组合在一起使用，顺序如下，只需要关注 延迟时长 和 动画执行时长顺序即可!

• transition-duration: 过度的持续时间!

• transition-property: 过度的属性值!

• transition-delay: 过度的延迟时间!

• transition-timing-function: 过度的方式!

transition: 1s height .5s linear; /* 持续时间 过度的属性 延迟的时间 过度的方式*/

动画

1. 帧: 动画是一系列帧数的集合，人的视觉观察到的动画流畅度，一般为1秒钟24帧，则帧数越高且越流畅!

2. 关键帧: 关键帧就是动画中帧数的关键的部分!

基本属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画</title>
  <style>
    .parent{
      width: 1000px;
      height: 100px;
      border: 1px solid #000;
    }
    .sub{
      width: 100px;
      height: 100px;
      background-color: cadetblue;
      /* 动画的名称 */
      animation-name: move;
      /* 动画的运行时长 */
      animation-duration: 1s;
      /* 动画的延迟时间 */
      animation-delay: .6s;
    }

    @keyframes move{
      from{
        transform: translateX(0);
      }
      to{
        transform: translateX(899px) rotate(45deg);
        background-color: palevioletred;
        border-radius: 50%;
      }
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="sub"></div>
  </div>
</body>
</html>

关键帧

@keyframes 用来定义一组关键帧，语法 @keyframes name { ... }， 配合 animation-name 使用!

关键帧的名称不能重复，且唯一!

from...to方式

@keyframes move{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(899px) rotate(45deg);
    background-color: palevioletred;
    border-radius: 50%;
  }
}

百分比方式

@keyframes move{
  0%{
    transform: translateX(0);
  }
  50%{
    ...
  }
  100%{
    transform: translateX(899px) rotate(45deg);
    background-color: palevioletred;
    border-radius: 50%;
  }
}

move 是 @keyframes 定义的关键帧名称!

animation-name: move;

其他属性

1. animation-direction

动画运行的方向，默认从0% - 100%，可以通过reverse属性值来进行动画反转!

alternate 该属性是对动画进行一个交替运行，反复运动!

2. animation-fill-mode

动画执行完毕时的一个状态， 比如动画执行完毕后，停留在最后一帧的位置!

1. forwards 动画运行结束后 停留在最后一帧!

2. backwards 动画开始运行时

反复运动的情况下，使用无效，该属性只有处理在运行结束后的一个状态!

复合属性

将以上多种动画属性组合一起使用, 使用顺序如下!

/* 动画名称  duration  delay  运行的方式， 动画执行次数， 运行的方向， 执行结束动画后的状态， 播放状态 */
animation: animation-name 1s .5s linear infinte reverse forwards play;

以上属性只有 duration 和 delay有先后顺序之外，其他属性可随便写!

如果只有一个时间表示时，则这个时间表示 duration !

动画和过度区别

transiton: 过度动画需要触发条件，需要 hover 或者 click 等触发后，才能产生过度动画!

animation: 动画不需要出发条件，会自动出发动画运行效果! 而且 动画 可以通过关键帧来实现精确帧数控制动画运行的效果!

多列布局 column

一般实现报纸类的布局！

常用的属性

列边框属性

案例

文章案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>column</title>
  <style>
    .container{
      width: 1000px;
      border: 1px solid black;
      padding: 10px;
      column-count: 3;
      column-rule: 2px dashed red;
      column-gap: 20px;
    }
    .container h1{
      column-span: all;
      text-align: center;
    }
  </style>
</head>
<body>
    <div class="container">
      <h1>Column</h1>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate ut voluptatibus quia a facilis nostrum deleniti iure? Quis tempore laborum ut, error sit reiciendis deleniti ullam qui atque unde cum?</p>
      <p>Ex culpa voluptate quia enim harum expedita voluptatibus nemo illum saepe illo! Laudantium eveniet reprehenderit distinctio! Atque, aperiam repudiandae libero provident repellat ab omnis quos quas non veniam quisquam mollitia.</p>
      <p>Beatae sint voluptatibus libero facere! Minima, quam quos voluptas nihil eligendi quibusdam perspiciatis possimus quaerat inventore repudiandae cupiditate tenetur cum repellat aspernatur quia velit distinctio, voluptates blanditiis natus voluptate magni!</p>
      <p>Vitae illum minima quod deleniti maiores beatae alias dolores! Iusto aliquam nostrum, veniam quidem ut quae, quaerat aliquid vero excepturi error sed fugiat, a odit quas sapiente voluptatum illum quia.</p>
      <p>Perferendis magnam nostrum, neque fugiat dolor aliquam placeat eligendi optio, porro modi maiores voluptas beatae animi officia id assumenda et officiis earum ipsam saepe! Quis beatae tenetur rerum nostrum. Aliquid!</p>
    </div>
</body>
</html>

图片多列布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>column</title>
  <style>
    .outer{
      column-count: 5;
    }
    img{
      width: 100%;
    }
  </style>
</head>
<body>
    <div class="outer">
      <img src="../images/img1.jpg" alt="image">
      <img src="../images/img2.jpg" alt="image">
      <img src="../images/img3.jpg" alt="image">
      <img src="../images/img4.jpg" alt="image">
      <img src="../images/img5.jpg" alt="image">
      <img src="../images/img6.jpg" alt="image">
      <img src="../images/img7.jpg" alt="image">
      <img src="../images/img8.jpg" alt="image">
      <img src="../images/img9.jpg" alt="image">
      <img src="../images/img10.jpg" alt="image">
    </div>
</body>
</html>

伸缩盒模型

伸缩容器

如果某一个元素开启了 flex 或者是 inline-flex 属性，那么该元素被称为伸缩容器!

display: flex; /* inline-flex */

伸缩项目

伸缩容器里的，子项都可称为，伸缩项目，只有子集的元素才会是伸缩项目，孙子或者是祖孙级的项目不在是伸缩项目!

无论原来的盒子是 块级儿还是 行级，一旦成为了^伸缩项目，都会变为块级!

<div class="parent">
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

.parent{
  display: flex;
}

parent 开启 伸缩容器，其 sub 为伸缩项目!

主轴和侧轴

主轴: 伸缩项目，默认是沿着主轴方向排列，从左到右(左边是起点，右边是终点)!

侧轴: 与主轴交叉，是垂直的，默认方向是从上倒下!

主轴方向

flex-direction: 可以修改主轴的方向，例如反转排列，从右到左排列方式，也可以从上倒下排列!

主轴换行

主轴对齐方式

使用 justify-content 可以实现主轴方向内容对齐方式!

以上是可选值，以及对比效果!

侧轴对齐方式

注意：其中有一个strech属性值是默认侧轴选项值，且会在侧轴上进行拉伸，若伸缩项目都有高度值的情况下，则该元素无法被拉伸，若想看到效果，各个伸缩项，就不要给高度就行!

align-items

仅适用 1 行的对齐方式

使用align-items 可以实现 1 行上的对齐方式!

align-content

适用多行的对齐方式

使用align-content 可以实现 多行上的对齐方式!

居中方式

主轴+侧轴

.parent{
  display: flex;
  jusitify-content: center;
  align-items: center;
}

伸缩容器+margin

,parent{
   display: flex;
}
,parent .sub{
  margin: auto;
}

flex-basis

flex-basis 是基准长度，主要给子集伸缩项设置，取值是像素值!

设置该值后，如果是row主轴方向，则宽度失效(基准长度会替代宽度)，如果是侧轴方向，则高度失效(基准长度会替代高度)!

浏览器会根据这个值，来获取主轴方向的剩余空间，默认为auto(元素自身的宽高!);

伸缩性

flex-grow(拉伸)

定义伸缩项的 "放大" 比例，默认为0！即使主轴存在剩余空间，也不放大!

规则:

flex-grow: 1; 则主轴方向的剩余空间，会对伸缩项进行平分!

伸缩项分别为 1 , 2 , 3，则分别瓜分 1/6 2/6 3/6, 6则是一行伸缩项元素的个数!

flex-shrink(收缩)

定义伸缩项的 "收缩" 比例，默认为1！如果空间不足，则伸缩项也会最多收缩到能够保持内容的呈现!

flex 复合属性

排序和单独对齐

排序: 通过 order 属性实现，可选值可以为正值 和 负值，数值越小越靠前，默认为0，需要给子项设置该属性值!

单独对齐: 通过 align-self 属性来实现，可选值为 flex-start flex-end center!

响应式布局

响应式布局，就是在不同分辨率屏幕下展示最佳的页面布局!

媒体类型

媒体查询可以根据媒体类型来匹配当前屏幕情况，可以匹配打印界面，以及屏幕设备等信息!

@media print{
  /* 匹配 打印界面 并设置 css 样式 */
}

@media screen{
  /* 匹配 屏幕界面 并设置 css 样式 */
}

媒体特性

媒体特性，根据指定宽高范围，来匹配视口的宽高，最终在不同视口下展示不同样式!

@media (max-width: 700px){
   /* css 样式 视口宽度小于 700px */
}

运算符

并且运算符

并且运算符 使用 and 关键字来表示

@media (max-width: 1920px) and (min-width: 1024px){
   /* 大于  1024 像素  小于 1920 像素  在 1024 和 1920像素区间 的样式生效*/
}

也可以配合媒体类型来使用

@media screen and (max-width: 1920px) and (min-width: 1024px){
   /* 只有设备屏幕 才会生效 大于  1024 像素  小于 1920 像素 */
}

这里排除打印界面，只能设备屏幕才会生效!

或运算符

或运算符 可以使用 逗号间隔，也可以使用 or 关键字!

@media screen and (max-width: 1920px) , (min-width: 1024px){
  /* 只有设备屏幕 才会生效 大于  1024 像素   小于 1920 像素  >=1024px  <=1920px */
}

使用 or 关键字

@media screen and (max-width: 1920px) or (min-width: 1024px){
  /* 只有设备屏幕 才会生效 大于  1024 像素  或者 小于 1920 像素  >=1024px  <=1920px */
}

否定运算符

否定运算符使用 not关键字表示

@media not print{
  /* 不是 打印界面 的样式生效 ! */
}

肯定运算符

肯定运算符使用 only 关键字表示，作用不大，一般用来兼容 IE ，因为IE 不支持媒体特性，使用 only时，IE会忽略样式定义!

@media only screen and (max-width: 1920px){
  
}

and (max-width: 1920px) 媒体特性 ie 不支持， only ie匹配时 无法正常匹配，所以内部样式会被忽略!

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 100%;
      height: 200px;
      text-align: center;
      line-height: 200px;
      font-weight: bold;
      background-color: antiquewhite;
      font-size: 24px;
    }
    .box span{
      color: #00f;
    }
    /* 小屏幕 */
    @media screen and (max-width: 768px){
      .box{
        background-color: aqua;
      }
      .box::after{
        content: "小屏幕 768px 以下";
      }
    }
    /* 中等屏幕 */
    @media screen and (min-width: 768px) and (max-width: 1024px){
      .box{
        background-color: aquamarine;
      }
      .box::after{
        content: "中等屏幕 768px ~ 1024px";
      }
    }
    /* 大屏幕 */
    @media screen and (min-width: 1024px) and (max-width: 1280px){
      .box{
        background-color: azure;
      }
      .box::after{
        content: "大屏幕 1024px ~ 1280px";
      }
    }
    /* 超大屏幕 */
    @media screen and (min-width: 1280px){
      .box{
        background-color: bisque;
      }
      .box::after{
        content: "超大屏幕 1280px 以上";
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <span>媒体查询: </span>
  </div>
</body>
</html>

在link标签内使用media

<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)" href="style.css">

style.css 内就不用写 @meida 语法了，可以直接写 CSS样式!

监听系统级别主题

@media (prefers-color-scheme: light) {
  /* 针对浅色主题的样式 */
}

@media (prefers-color-scheme: dark) {
  /* 针对深色主题的样式 */
}

注意

@media 媒体查询中的样式，会因为层叠关系，样式被覆盖的问题，通常我们需要把@media 媒体查询相关的样式，单独放入各自文件当中，并通过外联的形式放在其他样式表的下边，防止被其他样式表样式覆盖!

例如

然后通过外联的形式分别引入样式表，@media 样式表要放入 index.css 下放，防止样式覆盖问题!

BFC

BFC( block formatting context ) 块级格式上下文! 根据特定属性可以激活BFC！

BFC 就是一个独立的区域，不受外界样式影响，通常可以解决常见样式问题!

常见的问题

1. margin 塌陷问题， 子元素使用 margin-top 时，会将 外边距 赋予父元素!

2. float 浮动问题，浮动开启后，元素会飘起来，并失去空间，则下放的元素，会占有失去的空间，因此被浮动元素给遮盖的问题!

3. float 浮动问题，则子元素开启浮动后，会失去空间，而没有高度的父元素，会失去子元素高度支撑的原因，出现父元素高度塌陷问题!

激活BFC的属性

影响最小，且激活BFC的属性，可以使用 display: flow-root;

flow-root: 该元素生成一个块级元素盒，其会建立一个新的区块格式化上下文，定义格式化上下文的根元素。

不过该属性 ie系列 不支持!