字体图标

作用：

使用字体图标技巧实现网页中简洁的图标效果

图标库：

Iconfont：https://www.iconfont.cn/

引入样式表：

调用图标对应的类名，必须调用2个类名

平面转换

使用transform属性实现元素的位移、旋转、缩放等效果

属性：transform

目标：使用translate实现元素位移效果

语法：transform: translate平移动距离, 垂直移动距离);

注意：

X正向为右，Y轴正向为下

可以盖住标准流，但是盖不住定位

技巧：

translate()如果只给出一个值, 表示x轴方向移动距离

单独设置某个方向的移动距离：translateX() & translateY()

位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

核心代码：

原理：

位移取值为百分比数值，参照盒子自身尺寸计算移动距离

旋转

注意：测试旋转必须添加过度属性

目标：使用rotate实现元素旋转效果

语法：transform: rotate(角度); ，注意单位是deg

技巧：取值正负均可

取值为正, 则顺时针旋转取值为负, 则逆时针旋转

转换原点

目标：使用transform-origin属性改变转换原点

旋转复合写法

目标：使用transform复合属性实现多形态转换

多重转换技巧：

位移旋转复合写法：

避免盒子居中带来的问题

缩放

目标：使用scale改变元素的尺寸

语法：transform: scale(x轴缩放倍数, y轴缩放倍数);

一般情况下只设置一个值：transform: scale(缩放倍数);

渐变

目标：使用background-image属性实现渐变背景效果

渐变背景：

注意：过度哪个元素要发生属性的变化，过度就加给他

空间转换

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

z轴正值指向屏幕外，负值指向屏幕内

语法：transform: translate3d(x, y, z);

透视

透视的距离也叫视距

目标：使用perspective属性实现透视效果

属性：添加给父级perspective: 值;

perspective: 值的含义是模拟眼睛到物体之间的距离

值越大透视效果越小

例：透视取值perspective: 1000px; z轴移动transform: translateZ(200px); 透视效果不明显

取值：像素单位数值，数值一般在800 – 1200

作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

*注意:*视距的数值很小代表人眼离屏幕特别近，近大远小的效果明显，数值很大代表人眼离屏幕特别远 ,近大远小效果不明显

空间旋转

绕z轴转

transform: rotateZ(值);与平面旋转效果一样

transform: rotate(60deg);与transform: rotateZ(60deg);效果相同

绕x轴转

类似单杠 利用左手法则判断方向

 .box {

            /* 透视效果：近大远小，近实远虚 */

            perspective: 1000px;

        }


        .box img:hover {

            /* 向内上倒 */

            transform: rotateX(60deg);

            /* 向外下倒 */

            transform: rotateX(-60deg);

        }

绕y轴转

类似钢管舞


.box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }
        
        .box img:hover {
            /* 以左侧方向进行旋转 */
            transform: rotateY(60deg);
            /* 以右侧方向进行旋转 */
            transform: rotateY(-60deg);
        }

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

立体呈现

使用transform-style: preserve-3d呈现立体图形

实现方法：

添加 transform-style: preserve-3d;（给父元素添加）

使子元素处于真正的3d空间

*注意：*空间内，转换元素都有自已独立的坐标轴，互不干扰

添加perspective: 1000px;有近大远小的效果

拓展

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字
transform: rotate3d(1, 0.6, 0.7, 360deg);

动画

目标：使用animation添加动画效果

过渡可以实现什么效果？

过度实现2个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画实现步骤

定义动画

从200变大到600


@keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }

使用动画

animation: change 5s;

从200到500 * 300再到800 * 500


@keyframes change {
            0% {
                width: 200px;
            }
            20% {
                width: 300px;
                height: 500px;
                background-color: blue;
                border: 20px solid orange;
            }
            100% {
                width: 800px;
                height: 500px;
                background-color: skyblue;
            }
        }

百分比指的是动画总时长的占比 ,无限属性添加infinite

动画属性

目标：使用animation相关属性控制动画执行过程

steps 速度曲线（分步动画）

infinite 无线循环

animation-play-state（暂停动画）paused为暂停，配合hover使用

注意：

动画名称和动画时长必须赋值

取值不分先后顺序

如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

执行完毕时的状态

默认状态backwards

最后一帧状态 forwards

infinite alternate这两个属性值不要加

逐帧动画

目标：使用steps实现逐帧动画

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

animation-timing-function: steps(N)； 将动画过程等分成N份

多组动画

能够使用animation属性给一个元素添加多个动画效果

animation: 动画1，动画2，动画n；

*注意：*动画的开始状态和盒子的默认样式相同时，可以省略开始状态的from

暂停动画：animation-play-state: paused;

分辨率

目标：了解移动端主流设备分辨率

硬件分辨率（出厂设置）

缩放调节的分辨率（软件设置）

分辨率分类

物理分辨率是生产屏幕时就固定的，它是不可被改变的

逻辑分辨率是由软件（驱动）决定的

记住主流的逻辑分辨率：375(二倍)、414（三倍）

视口

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

二倍图

750px

作用：不让图片失帧

二倍图的意义是什么：

网页中要使用的图片，比如img或者背景图，这种情况下使用二倍图，放在img背景中，会更清晰

百分比布局

又叫流式布局（年代比较久）

宽度自适应，高度固定

flex布局（弹性布局）

是一种浏览器提倡的布局模型

布局网页更简单、灵活

避免浮动脱标的问题 (flex布局不会脱标)

*注意：*如果子盒子没有设置高度，子盒子将会拉伸填满父盒子高度

flex布局模型盒子构成

目标：能够使用Flex布局模型灵活、快速的开发网页

作用：

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

Flex布局非常适合结构化布局

设置方式：父元素添加display:flex子元素自动挤压或拉伸。

添加display:flex后的视觉效果：子级一行排列/水平排列

水平排列：默认主轴在水平，弹性盒子默认沿着主轴排列

组成部分：

弹性容器（父级）

弹性盒子（子级）

主轴

侧轴/交叉轴

主轴对齐方式

修改主轴对齐方式属性: justify-content


            /* 居中 */
            justify-content: center;

            /* 间距在弹性盒子(子级)之间 */
            justify-content: space-between;

            /* 所有地方间距相等 */
            justify-content: space-evenly;

            /* 间距加载子级两侧 */
            /* 视觉效果：子级之间的距离是父级两头距离的2倍 */
            justify-content: space-around;

侧轴（交叉轴）对齐方式

目标：使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

align-items（添加到弹性容器（父级））
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）


    /* 拉伸，默认值 */
   align-items: stretch; 
         
   
    /* 居中 */
   align-items: center;



- ==注意：==测试`stretch`时要注意子级盒子高度

**单独设置某个弹性盒子的侧轴对齐方式**

align-self: center;

.box div:nth-child(2) {
            align-self: center;
        }

改变主轴的方向（重要）

flex-direction: ;

改变主轴的方向，从水平改垂直

column从水平改为垂直

flex-direction: column;

flex布局就有两个方向，主轴和侧轴，只要改变主轴方向侧轴也跟着改变(默认主轴方向为水平)

注意：

一旦修改轴向

1.要先确定主轴方向

2.再选择对应的属性实现主轴或侧轴的对齐方式

比如：主轴从水平改为垂直方向，justify-content: center;的视觉效果：就是垂直居中，align-items: center;的视觉效果：就是实现水平居中

伸缩比

目标：使用flex属性修改弹性盒子伸缩比

属性 flex ：值;

取值分类：数值(整数)

注意 : 只占用父盒子剩余尺寸

弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果

弹性盒子换行显示：flex-wrap: wrap;

调整对齐方式：align-content

取值与justify-content基本相同

文字省略号与flex布局配合小技巧

注意：

盒子要有宽度或者父盒子要有宽度

如果不想设置具体宽度可以设置flex:1; width:0 ;

前提条件是父盒子要设置flex


.dingdan_content .goods .txt {
    flex: 1;
    /* 溢出时显示省略号 */
    /* 因为弹性盒子的尺寸可以被内容撑开，width: 0; 不换行的文字可以撑开这个盒子的尺寸，所以溢出的部分显示为省略号 */
    width: 0;
}

.dingdan_content .goods .txt h5 {
    text-overflow: ellipsis;
    /* 不换行 */
    white-space: nowrap;
    /* overflow: hidden;是给width: 0;用的 */
    overflow: hidden;
}

flex布局拓展

当给a标签设置宽高时，父级盒子添加了display：flex；属性，则a标签宽高生效

在flex布局下父级设置flex 子级若为行内元素则设置宽高生效
让文字在一个盒子里实现水平垂直居中
<div class="status"><i>待付款</i></div>
.dingdan_content .status {
    /* 让文字在一个盒子里实现水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    color: #e05e30;
}

移动适配

移动适配指网页元素的宽高都要随着设备的宽度等比例缩放

解决方案：

rem ：目前多数企业在用的解决方案（尺寸单位）

vw / vh：未来的解决方案

rem是什么

rem是一个相对单位

是相对于HTML标签的字号计算结果

1rem=1HTML标签字号大小

比如：HTML标签字号大小为font-size：20px则1rem=20，5rem=5*20=100px

HTML网页根标签就是html标签


/* 1rem = 1html标签字号大小 */
        
        html {
            font-size: 20px;
        }
        
        .box {
            width: 5rem;
            height: 3rem;
            background-color: blue;
        }

效果图：5rem=5 * 20 , 3rem=3 * 20

rem移动适配 - 媒体查询

使用媒体查询, 根据不同的视口宽度(设备宽度), 设置不同的根字号（css样式）

目标：能够使用媒体查询设置差异化CSS样式

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

当某个条件成立, 执行对应的CSS样式

目前rem布局方案中，将网页 (设计稿) 等分成10份， HTML标签的字号为视口宽度的 1/10

计算rem

先确定设计稿的尺寸

N * 37.5 = 68 → N = 68 / 37.5

rem单位的尺寸 = px单位数值 / 基准根字号 (结果取3位小数)

rem适配原理(重要)

目标： 实现在不同宽度的设备中，网页元素尺寸等比缩放效果

rem单位尺寸

根据视口宽度，设置不同的HTML标签字号

书写代码，尺寸是rem单位

确定设计稿对应的设备的HTML标签(基准根字号)字号

查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

rem单位的尺寸

N * 37.5 = 68 → N = 68 / 37.5

rem单位的尺寸 = px单位数值 / 基准根字号

rem单位的尺寸 = px单位数值 / 基准根字号 (结果取3位小数)

flexible.js

flexible.js是手淘（淘宝）开发出的一个用来适配移动端的js框架。

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

less

目标：使用Less语法快速编译生成CSS代码

Less是一个CSS预处理器, Less文件后缀是.less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

*注意：*浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

less语法(运算)

加、减、乘直接书写计算表达式

除法需要添加小括号或 . （建议用小括号）

注意：表达式存在多个单位以第一个单位为准

less语法(嵌套)

能够使用Less嵌套写法生成后代选择器

方便代码迁移

最好不要超过三层嵌套

注意：&符号不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

less语法(变量)

目标：能够使用Less变量设置属性值

作用：存储数据

方便修改：例如网页有1000个颜色，只要修改变量值即可

方法：

把颜色提前存储到一个容器，设置属性值为这个容器名

变量：存储数据，方便使用和修改。

语法：

定义变量： @变量名: 值;

使用变量：CSS属性：@变量名;

less语法(导入)

目标：能够使用Less导入写法引用其他Less文件

导入: @import “文件路径”;

less语法(导出)

目标：使用Less语法导出CSS文件

*注意：*添加代码的时候加上逗号

(插件配置)方法：

配置EasyLess插件，实现所有Less有相同的导出路径

配置插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

单独路径：

Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

// out: ./abc/

注意要在第一行添加

禁止导出

在less文件第一行添加: // out: false

vw/vh

目标：能够使用vw单位设置网页元素的尺寸

相对单位

相对视口的尺寸计算结果

vw：viewport width Ø

vw = 1/100视口宽度

vh：viewport height Ø

vh = 1/100视口高度

vw适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

vw单位尺寸

确定设计稿对应的vw尺寸（1/100视口宽度） Ø

查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）

vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

vh适配原理与vw适配原理同理

*注意：*在开发中vh与vw不能混用

vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

响应式布局

响应式布局就是：随着视口宽度发生变化，网页元素也会跟着发生变化

什么是响应式布局：

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。通俗来说，响应式布局就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源。

响应式界面有四个层次：

同一页面在不同大小和比例上看起来都应该是舒适的；

同一页面在不同分辨率上看起来都应该是合理的；

同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；

同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

媒体查询

目标：根据设备宽度的变化设置差异化样式

书写顺序

min-width（从小到大）

max-width（从大到小）

因为css属性都有层叠性，如果媒体特性为min-width，不按照从小到大的顺序来写，就会出现层叠性问题

基本语法

完整写法：

外联式css引入

注意：媒体特性要带上小括号
 <link rel="stylesheet" href="./one.css" media="(min-width:992px)">

框架

任何框架都有生产环境和源码，生产环境用于开发，源码用于学习

框架：是一种完整的解决方案

库：是某一个单一的模块功能

插件：包，扩展能力提供某些功能

包：可以理解为代码的集合（可以是框架、插件）

bootstrap使用

bootstrap框架作用：就是布局响应式网页

bootstrap栅格系统

类前缀col本身有padding

栅格系统指的是把网页内容等分成12等份，每个内容占12份当中对应的份数

比如：有4个盒子要在一行排，则每个盒子占3份

因为兼容性的原因bootstrap实现元素在一行排列用的是浮动

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

分别使用.row类名和 .col类名定义栅格布局的行和列。

注意：

container类自带间距15px

row类自带间距-15px

row类作用就是抵消container类的15px的内边距，row有-15px的外边距。

全局样式

目标：掌握BootStrap手册用法，使用全局CSS样式美化标签

手册用法：

BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。

网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

布局类：表格

table : 基本类名, 初始化表格默认样式

table-bordered : 边框线

table-striped : 隔行变色

table-hover : 鼠标悬停效果

table-responsive : 表格宽溢出滚动

美化内容类：按钮

btn : 基准样式

btn-info; btn-success : 设置按钮背景色

btn-block : 设置按钮为块元素

btn-lg; btn-sm; btn-xs : 设置按钮大小

布局类：表单

form-control : 设置表单元素input, select, textarea的样式

checkbox 和 radio : 设置复选框和单选框的样式

form-inline : 设置表单元素水平排列

disabled : 设置表单禁用状态样式

input-lg; input-sm, input-sm : 设置表单元素的大小

美化内容类图片

img-responsive: 图片自适应

img-rounded : 图片设置圆角

img-circle : 图片设置正圆

img-thumbnail : 图片添加边框线

布局类：辅助类

pull-right : 强制元素右浮动

pull-left : 强制元素左浮动

clearfix : 清除浮动元素的影响

text-left文 : 本左对齐

text-right : 文本右对齐

text-center : 文本居中对齐

center-block : 块元素居中

移动布局详细知识点

字体图标

平面转换

位移-绝对定位居中

旋转

转换原点

旋转复合写法

缩放

渐变

空间转换

透视

空间旋转

绕z轴转

绕x轴转

绕y轴转

左手法则

立体呈现

拓展

动画

动画实现步骤

动画属性

逐帧动画

多组动画

分辨率

分辨率分类

视口

二倍图

百分比布局

flex布局（弹性布局）

flex布局模型盒子构成

主轴对齐方式

侧轴（交叉轴）对齐方式

改变主轴的方向（重要）

伸缩比

弹性盒子换行

文字省略号与flex布局配合小技巧

flex布局拓展

移动适配

rem是什么

rem移动适配 - 媒体查询

计算rem

rem适配原理(重要)

flexible.js

less

less语法(运算)

less语法(嵌套)

less语法(变量)

less语法(导入)

less语法(导出)

禁止导出

vw/vh

vw适配原理

响应式布局

媒体查询

框架

bootstrap使用

bootstrap栅格系统

全局样式