• 制定网页开发的标准，以使同一个网页在不同浏览器中有相同的效果。

• • 结构：HTML用于描述页面的结构
  • 表现：CSS用于控制页面中元素的样式
  • 行为：JavaScript用于响应用户的操作

• 标签的属性： 设置标签中的内容如何显示

• 文档声明（doctype）:用来告诉浏览器当前网页的版本

• 字符集（charset）：编码和解码采用的规则。

• 乱码问题：编码和解码采用不同的字符集

）坚持“以客户为中心”的理念">
//description用于指定网站的描述，网站的描述会显示在搜索引擎的结果中，类似于网站介绍
//title标签的内容会作为搜索结果的超链接上的文字显示

• steps()分步执行过渡效果，可以设置第二个值
  • end:在时间结束时执行过渡（默认值）
  • start:在时间开始时执行过渡

• 过渡效果的延迟，等待一段时间后再执行过渡

• 如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间

• 动画可以自动触发动态效果，过渡需要在某个属性发生变化时才触发

• 关键帧设置了 动画执行的每个步骤

• from表示动画的开始位置，也可以使用0%
• to表示动画的结束位置，也可以使用100%

• 对当前元素生效的关键帧的名字

• normal：默认值，从from向to运行，每次都是这样
• alternate ：从from向to运行，重复执行动画时反向执行

• running：默认值，动画执行

• none：默认值，动画执行完毕元素回到原来位置
• forwards：动画执行完毕元素会停止在动画结束的位置
• backwards：动画延时等待时，元素就会处于开始位置

• 变形就是通过CSS来改变元素的形状或位置
• 变形不会影响页面的布局

• 平移元素百分比是相对于自身计算的
• margin:0 auto这种居中方式只适用元素的大小确定
• 对于元素大小不确定的居中：

• z轴平移,调整元素和人眼之间的距离，距离越大，元素离人越近。
• z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须设置网页的视距

• 通过旋转可以使元素沿着x y 或 z 旋转指定的角度

• scaleZ()Z轴方向的缩放，只有3D效果 才能看出来

• flex是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局
• flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

• 要使用弹性盒，必须先将一个元素设置为弹性容器

• 弹性元素的排列方向为主轴

• 与主轴垂直方向的称为侧轴

• 指定容器中弹性元素的排列方式
• row：默认值，弹性元素在容器中水平排列（左向右）；主轴：自左向右
• row-reverse：弹性元素在容器中反向水平排列（右向左）；主轴：自右向左
• column：弹性元素在容器中纵向排列（自上向下）
• column-reverse：弹性元素在容器中纵向排列（自下向上）

• 设置弹性元素是否在弹性容器中自动换行
• nowrap：默认值，元素不会自动换行
• wrap：元素沿着辅轴方向自动换行

• 如何分配主轴上的空白空间和元素
• flex-start：元素沿着主轴起边排列
• flex-end：元素沿着主轴终边排列
• center：元素居中排列

• stretch：默认值，将元素的长度设置为相同的值
• flex-start：元素不会拉伸，沿着辅轴起边对齐
• flex-end：沿着辅轴的终边对齐

• 只为某个元素设置属性，来覆盖align-items

• 弹性容器的子元素（后代不是）是弹性元素（弹性项）
• 弹性元素可以同时是弹性容器

• 指定弹性元素的伸展系数
• 当父元素有多余空间的时候，子元素如何伸展

• 指定弹性元素的收缩系数
• 当父元素的空间不足以容纳所有的子元素时，对子元素进行收缩

• 指定的是元素在主轴上的基础长度
• 默认值是auto，表示参考元素自身的高度或宽度
• 如果传递了一个具体的数值，则以该值为准

• 可以设置弹性元素所有的三个样式

• 决定弹性元素的排列顺序

• less是一门css的预处理语言
• less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
• 在less中添加了许多的新特性：像对变量的支持、对mixin的支持… …
• less的语法大体上和css语法一致，但是less中增添了许多对css的扩展
• 浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

• 引入变量，但存在兼容问题

• 引入计算函数，但存在兼容问题

// less中的单行注释，注释中的内容不会被解析到css中

• 在变量中可以存储一个任意的值，并且我们可以在需要时，任意的修改变量中的值。
• 变量的语法： @变量名

• 使用变量时，如果是直接使用则以 @变量名 的形式使用即可

• 作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用

• 变量发生重名时，会优先使用比较近的变量
• 可以在变量声明前就使用变量

• :extend() 对当前选择器扩展指定选择器的样式（选择器分组）

• 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins，也就是混合函数
• 在混合函数中可以直接设置变量以及默认值

• 在less中所有数值都可以直接进行运算

• 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
• 分辨率：说的就是屏幕中小点的数量

• 编写网页时，我们所用像素都是CSS像素
• 浏览器在显示网页时，需要将css像素转换为物理像素然后呈现
• 一个css像素最终由几个物理像素显示，由浏览器决定：
  • 默认情况下在pc端，一个css像素=一个物理像素

• 视口就是屏幕中用来显示网页的区域
• 可以通过查看视口的大小来观察css像素和物理像素的比值
• 我们可以通过改变视口的大小，来改变css像素和物理像素的比值

• 在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会清晰

• 智能手机的像素点远远小于计算机的像素点
• 问题：一个宽度为900px的网页在iphone6中要如何显示？
• 默认情况下，移动端的网页都会将视口设置为980像素（css像素)，以确保pc端网页可以在移动端正常访间，导致网页中的内容非常小，而且如果网页的宽度超过了980,移动端的浏览器会自动对网页缩放以完整显示网页
• 所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页
• 编写移动页面时，必须要确保有一个比较合理的像素比:
  • 1css像素对应2个物理像素
  • 1css像素对应3个物理像素
• 可以通过meta标签来设置视口大小
  • -每一款移动设备设计时,都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果。
  • 将像素比设置为最佳像素比的视口大小我们称其为完美视口

结论：将网页的视口设置为完美视口

• 不同的设备完美视口的大小是不一样的
• 由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样
• 所以在移动端开发时，就不能再使用px来进行布局了
• vw这个单位永远相当于视口宽度进行计算

• 网页中字体大小最小是12px，不能设置一个比12像素还小的字体
• 如果我们设置了一个小于12px的字体,则字体自动设置为12

• 网页可以根据不同的设备或窗口大小呈现出不同的效果
• 使用响应式布局，可以使一个网页适用于所有设备
• 响应式布局的关键就是 媒体查询
• 通过媒体查询，可以为不同的设备，或设备的不同状态分别设置样式

• screen：带屏幕的设备
• 可以使用,连接多个媒体类型，这样它们之间就是一个并集的关系
• 可以使用and连接多个媒体类型，这样它们之间就是一个交集的关系
• 可以在媒体类型前添加一个only，表示只有。only的使用主要是为了兼容一些老版本浏览器

• min-width视口的最小宽度（视口大于指定宽度时生效）
• max-width视口的最大宽度（视口小于指定宽度时生效）

• 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化