方式一【类名使用】

步骤

过程

1

引入iconfont.css文件

2

准备标签，给标签设置iconfont类名【其实是在标签前面加一个伪元素】

3

在字体图标的html文件中找到需要的字体图标类名

4

给标签设置需要添加字体样式的类名

方式二【编码使用】

步骤

过程

1

在样式中引入下载好的iconfont.css的第一行代码，@font字体声明样式

2

找到下载图标对应的html文件，将字体编码复制下来

3

给目标标签设置字体声明的名字

4

将字体编码放入目标标签中

5

给目标标签设置最新样式

两个值复合语法

描述

transform: translate(水平方向移动距离，垂直方向移动距离)

水平向右位移为正，垂直向下位移为正

两个值分开语法

描述

transform: translateX(水平方向移动距离) translateY(垂直方向移动距离)

水平向右位移为正，垂直向下位移为正

一个值复合语法

描述

transform:translate(数值)

一个值的复合位移写法默认是水平方向移动的位移，垂直方向不变

一个值分开写法

描述

transform:translateX(数值)

水平方向的位移

一个值分开写法

描述

transform:translateY(数值)

垂直方向位移

语法单位

描述

像素px单位

水平向右移动数值为正，垂直向下移动数值为正

像素为百分比

百分比是相对于自身盒子宽度计算的，同样水平向右移动数值为正，垂直向下移动数值为正

语法

描述

transform: rotate(角度)

角度单位为deg,取值为正，则顺时针旋转；取值为负，则逆时针旋转【一般写在:hover元素下面的样式中】

设置中心的位置

描述

transform-origin:水平方位名词 垂直方位名词

设置中心点的位置【一般给目标元素加，写在过渡元素身上】

语法

描述

transform: scale(x轴缩放倍数,y轴缩放倍数)

倍数大于1表示放大，倍数小于1表示缩小

语法

描述

transform: scale(倍数)

x轴y轴方向缩放同等倍数

语法

描述

background-image:linear-gradient(渐变角度, 颜色1, 颜色2)

从什么角度方向，由颜色1逐渐变为颜色2【0deg方向为向上】

语法

描述

background-image: linear-gradient(to 方位名词, 颜色1, 颜色2)

颜色由颜色1逐渐变为颜色2，往方位名词方向变化

语法

描述

transition: 过渡的属性 过渡时间 运动曲线 延迟时间

红色字体为必须属性值。当有多个属性进行过渡时，需要将多个属性用逗号分隔

运动曲线

描述

linear

匀速运动

ease

先加速后减速

注意

描述

说做过渡给谁加，过渡不要加在:hover身上

加在hover身上会出现，移入元素时有过渡效果，但移除时会一下子复原

复合语法

描述

transform: translate3d(x,y,z)

红色字体不可省略，表示沿着x轴方向移动x，沿着y轴移动y，沿着z轴移动z

分开语法

描述

transform: translateX(值)

沿着x轴方向位移

transform: translateY(值)

沿着y轴方向位移

transform: translateZ(值)

沿着z轴方向位移

复合语法

描述

transform: rotate3d(x,y,z,角度度数)

用来设置自定义旋转轴的位置及旋转的角度【x,y,z取值为0~1之间的数字，没有单位】【x,y,z为空间坐标 旋转轴为原点到这个坐标组成的线段】

分开写法方式一

描述

transform: rotateX(度数)

沿着x轴旋转多少度

transform: rotateY(度数)

沿着y轴旋转多少度

transform: rotateZ(度数)

沿着z轴旋转多少度

分开写法方式二

描述

transform: rotateX(度数) rotateY(度数) rotateZ(度数)

单个值语法

描述

transform:scaleX(倍数)

X轴方向放大参数倍数

单个值语法

描述

transform:scaleY(倍数)

Y轴放大参数倍数

单个值语法

描述

transform:scaleZ(倍数)

Z轴放大参数倍数

多个值复合写法

描述

transform:scale3d(x,y,z)

X轴，Y轴，Z轴分别放大x倍，y倍，z倍

步骤

语法

描述

1【定义动画方式一】

@keyframes 动画名称{

from{}

to{}

}

当只有两个状态【一个精灵图】时，使用这种方式定义动画

1【定义动画方式二】

@keyframes 动画名称{

0%{}

[100 /n]%{}

}

当有一行共有n个精灵图时，每个状态间加百分之n来定义新状态

2【调用动画】

.使用动画目标元素类名{

animation：自定义动画名称

花费时间 运动曲线 延迟时间 动画次数 是否逆向播放【或是否保留最后一帧状态forwards】

}

红色字体不可省略。在需要有动画的元素的样式中设置animation属性

运动曲线为infinite时为无限循环

逆向播放属性值为alternate【逆向播放的次数必须大于等于2】

花费时间为数值时，时间会等比例分给各个百分比状态

3【暂停动画】

.使用动画目标元素类名:hover{

animation-play-state: paused;

}

用于鼠标移入时暂停动画

3【暂停动画】

.使用动画目标元素类名:hover{

animation-play-state: paused;

}

用于鼠标移入时暂停动画【暂停动画一般配合:hover使用】

属性

作用

取值

animation-name

动画名称

animation-duration

动画时长

animation-delay

延迟时间

animation-fill-mode

动画执行完毕时的状态

forwards:最后一帧状态

backwards:第一帧状态

animation-timing-function

速度曲线

steps(数字)，逐帧动画

animation-iteration-count

重复次数

infinite为无限循环

animation-direction

动画执行方向

alternate为反向

animation-play-state

暂停动画

paused为暂停，通常配合:hover使用。

总结

描述

硬件分辨率【出厂设置】

也叫物理分辨率

缩放调节的分辨率【软件设置】

逻辑分辨率=(物理分辨率宽/缩放调节的分辨率) * (物理分辨率高/缩放调节的分辨率)

<!-- viewport设置视口 width浏览器宽度=device-width设备宽度 initial-scale初始缩放倍数 -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

属性值

作用

flex-start

默认值，父元素中先在主轴方向依次排列好子元素，然后将所有子元素作为一个整体，子元素整体开始点 移动到父元素主轴的开始位置点【开始端对齐，默认值】

flex-end

父元素中先在主轴方向依次排列好子元素，然后将所有子元素作为一个整体，子元素整体结束点位置 移动到父元素主轴的结束点位置【结束端对齐】

center

父元素中先在主轴方向依次排列好子元素，然后将所有子元素作为一个整体，子元素整体中点 移动到父元素主轴中点位置【居中对齐】

space-around

父元素中先在主轴方向依次排列好子元素，然后将空白间隙均分给每个子元素两侧【每个弹性盒子左右间距相等】

space-between

父元素中先在主轴方向依次排列好子元素，然后将第一个子元素放在主轴开始点处，最后一个子元素放在父元素主轴结束的位置，然后均匀排列子元素【两端对齐，然后等距均分剩余空间排列】

space-evenly

父元素中先在主轴方向依次排列好子元素，然后均匀排列子元素，弹性盒子之间间隙和弹性盒子与容器的间距是相等的【等距均分剩余空间排列】

属性值

作用

flex-start

子元素整体在父元素上排列好后，将整体放在父元素侧轴的开始位置

flex-end

子元素整体在父元素上排列好后，将整体放在父元素侧轴的结束位置

center

子元素整体在父元素上排列好后，将整体放在父元素侧轴的居中位置

stretch

默认值，当父元素没有设置高度时，默认会将弹性盒子沿着主轴线两侧拉伸到铺满容器

语法

描述

flex:值

给子元素弹性盒子设置这个属性，子元素就会得到除去已经设置固定宽度的剩余空间宽度的所占份数

文件夹

描述

css

引入的外部css代码文件

images

存放不经常更换的修饰类背景图片

lib

存放外部文件，需要引入到项目中的其他外部文件【比如字体文件等】

uploads

存放经常更换的产品类图片

语法

描述

flex-direction:row

主轴方向默认从左往右

flex-direction：row-reverse

主轴变为反向，即从右往左

flex-direction: column

主轴变为列方向，即从上往下

flex-direction: column-reverse

主轴变为列反向，即从下往上

属性

描述及属性值描述

display:flex

设置flex布局的容器

justify-content

设置主轴对齐方式;flex-start开始端对齐；flex-end结束端对齐；center居中对齐；space-between两端对齐；space-around弹性盒子两侧距离相等；space-evenly均匀分布；父元素容器距离和子元素距离同样相同

flex-direction

默认是水平向右。设置主轴方向，改变元素排列方向；flex-direction:column主轴方向变更为从上往下【主轴方向和侧轴方向是垂直的，且侧轴方向只有从左往右和从上往下两种方向。即正方向】

flex-wrap

设置弹性盒子在父元素一行中放不下时是否换行显示，默认值为nowrap不换行，设置wrap即可换行显示

align-items

设置单行显示的弹性盒子在父元素容器侧轴的对齐方式

align-content

设置多行显示的弹性盒子在父元素容器侧轴的对齐方式，取值与justify-content基本相同

属性

描述

align-self

设置单行显示的弹性盒子中的目标盒子在父元素容器侧轴的对齐方式

flex:值

设置单行显示的弹性盒子中的目标盒子占父元素容器剩余空间的份数

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

/*在第几行显示省略号*/

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

语法

描述

@media (max-width: 最大宽度A){

选择器{样式}

}

根据视口宽度，设置元素样式

应用语法

描述

@media (max-width: 最大宽度A){

html{

font-size:根字号大小A

}

}

视口宽度小于这个最大宽度A时，执行的样式

@media(min-width:最小宽度a){

html{

font-size:根字号大小a

}

}

视口宽度大于这个最小宽度a时，执行的样式

语法

描述

@media (max-width: 最大宽度A){

html{

font-size:根字号大小A

}

}

@media(min-width:最小宽度a){

html{

font-size:根字号大小a

}

}

@media(min-width:最小宽度b){

html{

font-size:根字号大小b

}

}

当视口宽度比最大宽度A小的时候，根字号大小为设置的根字号大小A，当设备

当视口宽度大于最大宽度A，小于最小宽度a时，根字号大小为设置的根字号大小a

当视口宽度小于最小宽度b时，根字号大小为设置的根字号大小b

媒体查询条件的最大宽度A其实是视口的在小于这个最大宽度A下面执行的样式

媒体查询条件的最小宽度a其实是视口的在大于这个最小宽度a下面执行的样式【媒体查询具有样式覆盖，所以大范围的写前面，小范围的后面。】

步骤

语法

描述

1

下载flexible.js文件

2

<script src=’flexible.js文件路径’></script>

引入flexible.js文件，这个文件会自动获取视口宽度，并且将根字号大小设置为视口宽度的十分之一

3

给相应元素宽高设置对应的rem单位样式

rem为单位可以实现元素随着根字号大小的变化而变化【实现元素的等比例放大缩小】

单行注释语法

描述

//注释内容

单行注释语法

ctrl:ctrl + /

单行注释快捷键

多行注释语法【块注释】

描述

/*注释内容*/

多行注释语法

shift + alt + A

多行注释快捷键

后代选择器语法

描述

.父元素选择器 {

父元素样式

.子元素选择器 {

子元素样式

}

}

自动保存后，自动生成的css样式里面，会自动生成父元素选择器样式，也会自动生成父元素后代子元素选择器样式

子代选择器语法

描述

.父元素选择器 {

父元素样式

>.子元素选择器 {

子元素样式

}

}

自动保存后，自动生成的css样式里面，会自动生成父元素选择器样式，也会自动生成父元素子元素选择器样式

符号

描述

&

可以理解为当前元素的意思，这个当前元素是针对&符号所在的中括号{}前面的元素选择器而言

当两个类名A和B的样式相同时，可以只写一个类名A的样式，另一个类名B的样式可以直接写B{.A()}

定义变量语法

描述

@自定义变量名1: 值；

定义变量名

使用变量语法

描述

CSS属性: @自定义变量名1;

将自定义变量名1保存的值放到CSS属性对应的值里面去

方式

语法

描述

方式一

@import “less文件路径”;

可以将目标less文件代码引入到当前less文件中，自动保存后生成对应的css代码

方式二

@import url(‘less文件路径’);

可以将目标less文件代码引入到当前less文件中，自动保存后生成对应的css代码

“less.compile”:{

“out”: “../css/”

}

// out: 导出位置路径

//out: false

单位

描述

1rem

1rem=html标签的font-size属性值大小

1em

1em=当前元素标签的font-size属性值大小【em单位相对于当前文字大小】

1vm

1vm=视口宽度的百分之一

步骤

过程

1

快捷键ctrl + shift + p

2

弹出的输入框中输入full

3

点击Screenshot按钮【即可截屏并下载图片到我们的电脑本地】

步骤

过程

1

鼠标右键-检查

2

切换到移动端界面，点击移动界面右边的三个小点点

3

选中“Capture full size screenshot”

步骤

过程

1

鼠标右键-检查

2

切换到移动端界面，点击控制面板右边的三个小点点

3

点击“run command”

4

输入”capture”,点击“capture full size screenshot”选项右边的“screenshot”

方式

描述

媒体查询

一套代码兼容移动端和网页端

媒体查询更改元素样式语法

描述

@media 媒体设备 关键词(媒体条件){

元素1标签名:{元素1样式}

元素2标签名:{元素2样式}

}

媒体设备【screen用于电脑屏幕，平板电脑，智能手机等】可以省略

关键词有only【只有】、not【除了】、and【和】

媒体条件【min-width或max-width】写在小括号内。多个媒体条件之间用关键词and连接

语法

<link rel=”stylesheet” media=”(媒体条件)” href=”外部文件路径”>

案例

<link rel="stylesheet" media="(min-width:320)" href="1.css">

超小屏幕

小屏幕

中等屏幕

大屏幕

响应断点

<786px

>=786px

>=992px

>=1200px

别名

xs

sm

md

lg

容器宽度

100%

750px

970px

1170px

类前缀

col-xs-份数

col-sm-份数

col-md-份数

col-lg-份数

列数

12

12

12

12

列间隙

30px

30px

30px

30px

步骤

语法

描述

1

<link rel="stylesheet" href="bootstrap.css文件路径">

引入BootStrap提供的css代码

2

调用类【版心盒子使用类名container；行（类名row必须包含在.container或.container-fluid（父元素宽度100%即全屏）中，以便赋予核酸的宽度】

类名

描述

.container

响应式布局的容器，固定宽度

.container-fluid

流式布局容器百分百宽度

占据全部视口的容器

.row

通过行【类名row】在水平方向创建一组列【column】，只有列可以作为行的直接子元素

.col-屏幕类型简写-份数

父元素row将一行分为12份，子元素设置对应类名，即可根据占据的份数得到对应的布局效果