web前端学习之——页面美妆师css3基础篇

页面美妆师css3基础

结构(html)与样式(css)相分离

1.css基本语法规范

1.1 行内式（内联样式）

是通过标签的style属性来设置元素的样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
1.2 内部样式表（内嵌样式表）

是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
1.3 外部样式表（外链式）

是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，

通过link标签将外部样式表文件链接到HTML文档中
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
样式表优点缺点使用情况控制范围

行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）

内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）

外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

2.常用的选择器用法与技巧

2.1 标签选择器

概念：

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

作用：

标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签
优点：

是能快速为页面中同类型的标签统一样式
缺点：

不能设计差异化样式。

2.2 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

语法：

类名选择器

.类名  {   属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
}

标签

<p class='类名'></p>

优点：
- 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
注意
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。
多类名
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

2.3 id 选择器

id选择器使用#进行标识，后面紧跟id名

其基本语法格式如下：

id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签
```
<p id="id名"></p>
```

元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。

2.4 通配符选择器

概念

通配符选择器用*号表示， * 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {  margin: 0;                    /* 定义外边距*/  padding: 0;                   /* 定义内边距*/}

注意：

会匹配页面所有的元素，降低页面响应速度，不建议随便使用

基础选择器总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

3.复合选择器

3.1 后代选择器

概念：

后代选择器又称为包含选择器
作用：

用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

父级 子级{属性:属性值;属性:属性值;}

语法：

.class h3{color:red;font-size:16px;}![在这里插入图片描述](https://img-blog.csdnimg.cn/20210428142652508.png#pic_center)

当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签

3.2 子元素选择器

作用：

子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
语法：

.class>h3{color:red;font-size:14px;}

3.3 交集选择器

条件

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
语法：

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

3.4 并集选择器

应用：
- 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。
语法：

任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
记忆技巧：

并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

3.5 链接伪类选择器

作用：

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

注意

写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。否则可能引起错误。
记忆法
- love hate 爱上了讨厌
- **lv **包包非常 hao
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
实际工作开发中，我们很少写全四个状态，

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

4.css三大特性

4.1 css层叠性

概念：

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则：

样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

样式不冲突，不会层叠

4.2 css继承性

概念：

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

想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是：子承父业。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

4.3 css优先级

概念：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

选择器相同，则执行层叠性

选择器不同，就会出现优先级的问题。

1>. 权重计算公式

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

2>. 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

注意：

数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

3>. 继承权重为0

1）如果选中了，那么以上面的公式来计权重。谁大听谁的。
2）如果没有选中，那么权重是0，因为继承的权重为0.

CSS注释规则：

/*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾使用 "*/"结束。

*标签显示模式**

1). 块级元素

块级元素的特点

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意：

只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div

同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2). 行内元素

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

注意：

链接里面不能再放链接。

特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

3). 行内块元素

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

*显示模式总结

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

行高 = 上距离 + 内容高度 + 下距离

行高和高度的三种关系

如果行高等高度文字会垂直居中

如果行高大于高度文字会偏下

如果行高小于高度文字会偏上

@css字体样式属性

① font字体

1.1 font-size:大小

作用：

font-size属性用于设置字号

p {      font-size:20px; }

单位：
- 可以使用相对长度单位，也可以使用绝对长度单位。
- 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

1.2 font-family:字体

作用：

font-family属性用于设置哪一种字体。

p{ font-family:"微软雅黑";}

网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准
1. 各种字体之间必须使用英文状态下的逗号隔开。
2. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

1.3 font-weight:字体粗细

在html中如何将字体加粗我们可以用标签来实现
- 使用 b 和 strong 标签是文本加粗。

可以使用CSS 来实现，但是CSS 是没有语义的。

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

1.4 font-style:字体风格

在html中如何将字体倾斜我们可以用标签来实现
- 字体倾斜除了用 i 和 em 标签，
可以使用CSS 来实现，但是CSS 是没有语义的

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

font：综合设置

基本语法格式如下：

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

注意：
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
- 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

{font总结}

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现

② css外观属性

2.1 color:文本颜色

作用：

color属性用于定义文本的颜色，
其取值方式有如下3种：

表示表示	属性值
预定义的颜色值	red，green，blue，还有我们的御用色 pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

注意

我们实际工作中，用 16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色

2.2 text-align:文本对齐方式

作用：

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
其可用属性值如下：

属性	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

注意：

是让盒子里面的内容水平居中，而不是让盒子居中对齐

2.3 line-height:行间距

作用：

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
单位：

line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
技巧：一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;

2.4 text-indent:首行缩进

作用：

text-indent属性用于设置首行文本的缩进，
属性值
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
- 建议使用em作为设置单位。

2.5 text-decoration:文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

{css外观属性总结}

属性	表示	注意点
color	颜色	我们通常用十六进制比如而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none

**页面升级化妆师css3进阶

1.css盒子模型

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

盒子里面的文字和图片等元素是内容区域

盒子的厚度我们成为盒子的边框

盒子内容与边框的距离是内边距（类似单元格的 cellpadding)

盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

盒子边框border

border : border-width || border-style || border-color

边框的样式：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度样式颜色;	border-bottom:宽度样式颜色;	border-left:宽度样式颜色;	border-right:宽度样式颜色;

内边距padding

padding属性用于设置内边距。 是指边框与内容之间的距离。

padding:值;

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距左右内边距；
3个值	padding：上内边距左右内边距下内边距；
4个值	padding: 上内边距右内边距下内边距左内边距；

外边距margin

margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

margin:值;

值的个数	表达意思
1个值	margin：上下左右外边距;
2个值	margin: 上下外边距左右外边距；
3个值	margin：上外边距左右外边距下外边距；
4个值	margin: 上外边距右外边距下外边距左外边距；

块级盒子水平居中

常见的写法，以下下三种都可以。

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

2.css背景技巧

背景颜色(backgroung-color)

background-color:颜色值;   默认的值是 transparent  透明的

背景图片(backgroung-image)

background-image : none | url (url)

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

背景平铺(backgroung-repeat)

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

背景位置(backgroung-position)

background-position : length || lengthbackground-position : position || position

参数	值
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词

注意：

必须先指定background-image属性
position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着(backgroung-attachment)

背景附着就是解释背景是滚动的还是固定的
```
background-attachment : scroll | fixed
```
背景透明
```
background: rgba(0, 0, 0, 0.3);
```

背景简写

background: 背景颜色背景图片地址背景平铺背景滚动背景位置;

background: transparent url(image.jpg) repeat-y  scroll center top ;

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标，切记如果有精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll/fixed
背景简写	更简单	背景颜色背景图片地址背景平铺背景滚动背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

3.圆角/阴影/过渡

css3圆角

border-radius:length(数值或百分比);

css3阴影

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

css3过渡

可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

transition:all(其他属性) .3s(时间);

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

4.定位和浮动

——css布局的三种机制

普通流（标准流）

块级元素会独占一行，从上向下顺序排列；

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
常用元素：span、a、i、em等

浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

定位
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

①. 浮动

1.1 浮动

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。

可以实现盒子的左右对齐等等…

浮动最早是用来控制图片，实现文字环绕图片的效果。

1). 浮动口诀之浮

浮动——浮_浮浮~~~漂浮在普通流的上面。脱离标准流。俗称 “脱标”

2). 浮动口诀之漏

浮动——漏_漏漏~ 浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。

3). 浮动口诀之特

浮动——特性 float属性会改变元素display属性。

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙

1). 浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐

不会与父盒子的边框重叠，也不会超过父盒子的内边距

2). 浮动元素与兄弟盒子的关系

浮动的，那么当前盒子会与前一个盒子的顶部对齐；

普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

1.2. 清楚浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

1).额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

2).父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3).使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

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

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：百度、淘宝网、网易等

4).使用双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after {   content:"";  display:table; }.clearfix:after { clear:both;}.clearfix {  *zoom:1;}

优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：小米、腾讯等

②. 定位

作用：将盒子定在某一个位置自由的漂浮在其他盒子(包括标准流和浮动)的上面

2.1 边偏移

边偏移属性	示例	描述
`top`	`top: 80px`	顶端偏移量，定义元素相对于其父元素上边线的距离。
`bottom`	`bottom: 80px`	底部偏移量，定义元素相对于其父元素下边线的距离。
`left`	`left: 80px`	左侧偏移量，定义元素相对于其父元素左边线的距离。
`right`	`right: 80px`	右侧偏移量，定义元素相对于其父元素右边线的距离

2.2 定位模式

值	语义
`static`	静态定位
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

2.2.1 静态定位(static) - 了解

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，不要定位的时候用。

静态定位按照标准流特性摆放位置，它没有边偏移。

静态定位在布局时我们几乎不用的

2.2.2 相对定位(relative) - 重要

相对定位是元素相对于它原来在标准流中的位置来说的。（自恋型）

相对于自己原来在标准流中位置来移动的

原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

2.2.3 绝对定位(absolute) - 重要

绝对定位是元素以带有定位的父级元素来移动位置（拼爹型）

完全脱标 —— 完全不占位置；

父元素没有定位，则以浏览器为准定位（Document 文档）。

父元素要有定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

2.2.4 固定定位(fixed) - 重要

固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形

完全脱标 —— 完全不占位置；

只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
跟父元素没有任何关系；单独使用的

不随滚动条滚动。

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

5.伪类和伪元素

伪元素和伪类都不会出现在源文档或者文档树中

伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面

伪元素名和伪类名都是大小写不敏感的

有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）。

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rTKMfzDd-1619590982024)(C:\Users\ChangLian\Desktop\Web前端-笔记\image\14333787-dac5cb3f7528f34e.webp)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygNLvmpD-1619590982027)(C:\Users\ChangLian\Desktop\Web前端-笔记\image\14333787-0ae823b149ed21f1.webp)]

6.css3渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background-image: linear-gradient(direction(起始位置), color-stop1, color-stop2, ...);

径向渐变（Radial Gradients）- 由它们的中心定义

background-image: radial-gradient(shape size at position(位置处的形状尺寸), start-color(开始颜色), ..., last-color(结束颜色));

7.css3的2D和3D变换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

7.1 、2D转换

**translate()**方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform:translate(值x,值y);
**rotate()**方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform:rotate(值deg);
**scale()**方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
transform:scale(...值);
**skew()**方法分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX();表示只在X轴(水平方向)倾斜。

skewY();表示只在Y轴(垂直方向)倾斜。
transform:skew(...值deg);
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

7.2 、3D转换

3D转换必须加透视perspective，否则无法直观显示转换效果。

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

8.css3动画

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

动画的基本使用
- 先定义动画
- 在调用定义好的动画

语法格式(定义动画)

@keyframes 动画名称 {    0% {        width: 100px;    }    100% {        width: 200px    }}

语法格式(使用动画)

div {    /* 调用动画 */    animation-name: 动画名称;     /* 持续时间 */  animation-duration: 持续时间；}

动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

动画简写方式

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

知识要点
- 简写属性里面不包含 animation-paly-state
- 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
- 要想动画走回来，而不是直接调回来：animation-direction: alternate
- 盒子动画结结束后，停在结束位置：animation-fill-mode: forwards