前端学习笔记

html学习笔记

html元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置高度和宽度	它本身内容的宽度

• 转换块级元素：display:block;
• 转换行内元素：display:inline;
• 转换为行内块元素：display:inline-block;

相对路径

相对路径	符号	说明
同一级路径		文件位于html文件同一级
下一级路径	/	文件位于html文件的下一级
上一级路径	../	文件位于html文件的上一级

标签分类

• 文字
• 布局
• 列表
• 表格
• 表单
• 超链接
• 图像

文字类标签

标签名	作用
h1-h6	标题
p	段落
em，i	斜体
b，strong	黑体
small	细体
br	换行，单标签
del，s	文字删除线
sup	上标
sub	下标

布局类标签

标签名	作用
div	块容器
span	内联容器
nav（H5）	导航栏

• 块标签（block）：自己要占一行
• 内联标签（inline）：可以多个一行直到超出父容器宽度时换行

列表类标签

块级标签，其中的li和dd具有浏览器默认样式为padding-left：40px

标签名	作用
ul-li	无序列表，unordered list，list
ol-li	有序列表，ordered list，list
dl-dt / dd	定义列表 define list，define title，define data

注意：

• li不能单独存在，必须包裹在ul里面;反过来说，ul的“儿子”不能是别的东西，只能有li。
• 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的”语义”的。

ul和ol通用属性

属性	属性值
css属性：list-style	none（无列表样式，就是前面那个标记）

无序列表ul

属性	属性值
type（该属性也可以为li列表项单独设置）	disc（实心原点，默认） square（实心方点） circle（空心圆）

有序列表ol

属性	属性值
type	1（阿拉伯数字，默认）、a、A、i、I（罗马数字）
start	设定type的开始位置

定义列表dl

dt、dd只能在dl里面;dl里面只能有dt、dd。

• <dt>:定义标题 列表的标题，这个标签是必须的
• <dd>:定义描述 列表的列表项，即描述的是dt列表的标题；如果不需要它，可以不加

图像标签

<img src="#" />

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时候出现的文字
title	文本	提示文本。鼠标放到图像上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border(不建议使用)	像素	设置图像的边框粗细
align(不建议使用)	left, center,right, top,button	图片的对齐方式（目前被css里面的vertical-align替代）
Hspace / Vspace（不建议使用）	像素	图片的上下边距，左右边距

src图片来源

• 本地图片
  • 绝对路径
  • 相对路径
• 图片链接

视频音频标签

视频标签video

属性	属性值	说明
autoplay	autoplay	视频就绪自动播放（谷歌浏览器自动播放需要添加muted静音来开启自动播放）
controls	controls	展示播放控件
width	像素	播放器宽度
height	像素	播放器高度
loop	loop	循环播放
preload	auto （预先加载视频）	none|规定是否预先加载视频（如果autoplay属性存在，就忽略该属性）
src	url	视频url地址
poster	image	加载等待的画面图片（jpg，png，gif等）
muted	muted	静音播放

属性名和属性值相同的属性，可以省略属性值，只写属性名

写法示例

<video width="320" height="240" controls autoplay src="/i/movie.mp4"> </video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  你的播放器不支持video标签
</video>

说明：当MP4不受浏览器支持时，播放ogg格式，当两者均不受支持时，显示文字。

音频标签audio

属性名	属性值	说明
autoplay	autoplay	音频就绪后自动播放
controls	controls	显示播放控件
loop	loop	循环播放
src	url	音频文件url

写法示例参考video的示例

source

<source> 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源。
<source> 标签允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

属性名	属性值
src	文件url
type	文件类型，例如vidoe/mp4，video/ogg等或audio/mp3

超链接标签

<a href="#">我是超链接</a>

属性	作用
href	用于指定链接目标的url地址。（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	指定链接页面的打开方式。其中_self为默认值（本页面打开），_blank为在新空白窗口中打开

链接分类

• 空链接： 没有确定链接目标时使用，<a href="#">空链接</a>
• 外部链接： 例如<a href="http://www.dayangtuo247.xyz">大羊驼</a>
• 内部链接： 网站内部页面之间相互链接<a href="index.html">主页</a>
• 下载链接： 如果href里面地址是一个文件或者验收压缩包，浏览器会下载这个文件
• 网页元素链接： 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
• 锚点链接： 点击链接，可以快速定位到页面中的谋个位置。
  • 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#name">点我跳转</a>
  • 找到目标位置标签，添加一个id属性 = 刚才的名字，如id="name"
  • 扩展： 通过锚点链接，也可以跳转到其他网页的锚点中，例如<a href="a.html#name">点我跳转</a>，跳转到a.html下的name锚点
• 文件夹链接： 只能使用相对路径，例如<a href="name">点我跳转</a>， name为文件夹名

  出于安全考虑，浏览器都是禁止来自外部网络的网页直接访问本地硬盘资源，这里说的“外部网络”，也包括你在本地电脑利用IIS架设网页服务器，然后网页通过http协议访问，但是文件却是用你这种所谓的绝对路径来访问，这样的话，浏览器会认为网页和文件是处于不同域（网页在网络中，而文件却在本地硬盘），也会拒绝访问的哦。

html字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
©	版权（copyright）	©	©

表格标签

<table>
    <thead>
        <tr>
            <th>表头单元格</th>
            <th>表头单元格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格三</td>
            <td>单元格四</td>
        </tr>
    </tbody>
</table>

属性	作用
table	定义一个表格
thead	表格头，只是为了方便折叠，观看代码
tbody	表格主体，用于对 HTML 表格中的主体内容进行分组,方便程序员观看
width	宽度
height	高度
bordercolor	表格颜色
align	表格内文本对齐方式（left，right，center）
valign	一行的文本垂直对齐方式（top，middle，bottom）
th	table head，表头单元格，该单元格的内容会加粗居中显示 相当于td+b标签
tr	table row，定义表格的一行
td	table data，定义表格的一行的某一个单元格
cellspacing	单元格相距范围（外边距）
cellpadding	单元格的内边距
colspan	行合并格数<td colspan="3"></td>,行合并三格
rowspan	列合并格数<td rowspan="2"></td>,列合并两格
border	表格边框，包括表格内的单元格边框
border-collapse	css属性，表格中的单元格边框属性，collapse | separate，collapse使相邻边框合并，separate不合并

表格的标签<thead><tbody><tfoot>

这三个标签有与没有的区别：

• 1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
• 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

框架标签

注意：frameset和frame在html5中已经不在受到支持，请使用iframe

frameset框架的集合

一个框架的集合可以包含多个框架或框架的集合。

如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了。

• 注意，框架标签不能放在body标签里面，因为body标签代表的只是一个页面，而框架标签代表的是多个页面。

  框架标签和body是并列的形式，frameset不能被body标签包裹，因为body是一个页面，而frameset框架也是页面

• 框架的集合用<frameset> <frameset> <frame>表示，然后在集合里放入一个一个的框架

补充：frameset frame和已经从 Web标准中删除，建议使用 iframe 代替。

属性	属性值	含义
rows	200，*	上方占用200px，下方占用剩余空间
cols	500，*	左边占用500px，剩余空间给右边

属性值也可以使用相对值写法，例如rows=”20%，*”

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
</head>
<frameset rows="20%,*">
    <frame src="top.html"></frame>

    <frameset cols="40%,*">
        <frame src="index.html"></frame>
        <frame src="message.html"></frame>
    </frameset>
</frameset>

</html>

frame：框架

一个框架显示一个页面

属性	属性值	说明
scrolling	no/true(默认是true)	是否需要滚动条
noresize	noresize	不可改动框大小，默认情况下，单个框架的边界是可以拖动
frameborder	0或1（默认显示）	隐藏或显示边框（框架线）
name	name	给框架起名（这样就可以通过A框架的超链接打开B框架的name锚点）

内嵌框架

iframe可以用在body内外，但是通常包裹于body内

属性	属性值	说明
src	文件地址	内嵌页面
width	html单位	宽度
height	html单位	高度
scrolling	no / true	是否需要滚动条，默认是true
name	名称	窗口名称，公有属性

内嵌框架举例：（在内嵌页面中切换显示不同的页面）

 <body>
    <a href="文字页面.html" target="myframe">默认显示文字页面</a>
    <a href="图片页面.html" target="myframe">点击进入图片页面</a>
    <a href="表格页面.html" target="myframe">点击进入表格页面</a>

    <iframe src="文字页面.html" width="400" height="400" name="myframe"></iframe>
 </body>

表单属性

标签名	作用
form	表单域
input	输入框
button	按钮
textarea	文本域
label	绑定，将label 绑定到某元素
select-option	下拉选择框
fieldset-legend	表格边框标题

form标签

属性	作用
name或id	表单名称，提交表单时告诉后台是哪个表单在进行提交
method	提交方式，get，post
action	提交到后端的地址
target	目标打开方式，_blank，_self等等
enctype	encoding type表单数据的编码方式(加密方式)

get提交和post提交的区别

• GET方式

  将表单数据，以”name=value”形式追加到action指定的处理程序的后面，两者间用”?”隔开，每一个表单的”name=value”间用”&”号隔开。 特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

• POST方式

  将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。 特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。

enctype属性

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认） 除了上传文件之外的数据都可以使用
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 上传附件时，必须使用这种编码方式
text/plain	空格转换为 “+” 加号，但不对特殊字符编码。

input标签

输入标签，用于接收用户输入。

type属性值

属性值	说明
text（默认）	文本
password	密码类型
radio	单选按钮 name属性相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的）。 非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
checkbox	多选按钮，name 属性值相同的按钮作为一组进行选择。
checked	将单选按钮或多选按钮默认处于选中状态。当标签设置为或者时，可以用这个属性。属性值也是checked，可以省略。
hidden	隐藏表单，在表单中包含不希望用户看见的信息
button	普通按钮，结合js代码进行使用
submit	提交按钮，传送当前表单数据给服务器或其他程序处理 这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。 点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
reset	重置按钮，清空当前表单的内容，并设置为最初的默认值 使用reset 按钮的时候需要用form包裹起来
image	图片按钮，和提交功能的按钮完全一致，只不过图片按钮可以显示图片 使用src属性和图片文件绑定起来
file	文本选择框。提示：如果要限制上传文件的类型，需要配合JS来实现验证。 对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

其他属性

属性	属性值	说明
value	默认输入内容	文本框里的默认内容（已填好）
size	number	文本框的长度，文本框的大小最多只能看见 number个字符，一个英文或中文都算一个字符。
maxlength	number	文本框的文字数量限制，最大不超过number
readonly	readonly	文本框只读，不能编辑。 可以获得和失去焦点
disabled	disabled	文本框禁用，不能编辑、获取焦点。
placeholder	任意内容	占位符，输入框处于空白时的提示文字

使用：

<input type="radio" value="man" name="sex" />
<input type="radio" value="woman" name="sex" />
<input type="radio" value="idontknow" name="sex" />

单选框，其最终提交值为sex:man / woman / idontknow这种形式，也就是name是绑定到同一个键名，value是不同的键值，选择其中一个作为提交表单时候的数据

select标签

下拉选择框

<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

select标签属性

属性名	属性值	说明
multiple	multiple	可以对下拉列表中的选项进行多选。使用该属性将由下拉菜单转换为滚动视图
size	number（默认为1）	size改变选择框显示给选项个数，设置多少表示同时显示几个选项 未使用multiple属性，设置为1，则是下拉视图。设置为非1值，则为滚动视图 使用multiple属性，size的值无论取什么，都是滚动视图。同时size仍然起作用

option标签属性

属性名	属性值	说明
selected	selected	预选中的项目
hidden	hidden	这个属性是自己摸索出来的，隐藏显示
disabled	disabled	禁止选中

使用：

<select name="class">
    <option value="one">高一</option>
    <option value="two">高二</option>
    <option value="three">高三</option>
</select>

单选框，其最终提交值为class:one / two / three其中的一个i值

textarea标签

多行文本输入框，text 就是“文本”，area 就是“区域”。

属性	属性值	说明
rows	number	指定文本区域行数
cols	number	指定文本区域列数
readonly	readonly	可选中，不可编辑，只读模式
disabled	disabled	不可选中，不可编辑

小提示：在html页面内，给定textarea默认文本，用浏览器打开，浏览器不会对空白字符折叠为一个空格。例如下代码，html会原封不动输出

<textarea name="sdaf" id="" cols="30" rows="10" readonly>dsafasd

dfgsdfg
</textarea>

CSS属性

控制文本域大小，resize：none | both | horizontal | vertical

• none：不允许用户调整元素大小。
• both：用户可以调节元素的宽度和高度。
• horizontal：用户可以调节元素的宽度
• vertical：用户可以调节元素的高度。

表单模块分组

<fieldset> 标签可以将表单内的相关元素分组。同时在相关表单元素周围绘制边框。

提示： leagent标签为 fieldset元素定义标题。

属性	值	描述
disabled	disabled	规定该组中的相关表单元素应该被禁用。
form	form_id	规定 fieldset 所属的一个或多个表单。
name	text	规定 fieldset 的名称。

举例：

label标签

label标签为input元素定义标注（标签）。label标签用于绑定一个表单元素，当点击label标签内的内容时，浏览器会自动将焦点转移到对应的表单元素上，用来增加用户体验。

语法：

<label for="sex">文本</label>
<input type="radio" id="sex"/>

属性	属性值
for	元素id名称

button标签详解

<button> </button>

• type
  • submit
  • reset
  • button
• name提交的值的名字（也是按钮的名称）
• value最终提交的值

html5新增

input属性

属性	说明
type=”email”	限制用户输入必需为email类型 (输入错误内容，submit提交会有提示错误)
type=”url”	限制用户输入必需为url (输入错误内容，submit提交会有提示错误)
type=”date”	限制输入为日期类型 (含窗口)
type=”time”	限制用户输入必需为时间类型 (含窗口)
type=”month”	限制用户输入为月类型 (含窗口)
type=”week”	限制用户输入为周类型 (含窗口)
type=”number”	限制输入为数值类型 (含窗口)
type=”tel”	手机号码
type=”search”	搜索框
type=”color”	生成一个颜色选择表单(含窗口)

表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单为空时的提示文本
autofocus	autofocus	页面加载完毕自动聚焦到指定表单或输入框
autocomplete	off / on	当用户第一次输入并提交后，第二次输入相同字段，浏览器会有提示信息
multiple	multiple	可以多选文件进行提交

可以通过以下选择器修改placeholder文本样式

input::placeholder {
    color: red;
}

CSS学习笔记

CSS样式三大特性

层叠性

相同选择器给设置相同的样式，此时一个样式会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

• 样式冲突，遵循的原则是就近原则，哪个样式离结构进，执行哪个样式
• 样式不冲突，不会层叠

<style type="text/css">
    div{
        color:red;
    }
    div{
        color:blue;
    }
</style>

<div>
    这个文字是红色
</div>

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。例：

<style>
    div{
        font-size: 20px;
    }
</style>
<div>
    <p>
        该文字继承div设置的文字属性
    </p>
</div>

• 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
• 关于盒子、定位、布局的属性，都不能继承。

优先级

• 选择性相同，则执行层叠性
• 选择器不同，根据选择器优先级执行

CSS规定基本选择器的优先级从低到高排序为：

选择器名	权重（非二进制，每一位都是十进制可以无限大）
继承 或 *	0,0,0,0 （继承和通配符的权重是0，牢记）
元素选择器	0,0,0,1
类选择器	属性选择器 | 伪类选择器|0,0,1,0
id选择器	0,1,0,0
行内样式	1,0,0,0
！important	∞无穷大

权重没有进位的情况出现，即使是0,0,0,10这种情况，在哪个位置仍属于哪个位置，不会进位

简单记忆：

    继承和通配符(*)选择器 < 元素选择器 < (类选择器 | 属性选择器 | 伪类选择器 ) < ID选择器 < 行内样式 < !important

!important加在属性值的后边,例如color：red !important;

举例：

<style>
    /*权重是0,0,0,1 + 0,0,0,1 = 0,0,0,2*/
    ui li{
        color:green;
    }
    /*权重是0，0,0,1*/
    li{
        color:red;
    }
    /*权重是0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
    .nav li{
        color:pink;
    }

</style>
<body>
    <ui class="nav">
        <li>大猪蹄子</li>
        <li>猪肘子</li>
    </ui>
</body>

权重从左往右按照每个位置比较，谁最大，就选谁，因此上述li颜色为pink色

特殊样例a标签

<style>
    div{
        font-color:red;
    }
</style>
<body>
    <div>
        <a>你猜猜我是什么颜色</a>
    </div>
</body>

这里结果是a标签仍然是蓝色，原因在于浏览器会默认给a标签加一个标记样式，而继承权重为0，改标记样式权重为0,0,0,1，因此a仍然是蓝色

基础选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同标签	不能差异化选择	较多	p {color:red;}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.nav {color:red;}
id选择器	一次只能选择一个标签	id属性只能在每个html文档中出现一次	一般和js搭配	#nav {color:red;}
通配符选择器	选择所有标签	选择得太多，有部分不需要	特殊情况使用	* {color:red;}

复合选择器分类

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>a
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav, div
交集选择器	选择具有某类或id的E对象	交集选择	较多	符号是E.class或E#id
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover{}的使用
焦点选择器	选择获得光标的表单	跟表单相关	较少	input:focus{}记住这种写法

链接伪类选择器

选择器名	选择器作用
a：link	选择所有未被选择的链接
a：visited	选择所有已访问过的链接
a：hover	选择鼠标经过的链接
a：active	选择鼠标正在按下且没有松开的链接

顺序不可颠倒，例如hover放到link之前，那么hover的效果将不会生效，记忆技巧lv hao

理论上链接伪类选择器也可以设置在其他元素上，目前测试过div，button上可以使用hover和active

焦点伪类选择器

选择器名	选择器作用
input：focus	用于选取获得焦点的伪类选择器

通常情况只有input和textarea等表单才能使用

字体样式

属性名	属性值
font	[font-style | font-variant | font-weight] font-size/line-height font-family
font-style	normal | italic | oblique
font-variant	normal | small-caps
font-weight	(100-900)，normal(400) |bold(700) |bolder |lighter
font-size	目前暂时使用px，em，rem为单位，该属性有其他的属性值，目前不学
font-family	”微软雅黑“，”宋体“（可单个字体或多个字体，依次从左到右进行匹配）

文本样式

属性名	属性值
text-align	left | center | right | justify（双端对齐）
text-decoration	none | overline | line-through | underline
text-indent	首行缩进，单位常用px，em，rem
line-height	行高（去除文字高度后除以二得到距离上一行的高度）
word-spacing	单词间距，对中文无效，默认normal，或设具体长度值，也可以是负值
letter-spacing	字符间距，默认normal，或设具体长度值，也可以是负值，但是如果设为0，它的效果并不与normal相同
text-transform	capitalize（单词首字大写） | uppercase（全大写） | lowercase（全小写） | none（默认）
text-shadow	向文本中添加一个或多个阴影，语法：text-shadow: X-Offset Y-Offset shadow color， 其中X-Offset表示水平偏移距离，其值为正值时向右偏移，Y-Offset表示垂直偏移距离，其值为正数时向 下偏移，shadow是阴影模糊度（大于0），用来指定模糊效果的作用距离。color指定阴影颜色，可以是RGBA色
word-wrap	normal | break-word ，该属性允许超过容器长度的长单词换行到下一行，默认值表示只在允许 断字的位置换行，break-word表示内容将在边界内断开（即使在单词内也断开）
word-break	normal | break-all | keep-all ，用来如何处理自动换行，normal以单词为最小单位断开， break-all表示任意字内断开，keep-all表示只能在半角空格或连字符处换行。
white-space	normal |pre |nowrap |pre-wrap |pre-line，指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。

vertical-align

用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。图片、表单都属于行内块元素，默认的vertical-align是以基线对齐。

属性值	说明
baseline	默认值，元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把元素放置在父元素的中部
bootom	把元素的顶端与行中最低元素的顶端对齐。
等等

用途

• 图片与文字垂直居中对齐

  vertical-align: middle;

• 解决图片底部默认空白缝隙问题

  图片底侧会有一个空白缝隙，原因是行内块元素默认是与文字的基线（baseline）对齐

  • 给图片添加vertical-align: middle | top | bottom;等，不与基线对齐即可
  • 把图片转换为块级元素display: block;

背景样式

属性名	属性值
background-color	颜色单词 | 十六进制颜色 | rgb | rgba | hsl | hsla
background-image	url(url);举例：url(image.png);
background-repeat	repeat(默认) | no-repeat | repeat-x | repeat-y
backgroud-position	x y; 百分比%
background-attachment	scroll（默认值） | fixed，背景图像固定
background	格式：背景颜色，背景图片，平铺，背景图像滚动，背景图片位置；的方式来写，多张图片也可叠加，例如 background: url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box, url(test2.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box #aaa;
等等

边框

属性名	属性值
border-color	边框颜色
border-style	边框样式 默认none，dotted 点线，solid 实线，dashed 虚线，等等
border-width	边框粗细 px或者其他单位
border-radius	边框圆角，设置一个值则四个角统一 两个值则为：上左下右 上右下左 三个值为：上左 上右下左 下右 四个值为：上左 上右 下右 下左 顺序按照，对角线原则，顺时针原则
border-collapse	table表格中的单元格边框属性，collapse | separate，collapse使相邻边框合并，separate不合并
border	复合样式，格式：边框粗细 边框样式 边框颜色（没有顺序要求，这是通俗写法）

• 其中除border-collapse之外的属性可以可以在之后加-left，-right，-top，-bottom单独为不同位置单独设置属性(下表格的left均可替换为方位词)

border-color	border-style	border-width	border-radius	border
border-left-color	border-left-style	border-left-width	border-bottom-left-radius	border-left

边框会影响盒子的实际大小，默认设置的边框是外边框

阴影

阴影不占有空间。

盒子阴影

语法格式：box-shadow: X-shadow Y-shadow blur sparead color inset;

文字阴影

语法格式：text-shadow：X-shadow Y-shadow blur color;
文字阴影不包含：spread inset

属性名	属性值	说明
X-shadow	number	【必需】 ，水平阴影的位置，允许负值。
Y-shadow	number	【必需】 ，垂直阴影的位置，允许负值。
blur	number	可选，模糊距离。
spread	number	可选，阴影尺寸。
color	css颜色值	可选，阴影的颜色。
inset	—	可选，将外部阴影（outset）设置为内部阴影 默认内部阴影

• 默认是外阴影（outset），但是不可以显示声明这个单词，否则将box-shadow失效
• 盒子阴影不占用空间，不会影响其他盒子排列。

内边距外边距

属性名	属性值
padding-left/right/top/bottom	内边距，左边，右边，上边，下边
padding	复合属性 一个值：设置四个类边距 两个值：上下内边距，左右内边距 三个值：上内边距，左右边距，下内边距 四个值：四个位置单独设置边距
margin-left/right/top/bottom	外边距，左边，右边，上边，下边
margin	复合属性，同padding设置方法

• 当给盒子指定padding之后
  • 内容和边框有了距离，因为添加了内边距
  • padding影响了盒子的实际大小。

  也就是说，如果盒子已经有了宽度和高度，此时在指定内边框，会撑大盒子。

浏览器会默认给定一个内外边距，例如body默认给定外边距为上下左右8px，因此在实际开发中，会用css通配符消除内外边距，但是，还要考虑到特殊标签本身自带的内外边距，例如ul标签自带padding-left：40px的外边距，该样式会层叠掉通配符设定的内外边距。

*{
    margin:0px;
    padding:0px;
}

扩展：padding不允许有负值出现，而margin是允许负值出现的，这通常用于盒子的垂直水平居中

选择器{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0px 0px -100px;
    background-color: pink;
}

实现原理：垂直水平居中，先绝对定位于屏幕中央，后使用margin减掉盒子高度或者宽度的一半，以实现垂直水平居中。

盒子模型

无论那种盒子模型，其整个盒子的大小都是border区域内的大小

标准盒子模型（内容盒子）

盒子大小计算：element width = content width + padding*2 + border*2

注意事项：

• 当width和height有设定时，且再次设定padding会导致盒子撑大，甚至当父盒子装不下时，会超出父盒子的大小，因此要格外注意盒子的大小
• 反之：width或height未设定时，设定padding大小，始终都会在父盒子的范围内，不会撑开父盒子

IE盒子模型(边框盒子)

盒子大小就是设置的width大小；内容大小计算：centent width = element width - border*2 - padding*2

使用IE盒子模型的有点在于，设置宽高度后，再设置padding和border不会将盒子撑开

<body>标签也有margin

<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。

外边距塌陷

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1. 相邻元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有
上外边距margin-top, 则他们之间的垂直间距不是margin- bottom​与​margin-top​之和。取两个值中的
较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案

​ 只给一个盒子添加margin值。

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

解决方案

• 为父元素定义上边框
• 为父元素定义上边距
• 为父元素添加overflow:hidden
• 还有其他方法，例如浮动，固定，绝对定位的盒子不会有塌陷问题。

网页布局的三种方式

网页布局的本质——用css来摆放盒子。css提供了三种传统布局方式

• 标准流
• 浮动
• 定位

注意：在实际开发中，一个页面基本都包含了这三种布局方式。

标准流

所谓标准流，就是标签按照规定好的默认方式进行排列。

1. 块级元素独占一行，从上向下顺序排列。
   • 常用元素，div、hr、p、h1~h6、ul、ol、dl、form、table
2. 行内元素会按照顺序，从左向右顺序排列，碰到父元素边缘则自动换行。
   • 常用元素：span、a、i、em等

以上都是标准流布局，在之前的学习中学的就是标准流，标准流是最基本的布局方式。这三种布局方式都是用来摆放盒子的，盒子摆放到合适的位置，布局自然就完成了。

浮动

有很多的布局效果，标准流是没有办法完成的，此时可以利用浮动完成布局。因为浮动可以改变元素标签的默认的排列方式，浮动最初是用来做文字环绕效果的

浮动的介绍

浮动最典型的应用：可以让多个块级元素一行内排列显示。

• 不使用行内块（inline-block）是因为行内块盒子之间是有一小段缝隙的，而如果改用浮动，则盒子之间没有缝隙产生，隐藏浮动经常用于横向排列盒子。

网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：
    选择器{ float：属性值；}

属性值	说明
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动的特性

设置浮动的元素最重要的特性

1. 脱离标准流的控制（浮），移动到指定位置（动），该概念也叫脱标
2. 浮动的盒子不再保留原先的位置，同时浮动的元素不在占据原先的位置，原先的位置可被其他内容填充
   

   这会导致没有给父级盒子设置高度时，子盒子设置为浮动属性后不占据空间后，父盒子的高度将会塌陷，变为0px，因为没有内容撑开父盒子

3. 如果多个盒子设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列（以父级盒子为基础）。
   

   注意：浮动的元素是互相贴靠在一起的（不会具有缝隙，不同于display:inline-block;属性会导致盒子之间存在缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

4. 浮动元素具有行内块的元素特性。

   任何元素都可以浮动。不管原先是说明模式的元素，添加浮动之后具有行内块相似的特性。

• 如果块级盒子没有设置宽度，默认和父级一样宽，但是添加浮动属性后，它的大小根据内容来决定，例如p标签，没有添加浮动属性时，默认占据整个父级的宽度，当添加浮动后，它的宽度变为p标签内文字的宽度。

• 浮动的盒子之间是没有缝隙的，是紧挨在一起的

  5. 为约束浮动元素的位置，网页布局的一般策略是：

  先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则

  
  6. 上层元素浮动之后，文字（图片）会绕开浮动显示出来。也就是说，文字（图片）和其他元素不同，文字（图片）识别到上层具有浮动元素后，文字（图片）会避开浮动元素显示出来。

清除浮动

由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有空间，最后父级盒子高度为0时，就会影响下面的标准流盒子。 例如图

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度,则不需要清除浮动
• 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了

语法：选择器{clear:both/left/right；}

属性值	说明
both	清理左右浮动
left	清理左浮动
right	清理右浮动

实际工作中，几乎只用both，清理左右浮动；浮动清理的策略是：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动的方法

• 额外标签法，也称之为隔墙法，是W3C推荐的做法
  

  额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=" clear:both" > </div> , 或者其他标签(如<br />等)。
  注意:要求这个新的空标签必须是块级元素。

• 父级元素添加overflow属性

  可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll

  • 优点:代码简洁
  • 缺点:无法显示溢出的部分
• 父级元素添加after伪元素

  :after方式是额外标签法的升级版，也是给父元素添加，，，，after：在·····之前

  .clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
  .clearfix {/* IE 6, 7专有*/
    *zoom: 1;
  }
  

  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器（当然也可以不照顾，哈哈哈哈，比较IE快die了）
• 父级添加双伪元素(before，after)

  也是给父元素添加，，，before：在······之前， after：在·······之后

  .clearfix:before,
  .clearfix:after {
    content: "";
    display: table;//转换为表格，在一行显示
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix { /* 还是为了照顾IE6，7 */
    *zoom: 1;
  }
  

总结

为什么需要清除浮动？

• 父级没有高度
• 子盒子浮动了
• 影响下面布局了，我们就应该清除浮动了。

清除浮动的方式	有点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加了许多无意义的标签，结构化差
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	IE6,7不支持after，兼容性问题
父级双伪元素（before，after）	结构语义化正确	IE6,7不支持after，兼容性问题

定位

定位可以让盒子自由的在某一个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定元素在文档中的定位方式，边偏移则决定该元素的最终位置。

1.定位模式

定位模式决定元素的定位方式，它通过css的position属性来设置，属性值分别有：

属性值	说明
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

2.边偏移

边偏移就是定位的盒子移动的最终位置。有如下属性：

属性名	示例用法	说明
top	top: 80px;	顶部偏移量，定义元素相对其父元素上边线的距离
bottom	bottom: 80px;	底部偏移量，定义元素相对其父元素下边线的距离
left	left: 80px;	左侧偏移量，定义元素相对其父元素左边线的距离
right	right: 80px;	右侧偏移量，定义元素相对其父元素右边线的距离

定位详解

静态定位

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器{position: static;}

• 静态定位按照标准流摆放位置，它没有偏移量
• 静态定位在布局时很少用到

相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

语法：

选择器{position: relative;}

特点:

• 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
• 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来的位置)

因此，相对定位并没有脱标，它的应用在于给绝对定位当爹。。。

绝对定位

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的

语法：

选择器{position: absolute;}

特点:

• 如果没有祖先元素或祖先元素没有定位,则以浏览器为基准定位(document文档)
• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为产靠的参考点移动位置。
• 绝对定位不再占有原来的位置（脱标）

扩展：子绝父相

子盒子使用绝对定位，父盒子使用相对定位

• 子盒子使用绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
• 父盒子需要加定位限制子盒子在父盒子内显示。
• 父盒子布局时，需要占有位置，因此父盒子只能是相对定位。

因此，通常使用相对定位的父盒子来作为绝对定位的子盒子的父级。

固定定位

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可在浏览器页面滚动时，元素的位置不会发生改变。

语法：

选择器{position: fixed;}

特点:

• 以浏览器的可视窗口为参照点移动元素。
• 跟父元素没有任何关系
• 不随滚动条滚动
• 固定定位不占有原先的位置（是脱标的）

其实，固定定位可以看作是一种特殊的绝对定位，因为它只以浏览器可视窗口为参照点。

固定定位小技巧

固定元素在版心的右侧区域。

• 让固定定位的盒子left: 50%;走到浏览器可视区的一半的位置。
• 让固定定位的盒子margin-left: 版心宽度的一半距离;

就可以让固定定位的元素贴着版心右侧对齐了。

粘性定位

粘性定位可以看是相对定位和固定定位的混合。可以用作网页顶端固定的导航栏，不随着页面滚动而滚动。

语法：

选择器{position: sticky; top: 10px;}

特点：

• 以浏览器的可视窗口为参照点移动元素（固定定位的特点）
• 粘性定位占有原先的位置（不脱标，相对定位的特点）
• 必需添加top、left、right、bottom其中一个才会生效
• 粘性定位元素只能限定在父盒子的范围内进行定位，当父盒子很小时，滚动页面，使父盒子不可见时，粘性定位的元素也会变得不可见

跟页面滚动搭配使用，兼容性差，不支持IE。

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            height: 3000px;
        }
        div{
            position: sticky;
            top: 40px;
            width: 70%;
            height: 100px;
            margin: 300px auto;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

定位的叠放次序

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）

语法：

选择器{z-index: 1;}

• 数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上（同时具有该属性，不论何值，始终大于默认auto属性的）
• 如果属性值相通，则按照书写顺序，后来居上
• 数字后面不能只加单位
• 只有定位的盒子才由z-index属性

定位的扩展

绝对定位和固定定位也和浮动类似。

• 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度。
• 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
• 脱标的盒子不会触发外边距塌陷，浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。
• 定位不同于浮动，浮动会避开文字（图片），而定位会完全压住下方所有元素。

元素的显示和隐藏

让一个元素在网页中显示或隐藏起来

三种方式

• display 显示隐藏
• visibility 显示隐藏
• overflow 溢出显示隐藏

display

属性值	说明
none	隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline（默认）	指定对象为内联元素
block	指定对象为块元素
inline-block	指定对象为内联块元素
等等

该属性有非常多的属性值，目前了解前几个即可

visibility

属性值	说明
visible（默认）	显示元素
hidden	隐藏元素，和display不同之处在于会保留原有空间
collapse	主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

定义了元素是否可见。 与display属性不同，visibility会为隐藏的元素保留其占据的物理空间

• 如果希望某个元素为可见，其父元素也必须是可见的。
• 对应的脚本特性为visibility。

overflow

overflow属性指定了如果内容溢出一个元素的范围时，会发生什么

属性值	说明
visible（默认）	对溢出内容不做处理，内容可能超出容器
hidden	隐藏溢出容器的内容且不出现滚动条
scroll	隐藏溢出容器的内容，溢出的内容可以通过滚动条呈现
auto	当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，即按需出现滚动条

精灵图

CSS精灵图（Sprite） (biancheng.net)

当用户访问一个网站时，浏览器会向服务器发送一系列请求，比如说网页上的每张图像都需要经过一次请求才能最终展示给用户。为了有效的减少请求服务器的次数，提高页面加载的速度，就出现了 CSS Sprites 技术，也被称为精灵技术。

简单来讲，精灵技术就是一种处理网页背景图像的方式，它需要将一个页面中涉及到的所有或一部分较小的背景图像合并到一张较大的图片中，然后再将这个图片应用到网页中。

缺点：

• 文件还是比较大
• 图片放大缩小会失真
• 一旦图片制作完成，后续想要修改就会比较麻烦。

由此诞生了新技术，字体图标。

字体图标

字体图标，展示的是图标，但实际上是字体。

优点：

• 轻量级：一个图标字体比一系列的图像要小得多。
• 灵活：本质是文字，可以随意更改大小，颜色，产生阴影，透明效果等
• 兼容性非常好

使用场景：

• 结构简单，样式简单，可以使用字体图标，反之结构复杂，使用精灵图

图标网站：Icon Font & SVG Icon Sets ❍ IcoMoon

鼠标样式

设置鼠标放到对应盒子上显示什么图标

选择器{cursor: auto;}

常用的几种：

属性名	说明
default	默认样式，小白手
none	不显示鼠标
pointer	可点击小手
move	移动
text	文本选择小手
not-allowed	禁止选择
等等

全部样式见css参考手册的运行示例

轮廓

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

属性名	属性说明
outline	复合说明，outline-width |outline-style | outline-color 复合属性可以选择性使用那些属性
outline-style	轮廓样式：none（默认） / solid / dotted等等
outline-width	轮廓宽度，number
outline-color	轮廓颜色

该属性不允许像border那样拆分为left，right，top，buttom这种形式。

border和 outline 很类似，但有如下区别：

• outline不占据空间，绘制于元素内容周围。
• 根据规范，outline通常是矩形，但也可以是非矩形的。

CSS3新增属性

属性选择器

选择器名	版本	说明
E[att]	CSS2	选择具有att属性的E元素。
E[att=”val”]	CSS2	选择具有att属性且属性值等于val的E元素。
E[att~=”val”]	CSS2	选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。 例如<div class="a"></div>和<div class="a b"></div>这种形式
E[att^=”val”]	CSS3	选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$=”val”]	CSS3	选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*=”val”]	CSS3	选择具有att属性且属性值为包含val的字符串的E元素。
E[att	=”val”]	CSS2|选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素，如果属性值仅为val，也将被选择。 <div class="a"></div>或<div class="a-xyz"></div>

伪类选择器

选择器名	说明
E:first-child	匹配父元素的第一个子元素
E:last-child	匹配父元素的最后一个子元素
E:nth-child(n)	匹配父元素的第n个子元素，注意n从1开始
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

nth-child(n)详细介绍

n从1开始，n可以是数字，关键字，公式，但是需要注意，使用公式的方式，里面的变量只能是n

• n如果是数字，就是选择第n个子元素
• n如果是关键字，比如：odd（奇数）, even（偶数），举例nth-child(odd)选择奇数子元素
• 使用公式

公式	效果
2n	选择为偶数的子元素，2 4 6 8····
2n+1	选择为奇数的子元素，1 3 5 7···
5n	选择：5 10 15·····
n+5	从第5个开始（包括第五个），直到最后一个
-n+5	选择前5个，包括第5个

nth-child()和nth-of-type()区别

• E:nth-child()将所有子元素排序，之后找到对应元素，再确定该元素是否为E类型
• E:nth-of-type()将所有的E类型子元素排序，之后找到对应子元素

权重计算，例如：section div:nth-child(1){}权重为12，section和div权重之和为2，结构伪类选择器权重为10，因为它和类选择器的权重是等同的。

伪元素选择器

CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::) 用以区别伪类选择符，但以前的写法仍然有效。

选择器名	说明
::before	在元素内部的所有子元素前面插入内容
::after	在元素内部的所有子元素后面插入内容

注意：

• before和after创建一个元素，但是创建的都属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法：element::before{}
• before和after必需有content属性
• before在父元素前面插入元素，after在父元素后面插入元素
• 伪元素选择器和元素选择器一样，权重为1

使用场景

• 伪元素字体图标，例如一个input输入框，想在右边加上一个图标，可以使用input::after{ content: '图标';}，来插入。
• 图形遮罩使用，复合写法：div:hover::before{}，解释，鼠标经过div盒子后对伪元素before做出改动。
• 伪元素清除浮动解析

  .clearfix::after{
    content: "";//必需元素
    display: block;//默认行内块，转换为块级
    clear: both;//清除浮动
    height: 0;
    visibility: hidden;
  }
  

filter属性

用途：对图片添加模糊、曝光、色调变换、灰度等等效果。例如

img{
    filter: blur(10px); /*需要注意的是，blur模糊函数，不允许使用百分比参数，同时blur函数使用的是高斯模糊*/
}

img{
    filter: grayscale(50%); /*对图片添加灰度，参数范围在0-1内*/
}

自动计算

calc()计算

举例

div{
    width: calc(100% - 50px);   /*相对于父盒子，始终在父盒子大小的基础上小50px，同时需要注意，运算符两边一定要含有空格*/
}

过渡

从一个状态，过度到另一个状态，使用口诀：谁做过渡给谁加，例如

div{
    width: 200px;
    height: 200px;
    transition: all 1s;
}
div:hover{
    width: 500px;
}
从div过渡到div:hover，那么应该给div加上transition

background-image不支持transition单独设置，但是transition应用在所有属性上，background-image也会发生相应改变

transition: 要过渡的属性 花费时间 运动曲线(可省略) 起始时间(可省略);

• 属性：需要变化的属性，可以是宽高，北京颜色，内外边距，如果要所有属性都变化过渡，使用all
• 花费时间：单位是秒，必需写单位，例如0.5s
• 运动曲线（可省略）：默认是ease
• 起始时间（可省略）：单位是秒，必需写单位，设置延迟触发时间和消退时间

举例：

transition: all 1s ease 0.5s;/* 单变换 */

transition: width 1s ease,
            height 1s ease;/* 多条变换 */

过渡曲线详解：

贝塞尔曲线可视化网站

2D变换

转换transform可以实现元素的位移、旋转、缩放等效果，可以简单理解为变形，这里介绍几个常用属性

• 移动：translate
• 旋转：rotate
• 缩放：scale

属性名：transform
示例：transform: translate(100px, 100px);

平移translate

属性值	含义
translate(x，y)	指定对象的2D平移。第一个参数对应X轴，第二个参数对应Y轴（未设置则默认值为0）
translateX(n)	指定对象的X轴平移，正右负左
translateY(n)	指定对象Y轴平移，正下负上

• 定义2D转换中的移动
• translate最大有点是不会影响其他元素的位置
• translate中的百分比单位是相对自身元素的，X轴百分比是相对自身宽度的百分比，Y轴同理
• 对行内标签没有效果

用途：盒子水平垂直居中，使用绝对定位+transform: translate(-50%, -50%)

旋转rotate

translate: rotate(30deg);//单位不可省略，deg是度数

• rotate里面跟度数，单位是deg
• 角度为正顺时针，角度为负逆时针
• 默认旋转中心点是元素的中心点

2D转换中心点

transform-origin: x y;

• x y默认的转换中心点是元素的中心点，即 50% 50%
• 也可以给x y设置 像素或者方位名词（left, right, bottom, top, center）

缩放scale

顾名思义：可以放大和缩小。

transform: scale(x, y);

• scale(1,1)：宽和高默认值，相当于没有进行操作
• scale(2,2)：宽和高都放大两倍
• scale(2)：只写一个参数时，第二个参数则等同于第一个参数，相当于scale(2,2)
• scale(0.5,0.5)：缩小到原来的一半

scale最大的优势在于：可以设置缩放中心点的设置，默认以中心点进行缩放，同时，scale缩放不影响其他盒子

2D转换综合写法

• 同时使用多个转换，其格式为：transform: translate() rotate() scale()····等
• 其顺序会影响转换的效果，例如先旋转会改变坐标轴的方向，坐标轴是根据元素来决定的
• 当同时具有位移属性和其他属性时，记得将位移放到最前面

transform: translate(150px, 50px) rotate(45deg);
transform: rotate(45deg) translate(150px, 50px);

上述代码所产生的最终效果是不一样的，第二个totate改变了坐标轴位置，而translate是根据坐标轴位置进行移动的，因此两行代码所产生的效果不同。

动画的制作和使用

步骤

• 先定义动画
• 再调用动画

定义动画：使用keyframes定义（定义关键帧）

@keyframes move{
    0%{
        transform: translate(0px);
    }
    100%{
        transform: tranlate(1000px);
    }
}

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列，类似于关键帧
• 在@keyframes中规定某项css样式，就能创建由当前样式逐渐修改为新样式的动画效果
• 使用百分比来规定变化发生的时间，或使用from和to，等同于0%和100%
• 百分比必需为整数
• 里面的百分比是调用时间的划分，例如调用动画中是2s，那么0%是指0s时，100%指2s时

调用动画

div{
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 调用动画， 注意选择动画名称 */
    animation-name: move;
    /* 持续时间，单位为秒 */
    animation-duration: 2s;
}

该动画只会执行一次，刷新一次浏览器，那么就执行一次该动画，执行完毕后，回到初始状态

动画常见属性

属性	描述
@keyframes	规定动画
animation	所有动画的简写属性，不包括animation-play-state属性
animation-name	规定@keyframes动画的名称 （必需）
animation-duration	规定一个动画完成一个周期所花费的时间，单位是s或者ms，默认是0s
animation-timing-function	规定动画的速度曲线，默认ease
animation-delay	规定动画的开始时间，默认是0s
animation-iteration-count	规定动画的播放次数，默认是1，infinite（无限）次播放
animation-direction	规定动画是否在一个周期结束后，逆向播放，默认是normal，alternate逆向播放
animation-play-state	规定动画播放或暂停，默认是running，还有paused
animation-fill-mode	规定动画结束后状态，保持结束位置forwards，回到起始位置backwards

animation复合详解

animation: 动画名称 持续时间 运动曲线 开始时间 播放次数 结束后是否反方向 起始或结束状态位置;
animation: name duration timing-function delay iteration-count direction fill-mode;

• 简写属性不包括animation-play-state
• 暂停动画：animation-play-state：paused；经常和鼠标经过hover等搭配使用
• 想要动画反向播放而不是跳回来，animation-direction：alternate
• 动画结束后，停在结束位置，animation-fill-mode：forwards

animation-timing-function详解

规定动画的速度曲线，默认是“ease”

值	描述
linear	匀速
ease	默认，动画低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画低速开始和结束
steps(n)	指定了时间函数中的间隔时长（步长）， 将运动时间分割为n段，每一段时间结束发生一次变换

提示：steps（）配合动画可以做逐帧动画。

3D变换

3D移动

• transform: translateX(100px)只在X轴移动
• transform: translateY(100px)只在Y轴移动
• transform: translateZ(100px)只在Z轴移动，注意translateZ一半用px单位
• transform:translate3d(x,y,z)其中x、y、z分别是要移动的轴的方向的距离

  其中xyz不能省略

透视

在2d平面产生近大远小视觉立体，但是效果只是二维的

• 如果想要在网页产生3d效果需要透视，理解成3d物体投影在2d平面内
• 模拟人类的视觉位置，可认为安排一只眼睛去看
• 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大， 越远成像越小
• 透视的单位是像素、

透视写在被观察元素的父盒子上面

举例

<style>
    .one{
        perspective: 500px;/*透视用法*/
    }
    .two{
        width: 200px;
        height: 200px;
        background-color: pink;
        transform: translateZ(100px);
    }

</style>

<div class="one">
    <div class="two">
    </div>
</div>

解释：perspective设置的是人眼到屏幕的距离，translateZ设置的是从屏幕为起点到人眼的100px距离，实际上观察会发现，div.two的大小不是200px，会更大一些，因为此时div.two沿Z轴方向移动，看起来就会更大一些，即人眼到屏幕的距离仍然是500px，但是人眼到div.two的距离则是400px，实际上div.two还在屏幕上，因此div.two就会比原来的大，以突出透视关系

3D旋转

3D旋转是指可以让元素在三维平面内沿着X轴、Y轴、Z轴或者自定义轴进行旋转。

语法：

• transform: rotateX(45deg):沿着X轴正方向旋转45度
• transform: rotateY(45deg):沿着Y轴正方向旋转45度
• transform: rotateZ(45deg):沿着Z轴正方向旋转45度
• transform: rotate3d(x,y,z,deg):沿着自定义轴旋转deg度

旋转方向遵循左手法则（手握住旋转轴，大拇指指向轴方向，四指弯曲方向为正参数时旋转方向）

rotate3d(x,y,z,deg)

x,y,z可以理解为空间解析几何中的向量，例如(1,1,0)表示沿着单位长度x轴和单位长度y轴向量运算得到的轴

3D呈现

transform-style

• 控制元素是否开启三维立体环境。
• transform-style: flat子元素不开启3d立体空间，默认的
• transform-style: preserve-3d子元素开启立体空间
• 代码写给父级，但是影响的是子盒子
• 这个属性很重要

CSS技巧

CSS三角形

box{
    width: 0;
    height: 0;
    line-height: 0;//为了照顾低版本浏览器
    font-size: 0;//为了照顾低版本浏览器
    border: 10px solid transparent;
    border-top: 10px solid red;
}
<div class="box"></div>

使用此方法也可以绘制不规则三角形

文字溢出时显示省略号

• 单行文字溢出显示省略号

  white-space: nowrap;//强制一行内显示
  overflow: hidden; //溢出隐藏
  text-overflow: ellipsis;//文本溢出时显示省略号
  

• 多行文字溢出隐藏（这个效果后端来做更合适）

  overflow: hidden;
  text-overflow: ellipsis;
  
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 2;/*超出第二行时打断，添加省略号*/
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -weblit-box-orient: vertical;
  

双面旋转

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        div {
            position: absolute;
            margin: 150px auto;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            text-align: center;
            color: white;
            font: 30px/300px "微软雅黑";
            transition: all 1s;
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .one {
            background-color: pink;
            transform: translateZ(1px);
        }

        .two {
            background-color: teal;
            transform: rotateY(180deg);
        }
    </style>

</head>

<body>

    <div class="box">
        <div class="one">吴奇灵</div>
        <div class="two">刘灵珠</div>
    </div>

</body>

</html>

浏览器私有前缀

为了解决兼容性问题而产生的

• -moz-：代表forefox浏览器私有属性
• -ms-：代表ie浏览器私有属性
• -webkit-：代表safari、chrome浏览器私有属性
• -o-：代表opera浏览器私有属性

提倡写法：

-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

JavaScript笔记

var、let、const之间的区别

块级作用域： 块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。

变量提升： var存在变量提升，let和const不存在变量提升，他会将当前作用域的所有变量的声明，提升到程序的顶部。

a = 2; var a;
console.log(a);//输出结果为：2，原因是存在变量提升

console.log(a);//输出结果为undefined，虽然存在变量提升，但是赋值语句不会存在变量提升，因此实际上是先定义a在打印a，之后在对a进行赋值
var a = 2;

给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。

重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。

暂时性死区： 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。

初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

指针指向： let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。

区别	var	let	const
是否有块级作用域	×	✔️	✔️
是否存在变量提升	✔️	×	×
是否添加全局属性	✔️	×	×
能否重复声明变量	✔️	×	×
是否存在暂时性死区	×	✔️	✔️
是否必须设置初始值	×	×	✔️
能否改变指针指向	✔️	✔️	×

变量命名规则

• 只能由字母(A-Z、a-z)、数字(0-9)、下划线(_)、美元符( $ ) 组成。
• 不能以数字开头。变量名中不允许出现空格。
• 严格区分大小写。
• 不能使用 JS 语言中保留的「关键字」作为变量名。
• 变量名长度不能超过 255 个字符。
• 汉语可以作为变量名。但是不建议使用，因为 low。

常量

JavaScript常量命名和C/C++一致，常量建议使用大写字母和下划线方式命名

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";

数据类型

JavaScript 中有八种基本的数据类型（译注：前七种为基本数据类型，也称为原始类型，而 object 为复杂数据类型）。

• number 用于任何类型的数字：整数或浮点数，在 ±(2^53-1) 范围内的整数。

  除了常规的数字，还包括所谓的“特殊数值”也属于这种类型：Infinity、-Infinity 和 NaN（not a number）。Infinity 代表数学概念中的无穷大。

  alert(1 / 0) //无穷大
  alert(Infinity) //无穷大
  alert("ab" / 2) //结果是NaN
  

  在 JavaScript 中做数学运算是安全的。脚本永远不会因为一个致命的错误（“死亡”）而停止。最坏的情况下，我们会得到 NaN 的结果。

• bigint 用于任意长度的整数。可以通过将 n 附加到整数字段的末尾来创建 BigInt 值。

  // 尾部的 "n" 表示这是一个 BigInt 类型
  const bigInt = 1234567890123456789012345678901234567890n;
  

• string 字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。

示例	说明
“name”或’name’	单引号和双引号可以互相内嵌，也可以使用转义字符，例如\'
you name is ${name}	反引号，可以在字符串中内嵌变量，用${ }括起来的内容可以是变量、表达式等 ${…} 内的表达式会被计算，计算结果会成为字符串的一部分。 例如alert(${1 + 2})，结果为3

在一些语言中，单个字符有一个特殊的 “character” 类型，在 C 语言和 Java 语言中被称为 “char”。但是在JavaScript中没有，只有string类型
– boolean 布尔类型，用于 true 和 false。
– null 用于未知的值 —— 只有一个 null 值的独立类型。

特殊的 null 值不属于上述任何一种类型。

相比较于其他编程语言，JavaScript 中的 null 不是一个“对不存在的 object 的引用”或者 “null 指针”。

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值。

• undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。

特殊值 undefined 和 null 一样自成类型。

undefined 的含义是 未被赋值。如果一个变量已被声明，但未被赋值，那么它的值就是 undefined
– object 和symbol用于更复杂的数据结构。

其他所有的数据类型都被称为“原始类型”，因为它们的值只包含一个单独的内容（字符串、数字或者其他）。相反，object 则用于储存数据集合和更复杂的实体。symbol 类型用于创建对象的唯一标识符。我们在这里提到 symbol 类型是为了完整性，但我们要在学完 object 类型后再学习它。

扩展：

var obj1 = new Object();
obj1.name = 'smyh';

var obj2 = obj1;// 让 obj2 等于 obj1

obj1.name = 'vae';// 修改 obj1 的 name 属性

console.log(obj1.name); // 打印结果：vae
console.log(obj2.name); // 打印结果：vae

上面的代码中：obj1 和 obj2 都是引用数据类型，让 obj2 等于 obj1，然后修改 obj1.name 的值之后，发现 obj2.name 的值也发生了改变。

提升：

• array类型，let arr = [1, 2, 3];
• object类型，let obj = { name: "lihua", number: 200 }

typeof

typeof 运算符返回参数的类型。当我们想要分别处理不同类型值的时候，或者想快速进行数据类型检验时，非常有用。

• 通常使用 typeof x，但实际上 typeof(x) 也行。
• 以字符串的形式返回类型名称，例如 "number"。
• typeof null 的结果为 "object"。这是官方承认的 typeof 的错误，这个问题来自于 JavaScript 语言的早期阶段，并为了兼容性而保留了下来。null 绝对不是一个 object。null 有自己的类型，它是一个特殊值。typeof 的行为在这里是错误的。
• typeof alert 的结果是 "function"，因为 alert 在 JavaScript 语言中是一个函数。我们会在下一章学习函数，那时我们会了解到，在 JavaScript 语言中没有一个特别的 “function” 类型。函数隶属于 object 类型。但是 typeof 会对函数区分对待，并返回 "function"。这也是来自于 JavaScript 语言早期的问题。从技术上讲，这种行为是不正确的，但在实际编程中却非常方便。

类型转换

可以使用number(intVariable)，这种形式显式转换，例如

方法	说明
string()	number转string
number()	其他类型转number

number 类型转换规则：

值	变成……
undefined	NaN
null	0
true 和 false	1 and 0
string	去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结果为 0。 否则，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN。

布尔类型转换：

记忆技巧，显式看起来是空的统统转换为false，反之转换为true

值	变成……
0, null, undefined, NaN, ""	false
其他值	true

上述的大多数规则都容易理解和记忆。人们通常会犯错误的值得注意的例子有以下几个：

• 对 undefined 进行数字型转换时，输出结果为 NaN，而非 0。
• 对 "0" 和只有空格的字符串（比如：" "）进行布尔型转换时，输出结果为 true。

运算符

支持以下数学运算：

• 加法 +,
• 减法 -,
• 乘法 *,
• 除法 /,
• 取余 %,
• 求幂 **

着重讲解**运算符，之前的运算符和c/c++一致，但是**运算符则不同，例如2**3，代表是求2^3，也就是求幂运算符，同时，幂运算也适合浮点数，例如8**(1/3)，结果为2

赋值运算符，自增/自减，位运算符，逗号运算符，条件运算符（三目运算符）可以参考C/C++的语法，它们基本是相同的。但是还有些许不同的地方。

逻辑运算符

• 或||
• 与 &&
• 非!
• ??（空值合并运算符）

前三个参考C/C++，这里主要介绍与或非运算符新增的特性和空值合并运算符

或运算符||

或运算符 || 做了如下的事情：

• 从左到右依次计算操作数。
• 处理每一个操作数时，都将其转化为布尔值。如果结果是 true，就停止计算，返回这个操作数的初始值。
• 如果所有的操作数都被计算过（也就是，转换结果都是 false），则返回最后一个操作数。

返回的值是操作数的初始形式，不会做布尔转换。

换句话说，一个或运算 || 的链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值。

或运算找出第一个真值

let firstName = "";
let lastName = "";
let nickName = "SuperCoder";
alert( firstName || lastName || nickName || "Anonymous"); // 输出结果是：SuperCoder

true || alert("not printed");
false || alert("printed");
//在第一行中，或运算符 || 在遇到 true 时立即停止运算，所以 alert 没有运行。
//有时，人们利用这个特性，只在左侧的条件为假时才执行命令。

与运算符&&

运算 && 做了如下的事：

• 从左到右依次计算操作数。
• 在处理每一个操作数时，都将其转化为布尔值。如果结果是 false，就停止计算，并返回这个操作数的初始值。
• 如果所有的操作数都被计算过（例如都是真值），则返回最后一个操作数。

换句话说，与运算返回第一个假值，如果没有假值就返回最后一个值。

上面的规则和或运算很像。区别就是与运算返回第一个假值，而或运算返回第一个真值。

alert( 1 && 2 && null && 3 ); // null
alert(1 && 2 && 3) // 3

与运算 && 的优先级比或运算 || 要高。

非!

逻辑非运算符接受一个参数，并按如下运作：

1. 将操作数转化为布尔类型：true/false。
2. 返回相反的值。

空值合并运算符??

为简单起见，当一个值既不是 null 也不是 undefined 时，我们将其称为“已定义的（defined）

a ?? b 的结果是：

• 如果 a 是已定义的，则结果为 a，
• 如果 a 不是已定义的，则结果为 b。

换句话说，如果第一个参数不是 null/undefined，则 ?? 返回第一个参数。否则，返回第二个参数。等同于下列代码：

result = (a !== null && a !== undefined) ? a : b;

值的比较

• 数值的比较，参考c/c++
• 字符串的比较，和C/C++非常类似，按照字典序来比较，C/C++使用的是ASCII码比较，而JavaScript使用unicode编码来比较
• 不同类型的比较

  当对不同类型的值进行比较时，JavaScript 会首先将其转化为数字（number）再判定大小。

  alert( '2' > 1 ); // true，字符串 '2' 会被转化为数字 2
  alert( '01' == 1 ); // true，字符串 '01' 会被转化为数字 1
  alert("0" == 0); // true!
  

  • 普通相等==

  普通相等在进行比对时，会将类型转换为一致类型在进行比较

  • 严格相等===

  严格相等不会进行类型转换，因此在类型不同时，直接返回false，同样的，与“不相等”符号 != 类似，“严格不相等”表示为 !==。

• 对null和undefined的比较

  alert( null == undefined ); // true，普通相等比较是相同的
  alert( null === undefined ); //false，严格相等比较是不同的
  

  当使用数学式或其他比较方法 < > <= >= 时：

  null/undefined 会被转化为数字：null 被转化为 0，undefined 被转化为 NaN。

  具体介绍见：https://zh.javascript.info/comparison

总结

• 比较运算符始终返回布尔值。
• 字符串的比较，会按照“词典”顺序逐字符地比较大小。
• 当对不同类型的值进行比较时，它们会先被转化为数字（不包括严格相等检查）再进行比较。
• 在非严格相等 == 下，null 和 undefined 相等且各自不等于任何其他的值。
• 在使用 > 或 < 进行比较时，需要注意变量可能为 null/undefined 的情况。比较好的方法是单独检查变量是否等于 null/undefined。

二元运算符+字符串

只要任意一个运算元是字符串，那么另一个运算元也将被转化为字符串。例如

alert("1" + 2 + 2); //结果为：122，这里第一个操作数是一个字符串，所以编译器将其他两个操作数也视为了字符串。
alert(2 + 2 + "1"); //结果为：41

//运算符是按照顺序来进行操作的，以上运算但是从左到右进行运算

二元 + 是唯一一个以这种方式支持字符串的运算符。其他算术运算符只对数字起作用，并且总是将其运算元转换为数字。

alert( 6 - '2' ); // 4，将 '2' 转换为数字
alert( '6' / '2' ); // 3，将两个运算元都转换为数字
alert('4z' - '8'); //NaN，由于'4z'转换为number后转换失败，结果为NaN，而NaN于任何运算元做运算结果仍然是NaN

测试

2 + 2 + "1" = "41"
"" + 1 + 0 = "10"
"" - 1 + 0 = -1
true + false = 1
6 / "3" = 2
"2" * "3" = 6
4 + 5 + "px" = "9px"
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
"  -9  " + 5 = "  -9  5"
"  -9  " - 5 = -14
null + 1 = 1
undefined + 1 = NaN
" \t \n" - 2 = -2 // 字符串转换为数字时，会忽略字符串的首尾处的空白字符。在这里整个只字符串都是空白字符，因此字符串结果最终为0，0-2 = -2

break / continue

在C/C++的基础上，新增加跳出至标签位置的功能。

标签 是在循环之前带有冒号的标识符：

labelName: for (...) {
  ...
}

break labelName 语句跳出循环至标签处

outer: for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let input = prompt(`Value at coords (${i},${j})`, '');

    // 如果是空字符串或被取消，则中断并跳出这两个循环。
    if (!input) break outer; // (*)

    // 用得到的值做些事……
  }
}
alert('Done!');

上述代码中，break outer 向上寻找名为 outer 的标签并跳出当前循环。使用该标签需要注意的是

交互

函数名	函数说明
alert()	弹出一个只有确定的窗口，该函数返回值为undefined
confirm()	含有确定/取消的窗口，确定返回true，反之返回false
prompt()	弹出一个具有输入框的含有确定取消的窗口，确定返回文本内容，取消或esc返回null prompt(title, [default]);，其中第二个参数是可选的，第二个参数的含义是默认input内容 例如prompt("请输入信息", 100)

这些方法都是模态的：它们暂停脚本的执行，并且不允许用户与该页面的其余部分进行交互，直到窗口被解除。

上述所有方法共有两个限制：

1. 模态窗口的确切位置由浏览器决定。通常在页面中心。
2. 窗口的确切外观也取决于浏览器。我们不能修改它。

控制台输出

函数名	函数说明
console.log()	输出日志
console.warn()	输出警告信息,和log的区别在于背景框是黄色
console.error()	输出错误信息,背景框颜色为红色

document.querySelector('name')//name为标签名

其他函数

函数名	说明
indexOf(string)	查找子子串，找到返回其下标，找不到返回-1
slice(begin, end)	返回字符串begin到end内的副本 第二个参数是可选的，如果不写，默认返回由begin到字符串末尾
toLowerCase()	将整个字符串转换小写
toUpperCase()	将整个字符串转换大写
replace()	字符串替换，将第一个参数字符串替换为第二个参数的字符串

‍