.CSS
一、CSS简介
1.1、CSS语法规范
使用HTML时，需要遵从一定的规范，CSS也是如此。熟练使用CSS对网页进行修饰，首先需要了解CSS样式规则。
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rLheHe3z-1627927639567)(E:\前端\CSS\CSS1.1.png)]
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文“;”进行区分
1.2、CSS代码风格
实际开发书写方式
1、样式格式书写
- 紧凑格式
h3 {color: deeppink;font-size: 20px;}
- 展开格式(推荐)
h3 {
color:pink;
font-size: 20px;
}
2、样式大小写风格
h3 {
color: pink;
}
H3 {
COLOR: PINK;
}
推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
3、样式空格风格
h3 {
color: pink;
}
- 属性值前面，冒号后面，保留一个空格
- 选择器（标签）和大括号中间保留空格
二、CSS基础选择器
2.1、CSS选择器的作用
选择器（选择符）就是根据不同需求把不同标签选出来这就是选择器的作用，简单来说，就是选择标签用的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eo8Dwn2l-1627927639570)(E:\前端\CSS\2.2.png)]
以上CSS做了两件事：
- 1、找到所有的h1标签。选择器（选对人）。
- 2、设置这些标签的样式，比如颜色为红色（做对事）。
2.1、选择器分类
选择器分为基础选择器和复合选择器两个大类
基础选择器
- 基础选择器是由单个选择器组成的
- 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。
1、标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
作用：
标签选择器可以把某一类标签全部选择出来，比如所有的<div.>标签和所有的<span.>标签。
优点：
能快速为页面中同类型的标签统一设置样式。
缺点：
不能设计差异化样式，只能选择全部的当前标签。
2、类选择器
如果想要差异化选择不同的标签，单独选一个或者某一个标签，可以使用类选择器。
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号表示。
语法：
.类名 {
属性1: 属性值1;
...
}
例如，将所有拥有red类的HTML元素均设置成红色。
.red {
color: red;
}
结构需要用class属性来调用class类的意思
注意：
-
1、类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，自己命名的）。
-
2、可以理解为给这个标签起了一个名字，来表示
-
3、长名称或词组可以使用中横线来为选择器命名。
-
4、不要使用纯数字、中文等命名，尽量使用英文字母来表示。
-
5、命名要有意义，尽量使别人一眼就知道这个类名的目的。（驼峰原则）
3、案例
1、类选择器的使用。
2、div 就是一个盒子，用来装网页内容的。
<body>
<div class="hellored"></div>
<div class="hellogreen"></div>
<div class="hellored"></div>
</body>
<style>
.hellored {
width: 100px;
height: 100px;
background-color: red;
}
.hellogreen {
width: 100px;
height: 100px;
background-color: green;
}
</style>
4、类选择器-多类名
可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
简单理解就是一个标签有多个名字。
口诀：样式.定义，结构class调用。
4.1、多类名使用方式
<div class="red font20">亚瑟</div>
-
（1）在标签class属性中写多个类名
-
（2）多个类名中间必须用空格分开
-
（3）这个标签就可以分别具有这些类名的样式
-
简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字。
-
这个标签就可以分别具有这些类名的样式
-
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
4.2、多类名开发中使用场景
- （1）可以把一些标签元素相同的样式（共同的部分）放到一个类里面。
- （2）这些标签都可以调用这个公共的类，然后再调用自己独有的类。
- （3）从而节省CSS代码，同意修改也非常方便。
5、id选择器
id选择器可以为标有id的HTML 元素指定特定的样式。
HTML 元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
语法：
#id名 {
属性1: 属性值1；
...
}
例如：将id为 nav 元素中的内容设置成红色。
#nav {
color: red;
}
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。
id选择器和类选择器的区别
- （1）类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字可以被多个人使用。
- （2）id 选择器好比人的身份证号码，是唯一的，不能重复。
- （3）id 选择器和类选择器最大的不同在于使用次数上。
- （4）类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScrip搭配使用。
6、通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中的所有元素（标签）。
语法：
* {
属性1: 属性值1;
...
}
- 通配符选择器不需要调用，自动就给所有的元素使用样式。
- 特殊情况才使用，使用场景（以下是清除所有的元素标签的内外边距）
* {
margin: 0;
padding: 0;
}
7、基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p {color: red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav {color: rd;} |
| id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color:red;} |
- 每个基础选择器都有使用场景，都需要掌握
- 如果是修改样式，类选择器是使用最多的
三、CSS字体属性
CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）。
1、字体系列
CSS使用font-family属性定义文本的字体系列。
p {
font-family: "微软雅黑";
}
div {
font-family: Arial,"Microsoft Yahei","微软雅黑";
}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体：body{font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’;}
2、字体大小
CSS使用 font-size 属性定义字体大小。
p {
font-size: 20px;
}
- px(像素)大小是我们网页的常用单位。
- 谷歌浏览器默认的文字大小是16px。
- 不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，不要默认大小
- 可以给 body 指定整个页面文字的大小。
- 标题标签比较特殊，需要单独指定文字大小。
3、字体粗细
CSS使用 font-weight 属性设置文本字体的粗细。
p {
font-weight: bold;
}
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100-900 | 400等同 normal，而 700 等同于bold 注意数字后面不跟单位 |
-
实际开发中，提倡用数字表示加粗或者变细。
-
学会让加粗标签（比如 h 和 strong 等）不加粗，或者其他标签加粗。
4、文字样式
CSS使用 font-style 属性设置文本的风格。
p {
font-style: normal;
}
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式，font-style: normal |
| italic | 浏览器会显示斜体的字体样式 |
- ==平时很少给文字加斜体，反而要给斜体标签（em,i）改为不倾斜字体。
5、字体复合属性
字体属性可以把以上文字样式综合来写，可以更节约代码
body {
font: font-style
font-weight
font-size/line-height
font-family;
}
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。
- 不需要设置的属性可以忽略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
6、字体属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 通常用的单位是 px 像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是 italic 不倾斜是 normal 工作中最常用 normal |
| font | 字体连写 | 1、字体连写是有顺序的 不能随意换位置 2、其中字号 和 字体 必须同时出现 |
四、CSS文本属性
CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
1、文本颜色
color 属性用于定义文本颜色。
div {
color: red;
}
| 表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue， |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或(100%,0%,0%) |
- 开发中最常用的是十六进制
2、对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center;
}
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
- 本质是让盒子div中的文本居中对齐（center）
3、装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div {
text-decoration: underline;
}
| 属性值 | 描述 |
|---|---|
| none | 默认。没有装饰线（最常用） |
| underline | 下划线。连接 a 自带下换线（常用） |
| overline | 上划线。（几乎不用） |
| line-through | 删除线。(不常用) |
4、文本缩进
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
div {
text-indent: 10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
p {
/* 此时写了2em 则是缩进了当前元素2个文字大小的距离*/
text-indent: 2em;
}
- em 是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
5、行间距
line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。
p {
/*文本高度16像素，10像素平均分给上间距和下间距*/
line-height: 26px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QHGbdffs-1627927639571)(E:\前端\CSS\行间距.png)]
6、文本属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 文本颜色 | 通常用 十六进制 比如而且是简写形式 #fff |
| text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 文本缩进 | 通常用于段落首行缩进2个字的距离 text-indent: 2em; |
| text-decoration | 文本修饰 | 记住 添加下划线 underline 取消下划线 none |
| line-height | 行高 | 控制行与行之间的距离 |
五、CSS引入方式
1、CSS的三种样式表
按照CSS样式书写的位置（或者引入方式），CSS样式表可以分为三大类：
- 1、行内样式表（行内式）
- 2、内部样式表（嵌入式）
- 3、外部样式表（链接式）
1、内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style.>标签中。
2、行内样式表）（行内式引入）
行内样式表（内联样式表）是元素标签内部的 style 属性中设定CSS样式。适合于修改简单样式。
<div style="color: red; font-size: 12px;">测试</div
- style 其实就是标签的属性
- 在双引号中间，写法要符合CSS规范
- 可以控制当前的标签设置样式
- 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
- 使用行内样式表设定CSS，通常也被称为行内式引入。
3、外部样式表
实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到 HTML 页面中使用。
引入外部样式表的分为两步：
1、新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
2、在HTML 页面中，使用<link.>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
| 属性 | 作用 |
|---|---|
| ref | 定义当前文档与被链接文档之间的关系，在这里需要制定为"stylesheet"，表示被链接的文档是一个样式表文件 |
| href | 定义所链接外部样式表问价的URL，可以是相对路径，也可以是绝对路径 |
- 使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式。
4、CSS引入方式总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混血 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构和样式分离 | 需要引入 | 最多，推荐 | 控制多个页面 |
六、Chrome 调试工具
Chrome 浏览器提供了一个非常好用的调试工具，可以用来调试我们的 HTML 结构和 CSS 样式。
1、打开调试工具
Chrome 浏览器，按下 F12 或者右击 检查
- 左边是HTML 元素结构，右边是 CSS 样式。
- 右边可以改动数值和查看颜色。
- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。
CSS第二天
一、Emmet语法
Emmet 语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。
1、快速生成HTML结构语法
-
1、生成标签 直接输入标签名 按 tab键即可 比如 div 然后 tab键，就可以生成<div.></div.>
-
2、如果想要生成多个相同标签，加上*就可以了 比如 div * 3 就可以快速生成3个div
-
3、如果有父子级关系的标签，可以用> 比如 ul > li 就可以了
-
4、如果有兄弟关系的标签，用 + 就可以了比如 div+p
-
5、如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了
-
6、如果生成的div类名是有顺序的，可以用 自增符号$
-
7、如果想要在生成的标签内部写内容可以用 {} 表示
2、 快速生成CSS样式语法
CSS 基本采取简写形式即可.
- 比如 w200 按tab 可以生成 width: 200px;
- 比如 lh26 按tab 可以生成 line-height:26px;
二、CSS的复合选择器
1、什么是复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素（标签）
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
2、后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签就写在后面，中间用空格分离。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2 {样式声明}
上述语法表示选择元素1里面的所有元素2（后代元素）。
例如：
ul li {样式声明} /* 选择 ul 里面所有的 li 标签元素*/
- 元素1 和 元素2 中间用空格隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2
- 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
- 元素1 和元素2 可以是任意基础选择器
3、子选择器（重要）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。
语法：
元素1 > 元素2（样式声明）
上述语法表示==选择元素1 里面的所有直接后代（子元素）元素2.
例如：
div > p {样式声明} /* 选择 div 里面所有最近一级 p 标签元素*/
- 元素1 和 元素2 中间用大于号隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2。
- 元素2 必须是亲儿子，其孙子、重孙之类都不归他管。
4、并集选择器（重要）
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法：
元素1，元素2 {样式声明}
上述语法表示选择元素1 和元素2。
例如：
ul,div {样式声明} /* 选择 ul 和 div 标签元素*/
- 元素1 和 元素2 中间用逗号隔开
- 逗号可以理解为和 的意思
5、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如：hover、:first-child。
因为伪类选择器很多，比如有链接伪类、结构伪类等。
1、链接伪类选择器
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接（鼠标按下未弹起的链接）*/
1、链接伪类选择器注意事项
1、为了确保生效，按照LVHA的循顺序声明:link -:visited - :hover - :active
2、记忆法：love hate
3、因为 a 链接在浏览器中具有默认样式，所以在实际工作中都需要给链接单独指定样式。
链接伪类选择器实际工作开发中的写法：
a {
color:gray;
}
/*鼠标经过*/
a: hover {
color: red;
}
6、focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input.>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus{
background-color:yellow;
}
7、复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav,.header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
| :focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |
8、CSS的元素显示模式
了解元素的显示模式可以更好的让我们布局页面。
1、什么是元素的显示模式
作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好地布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如<div.>自己占一行，比如一行可以放多个<span.>。
HTML 元素一般分为块元素和行内元素两种类型。
2、块元素
常见的块元素有<h1.> ~ <h6.>、<p.>、<div.>、<ul.>、<ol.>、<li.>等，其中<div.>标签是最经典的块元素。
块级元素的特点：
- 自己独占一行
- 高度，宽度，外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注意：
- 文字类的元素内不能使用块级元素
- <p.>标签主要用于存放文字，因此<p.>里面不能放块级元素，特别是不能放<div.>
- 同理，<h1.> ~ <h6.>等都是文字类块级标签，里面也不能放其它块级元素
3、行内元素
常见的行内元素有<a.>、<strong.>、<b.>、<em.>、<i.>、<del.>、<s.>、<ins.>、<u.>、<span.>等，其中==<span.>标签是最典型的行内元素==。有的地方也将行内元素称为内联元素。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接<a.>里面可以放块级元素，但是给<a.>转换一下块级模式最安全
4、行内块元素
在行内元素中有几个特殊的标签——<img/.>、<input/.>、<td.>、它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度、行高、外边距以及内边距都可以控制（块级元素特点）
5.元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身的内容的宽度 |
6、元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加链接<a.>的触发范围。
-
转换为块元素：display: block;
-
转换为行内元素: display: inline;
-
转换为行内块: display: inline-block;
7、案例：简单小米侧边栏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSWAyXHe-1627927639573)(E:\前端\CSS\案例-小米侧边栏.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3BxWmvS-1627927639575)(E:\前端\CSS\小米侧边栏.png)]
8、单行文字垂直居中
解决方案：让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
实现原理
上空隙和下空隙把文字挤到中间
- 行高小于盒子高度，文字偏上
- 行高大于盒子高度，文字偏下
三、CSS的背景
通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1、背景颜色
background-color 属性定义了元素的背景颜色。
background-color: 颜色值;
一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。
2、背景图片
background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）
background-image: none | url (url)
| 参数值 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
3、背景平铺
如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
4、背景图片位置
利用 background-position 属性可以改变图片在背景中的位置
background-position: x y;
参数代表的意思是：x 坐标和 y 坐标。可以使用 方位名词 或者 精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
1、参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2、参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
- 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3、参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
5、背景图像固定（背景附着）
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 后期可以制作视差滚动的效果。
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
6、背景复合写法
为了简化背景属性的代码，可以将这些属性合并简写在同一个属性 background中。从而节约代码量
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
background: transparent url(imgage.jpg) repeat-y fixed top
这是实际开发中，更提倡的写法。
7、背景色半透明
CSS3 提供了背景颜色半透明的效果。
background: rgba(0,0,0,0.3);
- 最后一个参数是 alpha 透明度，取值范围在 0~1 之间。
- 习惯把 0.3 的 0 省略掉，写为background:rgba(0,0,0,.3)l
- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
- CSS3 新增属性，是IE9 + 版本才支持的
- 实际开发中不太关注兼容性写法了
8、背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background | 背景图片 | url（图片路径） |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repate-y |
| background-position | 背景位置 | length/position 分别是 x 和 y 坐标 |
| background-attachment | 背景附着 | scroll （背景滚动）/fixed （背景固定） |
| 背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景位置 背景滚动 背景位置 |
| 背景色半透明 | 背景颜色半透明 | background: rgba(0,0,0,0.3);后面必须是 4个值 |
9、综合案例
<style>
.nav a {
text-decoration: none;
width: 176px;
height: 94px;
display: inline-block;
background-color: aqua;
text-align: center;
line-height: 94px;
color: #ffffff;
}
.nav .bg1 {
background: url(images/bg2.png) no-repeat;
}
.nav .bg1:hover {
background-image: url(images/bg1.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
</div>
</body>
四、CSS 的三大特性
CSS 有三个非常重要的特性：层叠性、继承性、优先性。
1、层叠性
相同选择器置相同的样式，此时一个样式就会覆盖（层叠）==另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
2、继承性
现实中的继承：我们继承了父亲的姓
CSS 中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
-
恰当的使用继承可以简化代码，降低 CSS 样式的复杂性
-
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
1、行高的继承
body {
/*1.5是当前元素文字大小font-size 的1.5倍*
font: 12px/1.5 Microsoft YaHei;
}
-
行高可以跟单位也可以不跟单位
-
如果子元素没有设置行高，则会继承父元素的行高为1.5
-
此时子元素的行高是：当前子元素的文字大小*1.5
-
body 行高 1.5 这样写法最大的优势就是里面子元素的可以根据自己文字大小自动调整行高
3、优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重如下表所示
| 选择器 | 权重 |
|---|---|
| 继承 或者 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID 选择器 | 0，1，0，0 |
| 行内样式 style=“” | 1，0，0，0 |
| !important 重要的 | ∞ 无穷大 |
div {
color: aqua!important;
}
优先级注意点：
1、权重是有4组数字组成，但是不会有进位。
2、可以理解为下一级选择器永远大于上一级选择器。
3、等级判断从左刀有，如果某一位数值相同，则判断下一位数值。
4、继承的权重是0。如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
==权重叠加：==如果是复合选择器，则会有权重叠加，需要计算权重。
五、盒子模型
页面布局要学习三大核心，盒子模型，浮动 和定位。非常好的帮助页面布局
1、看透网页布局本质
网页布局过程：
1、先准备好相关的网页元素，网页元素基本都是盒子的 Box
2、先利用 CSS 设置好盒子样式，然后摆放到相应位置
3、往盒子里面装内容
网页布局的核心本质：就是利用 CSS 摆盒子
2、盒子模型（Box Model）组成
盒子模型：就是把HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距 和实际内容[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lss4t9FY-1627927639576)(E:\前端\CSS\盒子模型的组成.png])]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GjtFPatW-1627927639577)(E:\前端\CSS\盒子模型.png)]
3、边框（border）
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
语法：
border: border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
边框样式：solid 实线边框、dashed 虚线边框、dotted 点线
1、边框的复合写法
CSS 边框属性允许你指定一个元素边框的样式和颜色。
边框简写：
border: 1px solid red;没有顺序
边框分开写法：
border-top:1px solid red;/*只设置上边框，其余同理*/
2、表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：
border-collapse:collapse;
- collapse 单词是合并的意思
- border-collapse: collapse;表示相邻边框合并在一起
3、边框会影响盒子实际大小
边框会额外增加盒子的实际大小。有两种解决方案
1、测量盒子大小的时候，不量边框
2、如果测量的时候包含了边框，则需要width/height 减去边框宽度
4、内边距（padding）
padding 属性用于设置内边距，即边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
给盒子指定padding值之后，发生2件事情：
1、内容和边框有了距离，添加了内边距。
2、padding影响了盒子实际大小
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height 减去多出来的内边距大小即可。
5、padding复合属性
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 1个值，代表上下足左右都有5像素内边距 |
| padding:5px 10px; | 2个值，代表上下内边距是5像素 左右内边距是10像素 |
| padding:5px 10px 20px; | 3个值，代表上内边距5像素 左右内边距10像素 下内边距20像素 |
| padding:5px 10px 20px 30px; | 4个值，上是5像素 右10像素 下20像素 左30像素 顺时针方向 |
以上4种情况，实际开发都会遇到
<style>
.nav {
height: 41px;
color: #fcfcfc;
border-top: #ff8500 solid 3px;
border-bottom: #edeef0 solid 1px;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
font-size: 14px;
text-decoration: none;
color: #4c4c4c;
padding: 0 20px;
}
.nav a:hover {
background-color: #edeef0;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
- 如果盒子本身没有指定width/height 属性，则此时padding不会撑开盒子大小
6、外边距（margin）
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
- 简写方式和padding一样。
7、外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 1、盒子必须指定了宽度（width）
- 2、盒子左右的外边距都设置为auto
.header {width:960px; margin:0 auto;}
常见的写法：以下三种都可以：
- margin-left:auto；margin-right:auto;
- margin:auto;
- margin: 0 auto;
==注意：==以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
8、外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况：
1、相邻块元素垂直外边距的合并
2、嵌套块元素垂直外边距的塌陷
1、相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边框 margin-bottom，下面的元素有上外边距 margin-top，则它们之间的垂直间距不是 margin-bottom 与 margin-top之和。取两个值中的较大者这种现象被称为 相邻块元素垂直外边距的合并。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SpJSdfB5-1627927639579)(E:\前端\CSS\嵌套块元素垂直外边距的塌陷.png)]
2、嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素上有外边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 1、可以为父元素定义上边框
- 2、可以为父元素定义上内边框
- 3、可以为父元素添加 overflow:hidden
9、清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页U的内外边距。
* {
padding: 0; /*清除内边距*/
margin: 0; /*清除外边距*/
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
六、圆角边框（CSS3）
CSS3 中，新增了圆角边框样式，这样盒子就可以变成圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius:length;
radius 半径（圆的半径）原理 ：（椭）圆与边框的交集形成圆角效果
-
参数值可以为数值或百分比的形式
-
如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
-
如果是个矩形，设置为高度的一半就可以做圆角矩形
-
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
-
分开写：border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius
七、盒子阴影（重点）
CSS3 中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。 |
| inset | 可选，将外部阴影（outset）改为内部阴影。 |
注意：
- 1、默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影失效
- 2、盒子阴影不占用空间，不会影响其它盒子排列
八、文字阴影
CSS3 中，可以使用text-shadow 属性将阴影应用与文本
语法：
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置。允许负值。 |
| v-shadow | 必需，垂直阴影的位置。允许负值。 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色。 |
九、CSS浮动
1、浮动
1.1、传统网页布局的三种方式
网页布局的本质——用 CSS 来摆放盒子。把盒子摆放到相应位置。
CSS 提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：
- 普通流（标准流）
- 浮动
- 定位
1.2、标准流（普通流/文档流）
所谓的标准流：就是标签按照规定好默认方式排列
-
1、块级元素会独占一行，从上到下顺序排列
-
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
-
2、行内元素会按照排序，从左到右顺序排列，碰到父元素边缘则自动换行
-
常用元素：span、a、i、em
以上都是标准流布局，前面学习的就是标准流，标准流是最基本的布局方式。
注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式）。
1.3、为什么需要浮动
总结：有很多的布局效果，标准流都没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
1.4、什么是浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
选择器 {float: 属性值;}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
1.5、浮动特性（重难点）
**1、**加了浮动之后的元素，会具有很多特性，需要我们掌握的
-
1、浮动元素会脱离标准流（脱标）
-
浮动的元素会一行内显示并且元素顶部对齐
-
浮动的元素会具有行内块元素的特性
设置了浮动（float）的元素最重要特性：
- 1、脱离了普通标准流的控制（浮）移动到指定位置（动），（俗称脱标）
- 2、浮动的盒子不再保留原先的位置
**2、**如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
**3、**浮动元素会具有行内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的。
- 行内元素同理
1.6、浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
注意权重问题
2、常见网页布局
（1）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fuc8Xw2C-1627927639583)(E:\前端\CSS\常见网页布局.png)]
（2）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NWts38F7-1627927639586)(E:\前端\CSS\常见网页布局1.png)]
（3）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V8lJhsvN-1627927639588)(E:\前端\CSS\常见网页布局2.png)]
2.1、浮动布局注意点
1、浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2、一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
十、清除浮动
1、为什么需要清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子.
- 由于浮动元素不再占用源文档流的位置，所以它会对后面的元素排版产生影响。
1、父级没高度
2、子盒子浮动了
3、影响下面布局了，就应该清除浮动了
2、清除浮动本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
3、清除浮动
语法：
选择器 {clear: 属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
实际开发中，几乎只用 clear: both;
清除浮动的策略是：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其它盒子
4、清除浮动方法
1、额外标签法也称为隔离法，是W3C推荐的做法
2、父级添加 overflow 属性
3、父级添加 after 伪元素
4、父级添加双伪元素
5、清除浮动——额外标签法（实际工作可能会遇到，但是不常用）
额外标签法也称为隔墙法，是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如<div. style=“clear:both”></div.>，或者其他标签（如<br/.>等）。
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素。
6、清除浮动——父级添加 overflow
可以给父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 ==scroll=。
给父元素添加代码
- 优点：代码简洁
- 缺点：无法显示溢出的部分
7、清除浮动——：after 伪元素法
:after 方式是额外标签法的升级版，也是给父元素添加
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix { /*IE6、7专有*/
*zooom: 1;
}
- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
- 代表网站：百度、淘宝网、网易等
8、清除浮动——双伪元素清除浮动
也是给父元素添加
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom::1;
}
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
- 代表网站：小米、腾讯等
十一、PS切图
1、常见的图片格式
-
1、jpg图像格式：JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式的
-
2、gif图像格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。
-
3、png图像格式：是一种新兴的网络图片形式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式。
-
4、PSD图像格式：PSD是PhotoShop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，对前端人员来说，最大的优点，可以直接从上面复制文字，获得图片，还可以测量大小和距离。
2、图层切图
PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。
最简单的切图方式：右击图层→快速导出为 PNG。
但是很多情况下，我么你需要合并图层再导出：
1、选中需要的图层：图层菜单→合并图层（ctrl+e）
2、右击→快速导出为PNG
3、切片切图
1、利用切片选中图片
- 利用切片工具手动划出
2、导出选中的图片
文件菜单→导出→存储为 web 设备所用格式 →选择我们要的图片格式 → 存储。
4、PS 插件切图
Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行运输，以替代传统的手工“导出 web 所用 格式”以及使用切片工具进行挨个切图的繁琐流程
十二、学成在线案例
1、CSS 属性书写顺序（重点）
建议遵循以下顺序：
1、布局定位属性：display / position / float / clear / visibility / overflow （将以 display 第一个写，毕竟关系到模式）
2、自身属性：width / height / margin / padding / border / background
3、文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / text-shadow / background:linear-gradient…
2、页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路：
-
1、必须确定页面的版心（可视区），测量可得知
-
2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则
-
3、一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
-
4、制作 HTML 结构，还是遵循，先有结构，后有样式的原则。结构永远最重要
-
5、所以，先理清楚布局结构，再写代码尤为重要。
3、头部制作
导航栏注意点：
实际开发中，不会直接用链接 a 而是用 li 包含链接（li+a）的做法。
1、li+a语义更清晰，有条理的列表型内容。
2、如果直接用 a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
注意：
1、让导航栏一行显示，给 li 加浮动，因为 li 是行级元素，需要一行显示
2、这个nav导航栏不给宽度，将来可以继续添加其他文字
3、因为导航栏里面文字不一样多，所以最好给链接 a 左右 padding 撑开盒子，而不是指定宽度
十三、定位
1、为什么需要定位
1、某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
2、当滚动窗口的时候，盒子是固定屏幕某个位置的。
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
所以：
1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
2、定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移。
定位模式 用于指定一个元素在文档中的定位方式。边偏移 则决定了该元素的最终位置。
3、定位模式
定位模式决定元素的定位方式，通过 CSS 的 position 属性来设置，其值可以分为四个：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
4、边偏移
边偏移就是定位的盒子移动到最终位置。有 top、bottom、left和 right 4个属性。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top：80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
| bottom | bottom：80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
| left | left：80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
| right | right：80px | 右侧偏移量，定义元素相对于其父元素右边线的距离。 |
5、静态定位static（了解）
静态定位是元素的默认定位方式，无定位的意思。
语法：
选择器 {position: static;}
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局时很少用到
6、相对定位 relative（重要）
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法：
选择器 {position:relative;}
相对定位的特点：（务必记住）
- 它是相对于自己原来的位来移动的（移动位置的时候参照点是自己原来的位置）。
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）
7、绝对定位 absolute（重要）
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
语法：
选择器 {position:absolute;}
绝对定位的特点：（务必记住）
1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3、绝对定位不再占有原先的位置。（脱标）
8、绝对定位和相对定位的使用场景
1、子绝父相的由来（重要）
子级是绝对定位的话，父级要用相对定位。
-
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
-
父盒子需要加定位限制子盒子在父盒子内显示。
-
父盒子布局时，需要占有位置，因此父亲只能是相对定位。
所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到
9、固定定位 fixed （重要）
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 {position: fixed;}
固定定位的特点：（务必记住）
1、以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动
2、固定定位不再占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
固定定位小技巧：固定在版心右侧位置
小算法：
1、让固定定位的盒子 left：50%，走到浏览器可视区（也可以看做版心）的一半位置。
2、让固定定位的盒子 margin-left：版心宽度的一半距离。多走版心宽度的一半位置
10、粘性定 sticky（了解）
粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
语法：
选择器 {position: sticky; top 10px;}
粘性定位的特点：
1、一浏览器的可视窗口为参照点移动元素（固定定位特点）
2、粘性定位占有原先的位置（相对定位特点）
3、必须添加 top、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE不支持
11、定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index来控制盒子的前后次序（z轴）
语法：
选择器 {z-index:1;}
-
数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上
-
如果属性值相同，则按照书写顺序，后来居上
-
数字后面不能加单位
-
只有定位的盒子才有 z-index 属性
12、定位的拓展
1、绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
<style>
.box {
position: absolute;
/*水平居中*/
/*1.left 50% 走到版心一半*/
left: 50%;
/*2、margin-left：（负值）自身盒子一半，*/
margin-left: -100px;
/*垂直居中*/
top: 50%;
margin-top: -75px;
width: 200px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
2、定位特殊特性
绝对定位和固定定位也和浮动类似。
1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3、脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。
13、display 显示隐藏元素
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出翔
本质：让一个元素在页面中隐藏或者显示出来。
1、display 属性
display 属性用于设置一个元素应如何显示。
-
display：none；隐藏对象
-
display：block；除了转换为块级元素之外，同时还有显示元素的意思。
display 隐藏元素，不再占有原来的位置。
后面应用及其广泛，搭配 JS可以做很多页面效果
2、visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。
- visibility：visible；元素可视
- visibility：hidden；元素隐藏
visibility 隐藏元素后，继续占有原来的位置
3、overflow溢出
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，慎用 overflow：hidden 因为它会隐藏多余的部分。
案例：
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
left: 50%;
margin-left: -245px;
width: 490px;
height: 276px;
}
.box1 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3) url(images/pause.png) no-repeat center;
;
}
.box:hover .box1 {
display: block;
}
</style>
</head>
<body>
<div class="box">
<img src="images/td.png" alt="">
<div class="box1"></div>
</div>
</body>
CSS高级技巧
一、精灵图
1、为什么需要精灵图
一个网页中往往会应用很多小的背景图作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
2、精灵图（sprites）的使用
使用精灵图核心：
1、精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2、这个大图片也称为 sprites 精灵图 或者 雪碧图
3、移动背景图片位置，此时可以使用 background-position
4、移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
5、因为一般情况下都往上往左移动，所以数值是负值。（x轴右边走是正值，左边走是负值，y轴同理）
6、使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
3、字体图标
1、字体图标的产生
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
1、图片文件还是比较大的。
2、图片本身放大和缩小会失真。
3、一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式。展示的是图标，本质属于字体。
2、字体图标的优点
- 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就回马上渲染出来，减少了服务器请求。
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
- 兼容性：几乎支持所有的浏览器。
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
1、结构和样式比较简单的小图标，就用字体图标。
2、结构和样式复杂一点的小图片，就用精灵图。
二、CSS 三角
<style>
.box1 {
width: 0;
height: 0;
border-top: 10px solid skyblue;
border-right: 10px solid blue;
border-bottom: 10px solid red;
border-left: 10px solid green;
}
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: tomato;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
三、CSS 用户界面样式
1、什么是界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
-
更改用户的鼠标样式
-
表单轮廓
-
防止表单域拖拽
2、鼠标样式 cursor
li {cusor: pointer;}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形式
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
3、轮廓线 outline
给表单添加 outline：0；或者 outline：none；样式后，就可以去掉默认的蓝色边框。
4、防止拖拽文本域 resize
实际开发zhong，文本域右下角是不可以拖拽的。
textarea {resize:none;}
四、vertical-align 属性应用
CSS 的 vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align: baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFrPnE6J-1627927639590)(E:\前端\JavaScript\imags\vertical-align属性应用.png)]
1、图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle就可以让文字和图片垂直居中对齐了。
2、解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1、给图片添加 vertical-align：middle|top|bottom等。（提倡使用的）
2、把图片转换为块级元素：display：block；
五、溢出的文字省略号显示
1、单行文本溢出显示省略号–必须满足三个条件
/*1、强制一行内显示文本*/
white-spavce:nowrap;（默认 normal 自动换行）
/*2、超出的部分隐藏*/
overflow:hidden;
/*3、文字用省略号替代超出的部分*/
text-overflow:ellipsis;
2、多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单
六、常见布局技巧
巧妙利用一个技术更好更快的布局：
1、margin 负值运用
<style>
div ul li {
float: left;
list-style: none;
margin: -1px;
width: 150px;
height: 200px;
border: 2px solid rgb(110, 124, 129, 0.3);
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hYYlM9M-1627927639592)(E:\前端\JavaScript\imags\margin负值运用技巧.png)]
2、文字围绕浮动元素
3、行内块巧妙利用
<style>
.box {
text-align: center;
}
.box a {
line-height: 30px;
display: inline-block;
width: 30px;
height: 30px;
text-decoration: none;
border: 1px solid #949090;
background-color: #f7f7f7;
color: #000000;
}
.box .prev,
.box .next {
width: 85px;
height: 30px;
}
</style>
</head>
<body>
<div class="box">
<a class="prev" href="#"><<上一页</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a class="next" href="#">>>下一页</a>
</div>
</body>
4、CSS三角强化
<style>
div {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-left: 0px solid red;
border-bottom: 0px solid yellow;
border-right: 50px solid skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
1、先把下边框去掉
2、把上边框厚度提高
3、把左边框去掉
4、把上边框颜色改成透明
七、CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，需要对 CSS 初始化。
CSS初始化是指重设浏览器的样式。（也称为CSS reset）
每个网页都必须首先进行 CSS 初始化。
-webkit-font-smoothing:antialiased;
/*抗锯齿，让文字显示更加清晰*/
Unicode编码字体：
把中文字体的名称用相应的 Unicode 编码来代替，这样就可以有效的避免浏览器解释 CSS代码时候出现乱码的问题。
HTML5 提高
一、HTML5 新增的语义化标签
以前布局，基本用 div 来做。div 对于搜索引擎来说，是没有语义的。
- <header.>：头部标签
- <nav.>：导航标签
- <article.>：内容标签
- <section.>：定义文档某个区域
- <aside.>：侧边栏标签
- <footer.>：尾部标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eGVdcgDn-1627927639593)(E:\前端\JavaScript\imags\HTM：)]
注意：
- 这种语义化标准主要是针对搜索引擎的。
- 这些新标签页面中可以使用多次。
- 在 IE9 中，需要把这些元素转换为块级元素
- 其实，移动端更喜欢用这些标签
二、HTML5 新增的多媒体标签
新增的多媒体标签主要包含两个：
1、音频：<audio.>
2、视频：<video.>
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。
HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。
1、视频<video.>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ymDTBII-1627927639596)(E:\前端\JavaScript\imags\video)]
当前<video.>元素支持三种视频格式：尽量使用MP4格式
语法：
<video src="文件地址" controls="controls"></video>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |
| controls | controls | 向用户显示播放组件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | piexels | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto（预先加载）none（不应） | 规定是否预加载视频（如果有了autoplay 就忽略该属性） |
| src | url | 视频 url 地址 |
| poster | lmgrul | 加载等待的画面图片 |
| muted | muted | 静音播放 |
2、音频<audio.>
HTML5 在不使用插件的情况下，也可以支持原生的支持音频格式文件的播放，当然，支持的格式是有限的。
当前<audio.>元素支持三种音频格式：MP3、Wav、Ogg
语法：
<audio src="文件地址" controls=“controls”></audio>
常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| src | url | 要播放的音频url |
- 谷歌浏览器把音频和视频自动播放禁止了
三、HTML5 新增的 input 类型
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户必须为Email类型 |
| type=“url” | 限制用户必须为URL类型 |
| type=“date” | 限制用户必须为日期类型 |
| type=“time” | 限制用户必须为时间类型 |
| type=“month” | 限制用户必须为月类型 |
| type=“week” | 限制用户必须为周类型 |
| type=“number” | 限制用户必须为数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
四、HTML5 新增的表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=“on”，关闭 autocomplete=“off”，需要放在表单内，同时加上 name 属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {
color:blue;
}
CSS3 的新特性
一、CSS3 的现状
- 新增的 CSS3 特性有兼容性问题，ie9+ 才支持
- 移动端支持优于 PC端
- 不断改进中
- 应用相对广泛
- 现阶段主要学习：新增选择器和盒子模型以及其它特性
二、 CSS3 新增选择器
CSS3 新增了选择器，可以更加便捷，更加自由的选择目标元素。
1、属性选择器
2、结构伪类选择器
3、伪元素选择器
1、属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者 id 选择器。
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有 att 属性的 E 元素 |
| E[att=“val”] | 选择具有 att 属性 且 属性值 等于 val 的 E 元素 |
| E[att^=“val”] | 匹配具有 att 属性且值以 val 开头 的 E 元素 |
| E[att$=“val”] | 匹配具有 att 属性且值以 val 结尾的 E 元素 |
| E[att*=“val”] | 匹配具有 att 属性且值中含有 val 的 E 元素 |
注意：类选择器、属性选择器、伪类选择器、权重为10
2、结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素 E |
| E:last-child | 匹配父元素中最后一个 E 元素 |
| E:nth-child(n) | 匹配父元素中的第 n 个子元素E |
| E:first-of-type | 指定类型 E 的第一个 |
| E:last-of-type | 指定类型 E 的最后一个 |
| E:nth-of-type(n) | 指定类型 E 的第 n 个 |
nth-child(n) 选择某个父元素的一个或多个特定的子元素
-
n可以是数字，关键字和公式
-
n 如果是数字，就是选择第 n 个 子元素，里面数字从1 开始…
-
n 可以是关键字，even 偶数，odd 奇数
-
n 可以是公式：常见的公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素或者超出了元素的个数会被忽略）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JGt7c56C-1627927639597)(E:\前端\JavaScript\imags\公式.png)]
nth-of-type 和 nth-child的区别：
1、nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第 n 个孩子，然后看看是否和 E 匹配
2、nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据 E 找第 n 个孩子
3、伪元素选择器（重点）
伪元素选择器可以帮助我们利用 CSS 创建标签元素，而不需要 HTML标签，从而简化 HTML 结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before 和 after 创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法：element::before{}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
/*转化为块级元素并且一行显示*/
display:table;
}
.clearfix:after {
clear:both;
}
三、 CSS 盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为content-box、border-box、这样计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、box-sizing: content-box 盒子大小为 width + padding + border （以前是默认的）
2、box-sizing: border-box 盒子大小为 width
如果盒子模型改为了box-sizing：border-box，那padding 和border 就不会撑大盒子了（前提padding和border不会超过width宽度）
四、CSS 其它特性（了解）
1、CSS3滤镜filter：
filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如：filter:blur(5px); blur模糊处理 数值越大越模糊，数值要加单位
2、CSS3 calc 函数：
calc（） 此函数让你声明CSS属性值时执行一些计算
width:calc(100%-80px);
括号里面可以使用 + - * / 来进行计算
3、CSS3 过渡（重点）
过渡（transition）是 CSS3 中具有颠覆性的特征之一，可以在不用 Flash 动画 或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态 渐渐的过渡到另外一个状态
可以让页面更好看，低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。
现在经常和：hover一起搭配使用。
transition；要过渡的属性 花费时间 运动曲线 何时开始;
属性：想要变化的 css 属性，宽度高度 背景颜色 内外边距都可以。想要所有的属性都变化过渡，写一个 all 就可以。
**花费时间：**单位是 秒（必须写单位）比如0.5s
运动曲线：默认是 ease （可以省略）
**何时开始：**单位是 秒（必须是单位）可以设置延迟触发时间 默认是 0s （可以省略）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CqD2JlYA-1627927639599)(E:\前端\JavaScript\imags\运动曲线.png)]
谁做过渡给谁加
广义的HTML5
广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript。
网站制作流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2cn0NQZd-1627927639600)(E:\前端\JavaScript\imags\网站制作流程.png)]
品优购项目
1、模块化开发
所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响
模块化开发具有重复使用、更换方便等优点
-
代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
-
典型应用：common.css公共样式。写好一个样式，其余的页面用到这些相同的样式
-
模块化开发具有重复使用、修改方便等优点
common.css 公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。
2、网站 favicon 图标
favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。
目前主要的浏览器都支持favicon图标
favicon 图标放在网站根目录下
html页面引入favicon图标
<!--引入ico图标-->
<link rel="shortcut icon" href="favicon.ico">
3、网站 TDK 三大标签 SEO 优化
SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名的方式。
SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
页面必须有三个标签用来符合 SEO 优化。
1、title 网站标题
title 具有不可替代性，是网页的第一个重要标签，是搜索引擎了解网页的入口和对页面主题归属的最佳判断点。
建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）
2、description 网站说明
简要说明网站主要是做什么的
<!--网站说明-->
<meta name="description" content="品优购-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
3、keywords 关键字
keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为 6~8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜," />
4、首页制作
网站的首页一般都是使用 index 命名，比如 index.html 或者 index.php。
1、常用模块类名命名
| 名称 | 说明 |
|---|---|
| 快捷导航栏 | shortcut |
| 头部 | header |
| 标志 | logo |
| 购物车 | shopcar |
| 搜索 | search |
| 热点词 | hotwords |
| 导航 | nav |
| 导航左侧 | dropdown 或者.dd .dt |
| 导航右侧 | navitems |
| 页面底部 | footer |
| 页面底部服务模块 | mod_service |
| 页面底部帮助模块 | mod_help |
| 页面底部版权模块 | mod_copyright |
CSS3 的新特性（补）
1、2D 转换
==转换（transform）==是CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩进等效果
- 移动：translate
- 旋转：rotate
- 缩放：scale
1、2D转换之移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法:
transform:translate(x,y);
或
transform:translateX(n);
transform:translateY(n);
重点：
- 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
- translate 最大的优点：不会影响其他元素的位置
- 其中的百分比单位是相对于自身元素的 translate：（50%,50%);
- 对行内标签没有效果
2、2D 转换之旋转 rotate
语法：
transform:rotate(度数)
重点：
- rotate里面跟度数，单位是 deg 比如 rotate(45deg)
- 角度为正时，顺时针，负时，逆时针
- 默认旋转的中心点是元素的中心点
3、2D 转换之转换中心点 translate-origin
设置元素转换的的中心点
语法：
transform-origin: x,y;
重点：
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点 （50% 50%）
- 可以给 x y 设置 像素 或者 方位名词（top bottom left right center）
4、2D 转换之缩放scale
可以放大和缩小，给元素添加这个属性就能控制它进行放大或者缩小
语法：
transform:scale(x,y);
注意：
- 注意其中的 x 和 y 用逗号分隔
- transform:scale(1,1)：宽和高都放大一倍，相对于没有放大
- transform:scale(2,2)：宽和高都放大两倍
- transform:scale(2)：只写一个参数，第二个参数就和第一个参数一样。相当于scale(2,2)
- transform:scale(0.5,0.5):缩小
- sacle缩放最大的优势：可以设置转化中心点缩放，默认以中心点缩放的，而且不影响其他盒子
5、2D 转换综合写法
注意：
1、同时使用多个转化，其格式为：transform:translate() rotate() scale()…等
2、其顺序会影响转换的效果。（先旋转会影响坐标轴方向）
3、当我们同时有位移和其他属性的时候，记得要将位移放到最前面
2、动画
是CSS3 中具有颠覆性的特征之一，可通过设置多个结点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
1、动画的基本使用
分为两步：
1、先定义动画
2、再使用（调用）动画
2、用keyframes 定义动画（类似定义类选择器）
1、定义动画
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
2、元素使用动画
div {
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
}
3、动画序列
- 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
- 在 @keyframes中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。
- 用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。
keyframs：关键帧
百分比要是整数
百分比就是对时间的划分（比如动画时间是10s，25%就是2.5s）
4、动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 规定@keyframes 动画的名称。（必须的）。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的） |
| animation-timing-function | 规定动画的速度曲线，默认是“ease”。 |
| animation-delay | 规定动画何时开始，默认是0。 |
| animation-iteration-count | 规定动画的被播放的次数，默认是1，还有Infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是“running”，还有“pause”。 |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
5、动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态；
- 简写属性里面不包含 animation-play-state
- 暂停动画：animation-play-state：paused；经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来：animation-direction：alternate
- 盒子动画结束后，停在结束位置：animation-fill-mode：forwards
6、速度曲线细节
animation-timing-function：规定动画的速度曲线，默认是“ease”
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度都是相同的。匀速 |
| ease | 默认。动画从低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画从低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps（） | 指定了时间函数中的间隔变量（步长） |
3、3D转换
1、3D 特点
- 近大远小。
- 物体后面遮挡不可见
2、三维坐标系
指立体空间，由3个轴共同组成的。
- X轴：水平向右 注意：x右边是正值，左边是负值
- y轴：垂直向下注意：y下面是正值，上面是负值
- z轴：垂直屏幕注意：往外面是正值，往里面是负值
3、3D移动 translate3d
3D 移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
- transform：translateX（100px）：仅仅是在x轴上移动
- transform：translateY（100px）：仅仅是在y轴上移动
- transform：translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）
- transform：translate3d（x，y，z）：其中x、y、z分别指要移动的轴的方向的距离。
4、透视 perspective
在2D 平面产生近大远小视觉立体，但是只是效果二维的
- 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小。
- 透视的单位是像素
透视写在被观察元素的父盒子上面的
==d：==就是视距，视距就是一个距离人的眼睛到屏幕的距离。
==z：==就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
5、3D 旋转 rotate3d
可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转。
语法：
- transform：rotateX（45deg）：沿着x轴正方向旋转 45度
- transform：rotateY（45deg）：沿着y轴正方向旋转 45度
- transform：rotateZ (45deg)：沿着y轴正方向旋转 45度
- transform：rotate3d（x，y，z）：沿着自定义轴旋转 deg为角度（了解即可）
6、3D呈现transform-style
- 控制子元素是否开启三维立体环境。
- transform-style：flat子元素不开启3d立体空间 默认的
- transform-style：preserve-3d；子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
- 属性很重要，后面必用
4、浏览器私有前缀
- -moz-：代表 Firefox 浏览器私有属性
- -ms-：代表 ie 浏览器私有属性
- -webkit-：代表safari、chrome私有属性
- -o-：代表Opera私有属性
提倡的写法：
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;
-o-:border-radius:10px;
border-radius:10px;
7、Flexible Box（弹性盒子）
- flex：块级的弹性盒子
- inline-flex：行级的弹性盒子
- -webkit-flex：苹果和谷歌的兼容性
1、设置在父元素上的值
flex-direction：子元素在父容器中的位置（默认row）
1、row：横向从左到右排列（左对齐），默认排列
2、row-reverse：横向右对齐元素反转
3、column：纵向排列
4、column-reverse：反转纵向排列
2、flex-wrap：子元素换行方式（默认nowrap）
| 值 | 描述 |
|---|---|
| nowrap | 默认，弹性容器为单行 |
| wrap | 弹性容器为多行 |
| wrap-reverse | 反转 wrap 排列 |
3、flex-flow：flex-direction和flex-wrap复合写法
flex-flow:row,wrap;
称。（必须的）。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的） |
| animation-timing-function | 规定动画的速度曲线，默认是“ease”。 |
| animation-delay | 规定动画何时开始，默认是0。 |
| animation-iteration-count | 规定动画的被播放的次数，默认是1，还有Infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是“running”，还有“pause”。 |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
5、动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态；
- 简写属性里面不包含 animation-play-state
- 暂停动画：animation-play-state：paused；经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来：animation-direction：alternate
- 盒子动画结束后，停在结束位置：animation-fill-mode：forwards
6、速度曲线细节
animation-timing-function：规定动画的速度曲线，默认是“ease”
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度都是相同的。匀速 |
| ease | 默认。动画从低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画从低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps（） | 指定了时间函数中的间隔变量（步长） |
3、3D转换
1、3D 特点
- 近大远小。
- 物体后面遮挡不可见
2、三维坐标系
指立体空间，由3个轴共同组成的。
- X轴：水平向右 注意：x右边是正值，左边是负值
- y轴：垂直向下注意：y下面是正值，上面是负值
- z轴：垂直屏幕注意：往外面是正值，往里面是负值
3、3D移动 translate3d
3D 移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
- transform：translateX（100px）：仅仅是在x轴上移动
- transform：translateY（100px）：仅仅是在y轴上移动
- transform：translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）
- transform：translate3d（x，y，z）：其中x、y、z分别指要移动的轴的方向的距离。
4、透视 perspective
在2D 平面产生近大远小视觉立体，但是只是效果二维的
- 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小。
- 透视的单位是像素
透视写在被观察元素的父盒子上面的
==d：==就是视距，视距就是一个距离人的眼睛到屏幕的距离。
==z：==就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
5、3D 旋转 rotate3d
可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转。
语法：
- transform：rotateX（45deg）：沿着x轴正方向旋转 45度
- transform：rotateY（45deg）：沿着y轴正方向旋转 45度
- transform：rotateZ (45deg)：沿着y轴正方向旋转 45度
- transform：rotate3d（x，y，z）：沿着自定义轴旋转 deg为角度（了解即可）
6、3D呈现transform-style
- 控制子元素是否开启三维立体环境。
- transform-style：flat子元素不开启3d立体空间 默认的
- transform-style：preserve-3d；子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
- 属性很重要，后面必用
4、浏览器私有前缀
- -moz-：代表 Firefox 浏览器私有属性
- -ms-：代表 ie 浏览器私有属性
- -webkit-：代表safari、chrome私有属性
- -o-：代表Opera私有属性
提倡的写法：
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;
-o-:border-radius:10px;
border-radius:10px;
7、Flexible Box（弹性盒子）
- flex：块级的弹性盒子
- inline-flex：行级的弹性盒子
- -webkit-flex：苹果和谷歌的兼容性
1、设置在父元素上的值
flex-direction：子元素在父容器中的位置（默认row）
1、row：横向从左到右排列（左对齐），默认排列
2、row-reverse：横向右对齐元素反转
3、column：纵向排列
4、column-reverse：反转纵向排列
2、flex-wrap：子元素换行方式（默认nowrap）
| 值 | 描述 |
|---|---|
| nowrap | 默认，弹性容器为单行 |
| wrap | 弹性容器为多行 |
| wrap-reverse | 反转 wrap 排列 |
3、flex-flow：flex-direction和flex-wrap复合写法
flex-flow:row,wrap;
1276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
