CSS学习笔记

最新推荐文章于 2025-10-21 18:18:30 发布

原创最新推荐文章于 2025-10-21 18:18:30 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #css3

本文深入探讨了CSS选择器的种类及应用，包括基础选择器、伪类选择器与伪元素选择器的使用方法。进一步讲解了CSS优先级规则，如何计算选择器权重，并通过实例演示了权重叠加与重要性的实践。

1.CSS简介

1.1CSS-网页的美容师

CSS是==层叠样式表(Cascading Style SHeets)==的简称

也称为CSS样式表或级联样式表

CSS也是一种标记语言

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

CSS可以美化HTML页面，让HTML更漂亮，让页面布局更简单

总结

1.HTML主要做结构，显示元素内容

2.CSS美化HTML，布局网页。

3.CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离

2. CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明

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

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

属性和属性值之间用英文“：”分开

多个“键值对”之间用英文“；”分开

在这里插入图片描述

**<style属性>**一般写在里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        P{
            color: red;				/*字体颜色*/
            font-size: 12px;				/*字体大小*/
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

2.1 CSS选择器的作用

在这里插入图片描述

选择器，就是选择标签用的

以上CSS做了两件事：

1.找到了所有的h1标签。选择器（选对人）

2.设置这些标签的样式，比如颜色为红色（做对事）

2.2 选择器分类

选择器分为基础选择器和复合选择器

2.2.1基础选择器

基础选择器：单个选择器组成

包括：标签选择器、类选择器、id选择器、通配符选择器

标签选择器：

用HTML标签名称作为选择器。

语法：

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

作用：可以把某一类标签全部选择出来。

优点：能快速为页面中同类型的标签统一设置样式

缺点：不能设计差异化样式

类选择器

类选择器口诀：样式点定义结构类(class)调用一个或多个开发最常用

单独选择一个或某几个标签

语法

		.类名 {
				属性1: 属性值1;
				······
		}
		
		例如，将所有拥有red类的HTML元素均为红色
		.red{
				color:red;
				······
		}

结构需要用class属性来调用class类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">111</li>
        <li>222</li>				<!--只有111和333显示为红色-->
        <li class="red">333</li>
        <li>444</li>
    </ul>
    <div class="red">我也想变红色</div>	<!-- 也将显示为红色 -->
</body>
</html>

注意：

.类名（自定义，自己命名；但不能使用标签名）

1.长名称或词组可以使用中横线"-"来为选择器命名

2.不要使用纯数字、中文等命名，尽量使用英文字母

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

4.命名规范

多类名使用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用类选择器画三个盒子</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
        .red {
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>
</html>

<div class="red font20"></div>

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

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

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

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

id选择器

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

语法：

口诀：样式#定义，结构id调用，只能调用一次，别人不能使用

<style>
		#id名 {
				属性1： 属性值1;	
				属性2： 属性值2;
				属性3： 属性值3;
		}
		例如，将id为nav元素中的内容设置为红色
		#nav{
				color： red;		
		}

		<div id="id名"></div>
</style>

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

1.最大的不同在于使用次数上。类选择器（class）可以多次使用，id选择器只能使用一次

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

通配符选择器

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

<style>
		* {
				属性1： 属性值1;	
				属性2： 属性值2;
				属性3： 属性值3;
		}
</style>

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

2.2.2 复合选择器

是建立再基础选择器之上，会基本选择器进行组合形成的

可以更准确、更高效的选择目标元素(标签)

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

常用复合选择器：后代选择器、子选择器、并集选择器、伪类选择器

后代选择器

又称为包含选择器

语法：元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2

例如：

<style>
    
ul li {样式声明} /*选择ul里面所有的li标签元素*/

</style>

注意事项：

1.元素1和元素2中间用空格隔开

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

3.元素2后也可以有元素3，只要是元素1的后代即可

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        ul li {
            color: red;
        }
        ol li a {
            color: purple;
        }
        .nav li a {
            color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>我</li>		<!-- 红色 -->
        <li>我</li>		<!-- 红色 -->
        <li>我</li>		<!-- 红色 -->
    </ul>
    <ol>
        <li>他</li>
        <li>他</li>
        <li>他</li>
        <li><a href="#">我是链接</a></li>		<!-- 紫色 -->
    </ol>
    <ol class="nav">
        <li>你</li>
        <li>你</li>
        <li>你</li>
        <li><a href="#">我是链接</a></li>		<!-- 粉红色 -->
        <li><a href="#">我是链接</a></li>		<!-- 粉红色 -->
        <li><a href="#">我是链接</a></li>		<!-- 粉红色 -->
    </ol>
</body>
</html>

子选择器

选择作为某元素最近的一级子元素

语法：元素1>元素2 {样式声明}

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

例如：

<style>
    
div>p {样式声明} /*选择div里面所有最近一级 p标签元素*/

</style>

注意事项：

1.用大于号(>)隔开

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

3.元素2是子元素（最近的一级）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器</title>
    <style>
        div>a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">1号链接</a>	<!-- 只有1号链接为红色 -->
        <p>
            <a href="#">2号链接</a>
        </p>
    </div>
</body>
</html>

并集选择器

可以选择多组标签，同时为他们定义相同的样式。

并集选择器是个选择器通过“,”(逗号)链接而成。

语法：元素1,元素2,元素3 { 样式声明 }

例如：

<style>
    
ul,div {样式声明} /*选择 ul 和 div 标签元素*/

</style>

注意事项：

1.用逗号隔开

2.通常用于集体声明

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之并集选择器</title>
    <style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
    </style>
</head>

<body>
    <div>熊大</div>		<!-- 粉色 -->
    <p>熊二</p>		<!-- 粉色 -->
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>		<!-- 粉色 -->	
        <li>猪爸爸</li>		<!-- 粉色 -->
        <li>猪妈妈</li>		<!-- 粉色 -->
    </ul>
</body>

</html>

伪类选择器

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

伪类选择器书写最大特点是用冒号（ : ）表示，比如 :hover、:first-child.

1.链接伪类选择器

<style>
    
a:link  /*选择所有未被访问的链接*/
a:visited   /*选择所有已被访问的链接*/
a:hover  /*选择鼠标指针位于其上的链接*/
a:active  /*选择活动链接，（鼠标按下未弹起的链接）*/
</style>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>

注意事项：

1.为了确保生效，请按照LVHA的顺序声明 :link :viseited :hover :active

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

<!-- 工作开发中的写法 -->
	<style>

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

        a:hover {
            color: #369;
            text-decoration: underline;
        }
    </style>

2. :focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况类表单元素才能获取，因此这个选择器主要针对对表单元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>focus伪类选择器</title>
    <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

3. CSS字体属性

3.1 字体系列

CSS使用font-family属性定义文本的字体系列；

<style>
		p { font-family: "Microsoft Yahei"; }
		div { font-family: Arial,"Microsoft Yahei","微软雅黑"； }
</style

各种字体间用“,”隔开

如果有空格隔开的多个单词组成的字体，加引号

尽量使用系统默认自带字体

最常见的几个字体：<body { font-family:“Microsoft Yahei”,tahoma,arial,“Hiragino Sans GB” ;}>

3.2 字体大小、加粗、文字样式

CSS使用font-size属性定义文本的字体大小；

可以给body指定整体页面文字的大小注意：标签需要单独指定文字大小

CSS使用font-weight属性加粗文本的字体

<style>
	div {
        font-weight: 700;
        fongt-weight: bold;		/*加粗*/

        font-weight: 400;
        fong-weight:normal;		/*变细(默认值)*/
    }
</style>

CSS使用font-style属性设置文本的风格

<style>
    div {
        font-style: normal;	/*不倾斜(默认值)*/
        font-style: italic;	/*倾斜*/
        }
</style>

3.3 字体复合属性（font：）

 <style>
		div {
            <!--font:font-style font-weight font-size/line-height font-family;-->
            font:italic 700 20px "Microsoft yahei;"
        }
</style>

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

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

4. 文本属性

CSS Text(文本)属性可以定义文本的外观，比如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等

**color:**文本的颜色

      <style>
          
		/*   颜色   */
        div {
            /* color: blue;      */
            color: #ff0000; /* 最常用的，十六进制 */
            /* color: rgb(200,0,0); */
        }
          </style>

**text-align:**设置元素内文本内容的水平对齐方式

      <style>
          
		/*   颜色   */
        div {
            text-align: center; /*居中*/
            /* text-align: left;   左对齐(默认) */
            /* text-align: right;  右对齐 */
        }
          </style>

**text-decoration:**规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

      <style>
          
		/*   颜色   */
        div {
            text-decoration: none; /* 默认,没有装饰线(最常用) */
            /* text-decoration:underline; 下划线(常用) */
            /* text-decoration: line-through; 删除线 */
            /* text-decoration: overline; 上划线 */
        }
          </style>

重点：记住如何添加下划线，如何删除下划线

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

      <style>
          
		/*   颜色   */
        div {
    			text-indent: 20px;  /*文本的第一行缩进20px*/
        }
          </style>

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

      <style>
          
		/*   颜色   */
        div {
    			text-indent: 2em;  /*如果当前文字大小为16px，则2em就是32px*/
            						/*缩进当前元素2个文字大小的距离*/
        }
          </style>

**line-height:**用于设置行间距（行高）。

      <style>
          
		/*   颜色   */
        div {
            line-height: 16px;
        }
          </style>

在这里插入图片描述

5.CSS 引入方式

5.1 CSS的三种样式表

按照CSS样式书写的位置（或者引入的方式）

1.行内样式表（行内式）

2.内部样式表（嵌入式）

3.外部样式表（链接式）

5.1.1 内部样式表

<head>
	<style>
        h2 {
            font-family: "Microsoft Yahei";
        }
	</style>
</head>

内部样式表就是写道html页面的内部中，单独放到

一般放在标签中

通常也称为嵌入式引入，练习时常用

5.1.2 行内样式表

    <p style="color: red; font-size: 16px;"> 床前明月光 </p>

行内样式表是在元素标签内部的style属性中设定CSS样式

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

通常也称为行内式引入（不推荐大量使用）

5.1.3 外部样式表（推荐）

实际开发都是外部样式表，适合于样式比较多的情况。

核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入外部样式表分为两步：

1.新建一个后缀名为.css的样式文件，把所有CSS代码放入此文件中。

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

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

3.通常也被称为外链式或链接式引入（开发中最常用）

style.css /*文件名*/
	/* css文件里面只有样式，没有标签 */
    div {
        color:pink;
    }
    p {
       font-size: 20px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">	<!--引用CSS文件-->
</head>
<body>
    <p> 举头望明月 </p>
    <div> 低头思故乡 </div>
</body>
</html>

6. Emmet语法

6.1 快速生成HTML结构语法

快速格式化代码：Alt+Shift+F

注意：推荐1和2，剩下的等代码熟练后再使用

1.生成标签直接输入标签名按tab键即可，比如 div 然后按tab键，就可以生成

2.如果想要生成多个相同标签，加上==*==就可以了，比如 div *3就可以快速生成3个div

<!-- div*3 -->
	<div></div>
    <div></div>
    <div></div>

3.如果有父子级关系标签，可以用==>==,比如 ul>li 就可以了

 <!--ul>li-->
	<ul>
        <li></li>
    </ul>

4.如果有兄弟关系标签，用 + 就可以了，比如div+p

   <!--div+p-->
	<div></div>
    <p></p>

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

   <!-- .demo -->
    <div class="demo"></div>        
    <!-- .#two -->
    <div id="tow"></div>

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

    <!-- .demo$*5  -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

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

    <!-- p{123} -->
    <p>123</p>
    <!-- p{456}*5 -->
    <p>456</p>
    <p>456</p>
    <p>456</p>
    <p>456</p>
    <p>456</p>
    <!-- p{$}*5 -->
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>

7. CSS的元素显示模式

7.1 什么是元素显示模式

作用：可以更好的布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示，比如

自己占一行、一行可以放多个

HTML元素一般分为块元素和行元素

7.2 块元素

是最典型的块元素

特点：

1.独占一行

2.高度、宽度、外边距、内边距都可以控制

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

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

注意：

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

、

~

7.3行内元素

是最典型的行内元素

特点：

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

2.高、宽直接设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或其他行内元素

注意：

1.链接里面不能再放链接

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

7.4行内块元素

在行内元素有几个特殊的标签——、、,它们同时具有块元素和行内元素的特点

特点：

1.和相邻行内元素（行内块元素）在一行上，但是它们之间会有空白间隙，一行可以显示多个

2.默认宽度就是它本身内容的宽度

3.高度、宽度、外边距、内边距都可以控制

7.5 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性

比如想要在增加链接的触发范围

转换为块元素：display:block;

转换为行内块: display:inline-block;

转换为行内元素: display:inline;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素显示模式转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把 div 块级元素转换为行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">金星阿姨</a>
    <a href="#">金星阿姨</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

7.6 小案例

想要垂直居中就让文字的行高等于盒子的高度

height: 50px;

line-height: 50px;

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单小米侧边栏</title>
    <style>
        a {
            color: white;
            background-color: #535758;
            text-decoration: none;
            display: block;
            width: 280px;
            height: 50px;			/* 想要垂直居中*/
            line-height: 50px;		/* 就让文字的行高等于盒子的高度 */
            text-indent: 2em;
        }

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

<body>
    <a href="#">
        手机 电话卡
    </a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出现 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

效果图：

在这里插入图片描述

8. CSS背景

8.1 背景颜色

background-color: 颜色值

默认值为：transparent（透明）

8.2 背景图片

background-image: url(图片地址); 使用绝对或相对地址指定背景图片

background-image:none 无背景图

8.3 背景平铺

background-repeat: repeat; 背景图片在纵向和横向上平铺

background-repeat: no-repeat; 背景图片不平铺

background-repeat: repeat-x; 背景图片在横向上平铺

background-repeat: repeat-y; 背景图片在纵向上平铺

8.4 背景图片位置

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

语法：

background-position: x y;

参数代表的意思是：x坐标和y坐标。可以使用方位名词或精确单位

方位名词：

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

如果只指定了一个方位名词，第二个值默认为center

精确单位：

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标

如：ackground-position:20px 50px;

如果只指定一个数值，那该数值一定是x坐标，第二个坐标默认居中（center）

8.5 背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定。

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

background-attachment: scroll | fixed

scroll:背景图像随着对象内容滚动

fixed:背景图像固定

8.6 背景颜色半透明

background： rgba(0,0,0,0.5)

最后一个参数值是alpha透明的，取值在0~1之间

注意：背景半透明是指盒子背景半透明，盒子里的内容不受影响

8.7 背景复合写法

用空格隔开

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

background: red url(image.jpg) no-repeat fixed top ;

9. CSS的三大特性

9.1层叠性

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

层叠性原则：

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

样式不冲突，不会层叠

9.2继承性

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

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

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

9.2.1 行高继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行高的继承</title>
    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */
            font-size: 14px; 
        }
        p {
            /* 1.5 * 16 =  24 当前的行高 */
            font-size: 16px;
        }
        /* li 么有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 
        
        当前li 的行高就是  12 * 1.5  =  18
        */
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html>

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

不跟单位，就代表是当前文字大小的多少倍

<body>
	font: 12px/1.5 'Microsoft YaHei'
</body>

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

9.3 优先级

当一个元素制动多个选择器，就会有优先级的产生

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

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS优先级</title>
    <style>
       
        .test {
            color: red;
        }
        div {
            color: pink!important;	/* !important加在后方 */
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>
</html>

优先级注意点：

1.权重是由4组数值组成，但不会有进位

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

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

4.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素权重都为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css权重注意点</title>
    <style>
        /* 父亲的权重是 100  */
        #father {
            color: red!important;
        }
        /* p继承的权重为 0 */
        /* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */
        p {
            color: pink;
        }
        body {
            color: red;
        }
        /* a链接浏览器默认制定了一个样式 蓝色的 有下划线  a {color: blue;}*/
        a {
            color: green;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>你还是很好看</p>		<!-- 粉色 -->
    </div>
    <a href="#">我是单独的样式</a>		<!-- 绿色 -->
</body>
</html>

权重叠加:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>权重的叠加</title>
    <style>
       /* 复合选择器会有权重叠加的问题 */
       /* 权重虽然会叠加,但是永远不会有进位 */
       /* ul li 权重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */
        ul li {
            color: green;
        }
        /* li 的权重是 0,0,0,1    1 */
        li {
            color: red;
        }
        /* .nav li  权重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */
        .nav li {
            color: pink;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>
</html>

权重练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS权重练习</title>
    <style>
        /* .nav li  权重是 11 */
        .nav li {
            color: red;
        }
        /* 需求把第一个小li 颜色改为 粉色加粗 ? */
        /* 因为 .pink 权重是 10，所以只有字体加粗，而字体颜色未变， */    
       /* .pink {				
            color: pink;			
            font-weight: 700;		
        } */
       .nav .pink {			/* .nav .pink  20 */
            color: pink;
            font-weight: 700;
        }
    </style>
</head>
<body>
    
    <ul class="nav">
        <li class="pink">人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>
</body>
</html>

10. 盒子模型

1. 盒子模型的组成

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

它包括：border边框、margin外边距、padding内边距、和 content 内容

1.2 边框（border）

注意：边框会影响盒子的实际大小

CSS 边框属性允许你指定一个元素边框的样式和颜色。

语法：

border-weight || border-style || border-color

border-stylee 可以设置如下值:

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

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

dashed:边框为虚线

dotted:边框为点线

边框简写：

<style>
    div {
        border: 5px solid red; /*没有顺序*/
    }
</style>

边框分开写法：

<style>
    div {
		/*上边框：*/
		border-top: 5px solid red;
		/*下边框：*/
		border-bottom: 10px dashed purple；
    }
</style>

1.2.1表格的细线边框

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

语法：

<style>
    table {
		border-collapse: collapse; /*表示相邻边框合并在一起*/
    }
</style>

1.3内边距（padding）

用来隔开元素与内容的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”

注意：内边距会影响盒子的实际大小

如果盒子本身没有指定width/heigth属性，则此时的padding不会撑开盒子大小

pps：子元素会继承父元素的宽度，但不会继承高度（height）

但是**行高（line-height）**可以继承，不要混淆了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>padding不会影响盒子大小的情况</title>
    <style>   
       h1 {
           /* width: 100%; */
           height: 200px;
           background-color: pink;
           padding: 30px;
       }
       div {
           width: 300px;
           height: 100px;
           background-color: purple;
       }
       div p {
           padding: 30px;
           background-color: skyblue;
       }
    </style>
</head>
<body>
   <h1></h1>
   <div>
       <p></p>	<!-- 此时p宽300px，高60px（是上边距30px加下边距30px） -->
   </div>
</body>
</html>

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

padding-left: 左内边距

padding-right: 右内边距

padding-top: 上内边距

padding-bottom: 下内边距

简写：

padding 属性（简写属性）可以有一到四个值。

上右下左（顺时针顺序）

在这里插入图片描述

1.4 外边距（margin）

用来隔开元素与元素的间距，使元素与元素互不相干

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

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

1.4.1 外边距典型应用

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

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

② 盒子左右的外边距都设置为 auto 。

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

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

margin: 0 auto; (最常用)

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

margin: auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内元素/行内块元素水平居中对齐</title>
    <style>
      .header {
          width: 900px;
          height: 200px;
          background-color: pink;
          margin: 100px auto;
          text-align: center;
      }
      /* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */
    </style>
</head>
<body>
    <div class="header">
        <span>里面的文字</span>
    </div>
    <div class="header">
        <img src="down.jpg" alt="">
    </div>
</body>
</html>

1.4.2 外边距合并

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

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

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

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

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

可以为父元素添加 overflow:hidden。

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

1.5 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

第一行代码！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除内外边距</title>
    <style>
        /* 这句话也是我们css 的第一行代码 */
       * {
           margin: 0;
           padding: 0;
       }
       span {
           background-color: pink;
           margin: 20px;
       }
    </style>
</head>
<body>
   123
   <ul>
       <li>abcd</li>
   </ul>
   <span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>

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

11. 圆角边框和阴影

11.1圆角边框（重点）

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

语法：

border-radius: length

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

如果是矩形，设置为高度的一半，可以做成在这里插入图片描述

border-radius: 10px 20px 30px 40px;
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

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

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆角边框常用写法</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50% 就是宽度和高度的一半  等价于 100px */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            /* border-radius: 10px 20px 30px 40px; */ 
            /* 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 */
            /* 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius */
            /* border-radius: 10px 40px; */
            border-top-left-radius: 20px;
            background-color: pink;
        }
    </style>
</head>

<body>
    1. 圆形的做法:
    <div class="yuanxing"></div>
    2. 圆角矩形的做法:
    <div class="juxing"></div>
    3. 可以设置不同的圆角:
    <div class="radius"></div>
</body>

</html>

11.2盒子阴影（重点）

box-shadow属性：为盒子添加阴影

语法：

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

在这里插入图片描述

注意：

1.默认是外阴影（outset），但是不可以写这个单词，否则会导致阴影无效

2.盒子阴影不占用空间，不会影响其他盒子排列

11.3 文字阴影（简单使用）

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

12. CSS浮动

传统网页布局的三种方式

普通流，浮动，定位

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

12.1 浮动（float）

浮动可以改变元素标签默认的排列方式

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

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

网页布局第二准则：先设置盒子大小，之后设置盒子位置

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

语法： { float: 属性值; }

属性值：none (元素不浮动 默认值)，left (元素向左浮动)， right (元素向右浮动)

12.1.1浮动特性（重难点）

加了浮动之后的元素，会具有很多特性，需要我们掌握的

①==设置了浮动的元素最重要特性：==

1. 脱离标准普通流的控制（浮），移动到指定位置（动）。（俗称脱标）

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

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

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

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

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

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

2.浮动的盒子中间是没有缝隙的，是紧挨着一起的

3.行内元素同理

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

为了约束浮动元素位置, 我们网页布局一般采取的策略是:

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

在这里插入图片描述

12.2 浮动布局注意点

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

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

13. 清除浮动

为什么需要清除浮动？

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

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

清除浮动本质

清除浮动的本质是清除浮动元素造成的影响

如果父盒子本身有高度，则不需要清除浮动

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

13.1清除浮动

语法：

选择器 {clear: 属性值;}

both 同时清除左右两侧浮动的影响

left （不允许左侧有浮动元素，清除左侧浮动的影响）

right （不允许右侧有浮动元素，清除右侧浮动的影响）

实际工作中，几乎只用 clear:both;

清除浮动的策略是：闭合浮动

13.2 清除浮动方法

1. 额外标签法，也成为隔墙法，是W3C推荐的做法

2. 父级添加overflow属性

3. 父级添加after伪元素

4. 父级添加双伪元素

13.2.1 额外标签法

语法：

选择器 {clear: both;}

额外标签法会在浮动元素末尾添加一个空的标签。例如，或者其他标签（如 < br >等）。

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

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

注意：要求这个新的空标签必须是块级元素。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动之额外标签法</title>
    <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;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {				/* 额外标签法 */
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="clear"></div>
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <!-- <span class="clear"></span> -->
    </div>
    <div class="footer"></div>

</body>

</html>

13.2.2 父级添加 overflow

可以给父级添加overflow属性，将其属性值设为: hidden、auto、scroll

子不教,父之过,注意是给父元素添加代码

优点：代码简

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>为什么需要清除浮动</title>
    <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;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

13.2.3 :after 伪类元素

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

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

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

缺点：照顾低版本浏览器

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素清除浮动</title>
    <style>
        .clearfix:after {		/* :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;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">			<!-- 直接调用 clearfix -->
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

13.2.4 双伪元素清除浮动

也是给给父元素添加

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

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素清除浮动</title>
    <style>
        .clearfix:before,			/*双伪元素清除浮动*/
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .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;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">			<!-- 调用clearfix -->
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

13.2 清除浮动总结

为什么需要清除浮动？

① 父级没高度。

② 子盒子浮动了。

③ 影响下面布局了，我们就应该清除浮动了。

14. 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 / background:linear-gradient …

.jdc {
 display: block;			/* 1 */
 position: relative;			/* 1 */
 float: left;			/* 1 */
 width: 100px;			/* 2 */
 height: 100px;			/* 2 */
 margin: 0 10px;			/* 2 */
 padding: 20px 0;			/* 2 */
 font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;			/* 3 */
 color: #333;			/* 3 */
 background: rgba(0,0,0,.5);			/* 4 */
 border-radius: 10px;			/* 4 */
}

15. 学成在线案列

15.1 页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的布局流程：

1. 必须确定页面的版心（可视区），我们测量可得知。

2.分析页面中的行模块，以及每个行模块中的列模块。页面布局第一准则

3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则。

4. 制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。

5. 所以，先理清楚布局结构，再写代码尤为重要，这需要多写多积累

1.确定版心

这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
 width: 1200px;
 margin: auto;
}

2.头部制作

注意点：

实际开发中，我们不会直接使用链接a，二十用li包含链接(li+a)的做法

1. li + a 语义更清晰，一看就是有条理的列表型内容。

2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（有降权的风险），从而影响网站排名。

16. 定位

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

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

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

定位 = 定位模式 + 边偏移

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

定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

static（静态定位） relative（相对定位） absolute（绝对定位） fixed（固定定位）

边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

16.1 静态定位static（了解）

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

语法：选择器 { position: static; }

16.2 相对定位 relative（重要）

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

语法：选择器 { position: relative; }

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

1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

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

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位</title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    
</body>
</html>

16.3 绝对定位 absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：选择器 { position: absolute; }

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

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-父级有定位</title>
    <style>
        .yeye {
            position: relative;			/* 定位 */	
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }

        .father {
            /* position: relative; */   /* father没有定位就以yeye来定位 */
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }

        .son {
            position: absolute;
            left: 30px;
            bottom: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>


</body>

</html>

16.4 子绝父相

这个“子绝父相”太重要了

子级是绝对定位的话，父级要用相对定位

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

2.父盒子需要加定位限制子盒子在父盒子内显示。

3.父盒子布局时，需要占有位置，因此父亲只能是相对定位。

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

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

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

16.5 固定定位 fixed（重要）

固定定位是元素固定于浏览器可视区的位置。

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

语法：选择器 { position: fixed; }

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

1.以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系

不随滚动条滚动。

2.固定定位不再占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位</title>
    <style>
        .dj {
            position: fixed;
            top: 100px;
            left: 40px;
        }
    </style>
</head>
<body>
    <div class="dj">
        <img src="images/pvp.png" alt="">
    </div>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    
</body>
</html>

固定定位小技巧：固定在版心右侧位置。

小算法：

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

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位小技巧-固定到版心右侧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
  
</body>
</html>

16.6 粘性定位 sticky（了解）

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

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

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }
        .nav {
            /* 粘性定位 */
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="nav">我是导航栏</div>
</body>
</html>

16.7 定位叠放次序 z-index

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

语法：选择器 { z-index: 1; }

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

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

数字后面不能加单位

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位的堆叠顺序</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .xiongda {
            background-color: red;
            z-index: 1;
        }
        .xionger {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 2;
        }
        .qiangge {
            background-color:blue;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box xiongda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box qiangge">光头强</div>
</body>
</html>

16.8 定位的拓展

1.定位的拓展

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，

但是可以通过以下计算方法实现水平和垂直居中。

① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px;：让盒子向左移动自身宽度的一半。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位居中</title>
    <style>
        .box {
            position: absolute;
            /* 1. left 走 50%  父容器宽度的一半 */
            left: 50%;
            /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

2. 定位特殊特性

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

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

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

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

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

4… 绝对定位（固定定位）会完全压住盒子

浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

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

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

17.网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3.定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

18.元素的显示与隐藏

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

本质：让一个元素在页面中隐藏或者显示出来。

18.1 display 属性（重点★★）

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

display: none ；隐藏对象

display：block ；除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示隐藏元素之display</title>
    <style>
        .peppa {
            display: none;
            /* display: block; */
            width: 200px;
            height: 200px;
            background-color: pink;

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

18.2 visibility 可见性

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

visibility：visible ; 元素可视z

visibility：hidden; 元素隐藏

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

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

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

18.3 overflow 溢出

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

visible: 不剪切内容也不添加滚动条

hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll：不管超出内容否，总是显示滚动条

auto：超出自动显示滚动条，不超出不显示滚动条

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

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

18.4 总结

1.display 显示隐藏元素但是不保留位置

2.visibility 显示隐藏元素但是保留原来的位置

3.overflow 溢出显示隐藏但是只是对于溢出的部分处理

18.5 仿土豆网显示隐藏遮罩案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
        .tudou:hover .mask {
            /* 而是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

</html>

因为.mask盒子隐藏了，所以不能经过。

只有经过.tudou盒子将.mask盒子显示出来

/* 当我们鼠标经过了土豆这个盒子，就让里面遮罩层显示出来 */

.tudou:hover .mask {

/* 是显示元素 */

display: block;

}

19. 精灵图

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现—background-position 。

一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>精灵图使用</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;   
            margin: 100px auto;
            background: url(images/sprites.png) no-repeat   -182px 0;
          
        }
        .box2 {
            width: 27px;
            height: 25px;
            /* background-color: pink; */
            margin: 200px;
            background: url(images/sprites.png) no-repeat  -155px -106px;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

20. 字体图标

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

优点：

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

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

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

21. CSS三角

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。一张图，你就知道 CSS 三角是怎么来的了, 做法如下：

div {
 width: 0;
 height: 0;
 line-height: 0;
 font-size: 0;
 border: 50px solid transparent;
 border-left-color: pink;
}

22. 用户界面样式

1.鼠标样式 cursor

语法： li {cursor: pointer; }

属性值： default 默认光标

pointer 小手

move 移动

text 文本

not-allowed 禁止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户界面样式-鼠标样式</title>
</head>
<body>
    <ul>
        <li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
    </ul>
</body>
</html>

2.轮廓线 outline

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

语法： input {outline: none; }

3.防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

语法： textarea{resize:none;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户界面样式-表单轮廓和防止拖拽文本域</title>
    <style>
        input, textarea {
            /* 取消表单轮廓 */
            outline: none;
        }
        textarea {
            /* 防止拖拽文本域 */
            resize: none;
        }
    </style>
</head>
<body>
    <!-- 1. 取消表单轮廓 -->
    <input type="text">
    <!-- 2. 防止拖拽文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

    
</body>
</html>

23. vertical-align 属性应用

vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

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

语法：

vertical-align : baseline | top | middle | bottom

baseline 默认。元素放置在父元素的基线上

top 把元素的顶端与行中最高元素的顶端对齐

middle 把此元素放在父元素的中部

bottom 把元素的顶端与行中最低元素的底端对齐

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利用vertical-align实现图片文字垂直居中对齐</title>
    <style>
        img {
            /* vertical-align: bottom; */
            /* 让图片和文字垂直居中 */
            vertical-align: middle;
            /* vertical-align: top; */
        }
        textarea {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="images/ldh.jpg" alt="">  pink老师是刘德华

    <br>
    <textarea name="" id="" cols="30" rows="10"></textarea> 请您留言
</body>
</html>

24. 溢出的文字省略号显示

1.单行文本溢出显示省略号

/1. 先强制一行内显示文本/

white-space: nowrap; （默认 normal 自动换行）

/2. 超出的部分隐藏/

overflow:hidden;

/3. 文字用省略号替代超出的部分/

text-overflow: ellipsis;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>
</html>

25.常见布局技巧

1.margin负值运用

在这里插入图片描述

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin负值的巧妙运用</title>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
           1. 如果盒子没有定位，则鼠标经过添加相对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

2.文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字围绕浮动元素的妙用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 0 auto;
            padding: 5px;
        }
        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="images/img.png" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>
</html>

3.行内块巧妙运用

页码在页面中间显示:

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

4.CSS 三角强化

在这里插入图片描述

.box{
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
}

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 100px auto;
            line-height: 24px;

        }

        .miao {
            position: relative;
            float: left;
            width: 90px;
            height: 24px;
            background-color: red;
            font-weight: 700;
            color: #fff;
            font-size: 14px;
            text-align: center;
        }

        i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;

        }

        .yuan {
            font-size: 12px;
            text-decoration: line-through;
            color: #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="miao">
            ￥2099.00
            <i></i>
        </span>
        <span class="yuan">￥2649.00</span>
    </div>
</body>

</html>

26. CSS初始化

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

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

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

这里我们以京东CSS初始化代码为例。

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* 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
}

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

27. HTML5 的新特性

1.HTML5 新增的语义化标签

< header >：头部标签

< nav >：导航标签

< article >:内容标签

< section >:定义文档某个区域

< aside >:侧边栏标签

< footer >:尾部标签

2.HTML5 新增的多媒体标签

1.视频< video >

语法:

< video src=“文件地址” controls=“controls” >< /video >

<video controls="controls" width="300">
 <source src="move.ogg" type="video/ogg">
 <source src="move.mp4" type="video/mp4">
 您的浏览器暂不支持 <video> 标签播放视频
</video>

video常见属性

autoplay: autoplay	自动播放（谷歌浏览器需添加muted来解决自动播放问题）

controls: controls	向用户显示播放控件

width: pixels(像素)	宽

height: pixels(像素)	高

loop: loop	循环播放

preload:	auto(预先加载视频)
			none(不预先加载)

src: url(视频链接)

poster: lmgurl	加载等待的画面图片

muted: muted 	静音播放

2.音频< audio >

语法：

< audio src=“文件地址” controls=“controls” >< /audio >

 < audio controls="controls" >
 <source src="happy.mp3" type="audio/mpeg" >
 <source src="happy.ogg" type="audio/ogg" >
 您的浏览器暂不支持 <audio> 标签。
 </ audio>

常见属性

autoplay: autoplay	自动播放（谷歌浏览器不会自动播放）

controls: controls	向用户显示播放控件

loop: loop	循环播放

src: url(音频链接)

3. HTML5 新增的 input 类型

type=“email” 限制用户输入必须为Email类型

type=“url” 限制用户必须为url类型

type=“date” 限制用户必须为日期类型

type=“time” 限制用户必须为时间类型

type=“month” 限制用户必须为月类型

type=“week” 限制用户必须为周类型

type=“number” 限制用户必须为数字类型

type=“tel” 手机号码

type=“search” 搜索框

type=“color” 生成一个颜色选择表单

4.HTML5 新增的表单属性

required =“required” 表示拥有该属性表示其内容不能为空，必填

placeholder =“提示文本” 表单提示信息，存在默认值将不显示

autofocu =“autofocus” 自动聚焦属性，页面加载完成自动聚焦到指定表单

autocomplete =“off/on” 当用户再字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

multiple =“multiple” 可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder { color: pink; }

28.CSS3 的新特性

1.CSS3 新增选择器

1.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。

input==[type=text]==（这里权重是10，加上input是11）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增属性选择器</title>
    <style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
    </style>
</head>
<body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>

</body>
</html>

1.2 结构伪类选择器

A E: first-child 匹配父元素(A)中的第一个子元素(E)

A E: last-child 匹配父元素(A)中的最后一个子元素(E)

A E: nth-child(n) 匹配父元素(A)中第n个子元素(E)

A E: first-of-type 指定类型E的第一个

A E: last-of-type 指定类型E的最后一个

A E: nth-of-type(n) 指定类型E的第n个

区别：

1.nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

2.nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增结构伪类选择器</title>
    <style>
        /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }
        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }
         /* 3. 选择ul里面的第2个孩子 小li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>
</html>

1.2.1==nth-child（n）（重点） ==

选择某个父元素的一个或多个特定的子元素

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

n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…

n 可以是关键字：even 偶数，odd 奇数

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

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增结构伪类选择器-nth-child</title>
    <style>
        /* 1.把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #333;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
        }

        /* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子 相当于全选*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */
        /* 4.nth-child(2n)选择了所有的偶数孩子 等价于 even*/
        /* ol li:nth-child(2n) {
            background-color: pink;
        }*/
        /* 5.nth-child(2n)选择了所有的偶数孩子 等价于 odd*/
        /*ol li:nth-child(2n+1) {
            background-color: skyblue;
        }*/
        /* 6.nth-child(n+3)选择了从第三个开始的孩子*/
        /* ol li:nth-child(n+3) {
            background-color: pink;
        } */
        /* 7.nth-child(n+3)选择了前三个孩子*/
        ol li:nth-child(-n+3) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

</html>

1.2.2 nth-of-type(n)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增选择器nth-type-of</title>
    <style>
        /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */

        section div:nth-child(1) {
            background-color: red;
        }
         /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

</html>

小结

1.结构伪类选择器一般用于选择父级里面的第几个孩子

2.nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

3.nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

4.关于 nth-child（n）我们要知道 n 是从 0 开始计算的，要记住常用的公式

5.如果是无序列表，我们肯定用 nth-child 更多

6.类选择器、属性选择器、伪类选择器，权重为 10。

1.3 伪元素选择器（重点）

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素选择器before和after</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>
<body>
    <div>
        是
    </div>
</body>
</html>

注意：

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

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

3.语法： element::before {} element可以是任何元素

4.before 和 after 必须有 content 属性

5.before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

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

3. 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宽度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3盒子模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        小猪乔治
    </div>
    <p>
        小猪佩奇
    </p>
</body>
</html>

4. 过渡效果（重点）

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

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

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

2.花费时间：单位是秒（必须写单位）比如 0.5s

3.运动曲线：默认是 ease （可以省略）

在这里插入图片描述

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
			transition: all 0.5s;
            /* 谁做过渡，给谁加 */           
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

29. 品优购项目练习

1. 网站TDK三大标签SEO优化

SEO（Search Engine Optimization）汉译为搜索引擎优化

SEO 的目的是对网站进行深度的优化

1.1 title 网站标题

title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

建议：网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）

例如：

京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

1.2 description 网站说明

简要说明我们网站主要是做什么的。

我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

语法：

例如：

1.3 keywords 关键字

keywords 是页面关键词，是搜索引擎的关注点之一。

keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式。

语法：

例如：

2. LOGO SEO 优化

1.logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。

2.h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。

3.为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。

方法一：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。

方法二：直接给 font-size: 0; 就看不到文字了，京东的做法。

4.最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

30. 2D转换

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

转换（transform）你可以简单理解为变形

移动：translate

旋转：rotate

缩放：scale

1. 2D 转换之移动 translate

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

语法：

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

重点：

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

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

3.translate中的百分比单位是相对于自身元素的 translate:(50%,50%);

4.对行内标签没有效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .c {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            /* transform: translate(x,y); */
            transform: translate(100px,100px);
            /* translat的50%是盒子的50% */
            transform: translate(50%,50%);
        }
        .p {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
        }
        .s {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width:  100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="c"></div>
    <div class="p">
        <div class="s"></div>
    </div>
</body>
</html>

2. 2D 转换之旋转 rotate

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

语法：

	transform:rotate(度数) 如45deg

重点

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

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.3s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="media/pic.jpg" alt="">
</body>

</html>

3. 2D 转换中心点 transform-origin

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

语法：

	transform-origin: x y;

重点

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

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以跟方位名词 */
            /* transform-origin: left bottom; */
            /* 2. 默认的是 50%  50%  等价于 center  center */
            /* 3. 可以是px 像素 */
            transform-origin: 50px 50px;
        }
        
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

4. 旋转案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 20px auto;
            
        }
        div::before {
            content: "666";
            display: block;
            width: 100%;
            height: 100%;
            transform: rotate(180deg);  
            transform-origin: left bottom;
            background-color: skyblue;
            transition: all 0.5s;
        }
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5. 2D 转换之缩放scale

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

语法：

	transform:scale(x,y);

重点：

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

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

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

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

transform:scale(0.5,0.5)：缩小

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* transform-origin: left bottom; */
        }
        
        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2); */
            /* 2. 修改了宽度为原来的2倍  高度 不变 */
            /* transform: scale(2, 1); */
            /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
            /* transform: scale(2); */
            /* 4. 我们可以进行缩小  小于1 就是缩放 */
            /* transform: scale(0.5, 0.5); */
            /* transform: scale(0.5); */
            /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
            /* width: 300px;
            height: 300px; */
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div></div>
    123123
</body>

</html>

6. 2D 转换综合写法

注意:

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

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

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

7. 总结

1.转换transform 我们简单理解就是变形有2D 和 3D 之分

2.我们暂且学了三个分别是位移旋转和缩放

3.2D 移动 translate(x, y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的

4.可以分开写比如 translateX(x) 和 translateY(y)

5.2D 旋转 rotate(度数) 可以实现旋转元素度数的单位是deg

6.2D 缩放 scale(x,y) 里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子

7.设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词

8.当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

31. 动画

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

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

可以添加多个动画，用逗号分隔即可

1.动画的基本使用

制作动画分为两步：

1.先定义动画

2.再使用（调用）动画

1.1用keyframes 定义动画（类似定义类选择器）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义动画 */
        /* keyframes 关键帧 */
        @keyframes move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translate(1000px);
            }
        }
        div {
            height: 200px;
            width: 200px;
            background-color: pink;
            /* 调用动画 */
            /* animation-name: 动画名称 */
            animation-name: move;
            /* animation-duration: 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画序列

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

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

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* from to 等价于  0% 和  100% */
        /* @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        } */
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0)
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

2. 动画常用属性

@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",还有"paused"。

animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards

3. 动画简写属性

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

animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含 animation-play-state

暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用

想要动画走回来，而不是直接跳回来：animation-direction ： alternate

盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

4. 速度曲线细节

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

linear 动画从头到尾的速度是相同的。匀速

ease 默认。动画以低速开始，然后加快，在结束前变慢。

ease-in 动画以低速开始。

ease-out 动画以低速结束。

ease-in-out 动画以低速开始和结束。

steps() 指定了时间函数中的间隔数量（步长）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

</html>

5. 大熊奔跑案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #000;

        }
        .bear {
            position: absolute;
            bottom: 30px;
            z-index: 1;
            width: 200px;
            height: 100px;
            background: url(img/bear.png) no-repeat;
            animation: bear 0.7s steps(8) infinite,move 5s linear forwards;

        }

        @keyframes bear {
            0% {
                background-position: 0,0;
            }
            100% {
                background-position: -1600px,0;
            }   
        }
        @keyframes move {
            0% {
                left: 0%;
                transform: translate(0,0);

            }
            100% {
                left: 50%;
                transform: translate(-50%,0);
            }
        }

        
    </style>
</head>
<body>
    <div class="bear"></div>

</body>
</html>

32. 3D 转换

近大远小。

物体后面遮挡不可见

1.三维坐标系

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

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

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

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

2.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 分别指要移动的轴的方向的距离

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

3. 透视 perspective

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

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

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

透视的单位是像素

4translateZ

ltranslateZ：近大远小

ltranslateZ：往外是正值

translateZ：往里是负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            perspective: 500px;
            margin: 100px auto;
            width: 283px;
            height: 200px;
        }
        img {
            width: 283px;
            height: 200px;
            transition: all 1s;
        }
        img:hover {
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div>
        <img src="img/78391247_p0.png" alt="">
    </div>
</body>
</html>

5. 3D旋转 rotate3d

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

先旋转，坐标轴会跟着旋转，正前方始终是Z轴

语法：

transform:rotateX(45deg)：沿着x轴正方向旋转 45度

transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg

transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg

transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度（了解即可）

5.1 rotateX

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 300px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

5.2 rotateY

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

5.3 rotateZ

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            /* transform: rotateZ(180deg); */
            /* transform: rotate3d(x,y,z,deg); */
            /* transform: rotate3d(1, 0, 0, 45deg); */
            /* transform: rotate3d(0, 1, 0, 45deg); */
            transform: rotate3d(1, 1, 0, 45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

5.4 rotate3d(x,y,z,deg)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            perspective: 500px;
            margin: 100px auto;
            width: 283px;
            height: 200px;
        }
        img {
            width: 283px;
            height: 200px;
            transition: all 1s;
        }
        img:hover {
            transform: rotate3d(1,1,0,45deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="img/78391247_p0.png" alt="">
    </div>
</body>
</html>

6. 旋转木马案例

先旋转，坐标轴会跟着旋转，正前方始终是Z轴

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        perspective: 1000px;
      }
      section {
        position: relative;
        width: 300px;
        height: 200px;
        margin: 150px auto;
        transform-style: preserve-3d;
        animation: rotate 12s linear infinite;
        background: url(img/dog.jpg) no-repeat;
      }
      div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      div:nth-child(1) {
        transform: translateZ(300px);
      }
      div:nth-child(2) {
        transform: rotateY(60deg) translateZ(300px);
      }
      div:nth-child(3) {
        transform: rotateY(120deg) translateZ(300px);
      }
      div:nth-child(4) {
        transform: rotateY(180deg) translateZ(300px);
      }
      div:nth-child(5) {
        transform: rotateY(240deg) translateZ(300px);
      }
      div:nth-child(6) {
        transform: rotateY(300deg) translateZ(300px);
      }
      @keyframes rotate {
        0% {
        }
        100% {
          transform: rotateY(360deg);
        }
      }
      section:hover {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <section>
      <div>
        <img src="img/dog.jpg" alt="" />
      </div>
      <div>
        <img src="img/dog.jpg" alt="" />
      </div>
      <div>
        <img src="img/dog.jpg" alt="" />
      </div>
      <div>
        <img src="img/dog.jpg" alt="" />
      </div>
      <div>
        <img src="img/dog.jpg" alt="" />
      </div>
      <div>
        <img src="img/dog.jpg" alt="" />
      </div>
    </section>
  </body>
</html>

32. 补充

1. opacity 透明度级别

设置一个div元素的透明度级别

语法：

div
{
    opacity:0.5;
}

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 and earlier */
}
</style>
</head>
<body>

<div>This element's opacity is 0.5! Note that both the text and the background-color are affected by the opacity level!</div>

</body>
</html>