当我们想覆盖一些本身非我们书写的样式时候，往往不得不通过使用优先级权重更高的样式名，去覆盖那些样式。

同时，当样式优先级感到难以控制时，开发者习惯滥用 !important 去解决，这又循环导致了后续更混乱的样式结构。

基于让 CSS 得到更好的控制和管理的背景，CSS @layer 应运而生。

CSS Cascade Layers，也叫做CSS级联层，是Cascading and Inheritance Level5 规范中新增了一个新的 CSS 特性。

这样，我们就创建一个名为 utilities 的 @layer 级联层。

@layer规则可以通过三种方式其一来创建级联层。第一种方法如上方代码所示，它创建了一个块级的@规则，其中包含作用于该层内部的CSS规则。

一个级联层同样可以通过 @import 来创建，规则存在于被引入的样式表内：

你也可以创建带命名的级联层，但不指定任何样式。例如，单一的命名层：

或者，多个命名层也可以被同时定义。例如：

因此，在上面的例子中，如果 theme 层和 utilities 层中存在冲突的规则，那么 utilities 层中的将优先被应用。

即使 utilities 层中规则的 优先级低于 theme 层中的，该规则仍会被应用。一旦级联层顺序建立之后，优先级和出现顺序都会被忽略。

这将使创建CSS选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的级联层中。

级联层允许嵌套，例如：

向 layout 层内部的 framework 层附加规则，只需用 . 连接这两层。

如果创建了一个级联层但并未指定名字，例如：

那么则称为创建了一个匿名层。除创建后无法向其添加规则外，该层和其他命名层功能一致。

1、使用@layer 块规则，并立即为其分配样式：

2、使用规则@layer 语句，没有指定任何样式：

3、将@import 与layer关键字或layer()函数一起使用

以上每一个都创建了一个名为 的级联层reset。

在下面的例子中，我们建立四个级联层：reset，base，theme，和utilities。

重复使用级联层名称时，样式将附加到现有级联层。级联层的顺序保持不变，因为只有第一次的出现已经确定顺序：

重新使用级联层名称时层顺序保持不变的使@layer 语法变得更加方便和严谨。使用它，可以预先建立图层顺序，然后将所有 CSS 附加到它：

按以往CSS级联来进行分析的话，form input（多层级）的优先级会大于input,但是由于级联层所起的作用，@layer theme的input会取胜。

级联层支持嵌套使用，如下：

在这个例子中有两个级联外层：

base

framework

该framework层本身也包含两层：

base

theme

如果要将样式附加到嵌套级联层，需要使用以下全名来引用它，

如果第一个@media (min-width: 30em)匹配（基于视口尺寸），则layout级联层层将在图层顺序中排在第一位。如果只有@media (prefers-color-scheme: dark)匹配，theme则将是第一层。

如果两者匹配，则图层顺序将为layout, theme。如果没有匹配，则不定义层。

例如  <input type="text" placeholder="请输入" >

显示在input输入框 默认显示的文字 

例如 鼠标滑动事件

实例

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000"></canvas>

    <video src=""></video>

    <audio src=""></audio>

用法一样 例如

        // 设置本地存储

        localStorage.setItem("lastname", "Smith")

        // 获取本地存储

        document.getElementById("result").innerHTML = localStorage.getItem("lastname")

draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值

在h5中，如果想拖拽元素，就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽

<div draggable="true">123</div>

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

:nth-child(even) /* 按照偶数 */

:nth-child(odd)  /* 按照奇数 */

:disabled /* 选择每个禁用的E元素 */

:checked /* 选择每个被选中的E元素 */

:not(selector) /* 选择非 selector 元素的每个元素 */

::selection /* 选择被用户选取的元素部分 */

伪类元素选择器

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）

background-origin：规定背景图片的定位区域

对于 background-origin 属性，有如下属性

背景图片可以放置于 content-box、padding-box 或 border-box 区域

border-radius：圆角

box-shadow / text-shadow：阴影

border-image：边框图片

2D/3D 转换

2D 转换（transform）

translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px)

rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg)

scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4)

skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg)

matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0)

3D 转换

rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg)

rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg)

perspective：规定 3D 元素的透视效果

transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。

transition-duration：过渡动画的一个持续时间。

transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

transition-delay：延迟多久后开始动画

先定义 @keyframes 规则（0%，100% | from，to）

然后定义 animation，以下参数可直接写在 animation 后面

animation-name: 定义动画名称

animation-duration: 指定元素播放动画所持续的时间长

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式

animation-delay: 指定元素动画开始时间

animation-iteration-count: infinite | number：指定元素播放动画的循环次数

animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）

animation-play-state: running | paused ：控制元素动画的播放状态

实例

   div{

            width: 200px

            height: 100px

            background: pink

            animation: move 1s linear 

        }

        @keyframes move {

            0%{

                width: 0

            }

            100%{

                width: 500px

            }

        }

通过CSS3，能够创建多个列来对文本进行布局

column-count: 规定元素应该被分隔的列数

column-gap: 规定列之间的间隔

column-rule: 设置列之间的宽度、样式和颜色规则

resize

box-sizing

outline-offset

resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll

div { 

 resize: both/* none|both|horizontal|vertical*/ overflow: auto

}

box-sizing 属性可设置的值有 content-box、border-box 和 inherit

content-box 是W3C的标准盒模型，元素宽度 = 内容宽度 + padding + border：意思是 padding 和 border 会增加元素的宽度，以至于实际上的 width 大于原始设定的 width

border-box 是ie的怪异盒模型，元素宽度 = 设定的宽度，已经将 padding 和 border 包括进去了，比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破，但是使用 border-box 就可以轻松完成

inherit：规定应从父元素继承 box-sizing 属性的值

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

div {

        display: flex

        flex-direction: row

        /*弹性盒方向：主轴方向X轴  */

        flex-direction: column

        /* 弹性盒方向：主轴Y轴方向 */

        flex-direction: row-reverse

        /* 弹性盒方向：主轴方向X轴 倒叙 */

        flex-direction: column-reverse

        /* 弹性盒方向：主轴Y轴方向 倒叙*/

        flex-wrap: nowrap

        /* 弹性盒换行：不换行 默认的 */

        flex-wrap: wrap

        /* 弹性盒换行：换行 */

        /*设置主轴方向子元素排列顺序*/

        justify-content: flex-start

        /* 从左到右排列 默认的 */

        justify-content: flex-end

        /* 从尾部开始排列 不影响子元素排列顺序 */

        justify-content: center

        /* 从主轴居中对齐 */

        justify-content: space-around

        /* 平分主轴剩余空间 */

        justify-content: space-between

        /* 两边对齐，中间评分剩余空间 */

        justify-content: space-evenly

        /* 间距相同 */

    }

CSS 兼容内核

-moz-：代表FireFox浏览器私有属性

-ms-：代表IE浏览器私有属性

-webkit-：代表safari、chrome浏览器私有属性

-o-：代表opera浏览器私有属性