H5C3知识点今日总结

CSS3高级选择器

结构(位置)伪类选择器（CSS3):

p:first-of-type  : 匹配同类型中的第一个同级兄弟元素p

p:last-of-type  : 匹配同类型中的最后一个同级兄弟元素p

p:first-child  : 匹配父元素的第一个子元素p。

p:last-child  : 匹配父元素的第一个子元素p。

p:nth-child(n) : 返回其父元素的第n个p元素

伪元素选择器（CSS3):

E::first-letter文本的第一个单词或字

E::first-line 文本第一行

E::selection 可改变选中文本的样式

E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

属性选择器

E[属性] {}

找到div标签中class有cls的标签 div[class="cls"]

找到div标签中class有cls开头的标签 div[class^="cls"]

找到div标签中class有cls结束的标签 div[class$="cls"]

找到div标签中class有包含cls的标签 div[class=*"cls"]

CSS3 边框

 border-radius  圆角边框

 box-shadow  阴影边框 ---六个值(前两个值必写)

水平阴影(可负值) 垂直阴影(可负值) 模糊距离 阴影尺寸 阴影颜色  外部阴影(outset)改为内部阴影(inset)

text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色;

背景缩放(CSS3)

通过background-size设置背景图片的尺寸

可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

CSS3盒模型

box-sizing: content-box

盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

box-sizing: border-box

盒子大小为 width 就是说 padding 和 border 是包含到width里面的

过渡transition

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

如果想要所有的属性都变化过渡， 写一个all 就可以

2D变形transform

移动 translate

translate(x,y)水平方向和垂直方向同时移动

translateX(x)仅水平方向移动（X轴移动）

translateY(Y)仅垂直方向移动（Y轴移动）

缩放 scale

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

旋转 rotate

语法: transform:rotate(45deg);

注意单位是 deg 度数

transform-origin可以调整元素转换变形的原点

如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。

倾斜 skew

skew(deg,deg)

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

3D变形transform

3D模型: 负值到正值

x轴水平左向右

y轴垂直上到下

z轴远到近

透视(perspective)

脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视原理： 近大远小

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

translate移动

translateX(x) 水平方向移动

translateY(y) 垂直方向移动

translateZ(z) 直观表现形式就是大小变化 实质是XY平面相对于视点的远近变化

translate3d(x,y,z)

[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。