CSS3 强势笔记 ~

CSS3

css 属性查找网站

参考手册：reference manual website: http://css.doyoe.com

权威网站（实时）：Authoritative inquiry website : http://www.caniuse.com

处理兼容性的插件

antoprefixer

写完代码后可以把有兼容性问题的代码自动补齐。（是一种后处理器）

预处理器和后处理器

pre-processor（预处理器）

作用：用它的编写方式写代码，然后解析成标准的css代码执行。

插件：less/sass cssNext

cssNext：用来实现一些未来的标准的插件（未完全在各大浏览器实现的）

post-processor （后处理器）

作用：先用标准css语法去写，它会帮我们补充代码，比如兼容性。

插件：antoprefixer

postCss

介绍：

是一个工具。用js实现的css的抽象的语法树AST(Abstract Syntax Tree)。

会和很多插件相配合，最典型的就是cssNext和autoprefixer。

作用：

做前半部分的事，把css解析成一个语法树，可以在语法树上定义自己的功能。剩下的事留给后人来做。

后半部分由各式各样的插件来完成(充分体现了扩展性，200多个)。

CSS3 Selector

Relationship Selectors

E > F：直接子元素选择器

div > p {
div下一级子元素中的p元素   
}

E + F：下一个满足条件的兄弟元素节点

div + p{
    下一个兄弟元素节点，而且必须是p
}

E ~ F：下一群满足条件的兄弟元素节点

div + p{
下一群是p的兄弟元素节点，
}

Attribute Selectors

CSS2：

E[data~=“a”]

div[data~="a"]{
    元素为div且data属性中有a
}

E[data|=‘a’]

div[data|='a']{
    选择data属性为a或者a-xxx的元素
}

CSS3新增

E[data^=‘a’]

data属性以a开头

E[data$=‘a’]

data属性以a结尾

E[data*=‘a’]

data属性只要存在a

Pseudo-Element Selectors

E::placeholder

input::placeholder{
    color:red;//目前只能改颜色。 
}

E::selection：元素选中后的样式

我很棒
p:selection{
    color:red;//文字颜色
    background-color:white;//背景颜色
    text-shadow:1px 5px red;//文字阴影。横向1px 纵向5px 颜色红色
}

Pseudo-Classes Selectors

E:not(s)

div:not(.text/[class="text"]/..){
    选中不含not中属性的元素
}

E:root:根节点(html、xml)

:root{
 一般都这么来用   
}

E:target：元素身上的锚点被锚点链接选中时，使用此样式。

当选中锚点链接为box1的a元素时，锚点为box1的div背景变为红色。

div:target{
    background-color:red;
}

E:first-child E:last-child E:only-child E:nth-child(n) E:nthlast-child(n)

必须条件：

1. 元素为E
2. 是兄弟元素中的第n个

• E:first-child 第一个元素
• E:last-child 最后一个元素，两个条件都成立才可以
  
  注意：
  
  1)若选第一个p元素，不同父级元素内的第一个p元素都会被选中
  
  2)若使用p:first-child，第一个元素为 p 才能生效。
  
• E:only-child 只有元素为独生子的前提下才能被选中
  
• E:nth-child(n) 可以通过设置n的公式来批量选元素（在所有子元素中查数）
  
• E:nth-last-child(n) 倒着数，功能同上
  
  注意
  
  1）n从0开始查数，css从1开始数，比如 nth-child(1)就是指第一个元素。
  
  2）奇偶数可以直接用odd和even
  

注意：这五种写法都考虑其他元素对他们的影响。比如前面插入一个元素。所以并不是很常用。

E:first-of-type E:last-of-type E:only-of-pyte E:nth-of-type(n) E:nth-of-lastpyte(n) [常用]

• E:first-of-type 所选元素中的第一个元素。
• E:last-of-type 所选元素中的最后一个元素。
• E:only-of-pyte 选中元素中此类元素只有一个。
• E:nth-of-type(n) 可以通过设置n的公式来批量选元素（在所选子元素中查数）
• E:nth-of-lastpyte(n)倒着数，功能同上

这五种写法都无需考虑其他元素对他们的影响。很常用。

注意: E:nth-of-type(n)选取必须满足以下两个条件

1. 是兄弟元素中第n个元素(元素之间必须是兄弟关系)
2. 元素为E

踩坑记录：

6个li下面的.img元素，则要获取li:nth-of-type(n) .img，而不是li .img:nth-of-type(n)

E:empty E:checked E:enabled E:disabled

• E:empty 内容为空的元素。
• E:checked 为选中状态的元素（input)

    
input:checked+span::after {
       content: "有内鬼，终止交易！";
       background-color: green;
       color: #fff;
   }

• E:enabled 启用状态的元素
• E:disabled 禁用状态的元素

用法1：
 禁用/启用元素
用法2:
input:disabled/enabled{
   给含disabled/enabled属性的input添加样式
}

E:read-only E:read-write

• E:read-only 可读状态的元素
• E:read-write 可写状态的元素

用法1：
 文本框可读/可写
用法2:
input:readonly/readwrite{
   给含readonly/readwrite属性的input添加样式
}

border&background

border

border-radius

• 原理：在正方形的四个角放一个半径为n的圆形来进行切割。
• 一般写法：border-radius:10px -
• 升级写法：border-radius:10px 10px 10px 10px
• 最高级别：border-top-left-radius:10px 10px
• 最高级别简化写法：border-radius:10px 10px 10px 10px / 10px 10px 10px 10px;
  前面值和后面值一一对应。

box-shadow 阴影

inset：内阴影，默认外阴影

color：背景颜色

**box-shadow: offsetX offsetY blur spread **

横向偏移量/垂直偏移量/模糊值(边框两边加像素)/扩散(四个方向加像素)

多值应用：就是加多层阴影，可以任意层，相同参数的阴影会加重

    box-shadow: 
    inset 5px 0px 10px #F00,  
    5px 0px 10px #F00, 
    0px 5px 5px #Ff0,
    -5px 0px 5px #0f0,
    0px -5px 5px #00f;
注意：越往前，z-index越高。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tYfWMLIE-1589702984123)(E69AE6200F374F6EACD9BD7A7AE01668)]

border-image 边框背景图片

border-image-source 边框背景图片资源

可填写的值

• url()
• linear-gradient(#000,#fff);

brder-image-slice：切割

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZvFtprq-1589702984127)(16526A7516294480995133262ABD1A9C)]

• 注意：此属性必填，一般填border宽度。
• 可分开填4个值：10 10 10 10，代表四条分割线的位置

• 数字代表像素，但是不让填px
• 还可以填一个值fill，代表把内容区填充（完全可以用背景代替，一般不用）
• 默认值100%，四个角会填充整个背景图片

border-image-width 背景图片显示的宽度

• 默认值为1（和border宽度一样，一般不改动）
• auto 会拿border-image-sclice值，但是会加上px。
• border-image-width填的数字是border宽度的倍数，n*border宽度
• 自定义一般填px

borderimage-outset 背景图片往外延伸，就是把背景图片挤出border区域（不常用）

border-image-repeat

• stretch 拉伸
• repeat 平铺
• round 特殊平铺：当放不下第二个背景图片的时候，拉伸，当满足第二个背景图片一半宽度时，整体压缩，把第二个放进去。
• space 特殊平铺：当放不下第二个背景图片时，只显示一个，剩余空间空白填充，当能放下第二个背景图片时，再放进去。

整体写法

• border-image:source slice repeat;这三个一般放一起写。
• border-image-width和outset一般单独写出来
• 为什么slice不让填px而width有px呢，因为放在一起写的时候可以区分开。

background

复习：

• background-color
• background-image
• background-position
  • 如果只指定一个值，那么第二个值默认为 center 。
• background-repeat
• background-size
  • 常见宽高
  • cover 用一张图片，把容器填满而不改变图片比例
  • containe 在不改变图片比例的情况下，让容器包裹一张图片
• 注意：设置多个背景图片属性时用逗号分隔
  

background-image 背景图片

• url(),url()… 可添多个url()
• 可通过设置position同时显示多张背景图片
• 可以设置渐变色。
• 公司常见写法：
  • background-image:url(…/),url(…/容错图片.jpg);
  • 如果第一张图片没加载出来，或者出错，就会去加载第二种图片，有一个容错机制。
  • 一般来说第二张图片会非常小，一两k，防止第二张加载不出。
  • 若第二张加载不出，会留下一个白框。

background-origin 背景图片坐标摆放位置

• padding-box:默认，背景图片摆放位置以padding区域为参考。
• border-box:背景图片摆放位置以border区域为参考。
• content-box:背景图片摆放位置以content区域为参考。

background-clip 背景图片截断位置

• padding-box：padding区域以外背景图片截断（不显示）
• border-box：border区域以外背景图片截断（不显示）
• content-box:：content区域以外背景图片截断（不显示）
• text 文字区域显示背景（文字的颜色变成背景）

text具体用法
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
text-fill-color:transparent;

background-repeat

• repeat
• no-repeat
• repeat-x
• repeat-y
• round 平铺，容下一半宽度时放入，否则拉伸
• space 平铺，容下整个宽度时放入，否则空白填充
• round space ,垂直round,水平space

background-attachment 背景图片的定位方式

• 只对有滚动条容器有效果
• scroll 相对于容器fiexd定位，容器滚动背景图片不动。
• local 容器滚动背景图片跟着滚动。
• fiexd 相对页面进行fiexd定位（没卵用）

filter滤镜

filter:blur(10px); //高斯模糊

如何设置背景模糊内容清晰？

可以设置一个和内容同级的元素，将模糊设置到这个元素上

注意z-index的层级

如果bg在兄弟元素的最前面，则不需要加层级，后面的会覆盖在它上面

如果bg在兄弟元素的后面需要将层级设置为-1，将父元素层级设置为0

渐变色

linear-gradient()线性渐变

• linear-gradient(#fff,#000)（默认从上向下）
• linear-gradient(to right,#fff,#000)（向右）
• linear-gradient(to top right,#fff,#000)（向右上）
• linear-gradient(30deg right,#fff,#000)（自定义角度，30度）
• linear-gradient(#fff 30px,#000 50px)（颜色起止位置。#fff从30px开始往后去渐变为#000,最多渐变到50px变为#000）
• 注意，层级再背景之上

radial-gradient()镜像渐变

• radial-gradient(#fff,#000)（默认向外变色）
• radial-gradient(#fff 20px,#000 40px)（颜色起始位置，从圆心开始20px往后开始渐变）
• radial-gradient(circle at 100px 0px ,#fff,#000)设置圆形圆心位置：left:100px top:0px
• radial-gradient(ellipse at 100px 0px,#fff,#000)设置椭圆圆心位置：left:100px top:0px
• radial-gradient(#fff,#000)（默认向外变色）
• 注意，层级再背景之上

ellipse 椭圆的一些其他属性

• ellipse closest-corner at 100px 0px ：放射边界到最近的角就截止
• closest-side at 100px 0px ：放射边界到到最近的边就截止
• farthest-corner at 100px 0px ：放射边界到到最远的角就截止
• farthest-side at 100px 0px ：放射边界到到最远的边就截止
  
  注意:

1. 使用这些属性时可以不写ellipse
2. 椭圆就是于可变化宽高的圆形

color

前面学过：

• rgb()
• rgba()
• #000
  
• hsla（新加）:
  
  H:Hue(色调)。0（或360）表示红色，120表示绿色，240表示蓝色。取值范围 0-360
  
  S:stauration(饱和度).取值范围 0.0% - 100.0%
  
  L:Lightness(亮度)。取值范围 0.0% - 100.0%
  
  A:Alpha透明度。取值0 - 1之间。
  
  注意:hsl也可以用。
• currentColor 中转颜色。
  • 解释：不写border-color的时候，默认currentColor,指向文本的颜色。

text

复习：

• font
  • font-size
  • font-family
  • font-color
  • font-weight
• text
  • text-align 文本对齐方式
  • text-overflow 文本超出部分处理
  • text-indent:2em;(文本缩进)
  • text-decoration:underline;(下划线)
    开始：
    

text-shadow 阴影

基本用法：

text-shadow:x偏移 y偏移 模糊度 颜色;

浮雕效果

text-shadow:1px 1px #000,-1px -1px #fff;

镂刻效果

text-shadow:-1px -1px #000;

霓虹灯效果/火焰效果/红蓝错乱效果/文字背景显示图片

text-shadow: 0px 0px 10px #0ff, 0px 0px 20px #0ff;
text-shadow:    0px 0px 10px #f00,
                0px 0px 20px #f00, 
                0px -5px 10px #f00,
                0px -10px 20px #f00,
                0px -10px 20px #f00, 
                0px -15px 30px #f00;
text-shadow:    0px 0px 10px #f00,
                0px 0px 20px #f00, 
                0px -5px 10px #f00,
                0px -10px 20px #f00,
                0px -10px 20px #f00, 
                0px -15px 30px #f00;
                
text-shadow:    -10px -10px 3px rgba(255,0,255,.2),
                5px 5px 3px  rgba(0,255,255,.2);
                background-image: url("../img");
                -webkit-background-clip: text;设置背景显示在text上
                background-clip: text;
                -webkit-text-fill-color: transparent;
                text-fill-color: transparent; 设置文字填充颜色

-webkit-text-stroke 描边效果

基本用法

-webkit-text-stroke:1px red; 1px的红色边框

有趣玩法:文字有电路图效果（试了好像不行）

color:transparent;
font-family:simsun;
-webkit-text-stroke:1px green;

white-space: pre; 格式化文本

word-break:

• keep-all;不换行
• break-all;到边界就强制换行
• break-word;尽可能保留单词的完整性

word-wrap/overflow-wrap

• break-word;尽可能保留单词的完整性

columns 多列

columns:300px 4 // 300px宽，4列

column-count:3;3列

column-gap:30px;空隙，30像素宽，默认16px

column-rule:solid;分割线,和border一样可以填任意属性值

cloumn-width:200px; 一列的宽度，会随父级宽度变化去自动拉伸压缩。常用方法是固定父级宽度。
p标签使用：
column-span:all;//贯穿整行。

引入外部字体

• 用法：

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

• 注意：

1. 如果是英文网站，字体包也就需要1m左右，可以引入。但是中文有几万个字，如果是全部字体改变的字体包，可能10m左右，一般不会用来引入。
2. 一般引入字体包的情况，是字体包中只有需要的艺术字，而非全部的文字。
   
   详解：
   
   下面是一些历史进程，文字格式的问题，大致了解就好
   
   对应的字体格式类型 字体格式.后
   
   truetype 微软 苹果 .ttf
   
   poentype 升级版 .opt
   
   woff 上面两个压缩版 .woff .eat …svg
   
   其实是浏览器执行一种MIME协议，然后通过请求系统打开这些文件显示到浏览上显示 format（字体格式提示器）猜测是从电脑系统里面建立一种映射，来打开这些字体格式。

BOX

复习

正常盒子组成：border+padding+content

计算方式：boxWidth = width + border2 + padding2

overflow

• overflow-x
• overflow-y
  
• 注意：
  • 只要-x或者-y设置了非visible的值，另一个属性默认值会设置为auto
  • 一般分开设置x和y
  • 常用 overflow-x:auto;
  • 为什么用auto不用scroll，因为用scroll时，若超出，则两个方向都会显示。
    还可以填的值：
    
• visible不处理，默认
• hidden 隐藏溢出部分，且不出现滚动条
• scroll 隐藏溢出部分，且出现滚动条
• auto 当内容没有溢出时不出现滚动条，溢出了出现滚动条。

resize 让用户调节大小

• none 不可调节
• both 两个方向
• horizontal 水平
• vertical 垂直方向
• 注意1：必须设置overflow属性。
• 注意2：会使页面重排，尽量不要用

IE6混杂模式盒子

启动方式：box-sizing:border-box;

和原先盒子的区别：计算方式不同

boxWidth = width;

contentWidth = width - border2 - padding2

—和创建bfc区域有点类型

flex弹性盒子

设置一个弹性盒子：

dispaly:flex / inline-flex;

可用的属性值

写到父级的属性

• flex-direction:row;主轴方向
  • row(默认，主轴为水平方向，自左向右)
  • row-reverse(主轴为水平方向，自右向左)
  • column(主轴为垂直方向，自上向下)
  • column-reverse(主轴为垂直方向，自下向上)
• flex-wrap:换行
  • no-wrap(默认不换行)
  • wrap（换行）
  • wrap-reverse (倒着换行，456 / 123)
• flex-flow:flex-direction flex-wrap;
• justify-content:对齐
  • flex-start 基于主轴头部对齐
  • flex-end 基于主轴尾部对齐
  • flex-center 基于主轴居中对齐。
  • space-between 两边必须有元素，中间自适应。
  • space-around 元素均匀分配空隙，两测的边距为元素间距的一半。
• align-items: 交叉轴位置
  • center/flex-start/end; 交叉轴（纵轴）位置居中/靠上/靠下显示
  • stretch; （这个是默认值，当内部元素不设置宽高的时候，会把元素拉伸）
  • 注意：当出现多行时，每行元素会平均分配高度
• align-content: 交叉轴位置
  • 注意：
    1. 单行时和align-items效果相同
    2. 多行时，每行元素会根据属性，依次排列，不会平均分配高度。
    3. 多行设置nowrap时，nowrap生效，content失效
  • flex-start;元素依照交叉轴靠上显示
  • flex-end;元素依照交叉轴靠下显示
  • flex-center;元素依照交叉轴居中显示
  • space-between 两边必须有元素，中间自适应。
  • space-around 元素均匀分配空隙，两测的边距为元素间距的一半。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lIai9QYi-1589702984145)(FDFFEBA994D04416A4BDBEC7A199B6B5)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9B6m126X-1589702984147)(EDBCD28B3523434FB39B509684DCF70E)]

设置到子项的属性

• order:number; 数字大的往前排，尽量填负数，默认值为0，但是填1也会排在没写此属性元素的后面。
• align-self:子项相对交叉轴的位置（父align-content>子align-self>父>align-items）
  • center;
  • flex-start;
  • flex-end;
  • stretch; （这个是默认值，当内部元素不设置宽高的时候，会把元素拉伸）

flex伸缩属性

• flex-grow:1; 盒子把主轴方向上剩余的空间按照设置比例给瓜分掉。默认为0，不瓜分
• flex-shrink:1;压缩比例 默认为1
• flex-basis:50px; 可以覆盖whidth值。默认auto，就是计算width的宽度。
• flex-shrink详解：
  • 1.一旦内容宽度超出了容器，flex-grow就会失效，成为0的状态
  • 2.公式：假设3个容器宽度为200px,200px,400px,压缩比例为1：1：3，
    • (1) 先计算加权值：200px1 + 200px1 + 400px*3 = 1600px
    • (2) 三个容器所分的像素： 200px*1/1600(比例)*200px=25px，所以此容器压缩25px，以此类推。
    • (3) 总结：(内容区大小)*shrink + … = 加权值
  • 3.默认1，可以设置为0，不参与压缩
  • 4.格外注意：公式计算的容器像素，计算的是content的宽度，所以加border或padding的时候会出现精度不准的问题。
  • 5.无论什么情况，被内容撑开的容器不参与运算。
  • 6.标准盒子和弹性盒子都是此公式。
• **flex-basis和width的注意点 **
  • 1.flex-basis权重高于width
  • 2.只写basis或者basis大于width的时候，flex-basis代表容器最小宽度
  • 3.当两个属性都有并且basis小于width的时候，flex-basis代表容器最小宽度，width代表容器的最大宽度。
• 如果想让内容区正常的话，最好加上word-break:break-word;可以防止英文撑大容器导致出错

flex简写

• 默认：flex:0 1 auto;
• flex:1; -》 flex:1 1 0%;
• flex:auto -》flex:1 1 auto;
• flex:none -》 flex:0 0 auto;
• flex: 0 auto 或者flex:initial -> flex:0 1 auto(即初始值);

弹性盒子应用

demo

transition 过度

transition-property 过渡属性

• all 所有具备动画过渡的元素
• width,height… 可以规定特定值进行过渡

transition-duration 时间间隔

transition-timing-function 运动状态函数

贝塞尔曲线 cubic-beseir(1, 1 , 1 , 1); 匀速运动

• linear 线性过渡。等同于贝塞尔曲线 （0,0,1,1)
• ease 平滑过渡。等同于贝塞尔曲线 （0.25,0.1,0.25,1)
• ease-in 由慢到快。等同于贝塞尔曲线 （0.42,0,0.58,1)
• ease-out 由快到慢。等同于贝塞尔曲线（0,0,0.58,1)
• ease-in-out:由慢到快再到慢。等同于贝塞尔曲线（0.42,0,0.58,1.0)

三次贝塞尔曲线详解

• cubic-besier(0,0,1,1)
  • 贝塞尔曲线的起点和终点是固定的
  • 三次贝塞尔曲线有两个控制点，n次贝塞尔曲线有n-1个控制点
  • 0,0,1,1 代表的是两个控制点的坐标 (x,y)(x,y)
  • 曲线的斜率代表运动的速度，斜率越大，速度越快。
  • 可以通过浏览器来调试贝塞尔曲线
  • 公式：B(t) = P₀(1 - t)³ + 3P₁t(1 - t)² + 3P₂t²(1 - t) + P₃t³ ,t ∈ [0,1]
  • 注意点1：x轴区间为[0,1] ,y轴可以任意取
  • 注意点2：y轴小于0的时候，斜率会出现负值，这时会反方向运动一段距离。y轴大于0的时候，会冲出一段距离，再回到终点。

transition-delay 等待xx秒后执行

组合使用：transition:all .1s swing 1s,…可以多值;

Transform: 变换

transform:

translate() 平移

• translate(x,y) 元素相对自身位置向x轴y轴移动一定距离。

• translateX(-50%) 相对自身位置向左移动自身一半的距离。

• translateY(-50%) 相对自身位置向上移动自身一半的距离。

• translateZ(-50%) 相对自身位置向后移动自身一半的距离。

  • 3d效果：transfrom : rotatey(…) translatez(…)
  • 使用z轴时需要父级元素加景深

• translate3d(x,y,z) 上面组合

• 注意
  

  • 可用于居中:left:50%;top:50%;transfrom:translate(-50%,-50%),在不知道元素宽高的情况下，这个就很好用。
  • 知道自身宽度时直接 left:calc(50% - 50px);
  • 使用此translate()后，坐标轴会跟着变化， 所以在translate 后面加 rotate属性无效，因为轴已经跟着变了，应该讲rotate属性放前面。

rotate() 旋转

• rotate(45deg) 默认沿z轴旋转45度（即平面旋转）
• rotatex() 沿x轴旋转
• rotatey() 沿y轴旋转
• rotatez() 沿z轴旋转
• rotate3d(x,y,z,0deg)
  • x,y,z设置的比值，就是这个矢量的方向，也就是轴的朝向。
  • 比如rotate3d(1,1,1,90deg);图像的轴指向就是平面指向右下角，垂直斜角指向45度，然后在这个轴上旋转90度。
  • 3个数的大小不重要，重要的是比例。x=1,y=1。轴的方向就是指向右下。x在点1的位置，y在点1的位置，从(0,0)到(1,1)就是轴的位置
• 注意：
  • transfrom:rotatey(90deg) rotatex(45deg);
  • transfrom:rotatex(45deg) rotatey(90deg) ;
  • 旋转的先后顺序不同，效果不同

scale() 伸缩

• scale(x,y) //大于0放大，小于0压缩
• scalex(1.5)
• scaley()
• scalez()
• scale3d(x,y,z)
• 注意点1：伸缩的是此元素的变化坐标轴的刻度，不是元素本身
  • 也就是说，在元素上进行像素值等操作时，无需顾忌是否被伸缩
• 注意点2：可以进行叠加操作，即从改变后的基础上继续操作
• 注意点3：配合rotate()使用会出现的情况
  • scale伸缩轴会跟着旋转来变动。特点：雁过留声，就是没旋转时伸缩，再进行旋转时伸缩比例还是旋转前的，先旋转再伸缩时，伸缩轴就会跟着旋转轴来一直变化，也就出现了图片比例在一直变化的情况。
  • transfrom:rotate(45deg) scale(1,2) //旋转时图片缩放比例为设置比例（正常）
  • transfrom:scale(1,2) rotate(45deg) //旋转时图片比例随时在变化，x轴和y轴缩放比例一直保持1：2
• 注意点4（踩坑）： 缩放背景图片时可能会出现轻微抖动，加上translatez(0),让gpu来控制动画可以解决。

skew 倾斜

• skew(xdeg,ydeg)
• 倾斜的是坐标轴。
• 倾斜的时候，也被拉伸了

perspective(800px) 在元素自身上加景深

- 写的话最好填在开头位置 transform:perspective(800px) ...，若不填在开头位置，在一些浏览器上可能会不识别
- 不能调节origin的值

backface-visibility:hidden/visible;设置图片背面不显示，默认可以

3d旋转bug：隐藏背面不管用，后面图片会投到前面，设置个背景颜色就好了

图片变换的底层原理：matrix() 矩阵

• 矩阵就是transform给咱们选中的计算规则
• 向矩阵传入参数，通过系统的计算得出需要的结果
• transform的基础就是把图像上的每一个点进行变换

原理公式
| a,c,e |   | x |   | ax + cy + e | 
| b,d,f | * | y | = | bx + dy + f | 
| 0,0,1 |   | 1 |   | 0 + 0 + 1   |  //这一排是系统方便计算用的，不用管

第一个矩阵用来传入参数，有些值可能给固定了
第二个矩阵的x和y就相当于图片的每一个点的原始坐标
第三个矩阵就相当于我们最终想要的位置   

2d平移公式：
| 1,0,e |   | x |   | x + e |
| 0,1,f | * | y | = | y + f | 
| 0,0,1 |   | 1 |   1           //这一排是系统方便计算用的，不用管
参数只能传e和f，所以图像会根据e和f来移动x和y的坐标
把他翻译到功能函数中就这么写：
matrix(1,0,0,1,e,f) === translate(x,y);

其他方法的矩阵原理:
scale()伸缩  矩阵公式
| a,0,0 |   | x |   | ax |
| 0,d,0 | * | y | = | dy | 
| 0,0,1 |   | 1 |   1           //这一排是系统方便计算用的，不用管
matrix(a,0,0,d,0,0) === scale(x,y);

rotate()旋转 矩阵公式
| cos(*),-sin(*),e |   | x |
| sin(*),cos(*) ,f | * | y | 
| 0     ,0      ,1 |   | 1 |
matrix(cos(*),sin(*),-sin(*),cos(*),0,0) === rotate(*) //直接写rotate()更简单 

3d原理公式
| a,c,g |   | x |   | ax + cy + g | 
| b,d,h | * | y |   | bx + dy + h | 
| e,f,i | * | z | = | ex + fy + i | 
| 0,0,1 |   | 1 |   | 0 + 0 + 1   |  //这一排是系统方便计算用的，不用管

matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1) 缩放
matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1) 平移  

• 日常使用方法
  • 矩阵是反着推的
  • 先通过效果把第三个矩阵写出来，再反推出第一个矩阵，从而得出matrix()
  • 注意：matrix()是上下上下数。最后一排无视

实践一下：
想让一个图片垂直方向对调。如 a--b 变成 b--a
第一步：根据效果得出第三个矩阵：
| -x |
| y  |
| 1  |
第二步：结合第二个矩阵得出第一个矩阵
| -1,0,0 |   | x |   | -x | 
|  0,1,0 | * | y | = | y  | 
|  0,0,1 |   | 1 |   | 1  |  //这一排是系统方便计算用的，不用管
第三步：得出matrix()矩阵参数
matrix(-1,0,0,1,0,0)

transform-origin：设置变换中心原点位置（相当于眼睛位置）

• 设置到元素上，设置元素的变换中心点，不设置的话默认在元素平面的中心点。
• transform-origin:50px 50px 50px; 旋转中心位置,比如这是一个100px的立方体，旋转中心就在立方体中心位置。

transform-style：变化风格

• preserve-3d;会在此区域创建出很多层图层，增强3d效果。
• 常用方法：一般和景深放一起。加上肯定没错的。

perspective景深

• 设置到父级上
• 当子元素设置z轴时有立体效果
• perspective:800px
• 景深可以叠加。（父+子）
• 一旦设置了perspective或者transform-style，景深就变成了子元素定位的参照物
• 看到的都是投影上显示的形状，所以当translatez小于100时，距离越近看的越小
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8GwYPmHy-1589702984149)(F962A26FAC4E4B09AE9C64612A808DDC)]

perspective-origin：设置旋转原点位置

• 设置到父级上
• perspective-origin:center center 默认原点在中间
• perspective-origin:top left;…

animation 动画

animation-name 动画名称

关键帧容器@keyframes

• 定义关键帧

@keyframes run{
    0%{ //0%可以写成from{}
        left: 500px;
        top: 500px;
        background-color: red;
    } 
    50%{}
    100%{}//100%可以写成to{}
}

• 使用
  
  animation:run 1s , run2 2s; //可以多个关键帧并行
  
  @-moz-…实战时做兼容

animation-duration 持续时间

animation-timing-function 过渡类型（传运动函数）

• linear 线性过渡。等同于贝塞尔曲线 （0,0,1,1)
• ease 平滑过渡。等同于贝塞尔曲线 （0.25,0.1,0.25,1.0)
• ease-in 由慢到快。等同于贝塞尔曲线 （0.42,0,0.58,1)
• ease-out 由快到慢。等同于贝塞尔曲线（0,0,0.58,1)
• ease-in-out:由慢到快再到慢。等同于贝塞尔曲线（0.42,0,0.58,1)
• cubic-bezier(0,0,1,1) 贝塞尔曲线

animation-delay 延迟时间

animation-iteration-count 运动次数

• infinite 无线循环
• number

animation-direction 关键帧的方向

• normal 默认
• reverse 反转 从 100% -> 0% 运动
• alternate 100% -> 0% 0% -> 100% … 正反循环运动。前提:运动次数大于2
• alternate-reverse 0% -> 100% 100% -> 0% …同上

animation-play-state 运动状态

• running 默认值
• paused 运动暂停（有兼容性问题，有些浏览器会出现问题，不要用）

animation-fill-mode 保留状态

• forwards 保留运动结束后的最后一帧（不会变回初始状态）
• backwards 运动开始之前保留第一帧的状态（即使没开始动画，也变为0%的状态）
• both 上两个的结合：保留开始和结束的状态

steps 跨步

• 作用：从一帧到下一帧本来是渐变过去，使用steps变成分步变色。可以理解为从动画变成ppt
• end 保留当前帧状态，直到这一帧动画结束（注意，若下一帧是最后一帧，当跳转的时候动画也就结束了，所以不会捕捉到最后一帧。如果需要可用forwards解决）
• start 保留下一帧状态，直到下一帧动画结束（注意，不会显示第一帧）
• 使用

 animation: fun 1s linner steps(1, end)

• 特殊值：
  • step-end === steps(1, end)
  • step-start === start(1, start)

简写： animation: fun 1s linner。。。

gpu&layout（性能优化）

科普知识：cpu和gpu

• cpu：中央处理器
  • 擅长基于逻辑的数学运算，与或非…
• gpu：显卡
  • 图片绘制…
  • 适合高精度的浮点数运算
  • 专业gpu都是点阵式，通过点的变化来完成图像变化
  • 家用gpu是通过矩阵或者多边形叠加的方式来完成图像变化。
  • css3的动画都是用矩阵的原理完成的，也就是点阵式，所以是比较烧性能的。
  • 所以尽量不要有太多的复杂变化。
  • 没有gpu的时候就会用cpu来计算，cpu的算力远不如gpu

浏览器渲染机制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Fe4Ek1A-1589702984150)(47ECB979338447B5A24852C7D4BC469B)]

什么情况下会触发reflow(重排)

• 改变窗口大小
• 改变文字大小
• 内容的改变，输入文字
• 激活伪类，如:hover
• 操作class属性
• 脚本化操作DOM
• 计算offsetWidth和offsetHeight
• 设置style属性
• 如果要改动一些属性：不要用很多个.style，尽量用定义好的class，直接更改class属性，触发一次怎么也比触发很多次节省性能

什么情况下会触发repaint(重绘)

• 只是改变某个元素的颜色，不影响布局的属性
• repaint 速度快于 relfow

css3怎么性能优化

• 因为css3会很消耗性能，所以最好交给gpu来做
• 虽然可能会让gpu来做，但是最好还是和gpu说一声，让gpu来帮忙做这件事。

gpu操作是在另一个层面来操作。哪些指令能触发gpu这个层呢？

• 改变opacity
• transform:translate3d()/translatez();
• 比如开发时使用transform了，不管你前面填了啥，最好在最后填上个 translatez(0),叫gpu来操作，能节省一些效率。
• gpu加速，最标准属性：will-change:tranform
  • 启动这个后系统会一直监听，等待执行，也不太好，所以有下面最标准使用方法。
  • 标准使用方法：
    • 比如点击触发某些动画时，可以在点击的元素上加个hover，当hover的时候加上这个属性。
    • 最好的用法就是在触发动画的前一刻再加这个属性。

一般浏览器刷新页面的频率 1s 60次

• 也就是每16.7mm刷新一次页面
• 如果编码结构足够节约效率，gpu可以在一帧里渲染好页面，那么当改动页面元素或者实现动画的时候，将会非常流畅。

screen&px 显示器的成像原理和像素的实际意义

空间混色法

• rgb是三原色
• 一个像素由三个像点来构成r g b ==> 空间混色法

crt显示屏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2Hk84Jr-1589702984151)(DEA046CF9F104EEABC0C80AD84E5C24C)]

• 成像原理：

1. 屏幕最末端有电子枪，可以打出电子束，电子束打到屏幕上
2. 屏幕上会有荧光粉（rgb三种，排列方式有两种，圆点型和栅格型）， 在接受到电子束的时候会变亮
3. 根据电子束强弱的不同，每个被点亮的荧光粉的颜色强弱不同，最后混合出不同的颜色形成一个像素点
4. 最后多个像素点成像

• 电子束容易散射，可能会相互影响，所以中间加一个荫罩层，用于矫正电子束。

lcd/led液晶屏

• 成像原理

1. 通过磁场可以改变液晶屏的每一个点的状态是固态还是液态
2. 当这个点是液态时，光就能过去，固态的时候光就过不去。
3. 当这个光透过后可以把光打到滤光片上（有无数个滤光片，排列方式还是rgb形式）
4. 白光打到每个像素中不同的滤光片上会出现不同的颜色，再经过混色成像。

1px有多大

• 屏幕像素排列结构-品字原点形
  
  可以说是点距，也就是两个相同点之间的距离（点距大小约等于像素大小，点距完全等于像素大小吗？不一定。可以表示像素大小吗?可以的。）
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PVc0JCR9-1589702984151)(2BBDA2F799A7494680332A633CA246BE)]
• 屏幕像素排列结构-栅格型
  
  点距就是两个相同颜色的距离，也就是真实的像素距离。
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tztYgB2S-1589702984152)(AC4D6EF9B5734FA88A8F478E348A2E7C)]

像素详解

• 像素是相对单位

物理像素 === 设备出厂时，像素的大小

dpi(ppi)

一英寸所能容纳的像素点数。能容纳的像素点数越多，代表像素越小，成像效果越好。

1 in = 2.54cm
96dpi ≈ 2.54 / 100 = 0.25mm 如果屏幕为96dpi也就是一像素的宽度约等于0.25毫米

css像素（参照像素）== 逻辑像素

• 96dip 一臂距离的视角去看，显示出的具体大小
• 标杆 1/96 * 英寸
• 具体实现：
  • 96dpi ≈ 1:1
  • 200dpi ≈ 2:1
  • 解释：就比如96dpi下是100px ，换成200dpi的时候，屏幕会把100px再乘2
• 设备像素比 dpr = 物理像素/css像素[参照像素]（200dpi/96dpi)
• 美工给图的时候会按照高像素屏幕的物理像素来给我们图片的尺寸，所以我们要转换为逻辑像素的时候需要除dpr
• 我们也管css编程的逻辑像素方式，叫做逻辑屏幕

看屏幕的好坏不看分辨率

• 1920 * 1080 固定宽高下，展示的像素点数。这个得根据屏幕大小来判断，1寸的1920.。和10寸的1920.。那肯定不一样
• 所以要看dpi，没有也可以自己算出来。

响应式网页开发

• 用户通过什么来看页面？pc端（电脑），移动端（手机、平板）–（大小/分辨率不同）
• 如何使页面在不同的设备上展示的效果相同？ ——》响应式网页设计

简介

真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。

作用：

只需要开发一套页面，就能让用户在不同的设备上看到的页面呈现的效果是完美的。

模拟移动端的 meta

作用：适配各种不同分辨率的设备。

将页面大小，根据分辨率不同进行相应的调节，以展示给用的的大小感觉上差不多

    
    默认 980px 1024px

• content="width=device-width 代表视口宽度设置为当前屏幕大小
  
  
• initial-scale=1.0 初始化缩放比。也是针对视口而言的。
  作用同上，为ios做兼容。因为上面只涉及宽度，ios横屏的时候宽度还是屏幕的宽度，不能自适应。
  
  
• 为什么不只写initial-scale=1.0?
  
  在window phone ie浏览器上，横屏宽度=竖屏宽度,不能自适应。

属性

• width:视口宽度
• device-width:设备宽度
• user-scalable=no 是否允许用户缩放
• minimum-scale:最小缩放比
• maximum-scale:最大缩放比

实现必备知识

• 流体网格布：可伸缩的网格，元素大小宽高不固定可伸缩
  • flex
  • 百分比
  • 浮动
• 弹性图片：图片宽高不固定（可设置min-width:100%)
• 媒体查询：让页面载体不同的终端上面展示效果相同（用户体验相同），在不同的设备上，均显示合适的页面
• 主要断点：设备宽度的临界点 -> 根据不同的宽度展示不同的样式
• 响应式网页开发主要是在css样式上面操作的。为什么不用js来控制实现
  • 代码偏多
  • 加载速度变慢
  • 监听过程当中，可能会对页面有一定影响

主要断点详解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H9RwqYtR-1589702984153)(B77C0B1AAD4D4A519F176F2B2A9DC56C)]

媒体查询

媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。

css2:media type(媒体类型)

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。

• 常用属性：screen:用于电脑屏幕、平板电脑、手机等
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMdVo1nY-1589702984153)(1024F5FCE3EE46948F899399683FBA0B)]

css3:media query(媒体查询)

media query是CSS3对media type的增强，事实上我们可以将media query看成是媒体类型(media type)+css属性(媒体特性Media features)对设备进行判断。

媒体特性Media features

• 注意：媒体特性使用时加括号-> (max-width:375px)
• width/max-width/min-width
• height/max-height/min-height
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9bM4gXIt-1589702984154)(90365F1C7E204CFC9FD42C2E7211C8B3)]

关键字

• 合并多个媒体属性：and
• 指定备用功能(相当于or)：,
• 指定否定条件:not
• 让早期浏览器隐藏媒体查询：only ps:加上only后如果不支持媒体查询会忽略媒体查询部分（如早期浏览器），支持则无影响

媒体查询使用(引入方式)

ps:希望在屏幕大小小于375px的设备上面作用这个样式

• 外部引入
• 外部引入 @import ‘index.css’ screen and (max-width:375px);
• css里面引入 @media screen and (max-width:375px){…}
• 注意
  1. 媒体类型和媒体特性用and连接
  2. 权重为0，一般放在最后来写

单位值

• rem ：rem是CSS3新增的一个相对单位（root em，根em）相对的只是HTML根元素。
• em：相对本身的font-size大小。
• px：像素px是相对于显示器屏幕分辨率而言的。
• Vw：相对于视口的宽度。视口被均分为100单位的vw。一般用在移动端开发里面
• Vh：相对于视口的高度。视口被均分为100单位的vh。一般用在移动端开发里面
• Vmax： 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。移动端开发
• Vmin：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。移动端开发

响应式设计是最佳选择吗？

不是的，根据实际情况来决定。

• 内容设计通过响应式设计思路解决，项目的预算，目标用户以及定位决定了其实现方式。

• 开发思路
  渐进增强 —》 先兼容老版本 再向上兼容 兼容最新设备
  优雅降级 —》 开发通用版本 再兼容老版本 向下兼容

• 一般做响应式开发时思路：
  
  先移动端 —》 pc端
  
  先iphone6为初始原型 开发 —》 兼容其他的设备 ====》 渐进增强

3d方块效果总结

重点：

此处box代表一个方块，包含六个面

1. 如果box自身会变化角度(rotate)，则需要在自身加上transform-style: preserve-3d;
2. 如果box自身会变化角度(rotate)，则父级必须加景深perspective: 1000px;
   • 如果父级也会变化角度(rotate)，则在父级的父级加景深

构建一个3d方块：

1. 设置.box 样式

        .box {
            transform-style: preserve-3d;
            position: relative;
            width: 300px;
            height: 300px;
        }

2. 设置 面 的基本样式

        .box div {
            width: 300px;
            height: 300px;
            border: 1px solid;
            position: absolute;
        }

3. 分别设置六个 面 的样式

主要思路：设置上下左右面时，都顺时针转，只调整初始位置

        /* 前 */
        .box div:nth-child(1) {
            background-color: red;
            transform: translateZ(150px);
        }
        /* 后 */
        .box div:nth-child(2) {
            background-color: blue;
            transform: translateZ(-150px);
        }
        /* 上 */
        .box div:nth-child(3) {
            background-color: green;
            transform: rotateX(90deg) translateZ(150px);
        }
        /* 下 */
        .box div:nth-child(4) {
            background-color: yellow;
            transform: rotateX(90deg) translateZ(-150px);
        }
        /* 左 */
        .box div:nth-child(5) {
            background-color: greenyellow;
            transform: rotateY(90deg) translateZ(-150px);
        }
        /* 右 */
        .box div:nth-child(6) {
            background-color: orange;
            transform: rotateY(90deg) translateZ(150px);
        }

css3轮播图

html:

    <div id="pic">
        <ul class="inner">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
        </ul>
    </div>

css:

#pic {
    width: 100vw;
    height: 36vw;
    position: relative;
    overflow: hidden;
}

#pic .inner {
    width: 300vw;
    display: flex;
    position: absolute;
    left: 0;
}

#pic .inner li {
    width: 100vw;
    height: 36vw;
}

#pic .inner li img {
    width: 100%;
}

js:

let pic = document.getElementById("pic");
let picUl = pic.querySelector('ul');
let picLi = picUl.children;
let index = 0;

let headLi = picUl.firstElementChild.cloneNode(true);
picUl.appendChild(headLi);

picUl.style.width = picLi.length * 100 + 'vw';

function move() {
    picUl.style.transition = 'left .5s';
    picUl.style.left = -index * 100 + 'vw';
}

// 页面失去焦点时不会触发这个事件
picUl.addEventListener("transitionend", function() {
    if (index == picLi.length - 1) {
        picUl.style.transition = ''
        picUl.style.left = 0;
        index = 0;
    }
})

function autoPlay() {
    index++;
    //这个条件是为了防止页面失去焦点的时候定时还在走，cn也在加，那就会超出范围
    if (index > picLi.length - 1) {
        index = 0;
    }
    move()
}
let timer = setInterval(autoPlay, 1000);
// 悬停效果
pic.onmouseenter = function() {
    clearInterval(timer)
}
pic.onmouseleave = function() {
    timer = setInterval(autoPlay, 1000);
}