CSS 基础

目录(一)

 CSS简介
 CSS基础选择器
 CSS字体属性
 CSS文本属性
 CSS引入方式
 Chrome调试工具

---

---

CSS的主要使用场景 就是 美化网页，布局页面

---

一、HTML局限性

说起 HTML，这其实是个非常单纯的家伙，它只关注内容的语义，比如 < h1 > 表明这是一个大标题，< p > 表明这是一个段落，< img > 表明这儿有一个图片，< a > 表示此处有链接。

很早的时候，世界上的网站虽然很多，但是它们都有一个共同的特点：丑

---

二、CSS-网页的美容师

CSS 是 层叠样式表 (Cascading Style Sheets)的简称.

有时我们也会称之为 CSS样式表或级联样式表.

---

CSS 也是一种 标记语言.

CSS 主要 用于设置HTML页面的文本内容 (字体、大小、对齐方式等)、图片外形 (宽高、边框样式、边距) 以及 版面的布局和外观显示样式.

---

CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：美化HTML，让HTML更好看，让页面布局更简单.

使结构（HTML）与样式（CSS）分离。

---

三、CSS语法规范

使用 HTML 时，需要遵从一定的规范，CSS也是如此，要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。

---

CSS规则 主要有两部分组成：选择器 ，一条或多条声明

• 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

• 属性和属性值以“键值对”的形式出现

• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色

• 属性和属性值之间用 英文 ":"分开

• 多个 "键值对" 之间用 英文";" 进行区分

---

四、CSS代码风格

以下代码书写风格不是强制规则，而是符合实际开发书写方式

1) 样式格式书写

紧凑格式

 h3 {color: red;font-size: 20px;}

---

展开格式

 h3 {
   color: red;
   font-size: 20px;
 }

强烈推荐第二种格式，因为更直观。

---

2) 样式大小写风格

 h3 {
     color: pink;
 }
 ​
 H3 {
     COLOR: PINK;
 }

强烈推荐选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

---

3) 样式空格风格

 h3 {
     color: pink;
 }

• 属性值前面，冒号后面，保留一个空格

• 选择器 (标签) 和大括号中间，保留一个空格

---

CSS 基础选择器

---

一、CSS 选择器的作用

 <div>我是div</div>
 <div>我是div</div>
 <p>我是p</p>
 <ul>
     <li>我是ul里面的小li</li>
 </ul>
 /*
     1. 我想把 div 里面的文字改为红色?
     2. 我想把第一个 div 里面的文字改为红色?
     3. 我想把 ul 里面的 li 文字改为红色?
 */

选择器 (选择符) 就是 根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择不同的标签。

---

二、选择器分类

选择器分为 基础选择器 和 复合选择器 两大类，我们这里先讲解一下基础选择器。

• 基础选择器 由单个选择器组成

• 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

---

三、标签选择器

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

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

可以把某一类标签全部选择出来，能快速的为页面中的某一类同类型标签统一设置样式；缺点是不能差异化设置标签，只能选择全部的标签。

---

四、类选择器

如果想要 差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示

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

例如把拥有red类的HTML元素改成红色：

 .red {
     color: red;
 }

结构需要用 class 属性 来调用 class 类的意思

 <div class="red">
     我变红了
 </div>

---

注意：

• 类选择器使用“.”（英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的).

• 可以理解为给这个标签起了一个名字，来表示。

• 长名称或词组可以使用中横线 (.star-sing {})来为选择器命名。

• 不要使用纯数字、中文等命名，尽量使用英文字母来表示

• 命名要有意义，尽量使别人一眼就知道这个类名的目的。

---

五、类选择器—多类名

我们可以 给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。

简单理解就是一个标签有多个名字.

1）多类名使用方式

 <style>
 .red {
   color: red;
 }
 .font20 {
   font-size: 20px;
  }
 </style>
 // 1.多类名使用方式
 <div class="red font20">亚瑟</div>

• 在标签 class 属性中写多个类名.

• 多个类名中间必须用空格分开

• 这个标签就可以分别具有这些类名的样式

---

2）多类名开发中使用场景

• 可以把一些标签元素相同的样式 (共同的部分) 放到一个类里面.

• 这些标签都可以调用这个公共的类，然后再调用自己独有的类.

• 从而节省 CSS 代码，统一修改也非常方便.

---

案例：使用多类名画盒子

<style>
.box {
	width: 200px;
	height: 200px;
}
.red {
	background-color: red;
}
.green {
	background-color: green;
}
</style>

<div class="red box"红色></div>
<div class="green box">绿色</div>
<div class="red box">红色</div>

---

六、ID选择器

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

#id名 {
    属性: 属性值
    ...
}

例如，将id为nav元素的内容设置为红色：

#nav {
    color: red;
}

注意：id 属性只能在每个 HTML 文档中出现一次

类选择器与id选择器的区别：

• 类选择器( class )好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

• id选择器好比人的身份证号码，是唯一的，不得重复。

• id选择器和类选择器 最大的不同 在于使用次数上。

• 类选择器在修改样式中用的最多， id选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

---

七、通配符选择器

在CSS中，通配符选择器 使用“*”定义，它表示选取页面中所有元素(标签)。

* {
   属性:属性值;
   ...
 }

例：

 * {
     color: red;
 }

• 通配符选择器不需要调用，自动就给所有的元素使用样式

• 特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距后期讲)

 * {
     margin: 0;
     padding: 0;
 }

---

字体属性

CSS Fonts (字体) 属性 用于定义 字体系列、大小、粗细、和 文字样式 (如斜体).

一、字体类型

CSS 使用 font-family属性 定义文本的 字体类型。

p {
    font-family: "微软雅黑";
}
div {
    font-family: Arial,"Microsoft Yahei","微软雅黑";
}

• 各种字体之间必须使用英文状态下的逗号隔开

• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

• 最常见的几个字体:body {font-family. "Microsoft YaHei,tahoma ,arial,‘Hiragino Sans GB’;}

---

二、字体大小

CSS 使用 font-size属性 定义 字体大小

body {
    font-size: 20px;
}

• px（像素)大小是我们网页的最常用的单位

• 谷歌浏览器默认的文字大小为16px

• 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

• 可以给< body >标签指定整个页面的字体大小

• 标题标签比较特殊，需要单独指定大小

---

三、字体粗细

CSS 使用 font-weight属性 定义 字体粗细

p {
    font-weight: bold;
}

属性值	说明
normal	默认值（不加粗）
bold	加粗
bolder	特加粗
lighter	细体
100-900	400等同于normal，700等同于bold，注意这个数字后面不加单位

• 实际开发中，更推荐使用数值表示字体粗细

---

四、文字样式

使用 font-style属性 定义 文字风格

p {
    font-style: normal;
}

font-style的属性值：

属性值	说明
normal	默认值，浏览器会显示标准的字体样式。
italic	浏览器会显示斜体的样式

• 实际开发中很少使用斜体，反而要给斜体标签(<em>、<i>）改成不倾斜(normal)。

---

五、字体复合属性

CSS 可以把上述字体属性按既定顺序符合书写：

body {
    font: font-style font-weight font-size/line-height font-family;
    /*line-height为行间距，可以省略*/
}

例如，设置微软雅黑的加粗斜体，16像素：

body {
    font: italic 700 16px 'Microsoft Yahei';
}

• 使用font属性时，必须按上面的顺序书写，不能更换顺序，各个属性用空格隔开

• 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用

---

六、字体属性总结

属性	表示	注意点
font-size	字号	通常使用px 像素，一定要写上单位
font-family	字体	实际开发中，团队约定字体
font-weight	字体粗细	blod，加粗，数值700；normal，不加粗，数值是400
font-style	字体样式	italic，斜体；normal，不倾斜
font	字体连写	1.顺序；2.字号和字体必须保留

---

文本属性

定义文本的外观，如 文本颜色，对齐方式、装饰、缩进、行间距等

---

一、文本颜色

使用 color属性 定义 文本颜色

p {
    color: pink;
}

color的属性值：

属性值	说明
预设的颜色值	red、green、pink…
十六进制表示	#FF00CC、#FFFFFF…
RGB表示	rgb(255,0,0) 或 rgb(100%,0%,0%)…

• 开发中最常用的是 十六进制

---

二、对齐方式

使用text-align属性设置元素内的文本内容的水平对齐方式

h2 {
    text-align: center;
}

属性值	说明
center	居中对齐
left	左对齐，默认值
right	右对齐

• 本质是设置盒子里的文字的水平对齐方式！

• 给图片加对齐方式是没有用的，可以给它添加一个父级

---

三、装饰文本

使用 text-decoration属性 规定添加到文本的装饰，包括 下划线、删除线、上划线等。

div {
    text-decoration: underline;
}

text-decoration的属性值：

属性值	说明
none	默认。没有装饰（常用）
underline	下划线。链接标签自带下划线（常用）
overline	上划线（几乎不用）
line-throught	删除线（几乎不用）

---

四、文本缩进

使用 text-indent 来指定 文本第一行的缩进，通常是 将段落首行缩进。

p {
    text-indent: 20px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值.

p {
    text-indent: 2em;
}

em是一个相对单位，是 当前元素 font-size 1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

---

五、行间距

使用 line-height属性 用于 设置行间的距离(行高)。可以控制文字行与行之间的距离.

p {
    line-height: 26px;
}

---

---

使用FSCapture测量：

---

六、文本属性总结

属性	表示	注意点
color	文本颜色	通常使用16进制书写
text-align	文本对齐	设定文本的水平对齐格式
text-indent	文本缩进	首行缩进2字符：2em；
text-decoration	文本修饰	下划线：underline；取消下划线：none
line-height	行高	控制行间距

---

CSS引入方式

一、CSS的三种样式表

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

二、内部样式表

内部样式表（内嵌样式表）是写到html页面内部。是将所有的CSS代码抽取出来，单独放到一个< style >标签中。

<style>
  div {
      color: red;
      font-size: 12px;
  }
</style>

• < style >标签理论上可以放在HTML文档的任何地方，但一般会放在文档的< head >标签中。

• 通过此种方式，可以方便控制当前整个页面中的元素样式设置。

---

三、行内样式表

行内样式表(内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

<div style="color: red; font-size: 12px;">
    夏天夏天悄悄过去留下小秘密
</div>

• style其实就是标签的属性

• 在双引号中间，写法要符合CSS规范

• 可以控制当前的标签设置样式

• ·由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

• 使用行内样式表设定CSS，通常也被称为行内式引入

---

四、外部样式表

核心是:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。实际开发都是外部样式表。适合于样式比较多的情况。

引入外部样式表的步骤：

1. 新建css文件，把所有css样式放入此文件中；

2. 在HTML页面中，使用< link >标签引入这个文件。

<link rel="stylesheet" href="css文件路径" >

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet”，表示被链接的文档是一个样式表文件。
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

---

chorme调试工具

---

一、打开调试工具

打开 Chrome 浏览器，按下f12键或者右键页面空白处->检查

---

二、使用调试工具

• Ctrl+滚轮可以放大开发者工具代码大小。

• 左边是HTML元素结构，右边是CSS样式。

• 右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜

• Ctrl +0复原浏览器大小。

• 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。

• 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

---

目录(二)

Emmet语法
CSS的复合选择器
CSS的元素显示模式
CSS的背景
CSS的三大特性

Emmet语法

Emmet语法的前身是Zen coding，它使用缩写,来提高html/css的编写速度

---

一、快速生成HTML

• 生成标签直接输入标签名按tab键即可；比如div然后tab键，就可以生成< div ></ div >

• 如果想要生成多个相同标签加上号就可以了；比如div3就可以快速生成3个div

• 如果有父子级关系的标签，可以用>；比如 ul > li 就可以了

• 如果有兄弟关系的标签，用＋就可以了；比如div+p

• 如果生成带有类名或者id名字的，直接写.demo或者#two按tab键就可以了

• 如果生成的div类名是有顺序的，可以用自增符号$

• 如果想要在生成的标签内部写内容可以用{}表示

---

二、快速生成css

css基本采取简写形式即可

1. 比如w200 tab键，生成：width: 200px;

2. 比如lh26 tab键，生成：line-height: 26px;

   ---

三、快速格式化代码

Vscode快速格式化代码: shift+alt+f 也可以设置当我们保存页面的时候自动格式化代码:

1.管理 —> 2.设置 —> 3.用户 -> 4.文本编辑器 -> 5.格式化 -> 6.Format On Save

---

CSS 复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

1. 复合选择器可以更准确、更高效的选择目标元紊(标签)

2. 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

3. 常用的复合选择器包括︰后代选择器、子选择器、并集选择器、伪类选择器等等

---

一、后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 {
	样式声明;
}

• 这种写法只会选择元素1中的全部元素2（后代元素）

例如：

ul li {
    color: red;
}
/*ul内的所有li标签内容变成红色*/

• 元素1和元素2之间用空格隔开

• 元素1是父级，元素2是子级，最终选择的是元素2

• 元素2可以是儿子，也可以是孙子，可以嵌套下去，只要是元素1的后代即可

• 元素1和元素2可以是任意基础选择器

二、子选择器

只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

父元素1>子元素2 {
    样式声明;
}

上述语法表示选择元素1里面的所有直接后代 (子元素) 元素2.

例如：

div > p {
    color: red;		/*选择 div 里面所有最近一级 p 标签元素 */
}

• 元素1和元素2之间用大于号隔开

• 元素1是父级，元素2是子级，最终选择元素2

• 元素2必须的亲儿子，其孙子、重孙之类的都不归它管，你可以叫它亲儿子选择器

---

三、并集选择器

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明.

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1, 元素2 {
    样式声明;
}

上述语法表示选择元素1 和 元素2.

例如：

ul,
div {
	样式声明;	
}

• 元素1和元素2之间用逗号隔开

• 逗号可以理解为和的意思

• 并集选择器通常用于集体声明

• 约定的书写规范，并集选择器竖着书写

---

四、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号 (:) 表示，比如:hover 、:first-child。

伪类选择器很多，比如链接伪类、焦点伪类等

---

链接伪类选择器

链接伪类选择器类别	说明
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下，未松开的链接）

---

链接伪类选择器注意事项：

1. 为了确保生效，请按照LVHA的循顺序依次声明:link - :visited - :hover - :active。

2. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

---

链接伪选择器实际开发中的写法

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #369;
    text-decoration: underline;
}

焦点伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，一般情况< input >类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus{
    background-color: yellow;
}

---

元素显示模式

作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签）以什么方式进行显示，比如< div >自己占一行，比如一行可以放多个< span >。

HTML元素一般分为块元素和行元素两种类型

---

一、块元素

常见的块元素有< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >等，其中< div >标签是最典型的块元素。

---

块元素的特点：

• 比较霸道，自己独占一行。

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

• 宽度默认是容器(父级宽度)的100%。

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

---

注意：

文字类的元素内不能使用块级元素

• < p >标签主要用于存放文字，因此< p >里面不能放块级元素，特别是不能放< div >

• 同理，< h1 >~< h6 >等都是文字类块级标签，里面也不能放其他块级元素

---

二、行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中< span >标签是最典型的行内元紊。有的地方也将行内元素称为内联元素。

行内元素的特点：

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

• 高、宽直接设置是无效的。

• 默认宽度就是它本身内容的宽度。

• 行内元素只能容纳文本或其他行内元素。

注意：

• 链接里面不能再放链接

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

---

三、行内块元素

在行内元素中有几个特殊的标签<img / >、<input / >、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

---

行内块元素的特点：

• 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。

• 一行可以显示多个(行内元素特点)。默认宽度就是它本身内容的宽度(行内元素特点)。

• 高度，行高、外边距以及内边距都可以控制(块级元素特点)。

---

四、元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性比如想要增加链接 < a > 的触发范围。

转换为块级元素：display: block
转换为行内元素：dispaly: inline
转化为行内块元素：dispaly: inline-block

补充一个小技巧：把单行文字设置为垂直居中：把行间距设置为盒子的高度：

a {
    display: block;
    height: 40px;
    line-height: 40px;
}

---

单行文字垂直居中的代码：

CSS 没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现。

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

<div>我要居中</div>
<style>
  div {
	width: 200px;
	height: 40px;
	background-color: pink;
	line-height: 40px;
  }
</style>

---

案例：小米侧边栏

<!-- css -->
<style>
 a {
     display: block;
     width: 230px;
     height: 40px;
     font: 14px/40px 'Microsoft YaHei';
     color: aliceblue;
     text-indent: 2em;
     text-decoration: none;
     background-color: rgb(83, 87, 88);
  }

 a:hover {
   background-color: #ff6f00;
 }
</style>
</head>

<!-- html -->
<div class="sidebar">
    <ul>
        <a href="#">手机 电话卡</a>
        <a href="#">电脑 盒子</a>
        <a href="#">笔记本 平板</a>
        <a href="#">出行 穿戴</a>
        <a href="#">智能 路由器</a>
        <a href="#">健康 儿童</a>
        <a href="#">耳机 音响</a>
    </ul>
</div>

---

背景

通过CSS背景属性，可以 给页面元紊添加背景样式。 背景属性可以 设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

---

一、背景颜色

使用 background-color属性 定义 元素的背景颜色。

background-color: transparent(默认值)/颜色值;

---

二、背景图片

使用 background-image属性 描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置。(精灵图也是一种运用场景)

background-image: none/url();

参数值	作用
none	无背景图片（默认）
url	使用绝对或相对路径指定背景图片

---

三、背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用 background-repeat属性。

background-repeat: 属性值;

属性值	作用
repeat	背景图片在纵向和横向上平铺（默认）
no-repeat	背景图片不平铺
repeat-x	背景图片在横向上平铺
repeat-y	背景图片在纵向上平铺

---

四、背景图片位置

使用 background-position属性 可以 改变图片在背景中的位置。

background-position: x y;

参数的意思是：x坐标 和 y坐标。可以是方位名词或精确值

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

---

• 参数是方位名词

  • 如果指定的两个值都是方位词，则两个值的前后顺序无关，比如 left top 和 top left 效果一致。

  • 采用方位词时，如果只写一个方位词，则另一个默认是center（居中对齐）

• 参数是精确数值

  • 第一个一定是x坐标，第二个一定是y坐标

  • 如果只指定了一个数值，那么改数值一定是x坐标，y坐标默认垂直居中

• 参数的混合单位

  • 如果指定的两个值是精确单位和方位名词混合使用，第一个值是x坐标，第二个是y坐标

<style>
	div {
		width: 300px;
		height: 300px;
		background-color: pink;
		background-image: url(../Photo/);
		background-repeat: no-repeat;
		background-position: center right;
	}
</style>
<div></div>

---

---

五、背景固定

background-attachment=属性 设置 背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果

background-attachment: scoll | fixed

参数	作用
scroll	背景图片是随对象内容滚动（默认）
fixed	背景图像固定

---

---

六、背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量.当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为∶ background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: transparent url(url) repeat-y fixed top;

• 开发中更推荐使用使用复合写法

---

七、背景颜色半透明

css3提供了设置背景颜色半透明的效果

background: rgba(0, 0, 0, 0.3);

• 前面三个参数的rgb颜色，最后一个0.3是alpha透明度，取值在0~1之间

• alpha的0.3可以省略成.3，rgba(0, 0, 0, .3)

• css3新增属性，IE9+版本浏览器支持

• 放心使用，不太关注兼容性写法

---

CSS三大特性

css有三个非常重要的特性：层叠性、继承性、优先级

一、层叠性

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

---

层叠性原则：

• 样式冲突，遵循的原则是就近原则,哪个样式里结构近，就执行哪个样式

• 样式不冲突，不会层叠

div {
    color: red;
    font-size: 12px;
}
div{
    color: pink;
}

最终会显示为12像素，粉红色

---

二、继承性

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

<style>
div {
	color: red;
	font-size: 12px;
}
</style>
<div>
    <p>
       龙生龙，凤生凤，老鼠生的儿子会打洞
    </p>
</div>

• 恰当地使用继承可以简化代码，降低css样式的复杂性

• 子元素可以继承的样式：(text-，font-，line-这些开头的元素，以及color属性)

---

行高的继承

<div>过去</div>
<p>将来</p>

<style>
body {
	/* font: 12px/1.5 "Microsoft Yahei"; */
	font: 12px/1.5 "Microsoft Yahei";
}
.div {
	/* 这个1.5 就是当前元素文字大小的1.5倍，所以当前行高就是 14*1.5=21像素 */
	font-size: 14px;
}
</style>

• 行高可以跟单位也可以不跟单位

• 如果子元素没有设置行高，则会继承父元素的行高 1.5

• 此时子元素的行高是：当前子元素的文字大小 * 1.5

• body行高为1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

---

三、优先级

当同一个元素指定多个选择器，就会有优先级的产生。

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

• 选择器不同，则根据选择器权重执行

选择器	权重1
继承 或者 *	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: red!important;
    font-size:12px;
}

---

注意：

• 权重是有4组数字组成,但是不会有进位。

• 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推.

• 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

• 可以简单记忆法：通配符和继承权重为0，标签选择器为1，类、(伪类)选择器为10，id选择器100，行内样式表为1000，!important无穷大

• 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

---

四、权重叠加

权重叠加∶如果是复合选择器，则会有权重强加，需要计算权重。

<style>
    /* 复合选择器的权重叠加 */
    ul li {
        color: green;
    }
    /* ul li 权重：0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
    li {
        color: red;
    }
    /* li 权重：0，0，0，1 */
    .nav li {
        color: pink;
    }
	/* .nav li 权重：0，0，1，0 + 0，0，0，1 = 0，0，1，1*/
</style>

<ul class="nav">
    <li>萝卜</li>
    <li>青菜</li>
</ul>

---

权重叠加练习

div ul li ————>0，0，0，3
.nav ul li ————>0，0，1，2
a:hover ————>0，0，1，1
.nav a ————>0，0，1，1

---

目标(三)

盒子模型
PS基本操作
圆角边框
盒子阴影
文字阴影

盒子模型

页面布局要学习三大核心,盒子模型,浮动和定位.学习好盒子模型能非常好的帮助我们布局页面.

---

一、网页布局的本质

网页布局过程：

1. 准备好相关的网页元素，网页元素基本都是盒子Box。

2. 利用CSS设置好盒子样式，然后摆放到相应位置。

3. 往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子

---

二、盒子模型

所谓盒子模型∶就是 把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括:边框、外边距、内边距、和实际内容。

盒子模型的组成：

---

---

三、边框

1. 边框由三部分：边框粗细、边框样式、边框颜色

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

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式，重点记住solid(实线)、dashed (虚线)、dotted (点线)
border-color	边框颜色

复合写法：

border: 1px solid red;/*没有顺序，一般要求这个顺序*/

---

2. 表格的相邻边框合并

border-collapse属性 控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapes: collapse;

• collapse 单词是合并的意思

• border-collapse: collapse; 表示相邻边框合并在一起

---

3. 边框影响盒子的实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

• 测量盒子大小的时候不量边框

• 如果测量的时候包含了边框,则需要width/height减去边框宽度 (减去边框左右的宽度)

---

四、内边距

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

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合写法：

padding 属性 (简写属性) 可以有一到四个，不同值个数含义不同：

值的个数	意思
padding: 5px	1个值，代表上下左右内边距都是5px
padding: 5px 10px	2个值，第一个代表上下内边距，第二个代表左右内边距
padding: 5px 10px 20px	3个值，第一个代表上内边距，第二个代表左右内边距，第三个代表下内边距
padding: 5px 10px 20px 30px	4个值，依次是上、右、下、左，顺时针

• 以上4种情况，实际开发都会使用

---

padding会影响盒子实际大小

当我们给盒子指定padding值之后，发生了2件事情:

1. 内容和边框有了距离，添加了内边距。

2. padding 影响了盒子实际大小。

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

---

解决方案∶

• 如果保证盒子跟效果图大小保持一致，则让width 减去多出来的内边距大小即可。

• 特别地，如果盒子本身没有指定 width 属性,则此时padding不会撑开盒子大小.

---

案例：新浪导航

<style>
.nav {
	height: 41px;
	border-top: 3px solid #ff8500;
	border-bottom: 1px solid #edeef0;
	background-color: #fcfcfc;
	line-height: 41px;
}
.nav a {
	display: inline-block;
	height: 41px;
	font-size: 14px;
	text-decoration: none;
	color: #4c4c4c;
	padding-left: 0 20px;
}

.nav a:hover {
	background-color: #eee;
	color: #ff8500;
}
</style>

<div class="nav">
  <a href="#">新浪导航</a>
  <a href="#">微博</a>
  <a href="#">客户端</a>
</div>

---

五、外边距

margin属性 用于 设置外边距，控制盒子与盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin 简写代表的意义跟 padding 完全一致

---

外边距的典型应用：

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度（width）。

2. 盒子左右外边距都设置auto。

   .header { width: 960px; margin: 0 auto; }

---

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

• margin-left: auto; maigin-right: auto;

• margin: auto;

• margin: 0 auto;

注意：以上方法是 让块级元素水平居中，行内元素和行内块元素水平居中 只需 给父元素添加：text-algin： center即可

---

外边距合并

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

相邻块级元素垂直外边距（上下外边距）的合并

当 上下相邻的两个块元素（兄弟关系）相遇时，如果上面的块级元素设置了下外边距 margin-bottom，下面的块级元素设置了上外边距 margin-top，则它们之间的垂直间距不是 margin-bottom与 margin-top 之和。取两个值中的较大者这种现象被称为 相邻块元素垂直外边距的合并。

---

解决方案：

• 尽量只给一个盒子添加margin值

---

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

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

<style>
 .test1 {
    width: 200px;
    height: 200px;
    background-color: red;
    margin-top: 60px;
  }
  .test2 {
    width: 50px;
    height: 50px;
    background-color: aqua;
    margin-top: 50px;
  }
</style>
</head>

<body>
  <div class="test1">
    <div class="test2"></div>
  </div>
</body>

---

解决方案：

• 为父元素添加上边框

• 为父元素添加内边距

• 为父元素添加 overflow: hidden

还有其他方法，比如 浮动、固定、绝对定位的盒子不会有塌陷问题。

---

六、清除内外边距

网页元素很对带有默认的内外边距，不同浏览器默认的也不相一致。因此在布局前，首先清除网页元素的内外边距：

* {
	padding: 0;
	margin: 0;
}	

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。可以转换为行内块或块级元素再设置 。

---

PS基本操作

因为网页美工大部分效果图都是利用PS ( Photoshop )来做的，所以以后我们大部分切图工作都是在PS里面完成。

• 文件→打开∶可以打开我们要测量的图片

• Ctrl+R：可以打开标尺，或者视图→标尺

• 右击标尺，把里面的单位改为像素

• Ctrl+加号 (+)可以放大视图，Ctrl+减号 (-)可以缩小视图

• 按住空格键，鼠标可以变成小手，拖动PS视图

• 用选区工具拖动可以测量大小

• Ctrl+D可以取消选区，或者在旁边空白处点击一下也可以取消选区

---

案例：产品模块

---

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 298px;
        height: 416px;
        margin: 100px auto;
        background-color: #F3F5F2;
    }

    .box img {
        width: 100%;
    }

    .review {
        height: 70px;
        font-size: 14px;
        padding: 0 28px;
        margin-top: 30px;
    }

    .appraise {
        font-size: 14px;
        color: #B0B0B0;
        padding: 0 24px;
        margin-top: 20px;
    }

    .info {
        font-size: 14px;
        margin-top: 15px;
        padding: 0 28px;
    }

    .info h4 {
        display: inline-block;
        font-weight: 400;
    }

    .info span {
        color: #ff6700;
    }

    .info em {
        font-style: normal;
        color: #ebe4e0;
        margin: 0 6px 0 15px;
    }

    .info h4 a {
        text-decoration: none;
        color: black;
    }
</style>

<div class="box">
    <img src="../Photo/产品模块案例.png" alt="">
    <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
    <div class="appraise">来自于117384232的评价</div>
    <div class="info">
        <h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
        <em>|</em>
        <span> 99.9元</span>
    </div>
</div>

---

圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius属性 用于 设置元素的外边框圆角。

border-radius: length;

radius半径(圆的半径)原理：（椭) 圆与边框的交集形成圆角效果

---

• 参数值可以为数值 (0px~100px)或者百分比 (0%~100%)的形式

• 如果盒子是正方形，想要设置成一个圆，把数值修改为盒子 (正方形)高度跟宽度的一半，或者设置为50%

• 如果想设置圆角矩形，设置为高度的一半就可以了

• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

• 也可以分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

---

盒子阴影

CSS3中新增了盒子阴影，我们可以使用 box-shadow属性 为 盒子添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需。水平阴影位置，可以是负值
v-shadow	必需。垂直阴影位置，可以是负值
blur	可选。模糊虚实
spread	可选。阴影的大小
color	可选。阴影的颜色。可用rgba()设置
inset	可选。将外阴影（outset）设置为内阴影

注意：

• 默认就是外阴影（outset）。但是不可以写这个单词，否则阴影会无效

• 盒子阴影不占空间，不会影响其他盒子排列

<style>
  .box {
    height: 200px;
    width: 200px;
    background-color: pink;
    margin: 0 auto;
    box-shadow: 10px 10px 10px 10px black;
  }
</style>
<div></div>

---

文字阴影

在CSS3中，我们可以使用 text-shadow属性 将 阴影应用于文本。

text-shadow: h-shadow v-shadow blur color;

值	说明
h-shadow	必需。水平阴影位置，可以是负值
v-shadow	必需。垂直阴影位置，可以是负值
blur	可选。模糊虚实
color	可选。阴影的颜色。可用rgba()设置

• 作为了解，实际较少使用。

---

目录(四)

浮动
常见网页布局
清除浮动
PS切图

CSS浮动

目标：

能够说出为什么需要浮动
能够说出浮动的排列特性
能够说出3种最常见的布局方式
能够说出为什么需要清除浮动
能够写出至少2种清除浮动的方法
能够利用Photoshop实现基本的切图
能够利用Photoshop插件实现切图
能够完成学成在线的页面布局

---

一、传统网页的三种布局

网页布局的本质——用CSS来摆放盒子。

把盒子摆放到相应位置CSS提供了三种传统布局方式(简单说就是盒子如何进行排列顺序)∶

• 普通流(标准流)

• 浮动

• 定位

---

二、标准流

所谓的标准流:就是标签按照规定好默认方式排列：

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

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

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

• 常用元素：span、a、i、em等

以上都是标准流布局，前面学习的就是标准流，标准流是最基本的布局方式

注意：实际开发中，一个页面基本都包含了这三种布局方式（移动端会学习新的布局方式）。

---

三、为什么需要浮动

提问: 我们用标准流能很方便的实现如下效果吗?

• 如何让多个块级盒子(div)水平排列成一行?

---

• 比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

• 如何实现两个盒子的左右对齐?

---

总结︰有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式. 浮动最典型的应用:可以让多个块级元素一行内排列显示。

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

---

四、什么是浮动

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

选择器 { float: 属性值; }

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

<style>
.left,
.right {
	float: left;
	width: 200px;
	height: 200px;
	background-color: pink;
}
/*.right与上面的.right是相同的选择器，上面的会被下面的调换掉*/
.right {
	float: right;
}
</style>

<div class="left">左青龙</div>
<div class="right">右白虎</div>

---

---

五、浮动特性 (重难点)

加入了浮动元素，会具有很多特性，需要掌握的：

• 浮动元素会脱离标准流（脱标）

• 浮动元素会一行内显示并且元素顶部对齐

• 浮动元素会具有行内块元素的特性

---

最重要的特性：

• 脱离标准流的控制移动到指定位置,（俗称脱标）

• 浮动的盒子不再保留原先的位置

---

如果多个盒子设置了浮动，则他们会按照属性值在一行内显示并且顶端对齐排列

---

注意：浮动的元素是相互贴靠在一起的（没有缝隙），如果父级盒子宽度装不下这些浮动的盒子，多出的盒子会另起一行显示

---

浮动元素会具有行内块元素特性

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

• 如果 块级盒子 没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

• 浮动的盒子中间是没有缝隙的，是紧挟着一起的

• 行内元素同理

---

六、浮动元素经常和标准流父级搭配使用

为了约束元素位置，网页布局一般采取的策略是：

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

---

<!--浮动布局练习-->
<style>
	* {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
	}
	.box {
		width: 1226px;
		height: 285px;
		background-color: pink;
		margin: 0 auto;
	}
	.box li {
		float: left;
		width: 296px;
		height: 285px;
		background-color: purple;
		margin-right: 14px
	}
	.box .last {
		margin-right: 0;
	}
</style>
<ul class="box">
	<li></li>
	<li></li>
	<li></li>
	<li class="last"></li>
</ul>

---

---

常见网页布局

常见网页布局

---

浮动布局注意点

浮动和标准流的父盒子搭配

1. 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2. 一个元素浮动了，理论上其余兄弟元素也要浮动

3. 一个里面父级有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防引起问题

4. 浮动的元素只会影响浮动盒子后面的标准流，不会影响前面的标准流

---

清除浮动

一、为什么需要清除浮动

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

---

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

---

二、清除浮动本质

• 清除浮动本质就是清除浮动元素的影响

• 如果父元素本身有高度，则不需要清除浮动

• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

---

语法：

 选择器 { clear:属性值; }

属性值	说明
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

我们实际工作中，几乎只用 clear: both; 清除浮动的策略 是：闭合浮动

---

三、清除浮动的方法

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

• 父级添加 overflow 属性

• 父级添加 :after 属性

• 父级添加双伪元素

---

1.额外标签法

额外标签法 会在浮动元素末尾添加一个空标签。例如：< div style="clear: both"></ div>，或者其他标签 (如 < br />等)。

• 优点：通俗易懂，书写方便

• 缺点：添加许多无意义的标签，结构化差

---

注意：这个空标签必须是块级元素

<style>
.box {
	width: 800px;
	border: 1px solid blue;
	margin: 0 auto;
}
.damao {
	float: left;
	width: 300px;
	height: 200px;
	background-color: purple;
}
.ermao {
	float: left;
	width: 200px;
	height: 200px;
	background-color: pink;
}
.foot {
    height: 200px;
    background-color: black;
}
.clear {
	clear: both;
}
</style>
<div class="box">
	<div class="damao"></div>
	<div class="ermao"></div>
	<div class="clear"><div>
</div>
<div class="foot"></div>

---

---

2.父级添加overflow属性

可以给父级添加 overflow属性，值可以设置为 hidden、auto、scroll。

• 优点：代码简洁

• 缺点：无法显示溢出的部分

---

<style>
.box {
  overflow: hidden;
  width: 800px;
  border: 1px solid blue;
  margin: 0 auto;
}
.damao {
  float: left;
  width: 300px;
  height: 200px;
  background-color: purple;
}
.ermao {
  float: left;
  width: 200px;
  height: 200px;
  background-color: pink;
}
.foot {
  height: 200px;
  background-color: black;
}
</style>
<div class="box">
  <div class="damao"></div>
  <div class="ermao"></div>
</div>
<div class="foot"></div>

---

---

3. :after 伪元素法

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

<style>
    .clearfix:after {
    content: "";		/* 伪元素必须写的属性 */
    display: block;		/* 插入元素必须是块级元素 */
    height:0;			/* 不要看到这个元素 */
    clear: both;
    visibility: hidden;	/* 不要看到这个元素 */
}
.clearfix {
    /*兼容IE6、7专用*/
    *zoom: 1;
}
.box {
    width: 800px;
    border: 1px solid blue;
    margin: 0 auto;
}
.damao {
    float: left;
    width: 300px;
    height: 200px;
    background-color: purple;
}
.ermao {
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;
}
.foot {
    height: 200px;
    background-color: black;
}
</style>
<div class="box clearfix">
    <div class="damao"></div>
    <div class="ermao"></div>
</div>
<div class="foot"></div>

• 优点：没有增加标签、结构更简单

• 缺点：照顾低版本浏览器

• 代表网站：百度、淘宝网、网易等

---

4.双伪元素清除浮动也是给父元素添加

.clearfix:before,
.clearfix:after {
    content: "";
   display: table;		/* 转化为块级元素并且一行显示 */
}
.clearfix:after {
    clear:both;
}
.clearfix {/*兼容IE6、7专用*/
    *zoom: 1;
}

---

<style>
.clearfix:before,
.clearfix:after {
    content: "";
   display: table;
}
.clearfix:after {
    clear:both;
}
/*兼容IE6、7专用*/
.clearfix {
    *zoom: 1;
}


.box {
	width: 800px;
	border: 1px solid blue;
	margin: 0 auto;
}
.damao {
	float: left;
	width: 300px;
	height: 200px;
	background-color: purple;
}
.ermao {
	float: left;
	width: 200px;
	height: 200px;
	background-color: pink;
}
.foot {
    height: 200px;
    background-color: black;
}
</style>
<div class="box clearfix">
	<div class="damao"></div>
	<div class="ermao"></div>
</div>
<div class="foot"></div>

• 优点:代码更简洁

• 缺点: 照顾低版本浏览器

• 代表网站: 小米、腾讯

---

PS切图

一、常见的图片格式

1. jpg图像格式 JPEG (JPG )对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的

2. gif图像格式GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果

3. png图像格式是一种新的网络图形格式，结合予GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.如果想要切成背景透明的图片,请选择png格式.

4. PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿. 对我们前端人员来说, 最大的优点我们可以直接从上面复制文字, 获得图片, 还可以测量大小和距离.

---

二、图层切图

最简单的切图方式: 右键图层 -> 快速导出为png.

很多情况下, 需要合并图层再导出:

• 选中需要的图层,右键 - > 合并图层(ctrl + e)

• 合并后的图层右键 - > 导出

---

三、切片切图

---

• 利用切片工具选中图片

  • 利用切片工具手动划出图片范围

• 导出选中的图片

  • 文件菜单 -> 导出 -> 存储为Web设备所用格式 -> 选择需要存储的图片格式 -> 存储

• 需要透明图片：将图层小眼睛取消 —> 文件菜单 -> 导出 -> 存储为Web设备所用格式 (PNG-24) -> 选择需要存储的图片格式 -> 存储

---

四、PS插件切图

Cutterman是一款运行在Photoshop中的插件,能够自动将你需要的图层进行输出,以代替传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程

官网: Cutterman - 最好用的切图工具

注意: Cutterman插件要求PS是完整版. 即可以使用扩展功能的版本.

---

目录(五)

定位
元素的显示隐藏

---

CSS定位

一、定位

为什么需要定位

提问:以下情况使用标准流或者浮动能实现吗?

1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.

2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

所以：

• 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

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

---

定位：将盒子定在某一个位置，所以定位也是再摆盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

• 定位模式用于指定一个元素在文档中的定位方式。

• 边偏移决定了该元素的最终位置。

---

定位模式：

通过CSS的 position属性 来设置，有四个值：

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

---

边偏移：

通过四个属性来设置：

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

---

二、静态定位

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

选择器 {
    position: static;
}

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

• 静态定位在布局时很少用到

---

三、相对定位

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

选择器 {
	position: relative;
}

相对定位的特点：（务必记住）

• 它是 相对于自己原来的位置来移动的 (移动位置的时候参照点是自己原来的位置)

• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，原来的位置保留）

<style>
  .box1 {
    position: relative;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    background-color: pink;
  }

.box2 {
    width: 200px;
    height: 200px;
    background-color: deeppink;
  }
</style>
<div class="box1"></div>
<div class="box2"></div>

因此，相对定位并没有脱标，最典型的应用是限制绝对定位的

---

四、绝对定位

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

选择器 {
    position: absolute;
}

绝对定位的特点：（务必记住）

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准来定位 (Document 文档)

• 如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

• 绝对定位不再占有原先的位置（脱标）

---

五、子绝父相的由来

这句话的意思是：“子级是绝对定位的话，父级就要用相对定位”

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

• 父盒子需要加定位限制子盒子在父盒子内显示

• 父盒子布局时，需要占有位置，因此父元素只能是相对定位

---

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级

---

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会用到。

---

注意：

子元素是绝对定位，父元素为相对、绝对或固定定位，则子元素均以父元素作为坐标参照系。

---

六、固定定位

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

选择器 {
    position: fixed;
}

---

固定定位的特点：（务必记住）

• 以浏览器的可视窗口为参照点移动

• 跟父元素没有任何关系

• 不随滚动条滚动

• 固定定位不再占有原先的位置

• 加了固定定位的盒子一定要有宽度

<style>
    .dj {
        positon: fixed;
        top: 100px;
        right: 40px;
    }
</style>
<div class="dj">
    <img src="#" alt="">
</div>

固定定位也是脱标的，可以看作是一个特殊的绝对定位

---

案例：固定在版心右侧位置

• 让固定定位的盒子left: 50%、走到浏览器可视区（也可以看做版心)的一半位置。

• 让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

---

七、粘性定位

粘性定位 可以被认为是 相对定位和固定定位的混合

选择器 {
    position: sticky;
    /*当盒子距离可视区域上沿10px变成粘性定位*/
    top: 10px;
}

粘性定位的特点：

• 以浏览器的可视窗口为参照点（固定定位特点）

• 粘性定位占有原先位置（相对定位特点）

• 必须添加top、left、right、bottom其中一个才有效

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

• 一定记住 相对定位、固定定位、绝对定位两大特点：1.是否占有位置 (脱标)、2.以谁为基准点移动位置。

---

定位叠放次序 z-index

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

选择器 {
	z-index: 1;
}

---

<style>
  .box {
    position: absolute
    top: 0;
    left: 0;
  	width: 200px;
  	height: 200px;
  }
  
  .xiongda {
    z-index: 1;
	background-color: red;
  }
.xiongda {
	z-index: 2;
	background-color: green;
  }
.qiangge {
	z-index: 3;
	background-color: blue;
  }
</style>

<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
<div class="box qiangge">光头强</div>

• 数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上

• 如果属性值相同，则按照书写顺序，后来居上

• 数字后面不可以加单位

• 只有定位的盒子才有z-index属性

---

八、文档流

文档流：是文档中可显示对象在排列时所占用的位置/空间

---

案例：绝对定位的盒子水平居中、垂直居中

加了绝对定位的盒子 不能通过margin: 0 auto水平居中(因为该元素脱离了文档流)，但是可以通过下面方法计算实现水平和垂直居中

• left: 50%：让盒子左侧移动到父级元素的水平中心位置；(父容器宽度的一半)

• margin-left: -100px; 让盒子向左移动自身宽度的一半（假设盒子宽是200px）

<style>
  .box {
    position: absolute;
    left: 50%;
    margin-left: -100px;
	bottom: 5%;
	width: 200px;
	height: 200px;
	background-color: red;
  }
</style>
<div class="box"></div>

---

九、定位特殊特性

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

• 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度

• 块级元素添加绝对定位或者固定定位，如果不设置宽度或高度，默认大小就是内容的大小

---

脱标的盒子不会触发外边距塌陷

用浮动元素、绝对定位、固定定位元素的都不会触发外边距合并的问题

绝对定位、固定定位会完成压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住盒子里的内容

但是绝对定位（固定定位）会压住下面标准流所有的内容

浮动之所以特殊，是因为浮动最初目的就是做文字环绕效果的。

---

元素的显示和隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新显示

本质：让一个元素在页面中因此或者显示出来

1. display 显示隐藏

2. visibility 显示隐藏

3. overflow 溢出显示隐藏

---

一、display属性

display属性 用于 设置一个元素如何显示

• display: none; 隐藏对象；

• display: block; 除了转换为块级元素外，同时还有显示元素的意思

---

display隐藏元素后，不在占有原来的位置.

应用及其广泛，搭配JS可以做很多网页特效。

<style>
    .peppa {
        display: none;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .george {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
</style>
<div class="peppa">佩奇</div>
<div class="george">乔治</div>

---

二、visibility 可见性

visibility属性 用于 指定一个元素可见还是隐藏

 visibility: visible; 元素可见；
 visibility: hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来位置，就用visibility: hidden;

如果隐藏元素不想要原来位置，就用display: none; （用处更多，重点）

---

三、overflow (溢出)

overflow属性 指定了 如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

---

属性值	描述
visible	不剪切内容也不添加滚动条 (默认)
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

---

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

• 但是如果有定位的盒子，请慎用overflow:hidden; 因为它会隐藏多余的部分。

---

目录(六)

精灵图
字体图标
CSS三角
CSS用户界面样式
vertical-align 属性应用
溢出的文字省略号显示
常见布局技巧

---

CSS高级技巧

一、精灵图

为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称css Sprites、CSS雪碧)。

---

核心技术：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

---

精灵图（sprites）的使用

---

使用精灵图核心：

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

2. 这个大图片也称为sprites精灵图或者雪碧图

3. 移动背景图片位置，此时可以使用background-position.

4. 移动的距离就是这个目标图片的×和y坐标。注意网页中的坐标有所不同 （x坐标往右走增大，y坐标往下走增大)

5. 因为一般情况下都是往上往左移动，所以数值是负值。

6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

使用精灵图核心总结：

• 精灵图主要针对于小的背景图片使用

• 主要借助于背景图片位置来实现

• 一般情况下精灵图都是负值（网页的坐标：x轴右边走是正值，y轴下边走是正值）

<style>
    .box {
        width: 60px;
        height: 60px;
        margin: 100px auto;
        background-color: pink;
        background: url(../Photo/sprites.png) no-repeat;
        background-position: -180px 0px
    }
</style>
<div class="box"></div>

---

案例：拼出自己的名字

<style>
    .d {
        display: inline-block;
        width: 100px;
        height: 109px;
        background: url(../Photo/24字母.jpg) no-repeat;
        background-position: -362px -7px;
    }

    .i {
        display: inline-block;
        width: 62px;
        height: 108px;
        background: url(../Photo/24字母.jpg) no-repeat;
        background-position: -326px -140px;
    }

    .n {
        display: inline-block;
        width: 113px;
        height: 111px;
        background: url(../Photo/24字母.jpg) no-repeat;
        background-position: -254px -275px;
    }

    .g {
        display: inline-block;
        width: 105px;
        height: 108px;
        background: url(../Photo/24字母.jpg) no-repeat;
        background-position: -98px -141px;
    }
</style>

<span class="d"></span>
<span class="i"></span>
<span class="n"></span>
<span class="g"></span>

---

二、字体图标

字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图是有很多优点，但是缺点很明显：

1. 图片文件还是比较大的

2. 图片本身放大缩小会失真

3. 一旦图片制作完成想要更换非常复杂

---

此时，字体图标iiconfont很好解决了以上的问题。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

---

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

• 兼容性：几乎支持所有的浏览器，请放心使用

---

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

• 如果遇到一些结构和样式比较简单的小图标，就用字体图标。

• 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标的下载

---

推荐下载网站：

• iconmoon字库：iconmoon.io - 该网站正在出售！ - iconmoon 资源和信息。

• icoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

• 阿里 iconfont 字库 iconfont-阿里巴巴矢量图标库

• 这个是阿里M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用Al制作图标上传生成。重点是，免费!

字体图标的引入

---

下载完成后，注意压缩文件不要删，后面会用

• 把压缩包解压，里面的fonts文件夹放入项目的根目录下；

---

• 不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

1. TureType.ttf字体是windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile、Safari4.2+

2. Web Open Font Form.woff字体，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3。6+、Opera11.1+

3. Embedded Open Type .eot字体是IE专用字体，支持这种字体的浏览器有IE4+

4. SVG.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chorme4+、Safari3.1+、Opera10.0+、ios Mobile Safari3.2+;

---

• 在CSS样式中全局声明字体︰简单理解把这些字体文件通过css引入到我们页面中。

• 一定注意字体文件路径的问题。

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?drjfm0');
    src: url('fonts/icomoon.eot?drjfm0#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?drjfm0') format('truetype'),
        url('fonts/icomoon.woff?drjfm0') format('woff'),
        url('fonts/icomoon.svg?drjfm0#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


​

• 这段代码可以在压缩包里的style.css文件里找到！！！ 直接link这个css文件

• html标签内添加小图标 在压缩包里打开 demo.html文件，找到需要的图标复制字体图标到标签内 给使用了字体图标的标签声明字体样式：font-family: ‘iconmoon’;

字体图标的追加

---

把压缩包里面的selection.json 重新上传到网站，然后选中自己想要的新图标，重新下载替换源文件即可

---

三、CSS三角

网页常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标

<style>
    div {
        width: 0;
        height: 0;
        line-height: 0; // 为了照顾兼容性问题
        font-size: 0; // 为了照顾兼容性问题
        border: 10px solid transparent;
        border-left-color: pink; // 左边三角形
        border-top-color: pink; // 上三角形
        ...
    }
</style>
<div></div>

案例：京东三角

---

<style>
    .box {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 100px auto;
        background-color: pink;
    }

    .triangle {
        position: absolute;
        top: -19px;
        right: 10px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom-color: pink;

    }
</style>

<div class="box">
    <div class="triangle"></div>
</div>

---

四、CSS界面样式

什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提升用户的体验

• 鼠标样式

• 表单轮廓

• 防止表单域拖拽

---

鼠标样式 cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

选择器 {
    cursor: pointer;
}

属性值	说明
default	默认的鼠标样式
pointer	小手（链接时）
move	移动（查看大图时）
text	文本（打字时）
not-allowed	禁止

<ul>
    <li style="cursor: pointer;">鼠标小手样式</li>
    <li style="cursor: move;">鼠标移动样式</li>
    <li style="cursor: text;">鼠标文本样式</li>
    <li style="cursor: not-allowed;">鼠标禁止样式</li>
</ul>

---

轮廓线 outline

给表单添加 outline: 0 或者outline: none;之后，就可以去掉表单默认的蓝色边框

input {
	outline: none;
}

---

防止表单拖拽 resize

实际开发中，文本域右下角是不允许拖拽的，可以通过 resize属性取消

textarea {
  resize: none;
}

五、行内(块)与文字对齐方式

CSS的 vertical-align属性使用场景：设置图片或者表单 (form)（行内块元素）与文字垂直居中对齐

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效

vertical-align: baseline | top | middle | bottom;

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

---

---

<style>
  .ldh {
	vertical-align: middle;
  }
</style>
<img src="../Photo/ldh.jpg" alt="" class="ldh">pink老师是刘德华

---

---

图片、表单都属于行内块元素、默认的 vertical-align是基线对齐的

设置为 vertical-align: middle;可以让文字与图片垂直居中对齐。

---

解决图片底部默认留白

---

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

---

主要的解决方法有两种：

• 给图片添加 vertical-align: middle | top | bottom;都行，只要不是基线对齐就行（推荐）

• 把图片转换为块级元素 display: block;

---

六、溢出文字处理

单行文本溢出

---

必须满足下面三个条件：

• 文本强制单行显示；

• 溢出隐藏

• 省略号代替溢出部分

---

---

1. 先强制一行内显示文本
   white-space: nowarp;	(默认 normal 自动换行)
2. 溢出隐藏
   overflow: hidden;
3. 文字用省略号替代超出的部分
   text-overflow: ellipsis;

---

<style>
    div {
        width: 150px;
        height: 80px;
        background-color: pink;
        margin: 100px auto;
        /* 1.文字显示不开隐藏 */
        white-space: nowrap;
        /* 2.溢出的部分隐藏起来 */
        overflow: hidden;
        /* 3.文字用省略号替代超出的部分 */
        text-overflow: ellipsis;
    }
</style>

<div>此处省略一万字，自己好好思考后续吧</div>

---

多行文本溢出

---

多行文本溢出显示省略号，有较大兼容性问题，适用于webkit浏览器或移动端（移动端大部分是webkit内核）

overflow: hidden;
text-overflow: ellipsis;
弹性伸缩盒子模型显示
display: -webkit-box;
限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
设置或检索伸缩盒子对象的子元素的排列方式
-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单

---

目录(七)

常见布局技巧

margin负值的运用
文字围绕浮动元素
行内块的巧妙运用
css三角强化

一、margin负值的运用

• 让每个盒子 margin-left: -1px;正好压着相邻盒子边框

• 鼠标经过某个盒子的时候，提高当前盒子的层级即可 (如果没有定位，则加相对定位（保留当前位置），如果都有定位，则设置 z-index提高层级)

---

<style>
    ul li {
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid  red;
        margin-left: -1px;
    }
    ul li:hover {
        z-index: 1;
        border: 1px solid blue;
    }
</style>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

---

二、文字围绕浮动元素

---

文字标准流，会环绕浮动的元素

---

三、行内块的巧妙运用

行内块元素之间 默认会有间距，制作页码很方便，给父元素添加 text-align: center;后会很便捷的水平居中，十分方便

---

 <style>
     .box {
         text-align: center;
     }
 ​
     .box a {
         display: inline-block;
         width: 36px;
         height: 36px;
         background-color: #f7f7f7;
         border: 1px solid #ccc;
         text-align: center;
         line-height: 36px;
         text-decoration: none;
         color: #333;
     }
 ​
     .box .prev,
     .box .next {
         width: 95px;
     }
 </style>
 <div class="box">
     <a href="#" class="prev">&lt;&lt;上一页</a>
     <a href="#">2</a>
     <a href="#">3</a>
     <a href="#">4</a>
     <a href="#">5</a>
     <a href="#">6</a>
     <a href="#">...</a>
     <a href="#" class="next">&gt;&gt;下一页</a>
 </div>

---

四、CSS制作直角三角形

---

在原先CSS三角的基础上：（以直角在右边的直角三角形为例）

---

1. 把底部、左侧边框的宽度设为0，颜色设为透明色；

2. 把顶部边框调大，把等边直角三角形拉高，颜色设置为透明；

    width: 0;
    height: 0;
    /* transparent(透明色)*/
    border-color: transparent blue transparent transparent; (上右下左)
    border-style: solid;
    border-width: 150px 100px 0 0; (上右下左)

    

CSS三角强化的巧妙运用：

---

 <style>
     .price {
         width: 160px;
         height: 24px;
         line-height: 24px;
         text-align: center;
         border: 1px solid red;
         margin: 0 auto;
     }
 ​
     .miaosha {
         position: relative;
         float: left;
         width: 90px;
         height: 100%;
         background-color: red;
         color: #fff;
         font-weight: 700;
     }
 ​
     .miaosha i {
         position: absolute;
         top: 0;
         right: 0;
         width: 0;
         height: 0;
         border-color: transparent #fff transparent transparent;
         border-style: solid;
         border-width: 24px 10px 0 0;
     }
 ​
     .origin {
         font-size: 12px;
         color: gray;
         text-decoration: line-through;
     }
 </style>
 ​
 <div class="price">
     <span class="miaosha">
         ￥1650
         <i></i>
     </span>
     <span class="origin">￥5650</span>
 </div>

---

五、CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾刘览器的兼容，我们需要对CSS初始化。

---

简单理解: CSS初始化是指重设浏览器的样式。(也称为CSS reset )

每个网页都必须首先进行CSS初始化。

/* 清零所有标签的内外边距 */
 * {
     margin: 0;
     padding: 0;
     /* CSS3盒子模型 */
     /* 可以不用考虑padding和border是否会撑大盒子的情况了*/
     box-sizing: border-box;
 }
 ​
 /* em 和 i 斜体的文字不倾斜 */
 em,
 i {
     font-style: normal;
 }
 ​
 /* 去掉li 的小圆点 */
 li {
     list-style: none;
 }
 /* 插入图片的设置 */
 img {
     /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
     border: 0;
     /* 取消图片底侧有空白缝隙的问题 */
     vertical-align: middle;
 }
 ​
 button {
     /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
     cursor: pointer;
 }
 ​
 a {
     color: #666;
     text-decoration: none;
 }
 ​
 a:hover {
     color: #c81623;
 }
 ​
 button,
 input {
     /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
     font-family: Microsoft YaHei, Heiti SC, tahoma, arial, 
     Hiragino Sans GB, "\5B8B\4F53", sans-serif;
     /* 手动去掉默认的灰色边框 */
     border: 0;
     /* 手动去掉input输入时的蓝色/加粗边框 */
     outline: none;
 }
 ​
 body {
     /* CSS3 抗锯齿形 让文字显示的更加清晰 */
     -webkit-font-smoothing: antialiased;
     background-color: #fff;
     font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, 
     arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
     color: #666;
 }
 ​
 .hide,
 .none {
     display: none
 }
 ​
 /* 清除浮动 */
 .clearfix:after {
     visibility: hidden;
     clear: both;
     display: block;
     content: ".";
     height: 0;
 }
 ​
 .clearfix {
     *zoom: 1;
 }

Unicode编码字体∶

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如:

 黑体 (\9ED1\4F53)
 ​
 宋体 (\5B8B\4F53)
 ​
 微软雅黑 (\5FAE\8F6F\96C5\9ED1)

---

目录(八)

CSS3的新特性

一、CSS3的现状

新增的CSS3特性有兼容性问题，ie9+才支持 移动端支持优于PC端 不断改进中 应用相对广泛 现阶段主要学习∶新增选择器和盒子模型以及其他特性

---

二、CSS3 新增选择器

• 属性选择器

• 结构伪类选择器

• 伪元素选择器

---

属性选择器

属性选择器 可以 根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

注：E代表元素，att代表属性名，val代表属性值

选择符	简介
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元素

---

 <style>
     input[value] {
         color" pink;
     }
     input[type=password] {
         color" pink;
     }
 </style>
 /* 1.利用属性选择器就可以不用借助于类或者 id 选择器 */
 <input type="text" value="请输入用户名">
 <input type="password">

• 类选择器、属性选择器、伪类选择器权重都是10

---

结构伪类选择器

结构伪类选择器 主要 根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符	说明
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个

---

<style>
  /* 选择ul 里面的第一个小li */
  ul li:first-child {
	background-color: pink;
  }
  ul li:last-child {
	background-color: pink;
  }
</style>

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

nth-child(n) 选择某个父元素的一个或多个特定的子元素 (nth = 第几个)

• n 可以是数字，关键字和公式

• n 可以是数字，就是选择第 n 个子元素，里面数字从1开始...

• n 可以是关键字：even 偶数，odd 奇数 (可以用于表格隔行变色)

• n 可以是公式：常见的公式如下 (如果 n 是公式，则从 0 开始计算，但是第 0 个元素 或者 超出了元素的个数会被忽略)

公式	取数
2n	偶数 (2,4,6,8,12...)，等价于even
2n+1	奇数 (1,3,5,7,9...)，等价于add
5n	5 10 15 ... (可用于去除外边距margin)
n+5	从第五个开始 (包含第五个) 到最后
-n+5	前5个 (包含第五个) ...

---

<style>
    /* 选择ul 里面的第一个小li */
    ul li:nth-child(2) {
        background-color: pink;
    }
    ul li:nth-child(even) {
        background-color: pink;
    }
    /* nth-child(n) 从 0 开始，每次加 1,这里面必须是 n，不能是其他字母 */
    ol li:nth-child(n) {
        background-color: pink;		// ol 里面的所有 li 都变成pink色
    }
</style>

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<0l>
    <li></li>
    <li></li>
    <li></li>
</0l>

nth-child与nth-of-type的区别：

• nth-child 会把所有的盒子都排列序号，执行时首先看：nth-child(1) 之后回去看前面的 div标签是否匹配

<style>
    /* nth-child会把所有的盒子都排列序号 */
    section div:nth-child(1) {
        background-color: red;
    }
</style>
<section>
  <p>光头强</p> <!-- 1号 -->
  <div>熊大</div> <!-- 2号 -->
  <div>熊二</div> <!-- 3号 -->
<section>

 

 

---

• nth-of-type 会把指定元素的盒子排列序号，执行时首先看：前面 div， 之后回去看 nth-child(1)是否匹配

<style>
  section div:nth-of-type(1) {
    background-color: blue;
  }
</style>
<section>
  <p>光头强</p> <!-- 1号 -->
  <div>熊大</div> <!-- 2号 -->
  <div>熊二</div> <!-- 3号 -->
<section>

伪元素选择器

伪元素选择器 可以 帮助我们利用 CSS 创建新标签元素，而不需要 HTML ，从而简化HTML结构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before 和 after 创建一个元素，但是属于行内元素

• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

• 语法：element::before {}

• before 和 after 必须有 content 属性

• before 在父元素内容的前面创建元素，after 在父元素内容的后面创建元素

• 伪元素选择器和标签选择器一样，权重为1

<style>
    div::before {
        content: '你';	/* content值可 以为空 */
        display: block;
        width: 50px;	
        height: 50px;
        background-color: pink;
    }
    div::after {
        content: 'friend';
    }
</style>
<div>
    是
</div>

三、CSS3 盒子模型

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 宽度)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

---

四、CSS3图片模糊处理

filter属性 将模糊或颜色偏移等图形效果应用于元素。

filter: 函数()	例如：filter: blur(5px);   blur模糊处理，数值越大越模糊

---

五、盒子宽度calc函数

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

width: calc(100% -80px)		/*子盒子根据父盒子宽度再减去80像素*/

括号里面可以使用 + - * / 来进行计算。

---

六、CSS3 过渡

过渡 (transition) 是 CSS3 中具有颠覆性的特性之一，我们可以不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然 低版本不支持 (ie9以下版本) 但是不会影响页面布局。

经常和 :hover 一起搭配使用。

---

transition: 要过渡的属性  花费时间  运动曲线  何时开始

属性：想要变化的 CSS 属性，宽度、高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个 all 就可以。

花费时间：单位是 秒(必须写单位) 比如 0.5s

运动曲线：默认是 ease (可以省略)

何时开始：单位是 秒(必须写单位) 可以设置延迟出发时间，默认是 0s (可以省略)

---

记住过渡的使用口诀：谁做过渡给谁加

<style>
    div {
        width: 200px;
        height: 100px;
        background-color: pink;
        /* 如果想要写多个属性，利用逗号进行分割 */
        transition: width .5s, height .5s;
        /* 是根据下面的 div:hover */
        /* 如果想要多个属性都变化，属性写 all 既可以了*/
        transition: all 0.5s;
    }

    div:hover {
        width: 400px;
        height: 200px;
        background-color: skyblue;
    }
</style>
<div></div>

---

Web 服务器

1.了解什么是服务器以及相关概念。
2.把自己网站上传到服务器上，可以让其他人访问

---

一、什么是 Web服务器

我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。

如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了。

---

服务器(我们也会称之为主机) 是 提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、web服务器。

---

Web 服务器一般指网站服务器，是指 驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以防止数据文件，让全世界下载。

以下服务器我们主要指的是 Web服务器。

根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

---

二、本地服务器

我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的同学就可以访问你的品优购网站了。

---

三、远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。

远程服务器是通常是别的公司为我们提供的一台电脑 (主机)，我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。

比如域名：www.mi.com 可以访问小米网站。

---

四、将自己的网站上传到远程服务器

注意：一般稳定的服务器都是需要收费的。比如：阿里云

这里给大家推荐一个免费的远程服务器 (免费空间) 免费空间-free.3v.do 提供100M永久免费ASP空间申请.

• 去免费空间网站注册账号。

• 记录下主机名、用户名、密码、域名。

主机名：014.3vftp.cn
用户名：heartking
密码：Dyh36974213
域名：http://heartking.free3v.work

• 利用 cutftp 软件(需要自己安装)上传网站到远程服务器。

• 在浏览器中输入域名，即可访问我们的品优购网站了。

---

目录(九)

CSS3 2D转换
CSS3 动画
CSS3 3D转换

CSS3 2D转换

转换 (transform) 是CSS3 中具有颠覆性的特性之一，可以实现元素的位移、旋转、缩放等效果

转换 (transform) 你可以简单理解为变形

• 移动：translate

• 旋转：rotate

• 缩放：scale

---

一、 二维坐标系

2D转换 是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

---

二、2D转换之移动

2D移动 是2D转换里面的一种功能，可以 改变元素在页面中的位置，类似定位。

---

• 语法

transform: translate(x,y);	或者分开写
transform: translateX(n);
transform: translateY(n);

• 重点

• 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素

• translate最大的优点：不会影响到其他元素的位置

• translate中的百分比单位是相对于自身元素的宽度或者高度对比的 translate:(50%,50%);

• 对行内标签没有效果

<style>
    div {
        width: 200px;
        height: 200px;
    }
    div:first-child {
        /* x就是x轴上移动位置，y就是在y轴上移动位置，中间用逗号分隔 */
        transform: translate(100px,100px);
        background-color: pink;
    }
    div:last-child {
        background-color: purple;	
    }
</style>
<div></div>
<div></div>

案例：盒子水平垂直居中

<style>
    div {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
    }

    p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        background-color: purple;
        /* 以前做法 */
        /*margin-top: 50%;
        margin-left: 50%; */
        /* 盒子往上走自己高度的一半，宽度的一半 */
        transform: translate(-50%, -50%);
    }
</style>
<div>
    <p></p>
</div>

---

三、2D转换之旋转

2D转换 指的是 让元素在2维平面内顺时针旋转或者逆时针旋转。

---

• 语法

transform: rotate(度数)

• 重点：

• rotate里面跟度数，单位是 deg 比如 rotate(45deg)

• 角度为正时，顺时针，负时，为逆时针

• 默认旋转的中心点是元素的中心点

<style>
    div {
        width: 150px;
        height: 150px;
        background-color: pink;
        transform: rotate(45deg);
    }
</style>
<div></div>

---

案例：三角形

---

<style>
    div {
        width: 249px;
        height: 35px;
        border: 1px solid #000;
    }

    div::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 15px;
        width: 10px;
        height: 10px;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        transform: rotate(45deg);
    }
</style>
<div></div>

---

四、设置2D转换中心点

我们可以设置元素转换的中心点

语法:

transform-origin: x y;

重点：

• 注意后面的参数 x 和 y 用空格隔开

• x y 默认转换的中心点是元素的中心点 (50% 50%)

• 还可以给 x y 设置像素或者方位名词 (top bottom left right center)

---

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 1s;
        transform-origin: left bottom;
    }

    div:hover {
        transform: rotate(360deg);
    }
</style>
<div></div>

案例：旋转案例

---

<style>
    div {
        width: 50px;
        height: 50px;
        border: 1px solid pink;
        margin: 100px auto;
    }

    div::before {
        content: "黑马";
        display: block;
        width: 100%;
        height: 100%;
        background-color: hotpink;
        transform-origin: left bottom;
        transform: rotate(180deg);
        transition: all 1s;
    }

    div:hover::before {
        transform: rotate(0deg);
    }
</style>
<div></div>

---

五、2D转换之缩放

缩放，顾名思意，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

---

• 语法

transform:scale(x,y);

注意：

• 注意其中的 x 和 y 用逗号分隔

• transform: scale(1,1)：宽和高都放大一倍，相对于没有放大

• transform: scale(2,2)：宽和高都放大了2倍

• transform: scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

• transform: scale(0.5,0.5)：缩小

• sacle 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

---

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all .4s;
    }

    div:hover {
        /* 修改了宽度为原来的2倍，高度不变 */
        transform: scale(2, 1);

        /* 设置缩放中心点 */
        transform-origin: left bottom;
    }
</style>
<div></div>

---

案例：图片放大

<style>
    div {
        overflow: hidden;
        float: left;
        margin: 10px;
    }

    div img {
        width: 200pxpx;
        height: 200px;
        transition: all .6s;
    }

    div img:hover {
        transform: scale(1.1);
    }
</style>
<div>
    <a href="#"><img src="d:\Desktop\网页设计\Photo\产品模块案例.png" alt=""/></a>
</div>
<div>
    <a href="#"><img src="d:\Desktop\网页设计\Photo\产品模块案例.png" alt=""/></a>
</div>
<div>
    <a href="#"><img src="d:\Desktop\网页设计\Photo\产品模块案例.png" alt=""/></a>
</div>

---

六、2D转换综合写法

1. 同时使用多个转换，其格式为：transform：translate() rotate() scale() ...等。

2. 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)

3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

<style>
    div {
        width: 150px;
        height: 150px;
        background-color: pink;
        transition: all .4s;
    }

    div:hover {
        transform: translate(150px, 50px) rotate(180deg);
    }
</style>
<div></div>

---

动画

动画 (animation) 是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

---

一、动画的基本使用

制作动画分为两步：

1. 先定义动画

2. 再使用 (调用) 动画

---

用 keyframes 定义动画 (类似定义类选择器)

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

---

元素使用动画

div {
	width: 200px;
	height: 200px;
	background-color: aqua;
	margin: 100px auto;
	/* 调用动画 */
	animation-name: 动画名称;
	/* 持续时间 */
	animation-duration: 持续时间;
}

动画序列

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

• 在@keyframes中规定某些 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

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

• 请用百分比来规定变化发生的时间，或用关键词 "from"和"to"，等同于 0%和100%。

---

<style>
    /* 我们想页面一打开，一个盒子就从左边走到右边 */
    /* 1.定义动画 */
    @keyframes move {
        0% {
            transform: translateX(0px);

        }

        100% {
            transform: translateX(1000px);
        }
    }

    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        animation-name: move;
        animation-duration: 3s;
    }
</style>
<div></div>

---

二、动画常用属性

属性	描述
@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

---

三、动画简写属性

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；

animation: myfirst 5s linear 2s infinite alternate;

---

案例：热点图案例

---

<style>
    .map {
        position: relative;
        width: 747px;
        height: 616px;
        background: url(../images/大数据热点图.png) no-repeat;

    }

    /* 点位到具体位置 */
    .city {
        position: absolute;
        top: 227px;
        right: 193px;
        color: #fff;
    }

    /* 设置小圆点 */
    .dotted {
        width: 8px;
        height: 8px;
        background-color: #09f;
        border-radius: 50%;
    }

    .city div[class^="pulse"] {
        /* 保证我们小波纹在父盒子里面水平垂直居中 
           放大之后就会中心向四周发散,因为盒子默认的中心是左上角 */
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-shadow: 0 0 12px #09f;
        border-radius: 50%;
        animation: pulse 1.2s linear infinite;
    }

    .map div.pulse2 {
        animation-delay: 0.4s;
    }

    .map div.pulse3 {
        animation-delay: 0.8s;
    }

    @keyframes pulse {
        0% {}

        70% {
            /* transform: scale(3); 我们不要用scale，因为它会让阴影变大 */
            width: 40px;
            height: 40px;
            opacity: 1;
            /* 没学过，不过与阴影有关 */
        }

        100% {
            width: 70px;
            height: 70px;
            opacity: 0;
        }
    }
</style>
<div class="map">
    <div class="city">
        <div class="dotted"></div>
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
    </div>
</div>

四、速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是 "ease"

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认，动画以低速开始，然后加速，在结束前变慢
ease-in	动画以低速开始。
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量(步长)

---

<style>
    div {
        width: 0;
        height: 30px;
        background-color: pink;
        /* steps 就是分几步来完成我们的动画，有了steps就不要写ease或者linear了*/
        animation: w 4s steps(5) forwards;
        /* 类似于回血 */
    }
</style>
<div></div>

---

案例：小熊奔跑

<style>
    div {
        position: absolute;
        width: 200px;
        height: 100px;
        background: url(../images/小熊.png) no-repeat;
        /* 我们元素可以添加多个动画，用逗号分隔 */
        animation: bear 1s steps(8) infinite, move 1s forwards;
    }

    @keyframes bear {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -1600px 0;
        }
    }

    @keyframes move {
        0% {
            left: 0;
        }

        100% {
            left: 50%;
            /* 让小熊水平居中 */
           transform: translateX(-50%);
        }
    }
</style>
<div></div>

---

CSS3 3D转换

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

有什么特点

• 近大远小

• 物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产生3D效果。

---

---

一、三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

• x轴：水平向右 注意：x右边是正值，左边是负值

• y轴：垂直向下 注意：y下面是正值，上面是负值

• z轴：垂直屏幕 注意：往外面是正值，往里面是负值

---

3D转换我们主要学习工作中最常用的 3D位移 和 3D旋转

主要知识点

• 3D位移：translate3d(x,y,z)

• 3D旋转：rotate3d(x,y,z)

• 透视：perspective

• 3D呈现：transfrom-style

---

二、3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

• translform:translateX(100px)：仅仅是在x轴上移动

• translform:translateY(100px)：仅仅是在y轴上移动

• translform:translateZ(100px)：仅仅是在z轴上移动 (注意：translateZ一般用px单位)

• transform:translate3d(x,y,z)：其中 x、y、z分别指要移动的轴的方向和距离

注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

语法 ：

transform: translate3d(x, y, z)

代码演示:

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		transform: translateX(100px);
		transform: translateY(100px);
		
/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
/* transform: translate3d(x, y, z); */
transform: translate3d(100px, 100px, 0)
	}
</style>

<div></div>

三、3D透视 perspective

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

• 如果想要在网页产生3D效果需要透视 (理解成3D物体投影在2D平面内)。

• 模拟人类的视觉位置，可认为安排一只眼睛去看

• 透视我们也称为视距：视距就是人的眼睛到屏幕的距离

• 距离视觉越近的在电脑平面成像越大，越远成像越小

• 透视的单位是像素

---

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

• d：就是视距，视距就是指人的眼睛到屏幕的距离

• z：就是 z 轴，物体距离屏幕的距离，z 轴越大(正值)，我们看到的物体就越大

---

body {
  /* 值越小，视距越小，(近小远大)，图像越大 */ 
  perspective: 1000px;
}

四、translateZ

translateZ 与 perspecitve的区别

• perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小

• 案例：

body {
    perspective: 500px;
}
    
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;
    transform: translateZ(0);
}

五、3D 旋转rotate3d

• 3D 旋转 指 可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

语法:

transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

代码案例:

<style>
    div {
        perspective: 200px;
    }

    img {
        display: block;
        margin: 100px auto;
        transition: all 1s;
    }

    img:hover {
        /* 上下旋转 */
        /*  transform: rotateX(-45deg); */
        /* 左右旋转 */
        /*  transform: rotateY(45deg); */
    }
</style>
<div>
    <img src="../images/两面旋转盒子.png" alt="">
</div>

对于元素旋转的方向的判断，我们需要先学习一个左手准则。

---

左手准则

• 左手的手拇指指向 x 轴的正方向

• 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

---

• 左手的手拇指指向 Y 轴的正方向

• 其余手指的弯曲方向就是该元素沿着 Y 轴旋转的方向

---

• rotateZ的旋转方式类似于转盘

---

transform: rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度 (了解即可)

xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

• transform: rotate3d(1,0,0,45deg) 就是沿着x轴旋转45deg

• transform: rotate3d(1,1,0,45deg) 就是沿着对角线旋转45deg

---

3D呈现 transfrom-style

控制子元素是否开启三维立体环境

• transform-style: flat 代表子元素不开启 3D 立体空间，默认的

• transform-style: preserve-3d 子元素开启立体空间

• 代码写给父级，但是影响的是子盒子

• 这个属性很重要，后面必用

• 案例：3D呈现transform-style

---

<style>
    body {
        perspective: 500px;
    }

    .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        transition: all 2s;
        /* 让子元素保持3d立体空间环境 */
        transform-style: preserve-3d;
    }

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

    .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: pink;
    }

    .box div:last-child {
        background-color: purple;
        transform: rotateX(60deg);
    }
</style>
    
<div class="box">
  <div></div>
  <div></div>
</div>

---

案例：旋转木马

---

<style>
    body {
        perspective: 1000px;
    }

    section {
        position: relative;
        width: 300px;
        height: 200px;
        margin: 150px auto;
        transform-style: preserve-3d;
        /* 添加动画效果 */
        animation: rotate 10s linear infinite;
        background: url(media/pig.jpg) no-repeat;
    }

    section:hover {
        /* 鼠标放入section 停止动画 */
        animation-play-state: paused;
    }

    @keyframes rotate {
        0% {
            transform: rotateY(0);
        }

        100% {
            transform: rotateY(360deg);
        }
    }

    section div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(media/dog.jpg) no-repeat;
    }

    section div:nth-child(1) {
        transform: rotateY(0) translateZ(300px);
    }

    section div:nth-child(2) {
        /* 先旋转好了再 移动距离 */
        transform: rotateY(60deg) translateZ(300px);
    }

    section div:nth-child(3) {
        /* 先旋转好了再 移动距离 */
        transform: rotateY(120deg) translateZ(300px);
    }

    section div:nth-child(4) {
        /* 先旋转好了再 移动距离 */
        transform: rotateY(180deg) translateZ(300px);
    }

    section div:nth-child(5) {
        /* 先旋转好了再 移动距离 */
        transform: rotateY(240deg) translateZ(300px);
    }

    section div:nth-child(6) {
        /* 先旋转好了再 移动距离 */
        transform: rotateY(300deg) translateZ(300px);
    }
</style>

<section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</section>

---

案例：3D立方体盒子

---

<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        padding: 200px 300px;
    }

    ul {
        position: relative;
        list-style: none;
        width: 300px;
        height: 300px;
        transform: rotate3d(1, 1, 0, -45deg);
        transform-style: preserve-3d;
        /* perspective: 500;
        -webkit-perspective: 500;
        perspective-origin: 10% 10%; */
    }

    ul>li {
        position: absolute;
        top: 0;
     
<ul>
    <li>01-前面</li>
    <li>02-后面</li>
    <li>03-左面</li>
    <li>04-右面</li>
    <li>05-上面</li>
    <li>06-下面</li>
</ul>

---

案例：两面翻转的盒子

---

<style>
    body {
        perspective: 400px;
    }

    .box {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        transition: all .4s;
        /* 让背面的紫色盒子保留立体空间 给父级添加的 */
        transform-style: preserve-3d;
    }

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

    .front,
    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 300px;
    }

    .front {
        background-color: pink;
        z-index: 1;
    }

    .back {
        background-color: purple;
        /* 像手机一样 背靠背 旋转 */
        transform: rotateY(180deg);
    }
</style>

<div class="box">
    <div class="front">小猪佩奇</div>
    <div class="back">pink老师</div>
</div>

---

案例：3D导航栏

---

1. 搭建HTML结构

<ul>
    <li>
        <div class="box">
           <div class="front"></div>
           <div class="bottom"></div>
        </div>
    </li>
</ul>

• li 是做导航栏

• .box 是翻转的盒子，front是前面盒子，bottom是底下盒子

---

2.搭建CSS结构

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all .4s;
        
    }
    .box:hover {
        transform: rotateX(90deg);
    }
    ul {
        margin: 100px;
    }
    ul li {
        width: 120px;
        height: 35px;
        list-style: none;
        /* 一会我们需要给box旋转也需要透视，干脆给li加里面的子盒子都有透视效果 */
        perspective: 500px;
    }
    .front,
    .bottom {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .front {
        background-color: pink;
        z-index: 1;
        transform: translateZ(18.5px);
    }
    .bottom {
        background-color: purple;
        /* 这个x轴一定是负值 */
        /* 我们如果有移动或者其他样式，必须先写我们的移动 */
        transform: translateY(17.5px) rotateX(-80deg) ;
    }
</style>

---

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

一、私有前缀

• -moz-：代表 firefox 浏览器私有属性

• -ms-：代表 ie 浏览器私有属性

• -webkit-：代表 safari、chrome 私有属性

• -o-：代表 Opera 私有属性

---

二、提倡的写法

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

---

网站 favicon 图标

一、制作 favicon 图标

1. 把品优购图标切成 png 图片。

2. 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，，例如==比特虫：在线制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

---

二、favicon 图标放到网站根目录下

---

三、引入favicon图标

1. 在 HTML 页面里面的 < head> </ head>元素之间引入代码。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

---

#网站 TDK 三大标签 SEO 优化

SEO (search Engine Optimization) 汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名 (没花钱的清空下) 的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提高网站的排名，提高网站的知名度。

页面必须有三个标签用来符合 SEO 优化。

---

---

一、title 网站标题

title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

---

建议： 网站名 (产品名) - 网站介绍 (尽量不要超过 30 个汉字)

---

<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物!</title>

---

二、description 网站说明

简要说明我们网站主要是做什么的。

我们提出，description 作为网站的总体业务和主题概况，多采用 "我们是..."、"我们提倡..."、"xxx 网作为..."、"电话: 010..." 之类语句。

---

例如：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城，
 销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品，
便捷、诚信的服务，为你提供愉悦的网上购物体验! " />

---

三、keywords 关键字

keywords 是页面关键词，是搜索引擎的关注点之一。

keywords 最好限制为 6 ~ 8 个关键词，关键词之间用英文逗号隔开，采用 关键词1，关键词2的形式。

---

例如：

<meta name="keywords" content="网上购物，网上商城，手机，笔记本，
电脑，MP3,CD,VCD,DV,相机，数码" />

---

对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备.

---

LOGO SEO 优化

1. LOGO 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。

2. h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。

3. 为了搜索引擎收录我们，我们链接里面要放文字 (网站名称)，但是 文字不要显示出来。

   • 方法1：text-indent 移到盒子外面 (text-indent: -9999px)，然后 overflow: hidden，淘宝的做法。

   • 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。

4. 最后给链接一个title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

---

常用模块类名命名

---