CSS属性
CSS属性：box-decoration-break
box--盒，可以理解为元素盒模型
decoration--装饰，理解为元素样式
break--断行，参考word-break，理解为断行时候的表现
那么。这个属性可以先理解为，元素在发生断行时其样式的表现形式。
可选取的值只有两个：
{
box-decoration-break: slice; //默认值
box-decoration-break: clone;
}
属性：box-sizing
box-sizing顾名思义就是“盒尺寸”。
所谓box-sizing: border-box就是让宽度直接作用在border box上，从默认的content box变成border box。此时content box从宽度值中释放形成了局部的流动性，和padding一起自动分配width值。
例如：
{
box-sizing: border-box;
}
属性：max-width、max-height、min-width、min-height
/* 超越 !important */
超越 !important指的是max-width、max-height,而这种覆盖不是普通的覆盖，是超越覆盖。
在CSS世界中的 !important的权重相当高。但是，就是这么厉害的 !important，直接被max-width、max-height一个浪头就被拍沉了。
/* 超越最大 */
超越最大是指min-width、min-height。min-width覆盖max-width，此规则发生在min-width与max-width冲突时。
例如：
{
min-width: 100px;
max-width: 100px;
}
属性：background
/* 使用 background 创造各种美妙的背景 */
-- 背景基础知识 --
1. 纯色背景：background: #000;
2. 线性渐变：background: linear-gradient(#fff, #000);
3. 径向渐变：background: radial-gradient(#fff, #000);
4. 角向渐变：background: conic-gradient(#fff, #000);
属性：cursor:
CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。
/* 关键字值 */
cursor: pointer;
cursor: auto;
/* 使用URL，并提供一个关键字值作为备用 */
cursor: url(hand.cur), pointer;
/* URL和xy的坐标偏移值，最后提供一个关键字值作为备用 */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;
/* 全局属性 */
cursor: inherit;
cursor: initial;
cursor: unset;
属性：position
比如实现 TOP 在图片的左上角：
/* HTML */
<div>
<span>top</span>
<img src="./img/1.jpg" alt="" />
</div>
/* CSS */
span {
positon: absolute;
}
就这一行代码就完成了！
属性：direction
改变水平流向的direction：
{
direction: ltr; //默认值 - 表示left-to-right，就是从左往右的意思
direction: rtl; //表示right-to-left，就是从右往左的意思
}
举个例子：
/* HTML */
<p>
<img src="1.jpg" alt="美女" />
<img src="2.jpg" alt="风景" />
</p>
/* CSS */
p {
direction: rtl;
}
得到的效果是：美景图片显示在美女图片的前面。
属性：unicode-bidi
direction的黄金搭档unicode-bidi
unicode-bidi 兼容性比较好的几个属性值如下：
{
unicode-bidi: normal; //默认值
unicode-bidi: embed;
unicode-bidi: bidi-override;
}
1. normal: 正常排列；
2. embed: embed属性想要起作用，只能作用在内联元素上。通常情况下，embed属性值的表现和normal是一样的。normal与embed的区别在于：embed属性值的字符排序是独立的内嵌，不受外部影响。
3. bidi-override: 顾名思义，就是“重写双向排序规则”。
控制容器宽高比属性： aspect-ratio
只需要设定元素的宽，或者元素的高，再通过 aspect-ratio 属性，即可以控制元素的整体宽高：
/* HTML */
<div class="width"></div>
<div class="height"></div>
/* CSS */
div {
background: #ccc;
aspect-ratio: 1/1;
}
.width {
width: 100px;
}
.height {
height: 100px;
}
当容器大小变化，每个子元素的宽度变宽，元素的高度也随着设定的 aspect-ratio 比例跟随变化
文本的渐变：
{
background-image: -webkit-linear-gradient(left, #26acff 50%, #0088dc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
属性：contain
contain 语法
/* 暂时忽略 */
contain: none;
/* 设定了 contain: size 的元素的渲染不会受到其子元素内容的影响。 */
contain: size;
/* 设定了 contain: paint 的元素的子元素不会在此元素的边界之外被展示,这个特点有点类似与 overflow: hidden */
contain: paint;
/* 暂时忽略 */
contain: strict;
/* 暂时忽略 */
contain: content;
/* 暂时忽略 */
contain: layout;
/* 暂时忽略 */
contain: style;
Motion Path 实现直线路径动画
CSS Motion Path 规范主要包含以下几个属性：
1. offset-path：接收一个SVG路径，指定运动的几何路径
2. offset-distance：控制当前元素基于 offset-path 运动的距离
3. offset-position：指定 offset-path 的初始位置
4. offset-anchor：定义沿 offset-path 定位的元素的锚点。这个也算好理解，运动的元素可能不是一个点，那么就需要指定元素中的哪个点附着在路径上进行运动
5. offset-rotate：定义沿 offset-path 定位时元素的方向，说人话就是运动过程中元素的角度朝向
/* 示例 */
<div></div>
div {
width: 60px;
height: 60px;
background: linear-gradient(#fc0, #f0c);
//M 0 0 L 100 100，包含了2个命令序列
//M 0 0，表示将画笔移动到坐标0,0处
//L 100 100，表示从画笔当前位置，到100,100位置画直线
offset-path: path("M 0 0 L 100 100");
offset-rotate: 0deg;
animation: move 2000ms infinite alternate ease-in-out;
}
@keyframes move {
//offset-distance 可以实现元素沿着给定的path路径运动
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
//offset-path: path("");
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
HTML标签
input 和 button 按钮的区别：
区别在于两种按钮默认的 white-space值不一样，前者是pre，后者是normal，
所表示出来的现象差异就是：
当按钮文字足够多的时候，<input>按钮不会自动换行，<button>按钮则会。
去除 button 按钮的默认样式
{
margin: 0;
padding: 0;
border: 1px solid transparent; /* 边框设置透明 */
outline: none; /* 消除默认点击蓝色边框效果 */
background-color: transparent; /* 背景色设置透明 */
}
去除input输入框默认样式
{
background: none;
outline: none;
border: 0;
}
//修改输入框中的字体样式
::-webkit-input-placeholder {
}
标签 sub 与标签 sup
在HTML代码中，有两个标签语义就是下标和商标，分别是商标<sup>和下标<sub>。
记忆方法：就是看p和b两个字母的圈圈位置，如果圈圈在上面就是“上标”，如果圈圈在下就是“下标”。
上标与下标通常在数学公式、化学表达式中用的比较多。
伪类与伪元素
“:”表示伪类，而“::”表示伪元素。
:before/:after与::before/::after的区别：
:before/:after是在CSS2中的提取出来的，在CSS3中的写法应该是::before/::after，这是为了将伪类和伪元素区分开来。
<button>标签按钮与<button>标签按钮
按钮文字阅读宽度越宽，如果文字足够多，则会在容器的宽度处自动换行
button标签按钮是会自动换行的，
而input标签按钮中默认是white-space:pre;所有不会自动换行
清除浮动的方式
/* HTML */
<div class="container">
<div class="item"></div>
</div>
方式一：
使用overflow属性来清除浮动
.container {
overflow: hidden;
}
方式二：
使用contain属性来清除浮动
.container {
contain: paint;
}
方式三：
使用额外标签
.container::after {
content: '';
display: block;
clear: both;
}
滤镜
语法
filter: blur(5px); //模糊
filter: brightness(.5); //亮度
filter: contrast(200%); //对比度
filter: drop-shadow(10px 10px 10px blue); //阴影
filter: grayscale(100%); //灰度
filter: hue-rotate(30deg); //色相旋转
filter: invert(30%); //颜色反转
filter: opacity(50%); //透明度
filter: saturate(150%); //饱和度
filter: sepia(50%); //褐色
SVG
基本形状
<!-- 矩形 -->
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
x：矩形左上角的x位置
y：矩形左上角的y位置
width：矩形的宽度
height：矩形的高度
rx：圆角的x方位的半径
ry：圆角的y方位的半径
<!-- 圆形 -->
<circle cx="25" cy="75" r="20"/>
r：圆的半径
cx：圆心的x位置
cy：圆心的y位置
<!-- 椭圆 -->
<ellipse cx="75" cy="75" rx="20" ry="5"/>
rx：椭圆的x半径
ry：椭圆的y半径
cx：椭圆中心的x位置
cy：椭圆中心的y位置
<!-- 线条 -->
<line x1="10" x2="50" y1="110" y2="150"/>
x1：起点的x位置
y1：起点的y位置
x2：终点的x位置
y2：终点的y位置
<!-- 折线 -->
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
points：点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。
<!-- 多边形 -->
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
points：点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。
路径
<!-- 路径 -->
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
d：一个点集数列以及其它关于如何绘制路径的信息
M x y：“Move to”命令，从什么位置开始
L x y：“Line to”命令，画线
H：绘制水平线。
V：绘制垂直线。
Z：闭合路径命令。
<!-- 贝尔赛曲线 -->
<!-- 二次贝尔赛曲线 -->
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
Q：二次贝塞尔曲线Q，它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标
T：就像三次贝塞尔曲线有一个S命令，二次贝塞尔曲线有一个差不多的T命令，可以通过更简短的参数，延长二次贝塞尔曲线
<!-- 三次贝尔赛曲线 -->
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
C：三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数
S：命令可以用来创建与前面一样的贝塞尔曲线，但是，如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。下面是S命令的语法示例，图中左侧红色标记的点对应的控制点即为蓝色标记点。
弧形
A：弧形命令(A rx ry x-axis-rotation large-arc-flag sweep-flag x y)
rx：x轴半径
ry：y轴半径
x-axis-rotation：弧形的旋转情况
large-arc-flag：决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧
sweep-flag：表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧
最后两个参数是指定弧形的终点，弧形可以简单地创建圆形或椭圆形图标，比如你可以创建若干片弧形，组成一个饼图
渐变
<!-- 渐变 -->
为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。
<!-- 线性渐变 -->
线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在SVG文件的defs元素内部，创建一个<linearGradient> 节点。
示例：
<svg width="600px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="black" stop-opacity="0" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<rect width="100" height="100" fill="url(#Gradient1)" />
</svg>
<!-- 径向渐变 -->
径向渐变与线性渐变相似，只是它是从一个点开始发散绘制渐变。创建径向渐变需要在文档的defs中添加一个<radialGradient>元素。
示例：
<svg width="600px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="RadialGradient1">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<rect width="100" height="100" fill="url(#RadialGradient1)" />
</svg>
文本
在一个SVG文档中，<text>元素内部可以放任何的文字。
<text x="10" y="10">Hello World!</text>
<!-- tspan -->
该元素用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。
tspan元素有以下的自定义属性：
x：为容器设置一个新绝对x坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，它们将一个一个地应用到tspan元素内的每一个字符上。
dx：从当前位置，用一个水平偏移开始绘制文本。这里，你可以提供一个值数列，可以应用到连续的字体，因此每次累积一个偏移。
此外还有属性y和属性dy作垂直转换。
rotate：把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。
textLength：这是一个很模糊的属性，给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。
<!-- tref -->
tref元素允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用xlink:href属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。
<!-- textPath -->
该元素利用它的xlink:href属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走
基础变形
<!-- 平移 -->
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
<!-- 旋转 -->
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
<!-- 斜切 -->
利用一个矩形制作一个斜菱形。可用skewX()变形和skewY()变形。每个需要一角度以确定元素斜切到多远。
<!-- 缩放 -->
scale()变形改变了元素的尺寸。它需要两个数字，作为比率计算如何缩放。0.5表示收缩到50%。如果第二个数字被忽略了，它默认等于第一个值。
剪切与遮罩
<!-- 剪切 -->
属性clip-path引用了一个带单个rect元素的<clipPath>元素。注意，clipPath元素经常放在一个defs元素内。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
<!-- 遮罩 -->
遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现这一点。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="green" />
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
其他SVG内容
<!-- 嵌入光栅图像 -->
很像在HTML中的img元素，SVG有一个image元素，用于同样的目的。你可以利用它嵌入任意光栅（以及矢量）图像。它的规格要求应用至少支持PNG、JPG和SVG格式文件。
嵌入的图像变成一个普通的SVG元素。这意味着，你可以在其内容上用剪切、遮罩、滤镜、旋转以及其它SVG工具：
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200">
<image x="90" y="-65" width="128" height="146" transform="rotate(45)"
xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/>
</svg>
多媒体元素
音频元素
常用的格式：OGG,MP3,WAV
<audio controls>
<source src="./sound/bgm.mp3">
<source src="./sound/bgm.ogg">
对不起浏览器不支持，请升级浏览器
</audio>
视频元素
常用格式：OGG,MPEG4,MP4,WEBM,WAV
<video autoplay loop muted controls>
<source src="./video/intro.mp4">
不支持视频播放，请升级浏览器
</video>
##### 常用属性
- controls：设置视频和音频元素的控制界面
- autoplay：设置视频和音频自动播放 - 默认自动播放会失效
- loop：设置循环播放
- muted：设置静音，当视频静音后可以实现自动播放
