学习路线
主要学习PC端网站布局：品优购静态网站
功能点：
- 基础页面
- 点开页面到链接网页
- 注册页面
目的：精通网页布局，是前端人员的必备技能，为后面学习JS打好基础
路线：
HTML5基础->CSS3基础->H5C3提高->项目-品优购电商网站
网页的基本组成、HTML
网页的基本组成：
网站是网页的集合，网页是网站的基本元素。
网页是网站的一个页，是HTML格式的文件，需要通过浏览器来阅读。
HTML：
由图片，链接，文字，声音，视频等元素组成，通常看到的网页以htm或者html后缀结尾的文件，因此被称为HTML文件，
HTML是超文本标记语言来描述网页的一种语言
超文本
- 可以加入图片，声音，动画，多媒体等内容（超越了文本限制）
- 可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）
常用的浏览器
- 浏览器： ie，firefox，Google，edge，Safari，opera
- 内核：又称渲染引擎，负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
web标准
web标准是由W3C组织（万维网联盟）和其他标准化组织制定的一系列标准的集合。
浏览器不同，它们显示页面或者排版就有些许差异。
Web标准的构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素（HTML标签）进行整理和分类， |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript |
Web标准提出的最佳体验方案：结构、样式、行为相分离
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
HTML的语法规范
HTML语法规范
基本语法概述
- HTML标签是由尖括号包围的关键词，例如
<html> - HTML标签通常是成对出现的，例如
<html> </html>称为双标签 - 有些特殊的标签必须是单个标签，例如
<br />称为单标签
标签关系
双标签关系可以分为两类：包含关系和并列关系
包含关系：
title标签是包含在head标签中
并列关系：
两者互不影响
HTML基本结构标签
第一个HTML网页
每个网页都会有一个基本的结构标签（也称骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档
标签名 定义 说明
<html></html> HTML标签 页面中最大的标签，称为根标签
<head></head> 文档的头部 head标签中我们必须要设置的标签是titel
<title></title> 文档的标题 让页面拥有一个属于自己的网页标题
<body></body> 文档的主体 元素包含文档的所有内容
基本结构标签总结
网页开发工具
在空白的HTML文件里打一个叹号然后回车就可以出现基本的HTML骨架
按住CTRL＋加号或者减号可以增大或者缩小所有的字号
DOCTYPE和lang以及字符集的作用
文档类型声明标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页<!DOCTYPE html>
这句代码的意思是：当前页面采取的是HTML5 版本来显示网页.
注意：
- 声明位于文档中的最前面的位置，处于标签之前
- 不是一个HTML标签，它就是文档类型声明标签
lang语言种类
用来定义当前文档显示的语言
- en定义语言为英语
- zh-CN定义语言为中文
对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
只是警示作用
字符集
charset（字符集合）：字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8">
charset常用的值有：GB2312（简体中文）、BIG5（繁体中文）、GBK（包含前两者）和UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符
**注意：**上面的语法是必须要写的代码，否则可能引起乱码的情况，一般情况下，统一使用UTF-8，别写错。
HTML常用标签
标签语义
记住每个标签的语义即含义
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更加清晰
标题标签<h1> -<h6>
**标签语义：**作为标题使用，并且依据重要性递减
特点：
- 加了标题的文字会变粗，字号变大
- 一个标题独占一行
段落和换行标签
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
单词paragraph的缩写，意为段落
标签语义:可以把HTML文档分割为若干段落
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保有空隙
一个段落中的文字会从左到右依次排列，直到浏览器的右端才自动换行，如果希望某段文本强制换行显示，就需要使用换行标签<br />
br是单词break的缩写，意为打断、换行。
标签语义：强制换行
特点：
<br />是个单标签<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义:突出重要性，比普通文字重要
语义 标签 说明
加粗 <strong></strong>或者<b></b> 更推荐使用<strong>标签加粗 语义更强烈
倾斜 <em></em>或者<i></i> 推荐使用<em>
删除线 <del></del>或者<s></s> 推荐使用<del>
下划线 <ins></ins>或者<u></u> 推荐使用<ins>
PS:定在某一行 CTRL+C 就可以复制整行
div和span标签
<div> 和 <span>标签
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：
1.<div>标签用来布局，但是一行只能放一个<div>。大盒子（块级元素）
2.<span>标签用来布局，一行上可以多个<span>。小盒子（行内元素）
图像标签
图像标签和路径（重点）
1.图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
格式：<img src="图像URL"/> //单标签
单词image的缩写，意为图像。
src是<img>标签的必须属性，用于指定图像文件的路径和文件名
图像标签的其他属性：
宽度和高度一般修改一个就可以了，另一个会等比例缩放
border一般在css 中设定
图像标签注意点
图像标签属性注意点：
- 图像标签可以拥有多个属性，必须写在标签名后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式，即key= "value"的格式，属性=“属性值”。
目录文件夹和根目录
2.路径（前期铺垫知识）
- 目录文件夹
- VSCode打开目录文件夹
(1)目录文件夹和根目录
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此需要一个文件夹来管理他们。
目录文件夹：就是普通的文件夹，里面存放了我们做页面所需要的相关素材，比如HTML文件，图片等。
根目录：打开目录文件夹的第一层就是根目录。
(2)VSCode打开目录文件夹
文件——打开文件夹，选择目录文件夹，后期非常方便管理文件
相对路径
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为：
- 相对路径
- 绝对路径
相对路径：
以引用文件所在位置为参考基础，而建立出的目录路径
简单来说：图片相对于HTML页面的位置
上一级路径：
相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。
绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/logo.png”
链接标签
超链接标签
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面
- 链接的语法格式
- 链接的分类
链接的语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像 </a>
"a"就是单词anchor锚的缩写
两个属性的作用如下：
链接分类：
- 外部链接，例如
<a href ="https://www.baidu.com">百度</a> - 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可
<a href = "index.html">首页</a> - 空链接：如果当时没有确定链接目标时，
<a href="#">首页</a> - 下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件
- 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接
6.锚点链接：当我们点击链接，可以快速定位到页面中某个位置
- 在链接文本的href 属性中，设置属性值为#名字的形式，如
<a href="#two">第2集</a> - 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如
<h3 id ="two">第2集介绍</h3>
注释链接
HTML中的注释和特殊字符
注释：
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签
HTML中的注释：以"<!--"开头，以"-->"结束。
<!-- 注释语句 --> 快捷键： Ctrl+ /
总结：注释标签里面的内容是给程序猿看的，这个代码是不执行 不显示到页面中的。添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。
特殊字符：
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
**重点记住：**空格、大于号、小于号这三个，其余用的很少。
表格标签基本使用
表格标签
表格是实际开发中非常常用的标签：
- 表格的主要作用
- 表格的基本语法
表格的主要作用：
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。
总结：表格不是用来布局页面的，而是用来展示数据的。
表格的基本语法：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1.<table></table>是用于定义表格的标签
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
4.字母td指表格数据（table data），即数据单元格的内容。
爷爷是table，爸爸是tr，儿子是td（三层嵌套关系）
表头单元格标签
表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分（table head的缩写）
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
总结：
表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示
表格相关属性（了解）
表格属性
表格标签这部分属性我们实际开发我们不常用，后面通过css来设置
目的：
- 记住这些英语单词，后面CSS会使用
- 直观感受表格的外观形态
<table align="center" border="1" cellpadding="20px" cellspacing="0px" width="500">
<tr><th>name</th> <th>gender</th> <th>age</th></tr>
<tr><td>xixi</td> <td>male</td> <td>18</td></tr>
<tr><td>binbin</td> <td>female</td> <td>24</td></tr>
<tr><td>hzq</td> <td>male</td> <td>19</td></tr>
</table>
小说排行榜案例
分成两步：
先写制作表格的结构，
- 第一行里面是th表头单元格
- 第二行开始里面是td普通单元格
- 单元格里面可以放任何元素，文字链接图片等都可以
后写表格属性。
- 用到宽度高度边框cellpadding和cellspacing
- 表格浏览器中对齐align
<table align="center" width="500" height="249" border="1" cellspacing="0">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/down.jfif" width="25px"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/down.jfif" width="25px"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/down.jfif" width="25px"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="images/up.jfif" width="25px"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/down.jfif" width="25px"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/down.jfif" width="25px"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</table>
表格结构标签
表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用：<thead>标签 表示表格的头部区域、<tbody>标签表示表格的主体区域，这样可以更好的分清表格结构。
总结：
<thead></thead>:用于定义表格的头部，<thead>内部必须拥有<tr>标签，一般是位于第一行。<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。- 以上标签都是放在table标签中的
合并单元格
合并单元格
特殊情况下，可以把多个单元格合并为一个单元格，会最简单的合并单元格即可
- 合并单元格方式
- 目标单元格
- 合并单元格的步骤
合并单元格方式：
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
目标单元格：（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲：
- 先确定是跨行还是跨列合并
- 找到目标单元格， 写上“合并方式 = 合并的单元格数量”。比如：
<td colspan = "2"></td> - 删除多余的单元格
表格总结
表格总结
表格学习整体可以分为三大部分：
- 表格的相关标签
- 表格的相关属性
- 合并单元格
我们学习了 table标签 tr行标签 td单元格标签 th表头单元格标签 thead表格头部区域标签
无序列表
列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
无序列表
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。- 无序列表会带有自己的样式属性，但在实际应用时，我们会使用CSS来设置
（2,3之间不冲突）
有序列表
有序列表（理解）
有序列表即为有排列顺序的列表，其各个列表会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。
有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。- 有序列表会带有自己的样式属性，但在实际应用时，我们会使用CSS来设置
自定义列表
自定义列表
自定义列表的使用场景：
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。
dt:带头大哥 dd：弟弟跟班
其基本语法如下：
<dl>
<dt>名词</dt>
<dd>名词1解释1</dd>
<dd>名词2解释2</dd>
</dl>
<dl></dl>里面只能包含<dt>和<dd><dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
列表总结
注意：
- 学会什么时候用无序列表（彼此之间顺序无所谓），什么时候用自定义列表（有一个“大哥”，其他“小弟”围绕他说明）
- 无序列表和自定义列表代码怎么写
- 列表布局在学CSS的时候进一步学习
表单使用场景以及分类
表单标签
用于网页中的表单展示
为什么需要表单
使用表单目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分组成。
表单域
表单域
表单域是一个包含表单元素的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
<form action ="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性：
服务器编程阶段讲解
input之type属性文本框和密码框
表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
<input>表单元素：
<input>标签用于收集用户信息
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）
<input type ="属性值" />
<input />标签为单标签- type属性设置不同的属性值用来指定不同的控件类型
input之name和value属性
除type属性外，<input>标签还有其他很多属性，其常用属性如下：
- name和value是每个表单元素都有的属性值，主要给后台人员使用
- name表单元素的名字，要求 单选按钮和复选框要有相同的name值
input表单元素四个属性使用场景课堂问答
Q.有些表单元素想刚打开页面就默认显示几个文字怎么做？
A.可以给这些表单元素设置value属性=“值”
用户名：<input type ="text" value="请输入用户名" />
Q.页面中的表单元素很多，如何区别不同的表单元素？
A.name属性
用户名：<input type ="text" value="请输入用户名" name="username" />
- name属性后面的值，是自定义的
- radio（或者checkbox）如果是一组，我们必须给他们命名相同的名字
Q.如果页面一打开就让某个单选按钮或者复选框是选中状态？
A.checked属性：表示默认选中状态。用于单选按钮和复选按钮
Q.如何让input表单元素展示不同的形态？比如单选按钮或者文本框
A.type属性：type属性可以让input表单元素设置不同的形态
radio就是圆点按钮，text就是文本框按钮
input之type属性提交和重置按钮
<!-- 点击了提交按钮，可以把 表单域form里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
input之type属性普通按钮和文件域
<!-- 普通按钮 button 后期结合js 搭配使用 -->
<input type="button" value="获取短信验证码"><br>
<!-- 文件域 使用场景 上传文件使用 -->
上传头像：<input type="file">
label标签
<label>标签
<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，以增加用户体验。
语法：
<label for="sex">男</label>
<input type ="radio" name ="sex" id="sex" />
核心：<label>标签的for 属性应当与相关元素的id属性相同。
textarea文本域标签
<textarea>表单元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入空间，可以输入更多的文字，该控件常见于留言板，评论。
语法：
<textarea rows="3"= cols="20">
文本内容
</textarea>
- 通过标签可以轻松地创建多行文本输入框。
- cols =“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用css来改变大小。
表单元素几点总结
表单元素几个总结点
- 表单元素我们学习了三大组 input 输入表单元素 select下拉表单元素 textarea 文本域表单元素
- 这三组表单元素都应该包含在form表单域里面，并且有name属性
综合案例-注册页面
案例：注册页面
1.表格标签，可以让内容排列整齐
2.列表标签
3.表单标签
<h3>青春不常在，抓紧谈恋爱</h3>
<table width ="600" >
<!-- 第零行 -->
<tr>
<td>昵称：</td>
<td><input type="text" value="huxi"></td>
</tr>
<!-- 第一行 -->
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" id="man"><label for="man"><img src="images/man.png" width="15px">男</label>
<input type="radio" name="sex" id="woman"><label for="woman"><img src="images/woman.png" width="15px">女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日：</td>
<td>
<select name="" id="">
<option value="">请选择年份</option>
<option value="">2002</option>
<option value="">2003</option>
<option value="">2004</option>
<option value="">2005</option>
<option value="">2006</option>
</select>
<select name="" id="">
<option value="">请选择月份</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<select name="" id="">
<option value="">请选择日期</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区：</td>
<td><input type="text" value="湖北鄂州"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况：</td>
<td>
<input type="radio" name="marriage" id="w" checked="checked"><label for="w">未婚</label>
<input type="radio" name="marriage" id="y"><label for="y">已婚</label>
<input type="radio" name="marriage" id="b"><label for="b">保密</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历：</td>
<td><input type="text"></td>
</tr>
<!-- 第六行 喜欢的类型-->
<tr>
<td>喜欢的类型：</td>
<td>
<input type="checkbox" name="loveType" checked="checked">妩媚的
<input type="checkbox" name="loveType">性感的
<input type="checkbox" name="loveType">可爱的
<input type="checkbox" name="loveType">成熟的
</td>
</tr>
<!-- 第七行 自我介绍-->
<tr>
<td>自我介绍：</td>
<td>
<textarea name="" id="" cols="30" rows="10">自我介绍</textarea>
</td>
</tr>
<!-- 第八行：免费注册 -->
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<!-- 第九行：同意注册和加入标准 -->
<tr>
<td></td>
<td><input type="checkbox" name="agreement" >我同意注册条款和会员加入标准</td>
</tr>
<!-- 第十行：我是会员，立即登录 -->
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<!-- 第十一行：我承诺 -->
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
学会查阅文档
CSS：
CSS层叠样式表导读
CSS简介
CSS简介
CSS的主要使用场景就是美化网页，布局页面的
- HTML的局限性
- CSS-网页的美容师
HTML的局限性
说起HTML，这其实是一个非常单纯的家伙，他只关注内容的语义。比如h1表明这是一个大标题，p表明是一个段落，img表明这里有个图片，a表示此处有链接。
虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐…
CSS-网页的美容师
CSS是层叠样式表（Cascading Style Sheets）的简称
有时我们也会称之为CSS样式表或级联样式表。
CSS也是一种标记语言
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边框等）以及版面的布局和外观显示样式。
CSS让我们的页面更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更偏亮，让页面布局更简单。
体验CSS语法规范
CSS语法规范
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
<style>
/* 选择器{样式} */
/* 给谁改样式 {改什么样式} */
p {
color: red;
/* 修改了文字的大小为12px和颜色为红色 */
font-size: 12px;
}
</style>
- 选择器是用于指定CSS样式的HTML标签，花括号内是该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现，即（”key=value”）
- 属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等
- 属性和属性值之间用英文“：”分开
- 多个“键值对”之间用英文“；”进行区分
CSS代码风格
CSS代码风格
样式格式书写
1.紧凑格式
h3 {color:deeppink;font-size :20px;}
2.展开格式（推荐）
h3 {
color:deeppink;
font-size :20px;
}
样式大小写
h3 {
color：pink；
}
H3 {
COLOR：PINK；
}
空格规范
- 属性值前面，冒号后面，保留一个空格。
- 选择器（标签）和大括号中间保留空格
CSS选择器的作用
CSS基础选择器
CSS选择器的作用
选择器就是根据不同需求把不同的标签选出来
做了两件事：
1.选择器（选对人）
2.选择样式（做对事）
标签选择器
选择器分类
选择器分为基础选择器和复合选择器两个大类
- 基础选择器由单个选择器组成
- 基础选择器有包括：标签选择器、类选择器、id选择器和通配符选择器
标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，让某一类都有相同样式
语法：
作用：
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签
优点：
能快速为页面中同类型的标签统一设置样式
缺点：
不能设计差异化样式
类选择器
类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
<div class ='red'>变红色</div>
结构需要用class属性来调用class类的意思
类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用
使用类选择器画盒子
案例：课堂案例
<style>
.red{
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: red;
}
.green{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div class="red">red</div>
<div class="green">green</div>
<div class="red">red</div>
类选择器特殊使用-多类名
类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择的目的。这些类名都可以选出这个标签。
简单理解就是一个标签有多个名字。
多类名的使用方式
e.g.
<div class="red font20">Author</div>
在标签class属性中写多个类名
多个类名用空格分隔开
分别具有上述样式
多类名的使用场景
可以把一些标签元素相同的样式（共同的部分）放到一个类里面
这些标签都可以调用公共的类，然后再调用自己独有的类
从而节省css代码，统一修改也非常方便
id选择器
id选择器
id选择器可以为标有特定id 的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
id选择器的口诀：样式#定义，结构id调用
只能调用一次，别人切勿使用
通配符选择器
通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。
基础选择器总结
font-family设置字体类型
CSS字体属性
CSS Fonts（字体）属性用于定义字体系列，大小，粗细和文字样式（如斜体）
字体系列
CSS使用font-family 属性定义文本的字体系列。
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
- 尽量使用系统默认自带字体，保证都能正确显示
font-size设置字号大小
字体大小
e.g. font-size: 20px;
标题标签比较特殊，需要单独指定文字大小
font-weight设置字体粗细
字体粗细
font-weight: bold;
（定义粗体）
等价于
font-weight: 700;
font-weight: normal;
（默认值不加粗）
等价于
font-weight: 400;
font-style设置字体样式
文字样式
font-style: normal;默认值
font-style: italic;斜体
font复合属性写法
字体复合属性
字体属性可以把以上文字样式综合来写，这样可以更节约代码
例如：
font: italic 700 16px 'Arial';
字体属性总结
文本颜色color
CSS文本属性
CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
文本颜色
color: red;
开发中最常用的是十六进制
文本对齐text-align
对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式
文本修饰 text-decoration
装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
**总结：**重点记住如何添加下划线，如何删除下划线
文本缩进 text-indent
文本缩进
text-indent属性用来指定文本的第一行缩进，通常是段落首行缩进。通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
text-indent: 20px;
text-indent: 2em;
em是一个相对单位，就是一个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
行间距 line-height
行间距
line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
line-height : 26px;
CSS 文本属性总结
文本属性总结
内部样式表
CSS引入方式
CSS的三种样式表
按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
内部样式表
内部样式表（内嵌样式表）是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。
行内样式表
外部样式表
外部样式表
实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步：
- 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
- 在HTML页面中，使用link标签引入这个文件
<link rel="stylesheet" href="style.css">
CSS引入方式总结
CSS 引入方式总结
chrome调试工具使用
Chrome调试工具
Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式
emmet语法生成HTML标签
Emmet语法
Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，VSCode内部已经集成该语法
- 快速生成HTML结构语法
- 快速生成CSS样式语法
快速生成HTML结构语法
快速生成CSS样式语法
tac的就是 text-align: center;
tdn就是text-decoration: none;
快速格式化代码
快速格式化代码
复合选择器简介
CSS的复合选择器
什么是复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
后代选择器
后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
/* 要把ol里面的li选出来改为pink */
ol li {
color: pink;
}
子元素选择器
子选择器（重要）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
并集选择器
并集选择器（重要）
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
约定的语法规范，我们并集选择器喜欢竖着写
一定要注意，最后一个选择器不需要加逗号
链接伪类选择器
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。（比如更改字的底色）
伪类选择器书写最大的特点就是用冒号（：）表示，比如 :hover、:first-child。
链接伪类选择器
focus伪类选择器
:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
复合选择器总结
什么是元素显示模式
CSS的元素显示模式
什么是元素显示模式
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示，
比如div自己占一行，比如一行可以放多个span
HTML元素一般分为块元素和行内元素两种类型（独放一行或非一行）
块元素
常见的块元素有：
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>,<form>等
<div>标签是最典型的块元素
块元素的特点：
- 比较霸道，自己独占一行
- width,height,padding,margin都可以直接控制
- width默认是父级元素的100%
- 本身自己是一个容器（盒子），里面可以放行内或者块级元素
文字类的元素内不能使用块级元素
比如p标签和h1~h6标签
行内元素
常见的行内元素有：
<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>,<label>等
<span>标签是最典型的行内元素，也称内联元素
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 不能直接设置宽高
- 默认宽度就是它本身的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全
行内块元素
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行可以显示多个**（行内元素特点）**
- 默认宽度就是它本身内容的宽度**（行内元素的特点）**
- 高度，行高、外边距以及内边距都可以控制**（块级元素特点）**
元素显示模式总结
显示模式的转换
元素显示模式转换
特殊情况下，我们需要元素模式转换
简单理解：一个模式的元素需要另一种模式的特性
比如想要增加链接<a>的触发范围
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块：display:inline-block;
单行文字垂直居中的原理
一个小技巧 单行文字垂直居中的代码
让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
line-height = height
单行文字垂直居中的原理
简单理解：行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，大于则会偏下
背景颜色
CSS的背景
通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
背景颜色
背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置
精灵图是一种应用场景
背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性
背景图片位置
利用background-position 属性可以改变图片在背景中的位置
background-position : x y;
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位
参数是方位名词：
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top和top left效果一致
- 如果只指定了一个方位名词，另一个值忽略，则第二个值默认居中对齐
参数是精确单位：
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
参数是混合单位：
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
背景图像固定 （背景附着）
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 后期可以制作视差滚动的效果。例如：https://im.qq.com
背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量。
这是实际开发中，更提倡的写法
背景色半透明
CSS3 为我们提供了背景颜色半透明的效果。
background: rgba(0,0,0,0.3);
- 最后一个参数是alpha透明度，取值范围在0~1之间
- 我们习惯把0.3的0省略掉，background:rgba(0,0,0,.3);
- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
- CSS3新增属性，是IE9+版本浏览器才支持的
- 但是实际开发中，我们不太关注兼容性写法，可以放心使用
背景总结
CSS三大特性之层叠性
CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。
CSS 的三大特性
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
继承性
子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）
行高的继承
body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
优先级
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
CSS权重的叠加
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
/* 复合选择器会有权重叠加的问题 */
/* 权重虽然会叠加，但是永远不会有进位 */
/* ul li 权重是0,0,0,1 +0,0,0,1 = 0,0,0,2 2*/
ul li {
color: green;
}
/* li的权重是0,0,0,1 */
li {
color: red;
}
/* .nav li 权重0,0,1,0 + 0,0,0,1 =0,0,1,1 11*/
.nav li {
color: pink;
}
看透网页布局的本质
盒子模型
页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。
看透网页布局的本质
网页布局过程：
网页布局的核心：就是利用CSS摆盒子
盒子模型组成部分
盒子模型（Box Model）组成
盒子模型边框 border
边框（border）
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细） 边框样式 边框颜色
<style>
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细 一般情况下都用px做单位 */
border-width: 5px;
/* border-style 边框的样式 soild实线边框 dashed虚线边框 dotted点线边框*/
border-style: dashed;
/* border-color设置颜色 */
border-color: antiquewhite;
}
</style>
边框的复合写法
/* 边框的复合写法 简写： */
border: 5px solid green;
/* 上边框 */
border-top: 1px solid #000;
/* 下边框 */
border-bottom: 5px solid #556611;
表格细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
/* 合并相邻的边框 */
border-collapse: collapse;
边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此有两种方案解决：
- 测量盒子大小的时候，不量边框
- 如果测量的时候包含了边框，则需要width/height减去边框宽度
盒子模型内边距padding
内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离
padding 属性（简写属性）可以有一到四个值。
当我们给盒子指定padding值之后，发生了2件事情：
padding应用-新浪导航栏（上）
padding内边距可以撑开盒子，我们可以做非常巧妙的运用。
因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适
padding不会撑开盒子的情况
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
盒子模型外边距margin
外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
margin的简写和padding完全一样，有四种形式
外边距典型应用-块级盒子水平居中对齐
外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度（width）
- 盒子左右的外边距都设置为auto
行内元素和行内块元素水平居中
行内元素或者行内块元素水平居中给其父元素添加text-align：center即可。
外边距合并-相邻块元素垂直外边距
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并
解决方案：
尽量只给一个盒子添加margin值
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父亲会塌陷较大的外边距值。
解决方案：
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
圆角边框原理
圆角边框（重点）
在CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
语法：
border-radius : length;
原理：做内切圆，切除圆外部分
圆角边框的使用
<style>
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
/* 第一种写法 */
/* border-radius: 100px; */
/* 第二种写法 50%就是宽度和高度的一半 等价于100px*/
border-radius: 50%;
}
.yuanjiaojuxing {
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}
.radius {
width: 200px;
height: 200px;
/* 依旧是顺时针定义 */
border-radius: 10px 20px 30px 40px;
background-color: pink;
}
</style>
<body>
1.圆形的做法
<div class="yuanxing"></div>
2.圆角矩形的做法
<div class="yuanjiaojuxing"></div>
3.可以设置不同的圆角：
<div class="radius"></div>
</body>
盒子阴影
盒子阴影（重点）
CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
blur：阴影是虚的还是实的
spread：阴影的大小
示例：
box-shadow:10px 10px 10px 10px rgba(0,0,0,.3)
文字阴影
在CSS3 中，我们可以使用text-shadow属性将阴影应用于文本。
浮动导读
传统网页布局三种方式
浮动（float）
传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置
CSS提供了三种传统布局方式（简单来说，就是盒子之间如何排列顺序）
- 普通流
- 浮动
- 定位
标准流（普通流/文档流）
标准流：即时标签按照规定好的默认方式排列
注意：在实际开发中，一个页面基本都包含了这三种布局方式
为什么需要浮动？
1.如何让多个块级盒子（div）水平排列成一行？
2.如何实现两个盒子的左右对齐？
总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及到包含块或另一个浮动框的边缘。
浮动特性（重难点）
浮动特性：脱标
加了浮动之后的元素，会具有很多特性需要掌握
- 浮动元素会脱离标准流
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性（中间没有缝隙）
设置了浮动（float）的元素最重要特性：
- 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
- 浮动的盒子不再保留原先的位置
->
对2的解释：
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
对3的解释：
浮动元素会具有行内块元素特性。
任何元素都可浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
即：
如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
浮动布局练习1
<div class ="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
// style中
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
// 设置标准流的底盒子的宽高，以及设置让它居中对齐
.left {
float: left;
width: 230px;
height: 460px;
background-color: purple;
}
// 设置左侧盒子左边浮动，高度同父盒子相同
.right {
float: left;
width: 970px;
height: 460px;
background-color: skyblue;
}
// 设置右侧盒子左边浮动，高度同父盒子相同，则会紧贴左侧盒子
浮动布局练习2
//style中
* {
margin: 0;
padding: 0;
}
// 清除所有网页元素默认的边距值
li {
list-style: none;
}
// 清除li标签的默认样式
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
// 设置最大盒子的宽高，以及让它居中
.box li {
float: left;
width: 296px;
height: 285px;
background-color: purple;
margin-right: 14px;
}
// 设置每一个小盒子让其左浮动，设置其宽高
/* 最后一个盒子不要外边距 */
/* .last {
失效 因为权重不够
margin-right: 0px;
}*/
/* 这里必须写.box .last 因为要注意权重的问题 */
.box .last {
margin-right: 0px;
}
网页布局第二准则：先设置盒子大小，之后设置盒子的位置
常见的网页布局
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
/* 不设置宽度因为和浏览器一样宽 */
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 150px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
height: 300px;
background-color: pink;
margin: 0px auto;
}
.box li {
float: left;
width: 237px;
height: 300px;
margin-right: 10px;
background-color: gray;
}
.box .last {
margin-right: 0px;
}
/* 只要是通栏的盒子（和浏览器一样宽）则不需要指定宽度 */
.footer {
height: 200px;
background-color: gray;
margin-top: 10px;
}
</style>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
浮动的两个注意点
浮动布局注意点
先有父盒子再有子盒子
有三个盒子的情况下，若第一个盒子不浮动，他就会独占一行；第二个盒子浮动，第三个盒子不浮动，则第二个盒子会遮住第三个盒子。
为什么清除浮动
我们前面设置浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的。
理想中的状态是：让子盒子撑开父亲，有多少孩子，父盒子就有多高。
但是：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
清除浮动本质以及额外标签法
清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流
清除浮动方法
我们实际工作中，几乎只用clear:both;
清除浮动的策略是：闭合浮动
除此之外还有其他方法（推荐第三种和第四种方法）：
清除浮动方法——额外标签法
总结：
清除浮动方法——父级添加 overflow
清除浮动方法—— :after 伪元素法
清除浮动方法—— 双伪元素清除浮动
清除浮动总结
学成在线案例准备工作
案例准备工作
CSS属性书写顺序（重要）
页面布局整体思路
行模块：标准流
列模块：浮动
学成在线案例总结：
- 若页面需要版心，则可以定义一个公共版心，比如：
.w{width:1200px,margin:auto;} - 在制作一连串链接时，不直接使用a标签，而是使用包含链接(li+a)的做法
- 在制作导航栏时，会遇到文字不一样多的情况，最好给链接a左右padding撑开盒子，而不是指定宽度
- 在排列多个浮动的盒子时，如果没到指定个数就自动换行的话，则需把li的父亲ul修改的足够宽一行就能装开5个盒子，就不会换行了
定位导读
定位
为什么需要定位
有某些盒子，比如侧边栏。在当我们滚动窗口的时候，盒子是固定在屏幕的某个位置的
这样的效果，标准流或浮动都无法快速实现，此时需要定位来实现。
所以：
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位= 定位模式+边偏移。
定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为4个
边偏移
边偏移就是定位的盒子移动到最终的位置。有top、bottom、left和right 4个属性
静态定位static（了解）
静态定位是元素的默认定位方式，无定位的意思。
语法：
选择器{position:static;}
- 静态定位按照标准流特性摆放位置，没有边偏移
- 静态定位在布局时很少用到
相对定位relative（重要）
相对定位是元素在移动位置的时候，相对于它原来的位置来说的（自恋型）。
虽然人走了，但是位置还是保留着
语法：
选择器：{position：relative;}
相对定位的特点：（务必记住）
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）因此，相对定位并没有脱标。它最典型的应用时给绝对定位当爹
绝对定位 absolute（重要）
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准来定位（Document文档）
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
- 绝对定位不再只有原来的位置（脱标，绝对定位飘得比浮动还高）
子绝父相的由来
子级是绝对定位的话，父级要用相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。（和浮动进行比较，浮动也能实现在上面显示，但是它会和标准流冲突）
- 父盒子需要加定位限制子盒子在父盒子内的显示（不然就会脱离父盒子，以窗口作为父亲来排列）
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位（如果设置不然的话后续的盒子）
固定定位 fixed （重要）
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 { position:fixed; }
固定定位的特点：（务必记住）
- 以浏览器的可视窗口为参照点移动元素（跟父元素没用任何关系，不随滚动条滚动）
- 固定定位不再占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位
固定定位小技巧-固定到版心右侧
固定定位小技巧：固定在版心右侧位置。
小算法：
- 让固定定位的盒子left：50%，走到浏览器可视区（也可以看做版心）的一半位置
- 让固定定位的盒子margin-left在版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。
粘性定位 sticky（了解）
粘性定位可以被认为是相对定位和固定定位的混合。Sticky粘性的
语法：
选择器 { position:sticky; top:10px}
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位的特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加top、left、right、bottom其中一个才有效跟页面滚动配合使用，兼容性较差，IE不支持
定位的总结
定位叠放次序 z-index
语法：
选择器 { z-index:1; }
- 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
定位的拓展
绝对定位的盒子居中
加了定位的盒子不能通过margin: 0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
- left: 50%; :让盒子的左侧移动到父级元素的水平中心位置
- margin-left: -100px ;让盒子向左移动自身宽度的一半
.box {
position: absolute;
/* 1.left 走50% 的父容器宽度的一半*/
left: 50%;
/* 2. margin负值 往左边走 */
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
}
还有其他方法。。见我另一篇blog
定位特殊特性
绝对定位和固定定位也和浮动类似
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度（span）
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小（div）
- 浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题
对于第一点：比如说我设置一个span，因为他是行内元素，本身不能设置宽高，但是当给它加上绝对定位之后，他就可以设置了
代码：
效果：
对于第二点：当给一个块级元素div添加绝对定位之后，再给它一个内容和背景颜色，会发现div的大小是内容大小
不添加绝对定位：
添加绝对定位：
绝对定位（固定定位）会完全压住盒子
<style>
.box {
float: left;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
<div class="box"></div>
<p>pdd is 666!!!!</p>
添加了浮动只会遮住p标签的盒子但却不会遮住字
但是绝对定位就会压住标准流的所有内容
浮动之所以不会压住文字，因为浮动产生的目的就是为做文字环绕效果的
网页布局总结
通过盒子模型，我们清楚的知道了大部分HTML标签是一个盒子。
通过CSS浮动、定位可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
- 标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
- 浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
- 定位：定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由的在某个盒子内移动就用定位布局。
元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来。
1.display显示隐藏 2.visibility 显示隐藏 3.overflow溢出显示隐藏
display 属性（重要）
display属性用于设置一个元素应如何显示
- display:none; 隐藏对象
- display:blcok; 除了转换为块级元素之外，同时还有显示元素的意思。
display隐藏元素后，不再占有原来的位置。
后面在JS中应用广泛
visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。
- visibility：visible; 元素可视
- visibility：hidden; 元素隐藏
visibility隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，就用visibility：hidden
如果隐藏元素不想要原来位置，就用display：none（用处更多重点）
overflow溢出
CSS高级技巧导读
精灵图
为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵图（sprites）的使用
使用精灵图的核心：
- 精灵技术主要针对背景图片使用。就是把多个背景小图片整合到一张大图片中去。
- 这个大图片也称为sprites精灵图或者雪碧图
- 移动背景图片位置，此时可以使用background-position。（以左上角的点为坐标原点，向右为x轴，向下为y轴）
- 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动，所以数值是负值。
- 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
精灵图使用
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/sprites.png) no-repeat -182px 0;
/* background-position: -182px 0; */
}
.box2 {
width: 27px;
height: 25px;
background-color: pink;
margin: 200px;
background: url(images/sprites.png) -155px -106px;
}
步骤：
确定盒子的大小也就是待插入图片的大小，再确定图片在所有图片上相对位置，写上负值即可
字体图标
字体图标的产生
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标
精灵图的缺点：
- 图片文件比较大
- 图片本身放大和缩小会有失真的现象
- 一旦图片制作完毕想要更换非常复杂
此时，字体图标iconfont的出现很好的解决了以上问题；字体图标可以为前端工程师提供了一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点
- 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标会马上渲染出来，减少了服务器请求
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、选择等
- 兼容性：几乎支持所有的浏览器，放心使用
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
字体图标的下载
字体图标的引入
下载完毕之后，注意原先的文件不要删，后面会用
打开.css文件，从头开始复制直到block
总结使用：
四步使用
1.拷贝fonts文件夹 2.写css（拷贝） 3.找到demo.html里的图标复制过来 4.写新的css写入font-family: ‘icomoon’
字体图标的追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。把压缩包里面的selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件即可。
CSS三角
网页中常见的一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。
若要做到上述图片效果，要用到子绝父相，准备一个大盒子，然后在里面准备一个小盒子，使用绝对定位压在上面。
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: blue;
margin: 100px auto;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
/* 两个5px */
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: blue;
}
CSS用户界面样式
什么是界面样式
所谓界面样式，就是更改一些用户操作样式，以便提高更好的用户体验
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
鼠标样式 cursor
轮廓线 outline
去除获得光标后的蓝色边框方式：
给表单添加outline:0;或者outline:none;样式之后，就可以去掉默认的蓝色边框
input {outline:none;}
防止拖拽文本域 resize
在实际开发中，我们文本域右下角是不可以拖拽的。
textarea {resize:none;}
vertical-align 属性应用
CSS的 vertical-align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
解决图片底部默认空白缝隙问题
图片默认是按基线对齐，不是底线所以有空白缝隙。
主要解决方法有两种：
- 给图片添加 vertical-align:middle|top|bottom等（提倡使用的）
- 把图片转换为块级元素 display:block;
对于第二种方法：不能有文字
溢出的文字省略号显示
单行文字溢出显示省略号
比如：
必须满足三个条件：
/* 1.这个单词的意思是如果文字显示不开则强制一行内显示 */
white-space: nowrap;
/* 2. 溢出的部分隐藏显示 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;
多行文字溢出显示省略号
常见布局技巧
巧妙利用一个技术更好更快的布局：
- margin负值的运用
- 文字围绕运动元素
- 行内块的巧妙运用
- css三角强化
margin负值的运用（上）
边框重叠会有1+1=2的效果
加一个margin:-1px就会有1+1=1的效果
margin负值的运用（下）
有多个盒子并列排列时，当写入hover后，发现鼠标悬停后右边框会不显示
比如：这个第四个盒子
若要显示第四个：
第一种方法：
如果盒子没有定位，则鼠标经过添加相对定位即可
ul li:hover中写入：position: relative;
第二种方法：
如果li都有定位，则利用 z-index提高层级
文字围绕浮动元素
1.在框中先写文字
2.在框中放入浮动的图片
3.因为浮动本质就是做文字环绕效果，所以在填入图片后文字会自然被压扁
技巧：先写文字让它占满整个盒子让它的宽度为100%（和父盒子一样宽），然后再添加一个盒子左浮动，并填入图片，所以盒子就在右边了
CSS 三角强化（上）
先写一个宽和高为0的盒子，将上下左右边框改为不同颜色并设定，然后将底部边框长度改为0
.box1 {
width: 0;
height: 0;
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2.样式都是solid */
border-style: solid;
/* 3.上边框宽度要大，右边框宽度稍小，其余的边框为0 */
border-width: 100px 50px 0 0;
}
过程：
CSS 三角强化（下）
子绝父相，将三角变为白色放在父盒子的最右边
css模块：
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
// 父盒子设置宽高，因为文字居中适合于所有盒子，因此给父盒子；并给盒子一个红色边框
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
font-weight: 700;
}
// 现价盒子，子绝父相（放置白色三角）；添加浮动即可把剩余块挤到右边，设置宽高和文字居中，文字为白色并且字体变大。
.miaosha i {
position: absolute;
right: 0;
width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
// 设置白色直角三角，置于最上层的最右边。
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
// 设置原价盒子的字号颜色和删除线
html模块：
<div class="price">
<span class="miaosha">
￥1650
<i></i>
</span>
<span class="origin">￥5650</span>
</div>
CSS初始化
HTML5CSS3提高导读
新增语义化标签
HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本都是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
声明：
- 新特性增加了很多，但是我们专注于开发常用的新特性
- 只讲解部分新特性
HTML5 的新特性
HTML5 新增的语义化标签
注意：
- 这种语义化标准主要针对搜索引擎
- 这些新标签页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
- 其实，我们移动端更喜欢使用这些标签
- HTML5还增加了很多其他标签
HTML5 新增的多媒体标签
新增的多媒体标签主要包含两个：
- 音频：
<audio> - 视频：
<video>
使用它们可以很方便的在页面中嵌入音频和视频，可以不再使用flash和其他浏览器插件。
视频
<video src="media/mi.mp4" muted="muted" controls="controls" loop="loop" poster="images/pic.jpeg"></video>
音频：支持三种格式：MP3、WAV、OGG格式
多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加muted属性来静音播放视频，音频不可以
- 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性
HTML5 新增的input类型
我们验证的时候必须添加form表单域
当我们点击提交按钮就可以验证表单了
重点基础：number tel search 这三个
HTML5 新增的表单属性
若想修改placeholder
input::placeholder {
color: pink;
}
CSS3的新特性
CSS3 的现状
- 新增的CSS3特性有兼容性问题，ie9+才支持
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
- 现阶段学习：新增选择器和盒子模型以及其他特性
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
属性选择器
属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器。
重点务必掌握
// 将type = text的input选取出来
input[type=text]{
color:pink;
}
若想让多个div有相同的属性，以前的方法：
1.使用并集选择器（icon1,icon2,icon3,icon4{}）
2.使用多类名选择器，给每一个class里增加相同的ico
新方法：因为都有class类的值，并且都是以icon开头
//选择首先是div，然后具有class属性，并且属性值必须是icon开头的元素
div[class^=icon]{
color:red;
}
//选择以某些属性值结尾的元素
section[class$=data] {
color:skyblue;
}
注意：类选择器、属性选择器、伪类选择器的权重都为10
结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素
这里的n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始（可以是2n,2n-1…）
even是偶数，odd是奇数
n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
nth-of-type
/* nth-child 会把所有的盒子都排列序号 */
/* 执行的时候首先看 :nth-child(1) 之后回去看前面 div ，但第一个孩子是p不是div，因此没有孩子能被匹配上*/
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div （指定的元素），然后把div排序，然后把第一个div选出来（之后回去看：nth-of-type(1) 第几个孩子*/
section div:nth-of-type(1) {
background-color: blue;
}
区别：
- nth-child 对父元素里面所有孩子（里面可能有div有p有很多别的）排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配。
- nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子。
总结：
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E找第n个孩子
- 关于 nth-child（n）我们要知道n是从0开始计算的，要记住常用的公式
- 如果是无序列表，我们肯定用nth-child更多
- 类选择器，属性选择器，伪类选择器，权重为10
伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
CSS3最新的写法：两个冒号
注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以称为伪元素
使用场景：右标签、黑色遮罩层
伪元素选择器的使用
语法： element::before{}
1.before和after必须要有 content属性
2.before在父元素内容的前面创建元素，after在元素内容的后面插入元素
3.伪元素选择器和标签选择器一样，权重为1
div {
width: 200px;
height: 200px;
background-color: pink;
}
div::before {
/* 这个content是必须要写的 */
content: '我';
}
div::after {
display: inline-block;
content: '小猪佩奇';
width: 60px;
height: 80px;
background-color: skyblue;
}
// before和after都是行内元素，所以需要转换
伪元素清除浮动本质
伪元素清除浮动就是额外标签法的升级和优化。
CSS3 盒子模型
CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
可以分成两种情况：
- box-sizing:content-box 盒子大小为width+padding+border（以前默认的）
- box-sizing:border-box 盒子大小为width
如果盒子模型改为了box-sizing:border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
CSS3其他特性（了解）
- 图片变模糊
- 计算盒子宽度width:calc函数
CSS3滤镜filter：
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter：函数(); 例如：filter:blur(5px); blur模糊处理，数值越大越模糊
CSS3 calc函数：
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100%-80px);
// 可以让子盒子比父盒子小80px
// 括号里面可以使用 + - * / 来进行计算
CSS3过渡（重点）
过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看，动感十足，虽然 低版本浏览器（ie9以下的版本）但是不会影响页面布局
我们现在经常和 :hover 一起搭配使用。
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以
- 花费时间：单位是 秒（必须写单位）比如0.5s
- 运动曲线：默认是ease（可以省略）
- 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间，默认是0秒（可以省略）
广义的H5
广义的HTML5：
- 广义的HTML5是HTML5本身+CSS3+JavaScript
- 这个集合有时称为HTML5和朋友，通常缩写为HTML5
- 虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势
2D转换之translate
**转换（transform）**是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。（可以简单理解为变形）
- 移动：translate
- 旋转：rotate
- 缩放：scale
2D转换
二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
2D转换之移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
语法：
transform:translate(x,y);
// 或者分开写
transform: translateX(n);
transform: translateY(n);
/* 移动盒子的位置：1.定位 2.盒子的外边距 3.2d转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置，y就是在y轴上移动位置，中间用逗号分隔 */
/* transform: translate(x, y); */
/* transform: translate(100px, 100px); */
/* 1.我们如果只移动x坐标 */
/* transform: translate(100px, 0); */
transform: translateX(100px);
/* 2.我们如果只移动y坐标 */
/* transform: translate(0, 100px); */
transform: translateY(100px);
}
重点：
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate的最大优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
优于相对定位在于：相对定位可以实现移动，但是加不上过渡效果
2D转换之旋转rotate
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转
语法：
transform:rotate(度数)
重点:
- rotate里面跟度数，单位是deg，比如rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转中心时元素的中心点
img {
width: 150px;
border-radius: 50%;
border: 5px solid #d2f525;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all 0.5s;
}
img:hover {
/* 顺时针旋转360度 */
transform: rotate(360deg);
}
2D转换中心点 transform-origin
可以设置元素转换的中心点
语法：
transform-origin: x y;
重点：
注意后面的参数x和y用空格隔开
x y 默认的中心点是元素的中心点（50% 50%）
还可以给x y 设置像素或者方位名词，比如（top bottom left right center）
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/* 1.可以跟方位名词 */
/* transform-origin: left bottom; */
/* 2. 默认的是 50% 50% 等价于center center */
/* 3.可以是px 像素 */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
2D转换之缩放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)：缩小
- scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
div {
width: 200px;
height: 200px;
background-color: #000;
margin: 100px auto;
transition: all 0.3s;
}
div:hover {
/* 1.里面写的数字不跟单位 就是倍数的意思 1就是1倍的意思*/
/* transform: scale(x, y); */
/* transform: scale(2, 2); */
/* 2. 等比例缩放 同时修改宽度和高度，有简单的写法：只写一个数字 */
transform: scale(2);
/* 3. 我们可以缩小，小于1就是缩放 */
transform: scale(0.5);
/* scale的优势之处：不会影响其他盒子而且可以设置缩放的中心点。 原来可以直接改宽高，会影响其他盒子位置而且缩放或者扩大不是以中心点缩放或者扩大*/
}
2D 转换综合写法
注意：
- 同时使用多个转换，其格式为：transform:translate() rotate() scale()
- 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前面（因为第二点）
2D 转换总结
- 转换transform：我们可以简单理解就是变形，有2D和3D之分
- 我们暂且学了三个，分别是位移、旋转和缩放
- 2D移动 translate(x,y)，其最大的优势就是不影响其他盒子，里面参数用%，是相当于自身宽度和高度来计算的
- 可以分开写比如 translateX(x) 和 translateY(y)
- 2D旋转rotate(度数) 可以实现旋转元素 度数的单位是deg
- 2D 缩放 sacle(x,y) 里面的参数是数字，不跟单位，可以是小数，最大的优势：不影响其他盒子
- 设置转换中心点 transform-origin ：x y； 参数可以是百分比、像素或者是方位名词
- 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
动画
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
动画的基本使用
制作动画分为两步：
1.先定义动画
2.再使用（调用）动画
用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
动画序列：
- 0% 是动画的开始，100%是动画的完成，这样的规则就是动画序列。
- 在 @keyframes 中规定某项CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。
- 使用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%
元素使用动画
/* 我们想页面一打开，一个盒子就从左边走到右边 */
/* 1.定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 10s;
}
动画常用属性
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数：无数多次 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放，alternate为可逆向播放 */
/* animation-direction: alternate; */
/* 动画结束后的状态，默认的是backwards回到起始状态，我们可以让他停留在结束的状态，也就是backwards */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过div 让这个div停止动画，鼠标离开就继续动画 */
animation-play-state: paused;
}
动画常用属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
e.g.
animation: move 2s linear 0s 1 alternate forwards
// 前两个属性：name duration 一定要写
- 简写属性里面不包含 animation-play-state
- 暂停动画：animation-play-state:paused;经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来：animation-direction:alternate
- 盒子动画结束后，停在结束位置：animation-fill-mode：forwards
速度曲线细节
steps 有打字机效果：
div {
width: 0;
height: 30px;
background-color: pink;
/* steps 就是分几步来完成我们的动画 有了steps 就不要再写 ease 或者linear 了 */
animation: w 4s steps(10) forwards;
/* white-space: nowrap; */
overflow: hidden;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
3D转换
我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子
特点：
- 近大远小
- 物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果
三维坐标系
3D转换我们主要学习常用的3D位移和3D旋转
主要知识点：
- 3D位移：translate3d(x,y,z)
- 3D旋转：rotate3d(x,y,z)
- 透视：perspective
- 3D呈现 transform-style
3D移动 translate3d
div {
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px);
transform: translateY(100px); */
transform: translateX(100px) translateY(100px) translateZ(100px);
/* 1. translateZ 沿着Z轴移动; */
/* 2.translateZ 后面的单位我们一般跟px */
/* 3.translateZ(100px) 向外移动100px（向我们的眼睛来移动的） */
/* 4.3D移动有简写的方法 */
/* transform: translate3d(x, y, z); */
/* transform: translate3d(100px, 100px, 100px); */
/* 5.xyz是不能省略的，如果没有就写0 */
transform: translate3d(0, 100px, 100px);
}
透视 perspective
透视越小，也就是眼睛距离越近，图像就越大。
想让网页有3d效果就得有透视
一般固定透视，调整z轴大小
3D旋转rotate
3D旋转指可以让元素在三维平面沿着x轴，y轴，z轴或者自定义轴进行旋转
rotateX是单杠，正角度为倒过去，负角度为前倾
rotateY是钢管舞
rotateZ是大转盘
3D呈现 transform-style
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间 */
transform-style: preserve-3d;
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
.box {
transform: rotateY(-40deg);
}
浏览器私有前缀以及总结
CSS3总结：
CSS3多了新的选择器，多了转换transform，多了动画animation，多了浏览器私有前缀
属性选择器（中括号），结构伪类选择器nth-child(n)，nth-of-type(n) n可以是数字，还有关键词，公式;::before和::after
2D:translate(x,y) rotate(45deg) scale(x,y)
3D:translate3d(x,y,z) rotateX(x) rotateY(y) rotateZ(z)
重点记住我们动画的简写属性
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
