个人笔记

我们需要一个临时变量temp 用来做中间存储 把第一个变量num1的值 给临时变量temp 把第二个变量num2的值 给第一个变量num1 把临时变量temp的值 给第二个变量num2

常用的语句 方法 说明 alert(msg) 浏览器弹出警示框 prompt(info) 浏览器弹出输入框 console.log(msg) 浏览器控制台打印输出信息 document.write(i

vw/vh是什么 vw/vh是一个相对单位（类似em和rem相对单位） vw是：viewport width 视口宽度单位 vh是：viewport height 视口高度单位，相对视口的尺寸计算结果

布局容器 Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器，Bootstrap预先定义好了这个类，叫 .container，他提供了两个作此用处的类 container

响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的 设备划分 尺寸区间 超小屏幕（手机） <768px 超小屏幕（手机） >=768px ~ <992px

less+rem+媒体查询布局 rem 单位 rem(root em)是一个相对单位，类似于em，em是父元素的字体大小 不同的是rem的基准是相对于html元素的字体大小 媒体查询（Media Qu

flex弹性布局 布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局 当我们为父盒子设置为flex布局一以后，子元

起始方向可以是：方位名词或者度数，如果省略默认是top；background: linear-gradient(起始方向, 颜色1, 颜色2, ...);

流式布局（百分比布局） 流式布局，就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行缩放，不受固定像素的限制，内容向两侧填充 max-width 最大宽度（max-h

CSS3中 box-sizing 来指定盒模型，有2个值：content-box、border-box，这样我们计算盒子大小的方式就发生了变化 可以分成两种情况： box-sizing: conten

1. 属性选择器 属性选择器可以根据元素特定属性来选择元素 选择符 说明 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[att^

属性 解释说明 width 宽度设置的是viewport的宽度，可以设置device-width initial-scale 初始缩放比，大于0的数字 maximum-scale 最大缩放比，大于0的

视口（viewport） 就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和 理想视口 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决

浏览器私有前缀是为了兼容老版本的写法，比较新的浏览器版本无需添加 -moz-: 代表Firefox浏览器私有属性 -ms-: 代表IE浏览器私有属性 -webkit-: 代表Safari、Chrome

三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：垂直向下 注意：y下边是正值，上边是负值 z轴：垂直屏幕 注意：z往外面是

值 描述 value 规定不透明度，从 0.0 （完全透明）到 1.0（完全不透明） inherit 应该从父元素继承 opacity 属性的值 使用方法

动画 animation 可以通过设置多个节点来精确一个或一组动画，常用来实现复杂的动画效果 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果 制作动画分为两步： 1. 先定义动画 使用

同时使用多个转换，其格式为： 其顺序会影响转换的效果。（先旋转会改变坐标轴方向） 当我们同时拥有位移和其他属性的时候，记得要将位移放到最前面 总结 转换 transform 我们简单理解就是变形有2D

转换（tarnsform），可以实现元素的位移、旋转、缩放等效果转换（transform）可以简单理解为变形 移动：translate 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类

logo里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要 h1 里面再放一个a链接，可以返回首页，把logo的背景图片给 a 链接即可 为了搜索引擎收录我们，我们链接里面要放文