CSS3常用基本知识总结

小咪咪 2022-12-18 00:50 158阅读 0赞

# 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平面呈现  
如果被扁平化，则子元素不会独立的存在于三维空间  
因为该属性不会被（自动）继承，所以必须为元素所有非叶后代节点设置该属性