CSS3常用基本知识总结

CSS3核心知识总结

一、渐变

1.1线性渐变

渐变是基于background-image来完成的，线性渐变需要设置一个起始点和方向（指定为一个角度），换需要定义终止色。

1.linear-gradient(color，color) 默认从上到下发生渐变
2.linear-gradient(to 结束的方向，color，color) 改变渐变的方向
3.linear-gradient(角度，color,color) 使用角度
4.linear-gradient(color 长度或者百分比,color 长度或者百分比)
5.repeating-linear-gradient(角度，color,color)重复渐变

1.2径向渐变

基于background-image()
1.radial-gradient()函数，用来展示由原点（渐变中心）向四周渐变
默认是均匀分布radial-gradient(color,color)
不均匀分布 radial-gradient(red 50%,blue 70%)

2.改变渐变的形状 radial-gradient(circle,red,blue)
默认为圆形，ellipse为椭圆

3.渐变形状的大小 radial-gradient(closest-comer circle,red,blue)
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角

4.改变圆心
radial-gradient(closest-corner circle at 10px 10px,red,blue);

二、过渡（transition）

1.transition-property,指定应用过渡属性的名称;默认值为all,表示所有可变动画的属性，可指定多个

2.transition-duration 属性以秒或者毫秒为单位指定过度动画所需要的时间。

3.transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。默认为0s，如果指定的时长个数小于属性个数，那么时长列表将重复；时长列表更长，多余的会被裁剪。

4.transition-timing-function,可以设置过渡的速度变化值
- ease: (加速后减速) 默认
- linear (匀速)
- ease-in（加速）
- ease-out （减速）
- ease-in-out（加速然后减速）

5.当属性值的列表长度不一致时，超出的情况下是会被全部截掉的，不够的时候，关于时间的会重复列表。

6.检测过渡是否完成？
过渡完成时会触发一个时间，这个事件是transitionend,在WebKit下是webkitTransitionEnd
每一个拥有过度的属性在其完成过渡时都会触发一次transitionend事件
在transition完成前设置display：none，事件同样不会被触发。

注：
1.transition在元素首次渲染还没有结束的情况下是不会被触发的。
2.在绝大多数的变换样式切换时，如果变换函数的位置个数不相同也不会触发过渡

7.transition简写属性：
注意：在transition属性中，各个值得书写顺序是很重要的，第一个是过渡时间，第二个是延迟时间
推荐书写顺序：
过度时间，过渡样式，过渡形式，延迟时间

三、盒模型新增样式

盒模型阴影
1.box-shadow （none <offset-x><offset-y> <blur-radius> <spread-radius> color）
默认值：none 不可继承

none 默认阴影在边框外
insert 阴影在边框内

<offset-x> <offset-y> 用来设置阴影偏移量
用来设置 水平/垂直 翩移量 ,如果是负值则阴影位于元素的 左/上 方 如果两侧都是0，那么阴影位于元素的后面

<blur-radius>值越大，模糊面积越大，阴影就越大越淡，默认值为0px。

<spread-radius> 取正值时，阴影扩大，取负值时，阴影收缩。默认值为0。

color 设置阴影颜色

以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何的元素上。如果元素同时设置了border-radius，阴影也会有圆角效果
多个阴影时和多个text shadows 规则相同（第一个阴影在最上面）

2.倒影
-webkit-box-reflect设置元素的倒影
默认值：none 不可继承
第一个值可设置倒影方向:above，below，right，left
第二个值可设置倒影距离：长度单位
第三个值可设置渐变

3.resize 该属性可以控制一个元素可调整大小（一定要配合overflow:auto才可以使用）
值：
none 元素不能被用户缩放
both 允许用户在水平和垂直方向上调整元素的大小
horizontal 允许用户在水平方向上调整元素的大小
vertical 允许用户在垂直方向上调整元素的大小

4.box-sizing属性用于更改计算元素宽度和高度的默认css盒子模型。
默认值：content-box
默认值是标准盒子模型。width，height只包括内容的宽和高，不包括（border），内边距，外边距。
注意：内边距、边框、外边距都在盒子的外部。

四、动画

使用关键帧 @keyframes 来创建一个动画
Animation（动画） 使元素从一种样式逐渐变化为另一种样式的效果

1.animation-name （动画内的属性）
指定应用一个动画，每个名称代表一个由@keyframes定义的动画序列
值为@keyframes关键帧的名字

2.animation-duration （动画内的属性）
指定一个动画周期的时长，单位为秒，毫秒，没有单位无效

3.animation-timing-function（动画内的属性）
动画的默认效果：由慢变快再变慢
linear:线性过渡，等同于贝赛尔曲线（0,0,1,1）
ease: 平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
ease-in : 由快到慢，等同于贝赛尔曲线（0.42,0,1,1）
ease-out: 由快倒慢，等同于贝赛尔曲线（0,0,0.58,1）
ease-in-out: 由慢到快再到慢，等同于贝赛尔曲线（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)

4.animation-delay
定义动画开始前等待的时间，以秒或毫秒计算（属于动画外的范畴）

5.animation-iteration-count（动画内的属性）
定义动画执行的次数

6.animation-direction
动画执行的方向

7.animation-fill-mode
值：
backwards from之前的状态与form的状态保持一致
forwards to之后的状态与to的状态保持一致
both backwards+forwards

8.animation-play-state
动画执行的运行与暂停

9.动画的简写属性，
第一个值会分配给animation-duration 第二个值分配给animation-delay

五、布局

5.1flex布局

flex（弹性盒）
是css中的一种布局手段，主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

弹性容器：
要是用弹性盒，必须先将一个元素设置为弹性容器
通过display来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内弹性容器

弹性元素
弹性容器的子元素是弹性元素（必须是直接子元素）
一个元素可以使同时是弹性容器和弹性元素

主轴 ，弹性元素的排列方向
侧轴，与主轴垂直方向的称为侧轴

弹性容器上的样式

1.flex-wrap 设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴自动换行
wrap-reverse 元素沿着辅轴反方向换行

2.flex-direction 指定容器中弹性元素的排列方式
可选值：
row 默认值，弹性元素从左向右排列
row-reverse 弹性元素在容器中反向水平，自右向左
column 弹性元素纵向排列（自上向下）
column-reverse 弹性元素方向纵向排列

3.flex-flow 上面两个的简写属性

4.justify-content
如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-evenly 空白分布到元素的单侧
space-between 空白均匀分布到元素间

5.align-items
元素在辅轴上如何对齐，元素间的关系
属性值：
stretch 默认值，将元素的长度设置为相同的值
flex-start 元素不会拉伸，元素沿着辅轴起边对齐
flex-end 元素沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐

6.align-content 辅轴空白间的分布

弹性元素上的样式

1.align-self 用来覆盖当前弹性元素上的align-items

2.flex-grow 弹性的增长系数（按比例分配）

3.flex-shrink 弹性元素的缩减系数
缩减多少是根据缩减系数和元素大小来计算。

4.flex-basis 指定的是元素在主轴上的基础长度，
如果主轴是横向的，该值指定的就是元素的宽度
如果主轴是纵向的，该值指定的就是元素的高度
默认值是auto，表示参考元素自身的高度或宽度，如果传递了一个具体的数值，则以该值为准

5.flex 可以设置弹性元素所有的3个样式。
flex:增长 缩减 基础
initial “flex:0 1 auto”
auto “flex:1 1 auto”
none “flex:0 0 auto” 弹性元素没有弹性

6.order 决定弹性元素的排列顺序

5.2响应式布局

网页可以根据不同的设备或窗口大小呈现出不同的效果，使用响应式布局，可以使一个网页适用于所有设备，响应式布局的关键就是：媒体查询，通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式。

媒体查询
语法：@media 媒体类型{}

媒体类型：
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
可以使用逗号连接多个媒体类型，这样他们就有一个或的关系。用and表示且的意思。可以在媒体类型前添加一个only，表示只有，为的是兼容老版本浏览器。

例如:@media all{
body{
background-color:red;
}
}

媒体特性
1.min-width 视口的最小宽度（视口大于指定宽度时生效）
2.max-width 视口的最大宽度（视口小于指定宽度时生效）

眼视光hi切换的分界点，我们称为断点，也就是网页的样式会在这个点时发生变化。一般比较常用的断点：
小于768 超小屏幕 max-width:768px
大于768 小屏幕 min-width:768px
大于992 中型屏幕 min-width:992px
大于1200 大屏幕 min-width:1200px

六、变换

6.1 2d变换

2d变形(transform)
transform，只对block级元素生效
旋转：rotate() 单位deg
平移：translate 单位px
x方向平移 translateX
y方向平移 translateY

二维平移 translate(x,y) 如果y没有指定，默认为0,设置单值，另一个值默认为0；

倾斜：skew 单位deg
skewX(deg) x方向倾斜，代表与Y轴之间的角度
skewY(deg) y方向倾斜，代表与X轴之间的角度
二维倾斜skew(x,y) 单值表示时，另一个值默认为0，不推荐单值使用

缩放：scale 不加单位
x方向缩放 scaleX
y方向缩放 scaleY
二维缩放 scale(x,y)
要缩小设置0.01-0.99之间的值，要放大设置超过1的值

基点(中心点)的变换
transform-origin 更改一个元素变形的基点，以左上角进行偏移

6.2 3d变换

景深（perspective） “近大远小”
简单来说，就是我们肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在c3中
perspective用于激活一个3D空间，属性值就是景深大小，单位（px），默认无景深。
perspective:值为一个长度值，这个长度是沿着Z轴距离坐标原点的距离，若使用perspective()函数，他必须放在transform首位。

景深 让3D场景有近大远小的效果 （肉眼距离屏幕的距离）
是一个不可继承的属性，但他可以作用于后代元素（不是作用于本身的）

原理：
景深越大，灭点越远，元素变形更小
景深越小，灭点越近，元素变形更大

景深基点：
视角的位置，perspective-origin:50%,50%(默认值)

景深叠加：
尽量避免景深叠加

1.3D缩放
scaleZ()
scale3d(x,y,z)
如果只设置了scaleZ，元素并没有被扩大或压缩，scaleZ(number)需要和translateZ(length)配合使用，number*length的值，是元素沿着Z轴移动的距离，从而达到扩大或压缩

2.3D旋转
rotateX(angle)
rotateY(angle)
rotateZ() 等价于rotate()
rotate3d(x,y,z,angle)

3.3D平移
translateZ(length) 是3D Transformation 特有的，其他两个2D中就有
translateZ，它不能是百分比值,那样的移动无意义
translate3d(x,y,z) z不能是百分比值，那样的移动无意义。

4.backface-visibility
backface-visibility属性用来设置，是否显示元素的背面，默认显示
backface-visibility:keyword
keyword有两个值，hidden和visible，默认值是visible.

5.transform-style
该属性指定了子元素如何在空间中展示，有两个属性值，flat（默认） 和preserve-3d
flat表示所有子元素在3D平面呈现
preserve-3d表示所有子元素在3D平面呈现
如果被扁平化，则子元素不会独立的存在于三维空间
因为该属性不会被（自动）继承，所以必须为元素所有非叶后代节点设置该属性