HTML+CSS

1~6：袁进【渡一教育】 7~8：pink【黑马程序员】

1. 概述

开发环境的准备

显示文件扩展名
大部分文件,它的文件名:名称.扩展名(后缀名)
- 扩展名决定了文件被什么应用程序打开.
安装浏览器
- IE
- Opera
- Firefox
- Chrome[推荐]
- Safari
将chrome设置为默认浏览器
安装编辑器
- windows记事本
- Sublime
- Atom
- Dreameaver
- VSCode[推荐]

HTML & CSS 课程概述

[扩展] 是什么意思？
- 80 20 原则，80%的知识，只有20%的场景可以用到，而20%的知识，有80%的场景可以用到。
- 扩展课程：可以不看，不影响后续学习和开发。看了会提高竞争力。
HTML & CSS到底是什么，有什么用？
- 它们是两门语言。
- 人和人沟通的语言：自然语言
- 人和计算机沟通的工具：计算机语言。
- HTML + CSS +Javascript = 网页
- HTML: Hyper Text Markup Language 超文本标记语言；定义网页中有什么。
- CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。
难不难？
- 对比所有的开发技术,HTML & CSS最简单.
如何学习?
- 心态平和
- 多练习
学习顺序?
- HTML讲解一点 -> CSS (补充HTML的知识)
- HTML: 简单,没有什么效果.
- CSS: 相对复杂
这个界面是什么?
- VSCode: Visual Studio Code, 通用编辑器,微软. 通常用于编写代码.
- MarkDown: MD,文档格式标准. 文档编写者,仅关注内容本身,不需要关注格式.

HTML & CSS 课程概述

术语
- 术语降低沟通成本
- 喜大普奔:喜闻乐见,大快人心,普天同庆,奔走相告
- 鸡你太美: 形容打篮球打的特别好。
1. web
  - 互联网
2. w3c
  - 万维网联盟,非盈利性的组织: www.w3.org
  - 为互联网提供各种标准。
3. XML
  - 可扩展的标记语言:extension markup language,用于定义文档结构的。
```
请在北周周一下午两点,从人人网下载美剧《权力的游戏》
```
  1
  xml
```
<任务>
    <执行日期> 每周一 </执行日期>
    <执行时间> 下午两点 </执行时间>
    <下载地址> 人人网 </下载地址>
    <下载目标> 最新版《权力的游戏》 </下载目标>
</任务>
```
  1
  2
  3
  4
  5
  6
什么是HTML？
- HTML是W3C组织定义的语言标准：HTML是用于描述页面结构的语言。
- 结构：有什么东西，该东西表示什么含义
- HTML： Hyper Text Markup Language，超文本标记语言。
- 书写一个一级标题
html
```
<h1> 一级标题 </h1>
```
1
- MDN: Mozilla Development Network,Mozilla开发者社区。
- https://developer.mozilla.org
什么是CSS？
- CSS是W3C定义的语言标准：CSS是用于描述页面展示的语言。
- CSS决定了页面长什么样子。
执行HTML CSS
- HTML，CSS -> 浏览器内核 -> 页面
- 浏览器:
  - 1. shell: 外壳
  - 1. core: 内核(JS执行引擎,渲染引擎)
    - IE: Trident
    - FireFox: Gecko
    - Chrome: Webkit / Blink
    - Safari: Webkit
    - Opera: Presto / Blink
版本和兼容性
- HTML5,CSS3
- HTML5: 2014年
- CSS3: 目前还没有制定完成。
- XHTML：可以认为是HTML的其中的一个版本，完全符合XML的规范。

2. HTML核心

第一个网页

Emmet插件：自动生成HTML代码片段
注释
- 注释为代码的阅读者提供帮助,注释不参与运行
- 在HTML中,注释使用如下格式书写:
html
```

```
1
元素
其他叫法:标签/标记
html
```
    <title>Document</title>
    <a href="http://duyiedu.com">渡一教育</a>
```
1
2
- 整体:element (元素)
- 元素 = 起始标记(begin tag) + 结束标记 (end tag) + 元素内容 + 元素属性
- 属性 = 属性名 + 属性值
- 属性的分类:
  - 局部属性:某些元素特有的属性
  - 全局属性:所有元素通用
- 有些元素没有结束标记,这样的元素叫做: 空元素
- 空元素的两种写法:
  1. <meta charset="UTF-8">
  2. <meta charset="UTF-8" />
  html
```
    <meta charset="UTF-8">
```
  1
元素的嵌套
- 元素不能相互嵌套
- 父元素,子元素,祖先元素,后代元素,兄弟元素（拥有同一个父元素的两个元素）
标准的文档结构
- HTML：页面、HTML文档
- 文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。
  - 不写文档声明，将导致浏览器进入怪异渲染模式。
  html
```
<!DOCTYPE html>
```
  1
- 根元素，一个页面最多只能一个，并且该元素是所有其他元素的的父元素或祖先元素。
  - HTML5版本中没有强制要求书写该元素
  html
```
<html lang="en">
</html>
```
  1
  2
- lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。
  - 当前页面的自然语言
    - <html lang="cmn-hans">
- 文档头：文档头内部的内容，不会显示到页面上。
  html
```
<head>

</head>
```
  1
  2
  3
- 文档的元数据：附加信息。
  html
```
<meta>
```
  1
- charset：指定网页内容编码。 <meta charset="UTF-8">
  - 计算机中，低压电（0~2 V） 0，高压电（2~5 V） 1。表示2，使用10
  - 计算机中，只能存储数字
  - 文字和数字进行对应
  - 比如：a —— 97， A —— 64.
  - 该字典叫做字符编码表，GB2312，GBK
  - 袁 —— GB2312 —— 100000 —— GBK —— ？？
  - UTF-8 是 Unicode 编码的一个版本
- 适配手机端 <meta name="viewport" content="width=device-width, initial-scale=1.0">
- IE内核使用edge内核 <meta http-equiv="X-UA-Compatible" content="ie=edge">
- 表示网页标题 <title>Document</title>
- 文档体，页面上所有要参与显示的元素，都应该放置到文档体中。
  html
```
<body>

</body>
```
  1
  2
  3

语义化

什么事语义化
1. 每一个HTML元素都有具体的含义
  - a元素：：超链接
  - p元素：段落
  - h1元素：一级标题
2. 所有元素与展示效果无关
  - 元素展示到页面中的效果，应该由CSS决定。
  - 因为浏览器带有默认的CSS样式，所有每个元素有一些默认样式。
  - **重要：选择什么元素，取决于内容的含义，而不是显示出的效果 **
为什么需要语义化
1. 为了搜索引擎优化（SEO）
  - 搜索引擎：百度、搜狗、Bing、Google
  - 每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码，
2. 为了让浏览器理解网页
  - 阅读模式、语音模式

文本元素

HTML5中支持的元素：HTML5元素周期表
- https://www.xuanfengge.com/funny/html5/element/
h
- 标题：head
- h1~h6：表示1级标题~6级标题
p
- 段落，paragraphs
- lorem,乱数假文，没有任何实际含义的文字。
span [无语义]
- 没有语义，仅用于设置样式
- 以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）。
- 到了HTML5，已经弃用这种说法。
pre
- 预格式化文本元素
- 空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格
- 例外：在pre元素中的内容不会出现空白折叠
- 在pre元素中内部出现的内容，会按照源代码格式显示到页面上。
- 该元素通常用于在网页中显示一些代码。
- pre元素功能的本质：它有一个默认的css属性
- 显示代码时，通常外面套code元素，code表示代码区域

HTML实体

实体字符，HTML Entity
通常用于在页面中显示一些特殊符号。

&单词;
&#数字；

小于符号
- <
大于符号
- >
空格
- non-breaking space
版权符号【©】
- ©
&
- &
所有的实体字符
- https://dev.w3.org/html5/html-author/charref

a元素

超链接
href属性
- hyper reference (引用)：通常表示跳转地址
1. 跳转地址
2. 锚链接
  - id属性：全局属性，表示元素在文档中的唯一编号
3. 功能链接
  - 点击后，触发某个功能
  - 执行JS代码,javascript:
  - 发送邮件,mailto:
    - 要求用户计算机上安装邮件发送软件：exchange
  - tell:
    - 要求用户计算机上安装有拨号软件，或使用的是移动端访问。
target属性
- 表示跳转窗口位置。
- target的取值：
  - _self:在当前页面窗口打开，默认值
  - _blank:在新窗口中打开

路径的写法

站内资源和站外资源
- 站内资源：当前网站的资源
- 站外资源：非当前网站的资源
绝对路径和相对路径
- 站外资源：绝对路径
- 站内路径：相对路径
1. 绝对路径的书写格式：
  - url地址：
```
协议名://主机名：端口号/
schema://host:/port/path
```
    1
    2
    - https://mbd.baidu.com/newspage/data/landingsuper
    - http://www.renren.com/
    - file:///D:/Users/Greator/OneDrive/%E6%96%87%E6%A1%A3/htmlcss/5.%20a%E5%85%83%E7%B4%A0/index.html
    - http://127.0.0.1:5500/5. a元素/target属性.html
    - 协议名：http、https、file
    - 主机名：域名、IP地址
    - 端口号：如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号为443
    - 路径：/newspage/data/landingsuper
    - 当跳转目标和当前页面的协议相同时，可以省略协议。
- 1. 相对路径
  - 以./开头，./表示当前资源所在的目录
  - 可以书写../表示返回上一级目录
  - 相对路径中，./可以省略

图片元素

img元素
- image缩写，空元素
- src属性：source
- alt属性：当图片资源失效时，将使用该属性的文字替代图片
和a元素联用
和map元素联用
- map：地图
- map的子元素：area
衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：
- ps、pxcook、cutpro（本人开发）
和figure元素联用
- 指代、定义，通常用于把图片、图片标题、描述包裹起来。

多媒体元素

video 视频
- controls:控制控件的显示，取值只能为controls
- 某些属性，只有两种状态：1. 不写 2. 取值为属性名这种属性叫做布尔属性
- 布尔属性，在HTML5中，可以不用书写属性值
- autoplay:布尔属性，自动播放。
- muted:布尔属性，静音播放。
- loop:布尔属性，循环播放。
audio 音频
- 和video完全一致
兼容性
1. 旧版本的浏览器不支持这两个元素
2. 不同的浏览器支持的音视频格式可能不一致
  - mp4、webm、mp3

列表元素

有序列表
- ol: ordered list
- li: list item
无序列表
- ul：unordered list
- li: list item
- 无序列表常用于制作菜单或新闻列表。
定义列表
- 通常用于一些术语的定义
- dl：defination list
- dt：defination title
- dd：definition description

容器元素

容器元素：该元素代表一块区域，内部用于放置其他元素
div元素
- 没有语义
语义化容器元素
- header：通常用于表示页头，也可以用于表示文章的头部。
- footer：通常用于表示页脚，也可以用于表示文章的尾部。
- article：通常用于表示整篇文章
- section：通常用于表示文章的章节
- aside：通常用于表达一些附加信息（通常用于表示侧边栏）
- nav：元素，html5的新元素，容器元素。通常用于做导航

元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。
元素的包含关系由元素的内容类别决定。
例如，查看h1元素中是否可以包含p元素
总结：
- 1. 容器元素中可以包含任何元素
- 1. a元素中几乎可以包含任何元素
- 1. 某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
- 1. 标题元素和段落元素不能相关嵌套，并且不能包含容器元素

3. CSS基础

术语解释

CSS规则 = 选择器 + 声明块

css

h1{
    color: red;
    background-color: lightblue;
    text-align: center
}

选择器
- 选择器：选中元素
1. ID选择器：选中的是对应id值的元素
2. 元素选择器
3. 类选择器
声明块
- 出现在大括号中
- 声明块中包含很多声明（也叫做属性），每一个声明（属性）表达了某一方面的样式。

CSS代码书写位置

内部样式表（200行内建议使用）
- 书写在style元素中
内联样式表，元素样式表（不建议使用，学习js时会有用）
- 直接书写在元素的style属性中
外部样式表【推荐】
- 将样式书写到独立的css文中。
- 外部样式表可以解决多页面样式重复问题
- 有利于浏览器缓存，从而提高页面响应速度
- 有利于代码分离（HTML和CSS），更容易阅读和维护

常见样式声明

color
- 元素内部的文字颜色
- 预设值：定义好的单词
- 三原色、色值：光学三原色（红、绿、蓝），每个颜色可以使用0~255之间的数字来表达，色值。
```
rgb表示法：
rgb(0,255,0)
hex（16进制）表示法：
#红绿蓝
```
  1
  2
  3
  4
- 淘宝红：#ff4400，#f40
- 黑色：#000000，#000
- 白色：#ffffff, #fff
- 红：#ff0000, #f00
- 绿：#00ff00, #0f0
- 蓝：#0000ff，#00f
- 紫：#f0f
- 青：#0ff
- 黄：#ff0
- 灰色：#ccc
- 马尔斯绿：#008c8c
background-color
- 元素背景颜色
font-size
- 元素内部文字的尺寸大小
- px：绝对单位，像素，简单的理解为文字的高度占多少个像素
- em：相对单位，相对于父元素的字体大小
- 每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。
- user agent, UA, 用户代理（浏览器）
font-weight
- 文字粗细程度，可以取值数字，可以取值为预设值。
- nomal:400
- bold:700
- strong，默认加粗。表示重要的，不能忽略的内容
font-family
- 文字类型
- 必须用户计算机中存在的字体才会有效
- 使用多个字体，以匹配不同环境
- sans-serif：非衬线字体，笔画边缘未锈蚀。
font-style
- 字体样式，通常用它设置斜体
- i元素，默认样式，是倾斜字体，影响语音阅读。实际使用中，通常用它表示一个图标(icon)。
- em元素，默认样式，是倾斜字体, 表示强调的内容。
text-decoration
- 文本修饰，给文本加线。
- a元素：默认有此样式。
- del元素：废弃的内容。
- s元素：过期的内容
text-indent
- 首行文本缩进
- 2em：表示缩进2字符
line-height
- 表示每行文本的高度，该值越大，每行文本的距离越大。
- 设置行高为容器的高度，可以让单行文本垂直居中。
- 行高可以设置为纯数字，表示相对于当前元素的字体大小。
width
- 宽度
height
- 高度
letter-spacing
- 文字间隙
text-align
- 元素内部文字的水平排列方式。

选择器

选择器：帮助你精准的选中想要的元素
简单选择器
- 1. ID选择器
- 1. 元素选择器
- 1. 类选择器
- 1. 通配符选择器
  - *：选中所有元素
1. 属性选择器
  - 根据属性名和属性值选中元素
2. 伪类选择器
  - 选中某些元素的某种状态
  - 1）link：超链接未访问时的状态
  - 2）visited：超链接访问过的状态
  - 3）hover：鼠标悬停的状态
  - 4）active：激活状态，鼠标按下状态
  - 爱恨法则：love hate
3. 伪元素选择器
  - 通常：生成并选中某个元素内部的第一个子元素或最后一个子元素。
  - before
  - after
选择器的组合
- 并且 —— 两个选择器写在一起,中间不加任何东西
- 后代元素 —— 空格【最常用】
- 子元素 —— >
- 相邻兄弟元素 —— +
- 后面出现的所有兄弟元素 —— ~
选择器的并列
- 多个选择器，用逗号分隔
- 语法糖

层叠

简介
- 声明冲突：同一个样式，多次应用到同一个元素
- 层叠（权重计算）：解决声明冲突的过程，浏览器自动处理

比较重要性

重要性从高到底：

作者样式表（开发者书写的样式）中的!important样式

css

        a {
            color: red !important;
            text-decoration: none;
            font-style: italic;
        }

1. 作者样式表中的普通样式
1. 浏览器默认样式表中的样式

1. 比较特殊性
- 看选择器
- 总体规则：选择器选中的范围越窄，越特殊。
- 具体规则：通过选择器，计算出一个4位数（x x x x），数越大越特殊。
  - a. 千位：如果是内联样式，记作1，否则记0；
  - b. 百位：等于选择器中所有id选择器的数量
  - c. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量。
  - d. 个位：等于选择器中所有元素选择器、伪元素选择器的数量。
1. 比较源次序
- 代码书写靠后的胜出
应用
1. 重置样式表
  - 书写一些作者样式，覆盖浏览器的默认样式
  - 重置样式表 -> 浏览器的默认样式
  - 常见的重置样式表：normalizi.css、reset.css、meyer.css
2. 爱恨法则
  - link > visited > hover > active

继承

子元素会继承父元素的某些CSS属性
通常，跟文字内容相关的属性都能被继承。

属性值的计算过程

一个元素一个元素一次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程。
特殊的两个CSS取值：
- inherit:手动（强制）继承，将父元素的值取出应用到该元素
- initial:初始值，将该属性设置为默认值

盒模型

初识
- box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
- 盒子类型：
  1. 行盒，display等于inline的元素
    - 行盒在页面中不换行，块盒独占一行
    - display默认值为inline
    - 常见的行盒：span、a、img、video、audio
  2. 块盒，display等于block的元素
    - 浏览器默认样式表设置的块盒：容器元素、h1~h6、p
盒子的组成部分
- 无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：
1. 内容 content
  - width、height，设置的盒子内容的宽高
  - 内容部分通常叫做整个盒子的 内容盒：content-box
2. 填充（内边距） padding
  - 盒子边框到盒子内容的距离
  - padding-left、padding-right、padding-top、padding-bottom
  - padding：简写属性上右下左
  - 填充区+内容区 = 填充盒 padding-box
3. 边框 border
  - 边框 = 边框样式 + 边框宽度 + 边框颜色
  - 边框样式：border-style
  - 边框宽度：border-width
  - 边框颜色：border-color
  - 边框+填充区+内容区 = 边框盒 border-box
4. 外边距 margin
  - 边框到其他盒子的距离
  - margin-top、margin-left、margin-bottom、margin-right
  - 速写属性margin

盒模型应用

改变宽高范围
- 默认情况下，width 和 height 设置的是内容盒宽高。
- 页面重构师：将psd文件（设计稿）制作为静态页面
- 衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
  1. 精确计算
  2. CSS3：box-sizing
改变背景覆盖范围
- 默认情况下，背景覆盖边框盒
- 可以通过background-clip进行修改
溢出处理
- overflow，控制内容溢出边框盒后的处理方式
断词规则
- word-break，会影响文字在什么位置被截断换行
- normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）
- break-all：截断所有。所有字符都在文字处截断
- keep-all：保持所有。所有文字都在单词之间截断
空白处理
- white-space: nowrap

行盒的盒模型

常见的行盒
- 包含具体内容的元素
- span、strong、em、i、img、video、audio
显著特点
1. 盒子沿着内容延伸
2. 行盒不能设置宽（width）、高（height）
  - 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
3. 内边距（填充区）
  - 水平方向有效，垂直方向仅会影响背景，不会实际占用空间。
4. 边框
  - 水平方向有效，垂直方向不会实际占用空间。
5. 外边距
  - 水平方向有效，垂直方向不会实际占用空间。
行块盒
- display：inline-block 的盒子
1. 不独占一行
2. 盒模型中所有尺寸都有效
空白折叠
- 空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间
可替换元素和非可替换元素
- 大部分元素，页面上显示的结果，取决于元素内容，称为 非可替换元素
- 少部分元素，页面上显示的结果，取决于元素属性，称为 可替换元素
- 可替换元素：img、video、audio
- 绝大部分可替换元素都是行盒。
- 可替换元素类似于行块盒，盒模型中所有尺寸都有效。

常规流

盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
- 视觉格式化模型，大体上将页面中盒子的排列方式分为三种方式：
1. 常规流
2. 浮动
3. 定位
常规流布局
- 常规流、文档流、普通文档流、常规文档流
- 所有元素，默认情况下，都属于常规流布局
- 总体规则：块盒独占一行，行盒水平依次排列
- 包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。、
- 绝大部分情况下：盒子的包含块，为其父元素的内容盒
块盒

每个块盒的总宽度，必须刚好等于包含块的宽度
- 宽度的默认值是auto
- margin的取值也可以是auto，默认值0
- auto：将剩余空间吸收掉
- width吸收能力强于margin
- 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
- 在常规流中，块盒在其包含块中局中，可以定宽，然后左右margin设置为auto。
每个块盒垂直方向上的auto值
- height:auto, 适应内容的高度
- margin:auto, 表示0
百分比取值
- padding、宽高、margin可以取值为百分比
- 以上的所有百分比相对于包含块的宽度。
- 高度的百分比：
  - - 包含块的高度是否取决于子元素的高度，设置百分比无效
  - - 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
上下外边距的合并
- 两个常规流块盒，上下外边距相邻，会进行合并。
- 两个外边距取最大值。

浮动

视觉格式化模型，大体将页面中盒子的排列分为三种方式：
1. 常规流
2. 浮动
3. 定位
应用场景
1. 文字环绕
2. 横向排列
浮动的基本特点
- 修改float属性值为：
  - left：左浮动，元素靠上靠左排列
  - right：右浮动，元素靠上靠右排列
  - 默认值为none
1. 当一个元素浮动后，元素必定为块盒(更改display属性为block)
2. 浮动元素的包含块，和常规流一样，为父元素的内容盒。
盒子尺寸
1. 宽度为auto时，适应内容宽度
2. 高度为auto时，与常规流一致，适应内容高度
3. margin为auto时，为0
4. 边框、内边距、百分比设置与常规流一样
盒子排列
1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子靠上靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流盒子块盒
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时，会避开浮动盒子
6. 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
高度坍塌
- 高度坍塌的根源：常规流盒子的自动高度，在计算时不会考虑浮动盒子。
- 清除浮动，涉及css属性：clear
  - 默认值：none
  - left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
  - right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
  - both：清除左、右浮动，该元素必须出现在前面所有左、右浮动盒子的下方

定位

视觉格式模型，大体上将页面中盒子的排列分为三种方式：
1. 常规流
2. 浮动
3. 定位
  - 定位：手动控制元素在包含块中的精准位置
  - 涉及的CSS属性：position
position
- 默认值：static，静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
- 一个元素，只要position的取值不是static，认为该元素是一个定位元素。
- 定位元素会脱离文档流（相对定位除外）
- 一个脱离了文档流的元素：
  1. 文档流中的元素摆放时，会忽略脱离了文档流的元素
  2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
- 不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
- 可以通过四个CSS属性设置其位置：
  - left
  - right
  - top
  - bottom 盒子的偏移不会对其他盒子造成任何影响。
绝对定位
1. 宽高为auto时，盒子尺寸适应内容
2. 包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）。
固定定位
- 其他情况和绝对定位完全一样。
- 包含块不同：固定为视口（浏览器的可视窗口）
定位下的局中
- 某个方向居中：
  1. 定宽（高）
  2. 将左右（上下）距离设置为0
  3. 将左右（上下）margin设置为auto
- 绝对定位和固定定位中，margin设置为auto时，会自动吸收剩余空间。
多个定位元素重叠时
- 堆叠上下文
- 设置z-index，通常情况下，该值越大，越靠近用户
  - 只有定位元素设置z-index有效
  - z-index可以是负数，则遇到常规流、浮动元素，会被其覆盖。
补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并

4. HTML进阶

iframe元素3

框架页
通常用于在网页用嵌入另一个页面
iframe 可替换元素
1. 通常行盒
2. 通常显示的内容取决于元素的属性
3. CSS不能完全控制其中的样式
4. 具有行块盒的特点

在页面中使用flash

object
embed
它们都是可替换元素
MIME(Multipurpose Internet Mail Extensions)
多用途互联网邮件类型：
比如，资源是一个jpg图片，jpg图片，MIME：image/jpeg

表单元素

一系列元素，主要用于收集用户数据
input元素
- 输入框
  - 类型
    - type:text,普通文本输入框
    - type：password，密码框
    - type:date,日期选择框，兼容性问题
    - type：search，搜索框，兼容性问题
    - type:number，数字输入框
    - type：checkbox，多选框
    - type：radio，单选框
    - type:file,文件选择框
  - type属性：输入框类型
  - value属性：输入框的值
  - placeholder属性：显示提示的文本，文本框没有内容时显示
- input元素可以制作按钮
  - 当type值为reset、button、submit时，input表示按钮
表单状态
- readonly属性：布尔属性，是否只读，不会改变表单显示样式
- disabled属性：布尔属性，是否禁用，会改变表单显示样式
select元素
- 下列列表选择框
- 通常和option元素配合使用
textarea元素
- 文本域，多行文本框
按钮元素
- button
- type属性：reset、submit、button，默认值submit
表单状态
- readonly属性：布尔属性，是否只读，不会改变表单显示样式
- disabled属性：布尔属性，是否禁用，会改变表单显示样式
配合表单元素的其他元素
- label
  - 普通元素，通常和单选和多选框使用
- 显示关联
  - 可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值
- 隐式关联
- datalist
  - 数据列表
  - 该元素本人不会显示到页面，通常用于和普通文本框配合，存在兼容性问题
- form元素
  - 通常，会将整个表单元素，放置到form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。
  - form元素对开发静态页面没有什么意义。
- fieldset元素
  - 表单分组

美化表单元素

新的伪类
1. focus
  - 元素聚焦时的样式
2. checked
  - 单选或多选框被选中的样式
常见用法
1. 重置表单元素样式
2. 设置textarea是否允许调整尺寸
- css属性resize：
  - both：默认值，两个方案都可以调整尺寸
  - none：不能调整尺寸
  - horizontal：水平方向可以调整尺寸
  - vertical：垂直方向可以调整尺寸
1. 文本框边缘到内容的距离
2. 控制单选和多选的样式

表格元素

在CSS技术出现之前，网页通常使用表格布局。
后台管理系统中可能会使用表格。
前台：面向用户
后台：面向管理员。对界面要求不高，对功能性要求高。
表格不再适用于网页布局？表格的渲染速度过慢。

其他元素

abbr
- 缩写词
time
- 提供给浏览器或搜索引擎阅读的时间
b （bold)
- 以前是一个无语义元素，主要用于加粗字体，先用于语音重读
q
- 一小段引用文本
blockquote
- 大段引用文本
br
- 无语义
- 主要用于在文本中换行
hr
- 无语义
- 主要有用于分割
meta
- 还可以用于搜索引擎优化（SEC）
link
- 链接外部资源（CSS、图标）
- rel属性：relation，链接的资源和当前网页的关系
- type属性：链接的资源的MIME类型

5. CSS进阶

@规则

at-rule: @规则、@语句、CSS语句、CSS指令

import
- @import "路径";
- 导入另外一个css文件
charset
- @charset "utf-8";
- 告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行。

web字体和图标

web字体
- 解决用户电脑上没有安装相应字体，强制让用户下载该字体
- 使用@font-face指令制作新字体
字体图标
- iconfont

块级格式化上下文

全称Block Formatting Context，简称BFC
它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
不同的BFC区域，它们进行渲染时互不干扰
创建BFC元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
BFC渲染区域：
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
- 根元素
- 浮动和绝对定位元素
- overflow不等于visible的块盒
- display: flow-root;
具体规则：
- 创建BFC的元素，它的自动高度需要计算浮动元素
- 创建BFC的元素，它的边框盒不会与浮动元素重叠
- 创建BFC的元素，不会和它的子元素进行外边距合并（不同的BFC区域外边距不会合并）
- 即使是创建BFC的元素，也绝对不会计算固定定位和绝对定位的元素，因为fixed和absolution彻底脱离了常规流。

布局

多栏布局
- 两栏布局
- 三栏布局
等高
1. CSS3的弹性盒
2. JS控制
3. 伪等高
元素书写顺序
- 侧边栏使用绝对定位
后台页面的布局

浮动的细节规则

左浮动的盒子向上向左排列
右浮动的盒子向上向右排列
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

行高的取值

px, 像素值
无单位的数字
em单位
百分比

body背景

画布 canvas
- 一块区域
- 特点：
  1. 最小宽度为视口宽度
  2. 最小高度为视口高度
HTML元素的背景
- 覆盖画布
BODY元素的背景
- 如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）
- 如果HTML元素没有背景，BODY元素的背景覆盖画布
关于画布背景图
1. 背景图的宽度百分比，相对于视口
2. 背景图的高度百分比，相对于网页(html)高度
3. 背景图的横向位置百分比、预设值，相对于视口
4. 背景图的纵向位置百分比、预设值，相对于网页(html)高度

行盒的垂直对齐

多个行盒垂直方向上的对齐
- 给没有对齐的元素设置vertical-align
- 预设值
- 数值
图片的底部白边
- 图片的父元素是一个块盒，块盒高度自动，图片底部往往和父元素底边之间往往会出现空白
1. 设置父元素的字体大小为0
2. 将图片设置为块盒

参考线-深入理解字体

文字
- 文字是通过一些文字制作软件制作的，比如fontforge
- 制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。
  - top, ascent, 顶线
  - super, 上基线
  - baseline, 基线
  - sub, 下基线
  - bottom, descent, 底线
font-size
- 字体大小，设置的是文字的相对大小
- 文字的相对大小：1000、2048、1024
- 文字顶线到底线的局里，是文字的实际大小（content-area，内容区）
- 行盒的背景，覆盖content-area。
行高
- 顶线向上延伸的空间，和底线向下延伸的空间，两个空间相等，该空间叫做line gap（空隙）
- line gap默认情况下，是字体设计者决定。
  - top
  - bottom
  - top到bottom（看ppt图），叫做virtual-area（虚拟区）
  - 行高，就是virtual-area
  - line-height：normal，默认值，使用文字默认的line gap。
  文字一定出现在一行的最中间（错误） content-area一定出现在virtual-area的中间（正确）
vertical-align
- 决定参考线：font-size、font-family、line-height
- 一个元素如果子元素出现出现行盒，该元素内部也会产生参考线。
- baseline：该元素的基线与父元素的基线对其
- super：该元素的基线与父元素的上基线对其
- sub：该元素的基线与父元素的下基线对其
- text-top：该元素的virtual-area的顶板，对齐父元素的text-top
- text-bottom：该元素的virtual-area的底边，对齐父元素的text-bottom
- top：该元素的virtual-area的顶边，对齐父元素的顶边(该行中的最高顶边)
- bottom：该元素的virtual-area的底边，对齐父元素的底边（该行中的最低底边）
- 行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。
- middle：该元素的中线（content-area的一半），与父元素的X字母高度一般的位置对其
- 实际，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。
- 行盒：iniline-box
- 行框：line-box
- 数值：相对于基线的偏移量，向上为正数，向下为负数。
- 百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度
- line-box是承载文字内容的必要条件，以下情况不生成行框
  1. 某元素内部没有任何行盒
  2. 某元素字体大小为0，设置字体为像素大小后，可以显示
可替换元素和行块盒的基线
- 图片：基线位置位于图片的下外边距。
- 表单元素：基线位置在内容底边
- 行块盒：--test4.html
  1. 行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线。
  2. 如果行块盒内部没有行盒，则使用下外边距作为基线

堆叠上下文

堆叠上下文（stack context），它是一块区域，这个区域由某个元素创建，它规定了该区域中的内容在z轴上排列的先后顺序。
创建堆叠上下文的元素
1. html元素（根元素）
2. 设置了z-index数值（非auto）的定位元素
同一个堆叠上下文中元素在Z轴上的排列
- 从后到前的排列顺序（相对于同一个堆叠上下文）：- test2.html
1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别(z-index, stack level)为负的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
7. 堆叠级别为正数的堆叠上下文
- 每个堆叠上下文，独立于其他堆叠上下文，他们之间不能相互穿插。

svg

svg：sacalable vector grahpics，可缩放的矢量图
1. 该图片使用代码书写而成
2. 缩放不会失真
3. 内容轻量
怎么使用
- svg可以嵌入浏览器，也可以单独称为一个文件。
- xml语言，svg使用该语言定义。
书写svg代码
- 矩形：rect
- 圆形：circle
- 椭圆：ellipse
- 线条：line
- 折线：polyline
- 多边形polygon
- 路径：path
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
  - A
  - 半径1
  - 半径2
  - 顺时针旋转角度
  - 小弧（0）或大弧（1）
  - 顺时针（1）或逆时针（0）
  - 终点坐标
  - Z = closepath
例子
- 画太极图

数据链接(data url)

如何书写
- 数据链接：将目标文件的数据直接书写到路径位置。
- 语法： data:MIME,数据
意义
- 优点：
1. 减少了浏览器中的请求
  - 请求
  - 响应
  - 减少了请求中浪费的时间
2. 有利于动态生成数据
缺点：
1. 增加了页面资源的体积
  - 导致传输内容增加，从而增加了单个资源的传输时间
2. 不利于浏览器的缓存
  - 浏览器通常会缓存图片文件、css文件、js文件。
3. 会增加原资源的体积到原来的4/3
应用场景：
1. 当请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
2. 图片有其他代码动态生成，并且图片较小，可以使用数据链接。
  - base64
    - 一种编码方式
    - 通常用于将一些二进制数据，用一个可书写的字符串表示。

浏览器兼容性

问题产生原因
- 市场竞争
- 标准版本的变化
chome 54 支撑部分css3的功能
厂商前缀
比如：box-sizing，谷歌旧版本浏览器中使用-webkit-box-sizing
- 市场竞争，标准没有发布
- 标准仍在讨论中（草案），浏览器厂商希望先支持
- IE： -ms-
- Chrome，safari：-webkit-
- opera： -o-
- firefox： -moz-
浏览器在处理样式或元素时，使用如下的方式：当遇到无法识别的代码时，直接略过。
1. 谷歌浏览器的滚动条样式
  - 实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的。
2. 多个背景图中选一个作为背景
css hack
- 根据不同的浏览器（主要针对IE），设置不同的样式和元素
1. 样式
  - IE，CSS的特殊符号
  - *属性，兼容IE5、IE6、IE7
  - _属性，兼容IE5~IE6
  - 属性值\9，兼容IE5~IE10
  - 属性值\0，兼容IE8~IE10
  - 属性值\9\0，兼容IE8~IE10
  IE5、6、7的外边距bug，浮动元素的左外边距翻倍
2. 条件判断
渐进增强和优雅降级
- 两种解决兼容性问题的思路，会影响代码书写的风格
- 渐进增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式
  - 书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，在逐步加入新标准中的代码。
- 优雅降级：先制作完成的功能，然后针对低版本浏览器进行特殊处理
  - 书写代码时，先不用特别在意兼容性，完成整个功能之后，在针对低版本浏览器处理样式。
caniuse
- 查找css兼容性
- caniuse.com

局中总结

局中：盒子在其包含块中局中
行盒（行块盒）水平局中
- 直接设置行盒（行块盒）父元素 text-align：center
常规流块盒
- 定宽，设置左右margin为auto
绝对定位元素的水平局中
- 定宽，设置左右的坐标为0（left：0, right:0), 将margin设置为auto
- 相对于某个父元素居中是，该父元素需要是定位元素
固定定位元素的水平局中
- 定宽，设置左右的坐标为0（left：0, right:0), 将margin设置为auto
- 固定定位相对于视口，跟父元素是否为定位元素没有关系
实际上，固定定位（fixed）是绝对定位(absolute)的特殊情况
单行文本的垂直局中
- 设置文本所在元素的行高，为整个区域的高度
行块盒内多行文本的垂直局中
- 没有完美方案
- 设置盒子上下内边距相同，达到类似的效果。(这样将无法知道盒子的高度)
- 可以通过绝对定位的垂直居中方案来实现。
绝对定位的垂直局中
- 定高，设置上下的坐标为0（top：0, bottom：0），将上下margin设置为auto

样式补充

display：list-item
- 设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另外一个盒子。
- 元素本人生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列。
- 涉及的css：
  1. list-style-type 设置次盒子中内容的类型
  2. list-style-position 设置次盒子相对于主盒子的位置
  3. 速写属性 list-style
  4. list-style-image
    - 设置图片
  - 清空次盒子
    - list-style:none
图片失效时的宽高问题
- 如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高
- 将img元素设置为块盒或者行块盒
行盒中包含行块盒或可替换元素
- 行盒的高度与它内部的行块盒或可替换元素的高度无关
text-align:justify
- text-align:
  - start:起始位置对齐
  - left:左对齐
  - right:右对齐
  - center:居中
  - justify:除最后一行外，分散对齐。
制作一个三角形
direction 和 writing-mode
- 开始 start -> 结束 end
- 左 left -> 右 end
- 开始和结束是相对的，不同国家有不同的习惯
- 左右是绝对的
- direction设置的是开始到结束的方向
- writing-mode：设置文字书写方向
utf-8字符
- 黄伟杰
- content: "\9EC4\4F1F\6770";

6. 豆瓣首页

7. CSS3

概念

狭义的HTML5 CSS3
广义的HTML5
- HTML5本身 + CSS3 + JavaScript

粘性定位sticky (了解)

粘性定位可以被认为是相对定位和固定定位的混合。Sticky粘性的
语法∶
- 选择器{position:sticky; top:10px;}
- 粘性定位的特点∶
  - 1. 以浏览器的可视窗口为参照点移动元素（固定定位特点)
  - 1. 粘性定位占有原先的位置（相对定位特点)
  - 1. 必须添加top . left、right、bottom其中一个才有效

CSS3 新特性

CSS3 属性选择器
- E[att] 选择具有att属性的E元素
- E[att="val"] 选择具有att属性且属性值等于val的E元素
- E[att^="val""] 匹配具有att属性且值以val开头的E元素
- E[att$="val"] 匹配具有att属性且值以val结尾的E元素
- E[att*="val""] 匹配具有att属性且值中含有val的E元素

CSS3 结构伪类选择器

E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个

CSS3 伪元素选择器

::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

CSS3 盒模型

CSS3中可以通过box-sizing来指定盒模型，有2个值:即可指定为content-box【默认】、border-box，这样我们计算盒子大小的方式就发生了改变。

CSS3 其他特性（了解）

滤镜filter:
- filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
- filter:函数(); 例如:filter:blur(5px); blur模糊处理数值越大越模糊
- https://developer.mozilla.org/en-US/docs/Web/CSS/filter
calc函数
- calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
- width: calc(100% - 80px);
- 括号里面可以使用 + - * / 来进行计算。
过渡属性
- 过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
- 过渡动画:是从一个状态渐渐的过渡到另外一个状态
- 可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（( ie9以下版本）但是不会影响页面布局。
- 我们现在经常和:hover一起搭配使用。
- transition:要过渡的属性花费时间运动曲线何时开始;
  - 1. 属性︰想要变化的css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all(可以省略)就可以。
  - 1. 花费时间:单位是秒(必须写单位)比如0.5s
  - 1. 运动曲线:默认是ease(可以省略)
    - linear 匀速
    - ease 逐渐慢下来
    - ease-in 加速
    - ease-out 减速
    - ease-in-out 先加速后减速
  - 1. 何时开始︰单位是秒(必须写单位)可以设置延迟触发时间默认是0s（可以省略)
背景渐变
- background: -webkit-linear-gradient(起始方向, 颜色1, 颜色2, ...);
- background: -webkit-linear-gradient(left, red, blue);
- background: -webkit-linear-gradient(left top, red, blue);
- background: -webkit-linear-gradient(30deg, red, blue);
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient
阴影
- box-shadow: 0 0 12px;
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

CSS3 2D转换

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换(transform)你可以简单理解为变形

移动:translate
- 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
- 语法
  - transform: translate(x,y);或者分开写
  - transform: translateX(n);
  - transform: translateY(n);
- 重点
  - 定义2D转换中的移动，沿着X和Y轴移动元素
  - translate最大的优点∶不会影响到其他元素的位置
  - translate中的百分比单位是相对于自身元素的宽度或高度
  - translate:(50%,50%);
  - 对行盒没有效果
旋转:rotate
- 2D旋转指的是让元素在2维平面内顺指针旋转或者逆时针旋转。
- 语法：
  - transform:rotate(度数)
- 重点：
  - rotate里面跟度数，单位是deg 比如rotate(45deg)
  - 角度为正时，顺时针，负时，为逆时针
  - 默认旋转的中心点是元素的中心点
- 设置元素转换的中心点
  - transform-origin:x y;
  - 注意后面的参数x和y用空格隔开
  - x y默认转换的中心点是元素的中心点(50% 50%)
  - 还可以给x y设置像素或者方位名词(top bottom left right center)
缩放:scale
- 缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
- 语法： transform:scale(x,y);
- 重点
  - 注意其中的x和y用逗号分隔
  - transform:scale(1,1)︰宽和高都放大一倍，相对于没有放大
  - transform:scale(2,2):宽和高都放大了2倍
  - transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
  - transform:scale(0.5,0.5):缩小
  - sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
- 设置元素转换的中心点
  - transform-origin:x y;
  - 注意后面的参数x和y用空格隔开
  - x y默认转换的中心点是元素的中心点(50% 50%)
  - 还可以给x y设置像素或者方位名词(top bottom left right center)
2D转换综合写法
- 1. 同时使用多个转换，其格式为: transform: translate() rotate() scale() ..等，
- 1. 其顺序会影转换的效果。(先旋转会改变坐标轴方向)
- 1. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

CSS3 动画

动画( animation )是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用
- 制作动画分为两步∶
- 1. 先定义动画
  - 1. 用keyframes定义动画(类似定义类选择器)
  - 1. 动画序列
    - 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
    - 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素灰一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。
    - 可以做多个状态的变化 keyframe关键帧 /里面的百分比要是整数/
    - 里面的百分比就是总的时间(我们这个案例10s）的划分*/
- 1. 再使用（调用）动画
  - 调用动画
    - animation-name: move; /* 动画名称 */
    - animation-duration: 2s; /* 持续时间 */
动画属性
- @keyframes 规定动画。
- animation 所有动画属性的简写属性,除了animation-play-state属性。
- animation-name 规定@keyframes动画的名称。(必须的)
- animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是0。（必须的)
- animation-timing-function 规定动画的速度曲线,默认是“ease”。
  - linear动画从头到尾的速度是相同的。匀速
    - ease 默认。动画以低速开始,然后加快，在结束前变慢。
    - ease-in 动画以低速开始。
    - ease-out 动画以低速结束。
    - ease-in-out 动画以低速开始和结束。
    - steps() 指定了时间函数中的间隔数量(步长)
- animation-delay 规定动画何时开始,默认是0。
- animation-iteration-count 规定动画被播放的次数,默认是1，还有infinite
- animation-direction 规定动画是否在下一周期逆向播放，默认是“normal ",alternate逆播放
- animation-play-state 规定动画是否正在运行或暂停。默认是"running",还有"pause"。
- animation-fill-mode 规定动画结束后状态,保持forwards回到起始backwards
- 动画简写属性：
  - animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或结束状态
  - animation: move 2s linear 0s 1 alternate forwards;

CSS3 3D转换

3D位移：translate3d(x,y,z)
- transform:translateX(100px)∶仅仅是在x轴上移动
- transform:translateY(100px)∶仅仅是在Y轴上移动
- transform:translateZ(100px):仅仅是在Z轴上移动（注意:translateZ一般用px单位)
- transform:translate3d(x,y,z)∶其中x、y、z分别指要移动的轴的方向的距离
3D旋转：rotate3d(x,y,z)
- 3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
- 语法
  - transform:rotateX(45deg):沿着x轴正方向旋转45deg
  - transform:rolteY(45deg):沿着y轴正方向旋转45deg
  - transform:rotateZ(45deg):沿着Z轴正方向旋转45deg
  - transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可)
    - x,y,z表示旋转轴的矢量，deg表示旋转的度数
透视：perspective
- 在2D平面产生近大远小视觉立体，但是只是效果二维的
  - 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
  - 模拟人类的视觉位置，可认为安排一只眼睛去看
  - 透视我们也称为视距∶视距就是人的眼睛到屏幕的距离
  - 距离视觉点越近的在电脑平面成像越大，越远成像越小
  - 透视的单位是像素
- 透视写在被观察元素的父盒子上面的
  - d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
  - z:就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
3D呈现：transfrom-style
- 控制子元素是否开启三维立体环境。
- transform-style:flat; 子元素不开启3d立体空间默认的
- transform-style:preserve-3d; 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
- 这个属性很重要，后面必用

8. 移动web开发

移动端基础

视口
- 简介
  - 视口（viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
  1. 布局视口 layout viewport【不适合手机端】
    - 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
    - iOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
  2. 视觉视口 visual viewport【不适合手机端】
    - 字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
    - 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
  3. 理想视口 ideal viewport
    - 为了使网站在移动端有最理想的浏览和阅读宽度而设定
    - 理想视口，对设备来讲，是最理想的视口尺寸
    - 需要手动添写meta视口标签通知浏览器操作
    - meta视口标签的主要目的∶布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
  4. 总结
    - 视口就是浏览器显示页面内容的屏幕区域
    - 视口分为布局视口、视觉视口和理想视口
    - 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
    - 想要理想视口，我们需要给我们的移动端湎面添加meta视口标签
- meta视口标签
  - width 宽度设置的是viewport宽度，可以设置device-width特殊值
  - initial-scale 初始缩放比，大于0的数字
  - maximum-scale 最大缩放比，大于0的数字
  - minimum-scale 最小缩放比,大于0的数字
  - user-scalable 用户是否可以缩放,yes或no ( 1或0)
- 标准的viewport设置 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">
  - 视口宽度和设备保持─致
  - 视口的默认缩放比例1.0
  - 不允许用户自行缩放
  - 最大允许的缩放比例1.0
  - 最小允许的缩放比例1.0
二倍图
- 物理像素&物理像素比
  - 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334
  - 我们开发时候的1px不是一定等于1个物理像素的
  - PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同
  - 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
  - PC端和早前的手机屏幕/普通手机屏幕: 1CSS像素=1物理像素的
  - Retina（视网膜屏幕)是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里从而达到更高的分辨率，并提高屏幕显示的细腻程度。
- 多倍图
  - 对于一张50px*50px的图片,在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
  - 通常使用二倍图，因为iPhone6\7\8的影响;但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求背景图片注意缩放问题
  - 我们准备的图片，是实际需要图片像素大小的2倍，这就是2倍图。
  - cover 要完全覆盖盒子，可能有部分背景图片显示不全
  - contain 高度和宽度等比例拉伸，当宽度或高度铺满盒子，就不再进行拉伸了。
  - cutterman 切图神器

移动端技术解决方案

单独制作移动端页面（主流）
- 通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
- m.taobao.com
- m.jd.com
- m.suning.com
响应式页面兼容移动端（其次）
- 通过判断屏幕宽度来改变样式，以适应不同终端。
- 缺点：制作麻烦，需要花很大精力去调兼容性问题。
移动端CSS初始化 normalize.css
- Normalize.css:保护了有价值的默认值
- Normalize.css:修复了浏览器的bug
- Normalize.css:是模块化的
- Normalize.css:拥有详细的文档
- 官网地址: http://necolas.github.io/normalize.css/
- normalize.css：http://necolas.github.io/normalize.css/
CSS3盒子模型
- 移动端可以全部CSS3盒子模型
- PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型
- css3盒子模型
  - box-sizing: border-box ;
- 传统盒子模型
  - box-sizing: content-box;
特殊样式
- css3盒子模型
  - box-sizing: border-box;
  - -webkit-box-sizing: border-box;
- 点击高亮我们需要清除清除设置为transparent完成透明
  - -webkit-tap-highlight-color: transparent;
- 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
  - -webkit-appearance: none;
- 禁用长按页面时的弹出菜单
  - img,a {-webkit-touch-callout:none;}

移动端技术选型

单独制作移动端页面（主流）
- 流式布局(百分比布局)
- flex弹性布局（强烈推荐)
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端（其次）
- 媒体查询
- bootstarp
总结
- 我们选取一种主要技术选型，其他技术做为辅助，这种混合技术开发
vw和vh移动端布局

移动端开发之流式布局(百分比布局)

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式
max-width: 980px;
min-width: 320px;

移动端开发之flex布局

布局原理
- flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
  - 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
  - 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
- 采用Flex布局的元素，称为Flex容器(flex container)，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"。
  - 体验中div就是flex父容器。
  - 体验中span就是子容器flex项目
  - 子容器可以横向排列也可以纵向排列
- 总结flex布局原理
  - 就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex布局父项常见属性
- flex-direction :设置主轴的方向
  - 这个属性决定主轴的方向(即项目的排列方向)
  - 注意︰主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
  - row 默认值从左到右
  - row-reverse 从右到左
  - column 从上到下
  - column-reverse 从下到上
- justify-content :设置主轴上的子元素排列方式
  - 这个属性定义了项目在主轴上的对齐方式
  - 注意:使用这个属性之前一定要确定好主轴是哪个
  - flex-start 默认值从头部开始如果主轴是x轴，则从左到右
  - flex-end 从尾部开始排列
  - center 在主轴居中对齐（如果主轴是x轴则水平居中)
  - space-around 平分剩余空间
  - space-between 先两边贴边再平分剩余空间(重要)
  - space-evenly 平分剩余空间(盒子间距相等)
- flex-wrap:设置子元素是否换行
  - 默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的,如果装不开，会缩小子元素的宽度（即使已经指定的宽度），放到父元素里面。
  - flex-wrap:nowrap
  - flex-wrap:wrap
- align-items :设置侧轴上的子元素排列方式(单行)
  - 该属性是控制子项在侧轴（默认是y轴）的排列方式在子项为单项的时候使用
  - flex-start 从上到下
  - flex-end 从下到上
  - center 挤在一起居中(垂直居中)
  - stretch 拉伸〔默认值)，但是盒子不要给高度，子元素高度等于父元素高度。
- align-content :设置侧轴上的子元素的排列方式(多行)
  - 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(条行），在单行下是没有效果的。
  - flex-start 默认值在侧轴的头部开始排列
  - flex-end 在侧轴的尾部开始排列
  - center 在侧轴中间显示
  - space-around 子项在侧轴平分剩余空间
  - space-between 子项在侧轴先分布在两头,再平分剩余空间
  - stretch 设置子项元素高度平分父元素高度【默认】
- flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap
flex布局子项常见属性
- flex：子项目占的份数
  - flex属性定义子项目分配剩余空间，用flex表示占多少份数。
- align-self控制子项自己在侧轴的排列方式
  - align-self: flex-end;
- order属性定义子项的排列顺序(前后顺序)
  - order: -1; //默认0，越小越靠前。

移动端开发之rem适配布局

rem基础
- rem (root em)是一个相对单位,类似于em,em是父元素字体大小。
- 不同的是rem的基准是相对于html元素的字体大小。
- 比如，根元素(html)设置font-size=12px,非根元素设置width:2rem;则换成px表示就是24px.
- 优点：rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小，从而达到整体控制。
媒体查询
- Media Query CSS3新语法
  - 使用@media查询，可以针对不同的媒体类型定义不同的样式
  - @media可以针对不同的屏幕尺寸设置不同的样式
  - 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  - 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
- 语法规范
  - @media mediatype and|not|only (media feature){CSS-Code;}
  - 用@media开头注意@符号
  - mediatype 媒体类型
    - 将不同的终端设备划分成不同的类型，称为媒体类型
    - all 用于所有设备
    - print 用于打印机和打印预览
    - screen 用于电脑屏幕，平板电脑,智能手机等
  - 关键字and not only
    - 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
    - and:可以将多个媒体特性连接到一起，相当于“且”的意思。
    - not:排除某个媒体类型，相当于“非”的意思，可以省略。
    - only:指定某个特定的媒体类型，可以省略。
  - media feature 媒体特性必须有小括号包含
    - 每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含。
    - width 定义输出设备中页面可见区域的宽度
    - min-width 定义输出设备中页面最小可见区域宽度
    - max-width 定义输出设备中页面最大可见区域宽度
  - @media screen and (max-width:800px) {} //这句话的意思就是:在我们屏幕上并且最大的宽度是800像素设置我们想要的样式
  - 媒体查询一般按照从大到小或者从小到大的顺序来写代码
  - 注意:为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写但是我们最喜欢的还是从小到大来写，这样代码更简洁
  - @media screen and (max-width:539px) {body {background-color: blue;}} /* 0~539px页面颜色 */
  - @media screen and (min-width:540px) {body {background-color:green;}} /* 540~969px页面颜色 */
  - @media screen and (min-width:970px) {body {background-color:red;}} /* 970~ 页面颜色 */
媒体查询+rem实现元素动态大小变化
- rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
- 媒体查询可以根据不同设备宽度来修改样式
- 媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化
引入资源
- 当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets(样式表)。
- 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
Less基础
- 维护css的弊端
  - CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域）等概念。
  - CSS 需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。不方便维护及扩展，不利于复用。
  - CSS没有很好的计算能力
  - 非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。
- Less简介
  - Less ( Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器。
  - 做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
  - 它在CSS的语法基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的 - 名称所说的那样，Less可以让我们用更少的代码做更多的事情。
  - Less中文网址: http://lesscss.cn/
  - 常见的CSS预处理器: Sass、Less、Stylus
- Less使用
  - 我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。
  - Less变量
    - 变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
    - @变量名:值;
    - 变量命名规范
      - 必须有@为前缀
      - 不能包含特殊字符
      - 不能以数字开头
      - 大小写敏感
  - Less编译
    - 本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
    - 所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。
    - Vscode中的easy less插件
  - Less嵌套
  - Less运算
    - 任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
    - 注意:
      - 乘号(*）和除号(/)的写法
      - 运算符中间左右有个空格隔开1px + 5
      - 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
      - 如果两个值之间只有一个值有单位，则运算结果就取该单位
rem适配方案
- rem适配方案
  - 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小;（媒体查询)
  - CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值;
- 技术方案
  - 方案一：less + 媒体查询 + rem
  - 方案二【推荐】：flexible.js + rem
  - 总结：
    - 两种方案都存在。
    - 方案2更简单，现阶段大家无需了解立面的js代码
- rem实际开发适配方案1：less + 媒体查询 + rem
  - 设计稿厂家尺寸宽度
    - iphone 4,5 640px
    - iphone 6,7,8 750px【最常见】
    - Android 320px、360px、375px、384px、400px、414px、500px、720px。大部分4.7~5寸的安卓设备为720px
    - 一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以750为准。
  - 动态设置html标签font-size大小
    - 假设设计稿是750px
    - 假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
    - 每一份作为html字体大小，这里就是50px
    - 那么在320px设备的时候，字体大小为320/15就是21.33px
    - 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
    - 比如我们以750为标准设计稿
    - 一个100*100像素的页面元素在750屏幕下，就是100/50 转换为rem是2rem * 2 rem 比例是1比1
    - 320屏幕下，html字体大小为21.33则2rem = 42.66px此时宽和高都是42.66但是宽和高的比例还是1比1
    - 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果
  - 元素大小取值方法
    - 最后的公式:页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
    - 屏幕宽度/划分的份数就是html font-size的大小
    - 或者:页面元素的rem值 = 页面元素值(px)/html font-size字体大小
- rem实际开发适配方案1：flexible.js + rem
  - 手机淘宝团队出的简洁高效移动端适配库
  - 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
  - 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
  - 我们要做的，就是确定好我们当前设备的html文字大小就可以了
  - 比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以
  - 里面页面元素rem值:页面元素的px值/ 75
  - 剩余的，让flexible.js来去算
  - github地址：

移动端开发之vw和vh移动端布局

简介
- vw/vh是一个相对单位（类似em和rem相对单位)
  - vw是: viewport width视口宽度单位
  - vh是: viewport height视口高度单位
- 相对视口的尺寸计算结果
  - 1vw = 1/100视口宽度
  - 1vh = 1/100视口高度
- 例如︰
  - 当前屏幕视口是375像素，则1vw就是3.75像素，如果当前屏幕视口为414，则1vw
- 注意事项：
  - 和百分比有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的。
使用
- 超级简单，元素单位直接使用新单位vw/vh即可。
- 因为vw/vh是相对单位，所以不同视口（屏幕)下，宽高一起变化完成适配。
vw、vh还原设计稿
- 前提:我们设计稿按照iPhone678来设计，有个盒子是50像素*50像素的，如何使用vw呢
- 分析:
  - ①:设计稿参照iPhone678，所以视口宽度尺寸是375像素（像素大厨切换到2x模式)
  - ②:那么1vw是多少像素?
    - 375px / 100 = 3.75px
  - ③:我们元素的目标是多少像素?
    - 50px * 50px
  - ④:那么50*50是多少个vw?
    - 50 / 3.75 = 13.3333vw

移动端开发之响应式布局

响应式开发
- 原理
  - 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
  - 超小屏幕(手机) < 768px
  - 小屏设备(平板) >= 768px ~ < 992px
  - 中等屏幕(桌面显示器) >= 992px ~ < 1200px
  - 宽屏设备(大桌面显示器) >= 1200px
- 响应式布局容器
  - 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
  - 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
  - 平时我们的响应式尺寸划分
    - 超小屏幕(手机，小于768px):设置宽度为100%
    - 小屏幕(平板，大于等于768px)︰设置宽度为750px
    - 中等屏幕(桌面显示器，大于等于992px):宽度设置为970px
    - 大屏幕(大桌面显示器，大于等于1200px):宽度设置为1170px
Bootstrap前端开发框架
- 简介
  - Bootstrap来自Twitter(推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。
  - 中文官网：http://www.bootcss.com/
  - 官网：http://lgetbootstrap.com/
  - 推荐使用：http://bootstrap.css88.com/
- 优点
  - 标准化的html+css编码规范
  - 提供了一套简洁、直观、强悍的组件
  - 有自己的生态圈，不断的更新迭代
  - 让开发更简单，提高了开发的效率
- 版本
  - 2.x.x:停止维护,兼容性好,代码不够简洁，功能不够完善。
  - 3.xx︰目前使用最多,稳定,但是放弃了IE6-IE7。对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB项目。
  - 4.x.x︰最新版，目前还不是很流行
- 使用
  - 在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。
  - 控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
  - Bootstrap使用四步曲:
    - 1. 创建文件夹结构
      - css
      - img
      - bootstrap
    - 1. 创建html骨架结构
    - 1. 引入相关样式文件
    - 1. 书写内容
Bootstrap栅格系统
- 栅格系统英文为“gridsystems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
- Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口( viewport )尺寸的增加，系统会自动分为最多12列。
- Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份
- 栅格参数
  - - 按照不同屏幕划分为1~12等份
  - - 行( row ）可以去除父容器作用15px的边距
  - - xs-extra small:超小; sm-small :小; md-medium :中等;lg-large :大;
  - - 列( column )大于12，多余的“列( column )”所在的元素将被作为一个整体另起一行排列每一列默认有左右15像素的padding
  - - 可以同时为一列指定多个设备的类名，以便划分不同份数例如class="col-md-4 col-sm-6"
- 列嵌套
  - 栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
  - 我们列嵌套最好加1个行row这样可以取消父元素的padding值而且高度自动和父级一样高
- 列偏移
  - 使用.col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距(margin)
- 列排序
  - 通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列(column)的顺序。
- 响应式工具
  - 为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设展示或隐藏页面内容。
  - 类名超小屏小屏中屏大屏
  - .hidden-xs 隐藏可见可见可见
  - .hidden-sm 可见隐藏可见可见
  - .hidden-md 可见可见隐藏可见
  - .hidden-lg 可见可见可见隐藏

HTML+CSS ​

1. 概述 ​

开发环境的准备 ​

HTML & CSS 课程概述 ​

HTML & CSS 课程概述 ​

2. HTML核心 ​

第一个网页 ​

语义化 ​

文本元素 ​

HTML实体 ​

a元素 ​

路径的写法 ​

图片元素 ​

多媒体元素 ​

列表元素 ​

容器元素 ​

元素包含关系 ​

3. CSS基础 ​

术语解释 ​

CSS代码书写位置 ​

常见样式声明 ​

选择器 ​

层叠 ​

继承 ​

属性值的计算过程 ​

盒模型 ​

盒模型应用 ​

行盒的盒模型 ​

常规流 ​

浮动 ​

定位 ​

更多的选择器 ​

更多的样式 ​

4. HTML进阶 ​

iframe元素3 ​

在页面中使用flash ​

表单元素 ​

美化表单元素 ​

表格元素 ​

其他元素 ​

5. CSS进阶 ​

@规则 ​

web字体和图标 ​

块级格式化上下文 ​

布局 ​

浮动的细节规则 ​

行高的取值 ​

body背景 ​

行盒的垂直对齐 ​

参考线-深入理解字体 ​

堆叠上下文 ​

svg ​

数据链接(data url) ​

浏览器兼容性 ​

局中总结 ​

样式补充 ​

6. 豆瓣首页 ​

7. CSS3 ​

概念 ​

粘性定位sticky (了解) ​

CSS3 新特性 ​

CSS3 结构伪类选择器 ​

CSS3 伪元素选择器 ​

CSS3 盒模型 ​

CSS3 其他特性（了解） ​

CSS3 2D转换 ​

CSS3 动画 ​

CSS3 3D转换 ​

8. 移动web开发 ​

移动端基础 ​

移动端技术解决方案 ​

移动端技术选型 ​

移动端开发之流式布局(百分比布局) ​

移动端开发之flex布局 ​

移动端开发之rem适配布局 ​

移动端开发之vw和vh移动端布局 ​

移动端开发之响应式布局 ​

HTML+CSS

1. 概述

开发环境的准备

HTML & CSS 课程概述

HTML & CSS 课程概述

2. HTML核心

第一个网页

语义化

文本元素

HTML实体

a元素

路径的写法

图片元素

多媒体元素

列表元素

容器元素

元素包含关系

3. CSS基础

术语解释

CSS代码书写位置

常见样式声明

选择器

层叠

继承

属性值的计算过程

盒模型

盒模型应用

行盒的盒模型

常规流

浮动

定位

更多的选择器

更多的样式

4. HTML进阶

iframe元素3

在页面中使用flash

表单元素

美化表单元素

表格元素

其他元素

5. CSS进阶

@规则

web字体和图标

块级格式化上下文

布局

浮动的细节规则

行高的取值

body背景

行盒的垂直对齐

参考线-深入理解字体

堆叠上下文

svg

数据链接(data url)

浏览器兼容性

局中总结

样式补充

6. 豆瓣首页

7. CSS3

概念

粘性定位sticky (了解)

CSS3 新特性

CSS3 结构伪类选择器

CSS3 伪元素选择器

CSS3 盒模型

CSS3 其他特性（了解）

CSS3 2D转换

CSS3 动画

CSS3 3D转换

8. 移动web开发

移动端基础

移动端技术解决方案

移动端技术选型

移动端开发之流式布局(百分比布局)

移动端开发之flex布局

移动端开发之rem适配布局

移动端开发之vw和vh移动端布局

移动端开发之响应式布局