摘要：
概念 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 组成 ECMAScript 基础·语法：规定了js基础语 阅读全文
摘要：
屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好 解决方案: 百分比布局或者 flex 完成整体元素排列布局 配合 rem 或者 vw/vh 单位 设置元素的尺寸（宽度/高度） 最终适配 em，rem 相同点： 都是相对单位 不同点：参照对象不同 e 阅读全文
摘要：
主成部分 弹性容器：父元素 弹性盒子：子元素 主轴：默认X轴，可以通过flex-direction改变 侧轴 / 交叉轴:默认Y轴，可以改变 设置 语法：display: flex 添加位置：父元素 父元素添加 display: flex，子元素可以自动的挤压或拉伸 主轴对齐方式 属性：justif 阅读全文
摘要：
transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的；而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。 动画的实现步骤 定义动画：用关键帧声明动画 关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。fro 阅读全文
摘要：
空间转换属性：transform，也叫3D转换。使用transform属性可以实现元素在空间内的位移、旋转、缩放等效果 空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 空间位移 语法 transform: translate3d(x, y, z); 阅读全文
摘要：
了解 渐变：可以显示两种或多种指定颜色之间的平滑过渡。 渐变类型： 线性渐变（向下/向上/向左/向右/对角线） 语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 方向： 1.to + 方位名 阅读全文
摘要：
位移：translate translate:参照初始的位置进行移动 语法：transform: translate(水平移动距离, 垂直移动距离); 取值（正负均可） 像素单位数值：px 百分比（参照物为盒子自身尺寸） translate()如果只给出一个值, 表示x轴方向移动距离 单独设置某个方 阅读全文
摘要：
文字图标 了解及作用 字体图标展示的是图标，本质是字体。 作用：处理简单的、颜色单一的图片 优点 灵活性：灵活地修改样式，例如：尺寸、颜色等 轻量级：体积小、渲染快、降低服务器请求次数 兼容性：几乎兼容所有主流浏览器 使用方便： 下载字体包 使用字体图标 使用方法 下载字体包 登录（https:// 阅读全文
摘要：
背景裁剪：background-clip 作用 background-clip：主要用来确定背景的剪裁区域，是针对元素背景颜色，背景图片进行裁剪 语法及属性值 语法： background-clip: border-box / padding-box / content-box ; <div cla 阅读全文