前端开发-CSS快速掌握上手知识详细总结

最新推荐文章于 2024-06-23 20:25:44 发布

Yz前端知识

最新推荐文章于 2024-06-23 20:25:44 发布

阅读量4.8k

点赞数 25

分类专栏：前端开发知识点文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_45168167/article/details/121483281

版权

前端开发知识点专栏收录该内容

12 篇文章 0 订阅

订阅专栏

01_CSS基础

前言

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wsmkKve6-1637594225448)(images01_base/wps1.jpg)]

HTML:结构层,Hyper Text Markup Language,超文本标记语言

CSS:表现层,Cascading Style Sheets，层叠样式表

JS:行为层,JavaScript，客户端脚本语言

**网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。**标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。

网页的表现层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

**网页的表示层和行为层总是存在的，即使我们未明确地给出任何具体的指令也是如此。此时， Web 浏览器将把它的默认样式和默认事件处理函数施加在网页的结构层上。**例如，浏览器会在呈现“文本段”元素时留出页边距，有些浏览器会在用户把鼠标指针悬停在某个元素的上方时弹出一个显示着该元素的 title 属性值的提示框，等等。

一、CSS概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rqly70Qy-1637594225449)(images01_base/wps3.jpg)]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

二、CSS引入规则

2.1、CSS语法

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gf3FYR0c-1637594225451)(images01_base/wps4.jpg)]

选择器通常是您需要改变样式的 HTML 元素(我们可以通过各种选择器灵性的选择页面的各种元素)。

每条样式声明由一个属性[样式属性]和一个值[样式值]组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

为了让CSS可读性更强，你可以每行只描述一个属性；

2.2、三种CSS 样式引入规则

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

2.2.1、内联样式(Inline style)

行内样式(内联样式)引入规则；样式写在标签的style属性中

行内样式的语法规则:

<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;..."> 内容 </标记名>

该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内样式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用(部分样式)。

行内式也是通过标记的属性来控制样式的，由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法。只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。

2.2.2、内部样式表(Internal style sheet)

内嵌[内部]样式引入规则；样式放在head或body标签的style标签中:

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style> 标签在文档头部定义内部样式表；

内嵌样式的语法规则:

<head>
<style type="text/css">
选择器{
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
	....
}
</style>
</head>

该语法中， <style>标记一般位于<head>标记中的<title>标记之后，也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的，把CSS代码放在head便于提前被下载和解析，以避免网页内容下载后没有样式修饰带来的尴尬。

同时最好设置type的属性值为“text/css“，这样浏览器才知道<style>标记包含的是CSS代码，因为<style>标记还可以包含其他代码，如JavaScript代码。

内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果在一个网站，不建议使用这中方式，因为它不能充分发挥CSS代码的重用优势。

2.2.3、外部样式表(External style sheet)

外部样式[链入式]引入规则；一个单独的样式文件,存放我们的样式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<like/>标记将外部样式表文件链接到HTML文档中。

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

链入式的语法规则:

<head>
	<like href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>

该语法中，<like/>标记需要放在<head>头部标记中，并且必须指定<like/>标记的三个属性。如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

type：定义所链接文档的类型，在这里需要制定为”text/css“，表示链接的外部文件为CSS样式表。

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件。

注：不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

2.2.4、样式引入优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

内联样式）Inline style > （内部样式）Internal style sheet =（外部样式）External style sheet > 浏览器默认样式

内部样式和外部样式都是通过选择器来选择元素的，所以他们的优先级和文件顺序、选择器优先级有关；

**注意：**如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

2.3、CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束。

/*这是个注释*/
p{
	text-align:center;
	/*这是另一个注释*/
	color:black;
	font-family:arial;
}

三、CSS 三大机制(重点)

3.1、CSS样式来源

CSS中的样式一共有三种来源：创作人员、读者和用户代理，来源的不同会影响到样式的层叠方式，很多第一次学习CSS的朋友，对这三种来源可能会存在一些困惑。

首先，创作人员（author’s+style）样式应该是我们最熟悉的，如果你是一个前端开发者，那么你写的那些样式就叫做创作人员样式。

然后是用户代理样式（agent’s+style），用户代理也就是我们通常所说的浏览器（IE、Firefox等等），这些浏览器会提供一些默认的样式，比如IE浏览器中，一个纯粹由html代码构成的网页里，我们会发现超链接会带有一个蓝色的前景色，这其实就用户代理样式，借用一些插件我们可以方便的查看这些默认样式（比如Firefox中的Web+developer）

最后，也是最容易被我们忽略的，读者样式（reader’s+style）。所谓读者自然就是浏览网页的用户，有些时候这些用户里可能会有人不满意网页的配色，或者字体大小，这时候他们就是通过浏览器提供的接口为网站添加读者样式。

介绍完了来源，我们来说一下如何按权重和来源排序，根据《CSS权威指南》（第三版P79）中总结的权重排序：

1.+创作人员的样式+>+读者人员的样式+>+用户代理的默认样式

2.+标记为重要声明（!important）的读者样式+>+一切样式

有的朋友可能一开始不太明白第二条的意思，实际上这是CSS提供的一个很好的选择机制，也就是说，通常情况下，创作人员样式会拥有最大的权重，这也是作为开发人员最想要看到的，但是用户拥有最终的选择权，可以通过!important覆盖到任何想要覆盖的样式。

3.2、CSS三大机制

**CSS的三大机制是：特殊性[冲突]、继承、层叠。**样式最终的呈现由层叠机制决定，但层叠与特殊性、继承又有关系。换句话说，一个元素某一样式要应用那个值，用户代理需要考虑继承，考虑声明的特殊性，考虑声明本身的来源，而这个过程就叫做层叠。

3.2.1、特殊性

所谓的特殊性，其实是CSS样式一种计算声明权重的规则。特殊性是由规则的选择器确定的，然后用户代理会将计算出来的特殊性附加给相应的每一个声明上。

如何计算/比较选择器的特殊性：

选择器类型：

1、ID　　#id

2、class　　.class

3、标签　　p

4、通用　　*

5、属性　　[type=“text”]

6、伪类　　：hover

7、伪元素　　::first-line

8、子选择器、相邻选择器

权重计算规则:

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

继承的样式没有权值。

h1 {color: red;}/*specificity=0,0,0,1*/

p em {color:purple;}/*specificity=0,0,0,2*/

.grade{color:purple;}/*specificity=0,0,1,0*/*

.bright{color:yellow;}/*specificity=0,0,1,0*/

div#header[href]{color:black;}/*specificity=0,1,1,1 包涵一个属性选择器*/

重要性！important:

有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志。

P {
    color ; red !important; 
    background: yellow
}

3.2.2、继承

CSS还有一个继承机制，即样式不仅会应用到指定的样式，而且会应用到其后代的元素。

上面提到了一个后代的概念，指的是文档元素之间的一种关系。HTML文档的元素是具有层次结构的，html元素为根元素，其余的元素均是挂载在其上。这些元素可以以一种树形的结构表示出来，元素的直接上级为父，直接下级为子，同父级的元素为兄弟元素，元素a若可以通过若干个元素（包括这个元素本身）的父元素联系到另一元素b，则元素a为元素b的后代，相对的元素b为元素a的祖先。

继承的机制需要注意的点:

并不是所有的属性都可以继承，一般的，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承。

3.2.3、层叠

样式的呈现只有一种效果，而仅仅通过特殊性来决定权重并不能完全解决冲突。想象一下，如果两条作用于同一元素的声明，它的特殊性相同，也就是它们的权重相同时，浏览器应该用哪一条声明呢？这个就与CSS的层叠机制有关了。

文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠;

四、CSS基础选择器

选择器表示结构。该结构可以用作条件（例如，在CSS规则中），其确定选择器在文档树中匹配哪些元素，或者作为对应于该结构的HTML或XML片段的平面描述。

CSS的选择器分为两大类：基本选择器和扩展选择器。

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议单独使用）

4.1、标签选择器

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

<style type="text/css">
p{
    font-size:14px;
}
</style>

需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

4.2、ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

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

以下的样式规则应用于元素属性 id=“mytitle”:

<head>
    <title>Document</title>
    <style type="text/css">
    #mytitle{
        border:3px dashed green;
    }
</style>
</head>
<body>
    <h2 id="mytitle">你好</h2>
</body>

id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

（1）只能有字母、数字、下划线。

（2）必须以字母开头。

（3）不能和标签同名。比如id不能叫做body、img、a。

（4）大小写严格区分，也就是说aa,和AA是两个不同的ID

另外，特别强调的是：**HTML页面，不能出现相同的id，哪怕他们不是一个类型。**比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

4.3、类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

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

举例如下：

<style type="text/css">
    .oneclass{/*定义类选择器*/
        width:800px;
    }
</style>
</head>
<body>
    <h2 class="oneclass">你好</h2>
</body>

和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

class属性的特点：

特性1：类选择器可以被多种标签使用。

特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下

<h3 class="classone  classtwo">我是一个h3啊</h3>

而不能写成：

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

类选择器使用的举例：

类选择器的使用，能够决定一个人的css水平。

应该注意：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

如：

<style type="text/css">
.lv{
    color: green;
}
.da{
    font-size: 30px;
}
.underline{
    text-decoration: underline;
}
</style>

然后让每个标签去选取自己想要用的类选择器：

<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>

问题：到底用id还是用class？

答案：尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

我们记住这句话：类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用。

上面这三种选择器的区别：

标签选择器针对的是页面上的一类标签。

ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。

类选择器可以被多种标签使用。

4.4、通配符

通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

基础选择器:

标签选择器: 1、CSS Reset的时候使用 2、结合其他层级选择器使用

id选择器: 尽可能不要使用,除非极特殊的情况

类选择器: 推荐使用,但是如果可以通过其他选择器替代,也少用

通配符选择器: 不要单独使用,可以偶尔集合其他选择器来使用

五、基础常用样式属性

5.1、CSS颜色表示方式

关于颜色的小知识:

颜色是通过对红、绿和蓝光的组合来显示的。早期的电脑只支持最多 256 种颜色时，但是现在大多数电脑都能显示数百万种颜色。

1、英文颜色名称

目前所有浏览器都支持以下颜色名。141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。

优点：方便快捷而且特定颜色比较准确

缺点：表示颜色数量有限，不支持透明度的表示

2、十六进制方式

颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。

十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

优点：表示颜色种类多，使用较方便

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSsVU1wk-1637594225452)(images01_base/wps5.jpg)]

缺点：不支持透明颜色。

3、RGB方式:三原色配色方式

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

优点：表示颜色种类多，使用较方便

缺点：不支持透明颜色。

每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

5.2、CSS 背景样式

CSS 背景属性用于定义HTML元素的背景(背景颜色/背景图片)。

属性	描述
background	简写(复合)属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。 scroll:默认值。 fixed:当页面的其余部分滚动时，背景图像不会移动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。值: url(“图片路径”)；默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
background-position	设置背景图像的起始位置。 left/right/center/bottom/top这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将是"center"。 x% y%:第一个值是水平位置，第二个值是垂直位置;左上角是 0% 0%。右下角是 100% 100%;如果仅规定了一个值，另一个值将是 50%。 x y 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。
background-repeat	设置背景图像是否及如何重复,默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。。 repeat (平铺，默认) repeat-x (x轴平铺) repeat-y (y轴平铺) no-repeat (不平铺)

当使用简写属性时，属性值的顺序为：:

background-color

background-image

background-repeat

background-attachment

background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.

body {
    background:#ffffff url('img_tree.png') no-repeat right top;
}

5.3、CSS文本格式样式

属性	描述
color	设置文字的颜色。
direction	设置文本方向。 ltr:默认。文本方向从左到右。 rtl:文本方向从右到左。 inherit:规定应该从父元素继承 direction 属性的值。
unicode-bidi	设置或返回文本是否被重写 bidi-override:创建一个附加的嵌入层面。重新排序取决于 direction 属性。
letter-spacing	设置字符间距。 normal:默认，规定字符间没有额外的空间。 length:定义字符间的固定空间（允许使用负值）。
line-height	设置行高。 normal:默认，设置合理的行间距。 number:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length:设置固定的行间距。%:基于当前字体尺寸的百分比行间距。
text-align	设置文本的水平对齐方式。 left:把文本排列到左边。默认值：由浏览器决定。 right:把文本排列到右边。 center:把文本排列到中间。 justify:实现两端对齐文本效果。
text-decoration	设置或删除文本的装饰。 none:默认,定义标准的文本。 underline:定义文本下的一条线。 overline:定义文本上的一条线。 line-through:定义穿过文本下的一条线。 blink:定义闪烁的文本(无效)。我们不建议强调指出不是链接的文本，因为这常常混淆用户。
text-indent	用来指定文本的第一行的缩进。。 length:定义固定的缩进。默认值：0。 %:定义基于父元素宽度的百分比的缩进。
text-shadow	设置文本阴影。 h-shadow:必需。水平阴影的位置。允许负值。 v-shadow:必需。垂直阴影的位置。允许负值。 blur：可选。模糊的距离(使用像素,像素值越大,越模糊)。 color：可选。阴影的颜色。
text-transform	设置在一个文本中的大写和小写字母。 none：默认，定义带有小写字母和大写字母的标准的文本。 capitalize：文本中的每个单词以大写字母开头。 uppercase：定义仅有大写字母。 lowercase：定义无大写字母，仅有小写字母。
vertical-align	设置元素的垂直对齐。此处需要特别注意的是：垂直对齐属性只对行内元素有效 baseline：默认。元素放置在父元素的基线上。baseline是什么？这是维基百科上的一张图,简单地来说，baseline是小写字母x下面的一条线。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QjheVkL-1637594225453)(images01_base/wps6.jpg)] top：把元素的顶端与行中最高元素的顶端对齐。 text-top：把元素的顶端与父元素字体的顶端对齐。 middle：把此元素放置在父元素的中部。 bottom：把元素的底端与行中最低的元素的顶端对齐。 text-bottom：把元素的底端与父元素字体的底端对齐。
white-space	设置元素中空白的处理方式。 This is some text. This is some text. This is some text. normal：默认。空白会被浏览器忽略。 pre：空白会被浏览器保留。其行为方式类似 HTML 中的 `<pre>`标签。 nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 `<br>`标签为止。 pre-wrap:保留空白符序列，但是正常地进行换行。 pre-line:合并空白符序列，但是保留换行符。
word-spacing	设置单词间距. normal:默认。定义单词间的标准空间。 length:定义单词间的固定空间。

5.4、CSS字体样式

CSS字体属性定义字体，加粗，大小，文字样式。

在CSS中，有两种类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）

Generic family	字体系列	说明
Serif	Times/New Roman/Georgia	Serif字体中字符在行的末端拥有额外的装饰
Sans-serif	Arial Verdana	"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace	Courier New Lucida Console	所有的等宽字符具有相同的宽度

字体样式属性：

Property	描述
font	在一个声明中设置所有的字体属性。可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family” font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。注意： line - height属性设置行与行之间的空间。注:多个设置必须包含大小和字体系列,大小和字体系列顺序不能变,其他三个顺序无所谓！
font-family	设置文本的字体系列。 font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。例如:font-family:“Times New Roman”,Georgia,Serif;使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。注意：每个值用逗号分开。关于电脑已有文字支持:1.新建一个WORD文档,在word文档上面有一个字体选项,点开下拉三角所有的字体都可以显示出来.2.点击进入控制面板.在控制面板中找到字体选项,点击进入字体选项.打开字体选项,电脑里所有的字体都在这里
font-size	设置文本的大小。能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。 xx-small、x-small、small、medium、large、x-large、xx-large把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。 smaller：把 font-size 设置为比父元素更小的尺寸。 larger：把 font-size 设置为比父元素更大的尺寸。 length:把 font-size 设置为一个固定的值。 %：把 font-size 设置为基于父元素的一个百分比值。
font-style	用于指定斜体文字的字体样式属性。 normal:默认值。浏览器显示一个标准的字体样式。 italic:浏览器会显示一个斜体的字体样式。 oblique:倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
font-variant	设置定义小型大写字母文本。 normal:默认值。浏览器会显示一个标准的字体。 small-caps:浏览器会显示小型大写字母的字体。
font-weight	指定字体的粗细。 normal:默认值。定义标准的字符。 bold:定义粗体字符。 bolder:定义更粗的字符。 lighter:定义更细的字符。 100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

5.5、CSS 列表

CSS列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

在HTML中，有两种类型的列表：

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中可以按顺序设置如下属性： list-style-type / list-style-position / list-style-image可以不设置其中的某个值，比如 “list-style:circle inside;” 也是允许的。未设置的属性会使用其默认值。
list-style-image	将图像设置为列表项标志。 URL:图像的路径。 none:默认。无图形被显示。
list-style-position	设置列表中列表项标志的位置。 inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐。 outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-type	设置列表项标志的类型。 none:无标记。 disc:默认。标记是实心圆。 circle:标记是空心圆。 square:标记是实心方块。 decimal:标记是数字。 decimal-leading-zero:0开头的数字标记。(01, 02, 03, 等。) lower-roman:小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman:大写罗马数字(I, II, III, IV, V, 等。) lower-alpha:小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha:大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek:小写希腊字母(alpha, beta, gamma, 等。) lower-latin:小写拉丁字母(a, b, c, d, e, 等。) upper-latin:大写拉丁字母(A, B, C, D, E, 等。) hebrew:传统的希伯来编号方式. armenian:传统的亚美尼亚编号方式. georgian:传统的乔治亚编号方式(an, ban, gan, 等。) cjk-ideographic:简单的表意数字。 hiragana：标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符） katakana：标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符） hiragana-iroha：标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号） katakana-iroha：标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）

5.6、CSS表格

使用 CSS 可以使 HTML 表格更美观。

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

table, th, td{
    border: 1px solid black;
}

请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse属性。

属性	描述
width	设置表格宽度。table/tr/td/th/thead/tfoot/tbody共有样式属性
height	设置表格高度table/tr/td/th/thead/tfoot/tbody共有样式属性注:我们一般仅仅只是给table设置总宽度即可;给tr设置高度
border	设置表格边框。table/td/th共有样式属性
border-collapse	设置是否把表格边框合并为单一的边框（table独有）。 collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
border-spacing	设置表格的边框间距。（table独有） length：规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
caption-side	指定表格标题的位置。（table独有） top：默认值。把表格标题定位在表格之上。 bottom：把表格标题定位在表格之下。
empty-cells	隐藏表中的空单元格的边框和背景。（table独有） hide：不在空单元格周围绘制边框。 show：在空单元格周围绘制边框。默认。
table-layout	设置表格的布局算法。（table独有） automatic：默认。列宽度由单元格内容设定。 fixed：列宽由表格宽度和列宽度设定。

练习:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fDrd0dXI-1637594225455)(images01_base/wps8.jpg)]

5.7、盒子模型

5.7.1、盒模型概述

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容（从内到外: 内容区域,内边距,边框,外边距）。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bk9kcKbR-1637594225456)(images01_base/wps9.png)]

不同部分的说明：

Margin(外边距)：清除边框外的区域，外边距是透明的。
Border(边框)：围绕在内边距和内容外的边框。
Padding(内边距)：清除内容周围的区域，内边距是透明的。
Content(内容区域)：盒子的内容，显示文本和图像。

重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

5.7.2、盒模型相关样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aE9ap2fW-1637594225457)(images01_base/1573477844775.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ERGUaXFB-1637594225457)(images01_base/1573477891461.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0feeXgRz-1637594225459)(images01_base/1573477906742.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uV6vdK5V-1637594225460)(images01_base/wps10.jpg)]

外边距的合并:

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

例如:当两个div,一个设置了距离底部50px,一个设置距离顶部30px，他俩之间的距离就是50px，而不是两者相加.

5.7.3、IE盒模型和W3C盒模型

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X3dqsYva-1637594225461)(images01_base/wps11.jpg)]

从上图可以看出，w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VFOOeDWM-1637594225462)(images01_base/wps12.jpg)]

从上图可以看出，IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border.

总结:

IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。我们说这是一个好消息因为这意味着此盒模型问题。

只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作。

另外，我们现在应该能理解了，css3的box-sizing属性给了开发者选择盒模型解析方式的权利。W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

5.8、CSS边框

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

边框相关样式属性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mh2V4DLx-1637594225464)(images01_base/1573478065492.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xyxG9ITN-1637594225465)(images01_base/1573478087889.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FR7VFVgX-1637594225466)(images01_base/1573478131718.png)]

注: 边框只需要记border或border-left/right/bottom/top即可;

练习:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wrudwpgw-1637594225468)(images01_base/1573477844771.jpg)]

5.9、CSS 轮廓

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

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

属性	描述
outline	在一个声明中设置所有的轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

在CSS3.0中,可以通过outline-offset来实现轮廓的外偏移(不能写在复合属性里面);

5.10、CSS 尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

5.11、CSS计数器

CSS 计数器通过一个变量来设置，根据规则递增变量。

CSS 计数器根据规则来递增变量。

CSS 计数器使用到以下几个属性：

counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

要使用 CSS 计数器，得先用 counter-reset 创建：

以下实例在页面创建一个计数器 (在 body 选择器中)，每个 <h2>元素的计数值都会递增，并在每个 <h2> 元素前添加 “Section <计数值>:”

body {
  counter-reset: section;
}
 
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

嵌套计数器

以下实例在页面创建一个计数器，在每一个<h1>元素前添加计数值 “Section <主标题计数值>.”, 嵌套的计数值则放在<h2> 元素的前面，内容为 “<主标题计数值>.<副标题计数值>”:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计数器实例</title>
<style>
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>


<h1>HTML 教程:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>

<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML 教程:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>

</body>
</html>

计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了 counters() 函数在不同的嵌套层级中插入字符串:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表计数器</title>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

<p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>

</body>
</html>

02_CSS进阶

一、CSS高级选择器(重点)

1.1、CSS 链接选择器 (UI伪类选择器)

CSS伪类是用来添加一些选择器的特殊效果。

语法

伪类的语法：

/*选择器:伪类选择器{}*/
selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

1.1.1、链接样式

不同的链接可以有不同的样式。

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

/* 未访问链接*/
a:link {
    color:#000000;
} 
/* 已访问链接 */
a:visited {
    color:#00FF00;
}
/* 鼠标移动到链接上 */
a:hover {
    color:#FF00FF;
} 
/* 鼠标点击时 */
a:active {
    color:#0000FF;
}

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面

**注意：**伪类的名称不区分大小写。

1.1.2、常见的链接样式

根据上述链接的颜色变化的例子，看它是在什么状态。

让我们通过一些其他常见的方式转到链接样式：

a:link {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:active {
    text-decoration:underline;
}

背景颜色属性指定链接背景色：

a:link {
    background-color:#B2FF99;
}
a:visited {
    background-color:#FFFF85;
}
a:hover {
    background-color:#FF704D;
}
a:active {
    background-color:#FF704D;
}

1.2、CSS分组和嵌套(交集)选择器

1.2.1、分组选择器

在样式表中有很多具有相同样式的元素。

h1{
    color:green;
}
h2{
    color:green;
}
p{
    color:green;
}

为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔。

h1,h2,p { color:green; }

1.2.2、交集选择器

选择既是某种类型又是某种类型的元素

p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

p.marked{
    text-decoration:underline;
}

1.3、CSS 组合选择符(CSS关系选择器)

组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS 中包含了四种组合方式:

后代选择器(以空格分隔)

子元素选择器(以大于号分隔）

相邻兄弟选择器（以加号分隔）

普通兄弟选择器（以破折号分隔）

1.3.1、后代选择器

后代选择器用于选取某元素的后代元素。

以下实例选取所有 <p>元素插入到 <div>元素中:

div p {
    background-color:yellow; /*选择div的所有后代p元素*/
}

1.3.2、子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p>：

div>p {
    background-color:yellow; /*选择div的所有子元素p元素*/
}

1.3.3、相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p {
    background-color:yellow; /*选择div之后紧邻的兄弟p元素*/
}

1.3.4、后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的所有兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p {
    background-color:yellow;
}

1.4、CSS属性选择器

选择器	示例	示例说明
attribute	[target]	选择所有带有target属性元素
attribute=value	[target=-blank]	选择所有使用target="-blank"的元素
attribute~=value	[title~=flower]	选择标题属性包含单词"flower"的所有元素[包含完整单词]

1.5、CSS伪元素选择器(和元素内容有关)

CSS伪元素是用来添加一些选择器的特殊效果。

语法

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

选择器	示例	示例说明
:first-letter	p:first-letter	用来指定元素第一个字母的样式。
:first-line	p:first-line	用来指定选择器第一行的样式。
:after	p:after	向选定的元素之后插入内容。
:before	p:before	向选定的元素前插入内容。

/*每个 <p>元素的第一个字母选择的样式：*/
p:first-letter{
    font-size:200%;
    color:#8A2BE2;
}

/*每个<p>元素的第一行选择的样式：*/
p:first-line{
	background-color:yellow;
}

/*伪元素可以结合CSS类： */
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>

/*每个 <p>元素之前插入内容：*/
p:before{
	content:"Before Context: ";
}

/*每个<p>元素之后插入内容：*/
p:after{
	content:"After Context: ";
}

注意::first-letter/:first-line选择器可以使用以下属性：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

1.6、CSS结构伪类选择器

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

p:first-child{
    color:blue;
}

在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：

p > i:first-child{
    color:blue;
}

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p>元素中的所有 <i>元素：

p:first-child i
{
    color:blue;
}

1.7、CSS焦点选择器

选择器	示例	示例说明
:focus	input:focus	选择具有焦点的输入元素

二、CSS元素显示类型及可见性

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：h1、p、div

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：span、a

2.1、CSS Display

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

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

其他：list-item/table/inline-table/table-cell/table-caption…，不过由于缺乏广泛支持或者支持程度不好，有的已经被删除或者很少使用；

2.2、CSS Visibility

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

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。

2.3、display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {
    visibility:hidden;
}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {
    display:none;
}

2.4、CSS鼠标样式

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。自定义图标必须满足两个要求: 1、大小必须是32*32 2、必须是ico图标
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。
not-allowed	禁用图标

<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p> 
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

三、CSS 定位(重点)

3.1、CSS 定位属性

position 属性指定了元素的定位类型。

position 属性的五个值：

static 静态定位,无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

relative 相对定位,对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

fixed 固定定位,对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

absolute 绝对定位,对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

sticky 粘性定位

元素具备了定位属性之后，可以使用的顶部top，底部bottom，左侧left和右侧right属性定位。(static除外)。他们也有不同的工作方式，这取决于定位方法。

属性	说明
position	指定元素的定位类型。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。

什么是文档流？

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

3.1.1、static 定位

static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

3.1.2、fixed 定位

fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动;

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

3.1.3、relative 定位

relative定位，又称为相对定位，从字面上来解析，我们就可以看出该属性的主要特性：相对。但是它相对的又是相对于什么地方而言的呢？这个是个重点，也是最让我迷糊的一个地方，现在让我们来做个测试，我想大家都会明白的：

(1) 初始未定位

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #first {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }

        #second {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
        }
    </style> 
</head>

<body> 
    <div id="first"> first</div> 
    <div id="second">second</div> 
</body>

</html>

初始原图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O1sAuKpq-1637594342458)(images02_advance/微信截图_20200724185759.png)]

(2) 我们修改first元素的position属性：

<style type="text/css">
#first {
    width: 200px;
    height: 100px;
    border: 1px solid red;
    /*add position*/
    position: relative;
    top: 20px;
    left: 20px;
}

#second {
    width: 200px;
    height: 100px;
    border: 1px solid blue;
}
</style>

偏移20px后：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nju7jvuA-1637594342460)(images02_advance/微信截图_20200724185916.png)]

– >> 虚线是初始的位置空间

现在看明白了吧，相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。

那好，我们知道了top / right / left / bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移，那么margin / padding会让该文档空间产生偏移吗？答案是肯定的，我们一起来做个试验吧：

(3) 添加margin属性：

<style type="text/css">
#first {
    width: 200px;
    height: 100px;
    border: 1px solid red;
    position: relative;
    top: 20px;
    left: 20px;
    /* add margin*/
    margin: 20px;
}

#second {
    width: 200px;
    height: 100px;
    border: 1px solid blue;
}
</style>

设置margin：20px后：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XP3SGetV-1637594342461)(images02_advance/微信截图_20200724190024.png)]

对比一下，是不是就很清晰了，我们先将first元素外边距设为20px，那么second元素就得向下偏移40px，所以margin是占据文档空间！同理，大家可以自己动手测下padding的效果吧！

3.1.4、absolute 定位

absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到<html>标签为止，这里还需要注意的是，relative和static方式在最外层时是以<body>标签为定位原点的，而absoulte方式在无父级是position非static定位时是以<html>作为原点定位。<html>和<body>元素相差9px左右。

我们来看下效果：

添加absoulte属性：

<html> 
<style type="text/css">
    html {
        border: 1px dashed green;
    }

    body {
        border: 1px dashed purple;
    }

    #first {
        width: 200px;
        height: 100px;
        border: 1px solid red;
        position: relative;
    }

    #second {
        width: 200px;
        height: 100px;
        border: 1px solid blue;
        position: absolute;
        top: 0;
        left: 0;
    }
</style> 

<body> 
    <div id="first">relative</div> 
    <div id="second">absoult</div> 
</body> 

</html>

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GKXuTlvb-1637594342462)(images02_advance/微信截图_20200725093411.png)]

哈哈，看了上面的代码后，细心的朋友肯定要问了，为什么absoulte定位要加 top:0; left:0; 属性，这不是多此一举呢？

其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递**，**简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~

少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：

如果top和bottom一同存在的话，那么只有top生效。

如果left和right一同存在的话，那么只有left生效。

既然absoulte是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：

在absoulte定位中添加margin / padding属性：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #first {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            position: relative;
            margin: 40px;
            padding: 40px;
        }

        #second {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>

<body>
    <div id="first">first 
        <div id="second">second</div> 
    </div> 
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSC4NB6j-1637594342463)(images02_advance/微信截图_20200725093909.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-imuyRyyR-1637594342465)(images02_advance/微信截图_20200725093945.png)]

看懂了，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。

3.1.5、sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

粘性定位实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sticky 定位</title>
<style>
div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
}
</style>
</head>

<body>
    <p>尝试滚动页面。</p>
    <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

    <div class="sticky">我是粘性定位!</div>

    <div style="padding-bottom:2000px">
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
    </div>

</body>
</html>

绝对定位和相对定位的区别：

1、绝对定位不会占据原本的位置,相对定位会占据原来位置

2、绝对定位相对于父元素定位,相对定位是相对于原本的位置定位

3.2、CSS元素堆叠顺序

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

属性	说明
z-index	设置元素的堆叠顺序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UT8jvuH8-1637594342466)(images02_advance/wps1.jpg)]

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

z-index 仅能在定位元素上奏效(重点)

3.3、CSS溢出处理

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

属性	说明
overflow	设置当元素的内容溢出其区域时发生的事情。
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域

如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。

这三个样式属性有四个共同的值:

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

设置不同 overflow 属性值：

div.ex1 {
    overflow: scroll;
}
 
div.ex2 {
    overflow: hidden;
}
 
div.ex3 {
    overflow: auto;
}
 
div.ex4 {
    overflow: visible;
}

3.4、CSS裁剪

如果图像大于包含它的元素，会发生什么？-clip属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。

注意：: 如果先有"overflow：visible"，clip属性不起作用。

属性值

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。

裁剪一张图像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            border: 1px solid black;
            /* overflow: hidden; */
            position: relative;
        }
        img{
            position: absolute;
            /* clip: rect(0,300px,200px,0); */
            clip: rect(75px,360px,275px,60px);
            left: -60px;
            top:-75px
        }
    </style>
</head>
<body>
    <div>
        <img src="images/paris.jpg" alt="">
    </div>
</body>
</html>

四、CSS浮动(重点)

4.1、CSS元素浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动：

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它（主要指的是图片）。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

img{
    float:right;
}

浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

彼此相邻的浮动元素：

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图片浮动</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" >
<img class="thumbnail" src="/images/klematis2_small.jpg">
<img class="thumbnail" src="/images/klematis3_small.jpg" >
<img class="thumbnail" src="/images/klematis4_small.jpg" >
<img class="thumbnail" src="/images/klematis_small.jpg">
<img class="thumbnail" src="/images/klematis2_small.jpg">
<img class="thumbnail" src="/images/klematis3_small.jpg">
<img class="thumbnail" src="/images/klematis4_small.jpg">
</body>
</html>

float案例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEnO9Sze-1637594342468)(images02_advance/微信截图_20200629141601.png)]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>浮动布局案例</title> 
<style>
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.header {
    background-color: #2196F3;
    color: white;
    text-align: center;
    padding: 15px;
}
.footer {
    background-color: #444;
    color: white;
    padding: 15px;
}
.topmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #777;
}
.topmenu li {
    float: left;
}
.topmenu li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
.topmenu li a:hover {
    background-color: #222;
}
.topmenu li a.active {
    color: white;
    background-color: #4CAF50;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.sidemenu {
    width: 25%;
}
.content {
    width: 75%;
}
.sidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sidemenu li a {
    margin-bottom: 4px;
    display: block;
    padding: 8px;
    background-color: #eee;
    text-decoration: none;
    color: #666;
}
.sidemenu li a:hover {
    background-color: #555;
    color: white;
}
.sidemenu li a.active {
    background-color: #008CBA;
    color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
  <li><a href="#home" class="active">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我们</a></li>
  <li><a href="#about">关于我们</a></li>
</ul>

<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>

  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Chania</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>底部文本</p>
</div>

</body>
</html>

4.2、CSS清除浮动

clear属性指定元素的左侧或右侧不允许浮动的元素。

“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”

元素盒子的边不能和前面的浮动元素相邻，那么就是自己下移。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。

4.3、CSS清除浮动影响的方式

清除浮动是每一个 web前端设计师必须掌握的技能。

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

下面总结5种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）：

4.3.1、给父级元素单独定义高度（height）

<style type="text/css">
    .div1 {
        background: #000080;
        border: 1px solid red;
        /*解决代码*/
        height: 200px;
    }

    .div2 {
        background: #800080;
        border: 1px solid red;
        height: 100px;
        margin-top: 10px
    }

    .left {
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD
    }

    .right {
        float: right;
        width: 30%;
        height: 80px;
        background: #DDD
    }
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

4.3.2、在标签结尾处(前)加空div标签 clear:both

<style type="text/css">
    .div1 {
        background: #000080;
        border: 1px solid red
    }

    .div2 {
        background: #800080;
        border: 1px solid red;
        height: 100px;
        margin-top: 10px
    }

    .left {
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD
    }

    .right {
        float: right;
        width: 30%;
        height: 80px;
        background: #DDD
    }

    /*清除浮动代码*/
    .clearfloat {
        clear: both
    }
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">
    div2
</div>

原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

4.3.3、父级div定义伪元素:after 和 zoom

<style type="text/css">
    .div1 {
        background: #000080;
        border: 1px solid red;
    }

    .div2 {
        background: #800080;
        border: 1px solid red;
        height: 100px;
        margin-top: 10px
    }

    .left {
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD
    }

    .right {
        float: right;
        width: 30%;
        height: 80px;
        background: #DDD
    }

    /*清除浮动代码*/
    .clearfloat:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0
    }

    .clearfloat {
        zoom: 1
    }
</style>
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

4.3.4、父级div定义 overflow:hidden

<style type="text/css">
    .div1 {
        background: #000080;
        border: 1px solid red;
        /*解决代码*/
        width: 98%;
        overflow: hidden
    }

    .div2 {
        background: #800080;
        border: 1px solid red;
        height: 100px;
        margin-top: 10px;
        width: 98%
    }

    .left {
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD
    }

    .right {
        float: right;
        width: 30%;
        height: 80px;
        background: #DDD
    }
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

4.3.5、父级div定义 overflow:auto

<style type="text/css">
    .div1 {
        background: #000080;
        border: 1px solid red;
        /*解决代码*/
        width: 98%;
        overflow: auto
    }

    .div2 {
        background: #800080;
        border: 1px solid red;
        height: 100px;
        margin-top: 10px;
        width: 98%
    }

    .left {
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD
    }

    .right {
        float: right;
        width: 30%;
        height: 80px;
        background: #DDD
    }
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

五、CSS对齐方式

5.1、元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;或margin:0 auto。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

5.2、文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

.center {
    text-align: center;
    border: 3px solid green;
}

5.3、左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

5.4、左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

当像这样对齐元素时，对 <body>元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

5.5、文本垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部底部使用 padding:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

5.6、文本垂直居中 - 使用 line-height

line-height和height保持一致即可；

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

5.7、垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

<style>
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>

<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>

<div class="center">
  <p>我是水平和垂直居中的。</p>
</div>

<p>注意: IE8 及更早版本不支持 transform 属性。</p>

六、CSS精灵截图技术(CSS 图像拼合技术)

6.1、什么是css sprites

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。

其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

css sprites是什么通俗解释：

CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

6.2、适用场合

1、适合：一般小图标素材:

小的图标ico类素材，一般图标很小十多像素几十像素的宽度高度，这种适合拼合成一张图实现sprites background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数，但很快加载完又会释放。

ICO是Windows的图标文件格式，图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。

2、不适合：大图大背景:

大背景一般用于网页背景，拼合时，设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小，网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些，所以大图不推荐拼接拼合来使用css sprites背景定位布局。

3、sprites适合推荐小结:

一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。

6.3、css sprites优势与缺点劣势

1、sprites优势：

若干小图标拼合成一张图后布局，减少http请求数，对于大战大流量网站来说隐形优势很显然的，从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵，使用DIV+CSS Sprites这样可以大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因，同时也减少图片文件数目。

2、sprites缺点

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGREX29b-1637594342470)(images02_advance/wps8.jpg)]

CSS Sprites在开发的时候比较麻烦，你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐;

CSS Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。

由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

3、推荐小结

由于拼接图片需要一定经验技巧（做实践即可快速掌握）、测量定位数值、修改不是那么灵活等原因，一般小网站站、小流量网站、一般企业网站不是很推荐使用CSS Sprites，因为使用CSS Sprites会比普通单个背景图片布局要耗费时间和精力，所以不是很推荐小站。

但这个布局技巧也必须要学会掌握灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐使用，这样比较值得。

6.4、实例教程

6.4.1、素材与要实现效果截图(拼合ico图标素材实现列表不同图标效果截图)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2OGelXqy-1637594342471)(images02_advance/wps9.jpg)]

6.4.2、sprites实例教程解释介绍

首先这些图标素材是放在同一张图片上（PS拼合），然后实现成列表类布局，列表每个前图标不同。使用div css sprites实现此布局（其实使用background样式实现）。

首先此列表布局我们使用ul li列表布局，每个li站一行排版，对ul设置padding实现四周内容与边框一定间距效果，因为每个li前面图标不同，但此背景图片是拼合在一张图片上，所以这里做li里开始使用span标签实现这个不同图标效果，每个图标不同为了区别span所以对span设置不同class，不同class对应设置定位相应的图标。

6.4.3、实例教程

sprites案例图片素材:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nrIxbREe-1637594342472)(images02_advance/wps10.jpg)]

实例代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/>
    <style>
        .sprites div {
            margin: 5px;
        }
        .sprites span {
            float: left;
            width: 20px;
            height: 20px;
            background-image: url(sprite.png);
            background-size: 60px 40px;
        }
        .sprites1{
            background-position: 0 0;
        }
        .sprites2{
            background-position: -20px 0;
        }
        .sprites3{
            background-position: 0 -20px;
        }
        .sprites4{
            background-position: -20px -20px;
        }
        .sprites5{
            background-position: -40px 0;
        }
        .sprites6{
            background-position: -40px -20px;
        }
    </style>
</head>
<body>
<div class="sprites">
    <div><span class="sprites1"></span>付款图标</div>
    <div><span class="sprites2"></span>删除图标</div>
    <div><span class="sprites3"></span>存款图标</div>
    <div><span class="sprites4"></span>粘贴图标</div>
    <div><span class="sprites5"></span>笑脸图标</div>
    <div><span class="sprites6"></span>编辑图标</div>
</div>
</body>
</html>

sprites实例效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NMiuz3sy-1637594342473)(images02_advance/wps11.jpg)]

说明：背景background-position有两个数值，前一个代表靠左距离值（可为正可为负），第二个数值代表靠上距离值（可为正可为负）。当为正数时，代表背景图片作为对象盒子背景图片时靠左和靠上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。

七、样式应用实例

7.1、导航栏

7.1.1、导航栏基本结构

熟练使用导航栏，对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul>和 <li>元素非常有意义：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l2LMgXfb-1637594342475)(images02_advance/微信截图_20200630092746.png)]

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

现在，让我们从列表中删除边距和填充：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

例子解析：

list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0

上面的例子中的代码是垂直和水平导航栏使用的标准代码。

7.1.2、垂直导航栏

上面的代码，我们只需要 <a>元素的样式，建立一个垂直的导航栏：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QudHFGaD-1637594342476)(images02_advance/微信截图_20200630092105.png)]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>垂直导航栏</title> 
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}
</style>
</head>

<body>
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>

    <p>背景颜色添加到链接中显示链接的区域</p>
    <p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>
</html>

示例说明：

display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

激活/当前导航条实例

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

.active {
    background-color: #4CAF50;
    color: white;
}

创建链接并添加边框

可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。

可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>带边框垂直导航</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
    <h2>垂直导航条</h2>
    <p>以下实例让每个链接居中，并给每个列表选项添加边框。</p>

    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>

</body>
</html>

全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nxgWGysK-1637594342477)(images02_advance/微信截图_20200630092923.png)]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全屏高度的固定导航条</title>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>

    <div style="margin-left:25%;padding:1px 16px;height:1000px;">
      <h2>Fixed Full-height Side Nav</h2>
      <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
      <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
      <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
    </div>

</body>
</html>

7.1.3、水平导航栏

有两种方法创建横向导航栏。使用**内联(inline)或浮动(float)**的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

建立一个横向导航栏的方法之一是指定元素，上述代码是标准的内联:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TIZYGr2G-1637594342478)(images02_advance/微信截图_20200630093704.png)]

<ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>

ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
li{
	display:inline;
}

浮动列表项

在上面的例子中链接有不同的宽度。

对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：

ul{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li{
	float:left;
}
a{
	display:block;
	width:60px;
	background-color:#dddddd;
}

水平导航条实例

创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hW1VyBZL-1637594342480)(images02_advance/微信截图_20200630093813.png)]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平导航条</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>

    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>

</body>
</html>

激活/当前导航条实例

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

链接右对齐

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SsRDQlEM-1637594342481)(images02_advance/微信截图_20200630093935.png)]

将导航条最右边的选项设置右对齐 (float:right;)：

<li style="float:right"><a class="active" href="#about">关于</a></li>

添加分割线

<li> 通过 border-right 样式来添加分割线:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hn0f0obA-1637594342483)(images02_advance/微信截图_20200630094026.png)]

/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}

灰色水平导航条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mr0svgeQ-1637594342484)(images02_advance/微信截图_20200630094058.png)]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>灰色水平导航条</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

7.1.4、固定导航条

可以设置页面的导航条固定在头部或者底部：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X7NX11r0-1637594342485)(images02_advance/微信截图_20200630094133.png)]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定导航条</title>
<style>
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

固定在底部

ul {     
    position: fixed;     
    bottom: 0;     
    width: 100%; 
}

7.2、下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

7.2.1、基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5grGxjOg-1637594342487)(images02_advance/微信截图_20200630094215.png)]

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例</title>
<meta charset="utf-8">
<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜单项1</p>
    <p>菜单项2</p>
	<p>菜单项3</p>
  </div>
</div>

</body>
</html>

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

7.2.2、链接下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项：

这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例</title>
<meta charset="utf-8">
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="//www.baidu.com">百度一下 1</a>
    <a href="//www.baidu.com">百度一下 2</a>
    <a href="//www.baidu.com">百度一下 3</a>
  </div>
</div>

</body>
</html>

7.3、导航条下拉

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2FpaweVX-1637594342488)(images02_advance/微信截图_20200630094315.png)]

<!DOCTYPE html>
<html>
<head>
<title>导航条下拉菜单</title>
<meta charset="utf-8">
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover, .dropbtn {
    background-color: #111;
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </div>
</ul>

<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>
</html>

7.4、图片廊

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jSV8IqYB-1637594342489)(images02_advance/微信截图_20200630094311.png)]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图片廊</title>  
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="">
      <img src="images/demo1.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="">
      <img src="images/demo2.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="">
      <img src="images/demo3.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="">
      <img src="images/demo4.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

</body>
</html>

7.5、表单

一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o73i4YpS-1637594342490)(images02_advance/微信截图_20200630094516.png)]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表单案例</title> 
</head>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>使用 CSS 来渲染 HTML 的表单元素</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">用户名</label>
    <input type="text" id="userName" name="userName" placeholder="请输入用户名">

    <label for="lname">密码</label>
    <input type="text" id="userPwd" name="userPwd" placeholder="请输入密码">

    <label for="country">国家</label>
    <select id="country" name="country">
      <option value="china">请选择国籍</option>
      <option value="china">中国</option>
      <option value="australia">澳大利亚</option>
      <option value="canada">加拿大</option>
      <option value="usa">美国</option>
    </select>
  
    <input type="submit" value="提交">
  </form>
</div>

</body>
</html>

输入框填充

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

输入框(input) 边框

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

如果你只想添加底部边框可以使用 border-bottom 属性:

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

输入框(input) 颜色

可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色：

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

输入框(input) 聚焦

默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。

使用 :focus 选择器可以设置输入框在获取焦点时的样式：

input[type=text]:focus {
  background-color: lightblue;
}

输入框(input) 图标

如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间：

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

文本框（textarea）样式

注意: 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。

03_CSS高级

CSS 用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

一、CSS3新增选择器

1.1、CSS3属性选择器

选择器	示例	示例说明
attribute^=value	a[src^=“https”]	选择每一个src属性的值以"https"开头的元素
attribute$=value	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素
attribute*=value	a[src*=“runoob”]	选择每一个src属性的值包含子字符串"runoob"的元素

1.2、CSS3结构伪类选择器

选择器	示例	示例说明
:first-of-type	p:first-of-type	匹配元素其父级是特定类型的第一个子元素。
:last-of-type	p:last-of-type	匹配元素其父级是特定类型的最后一个子元素。
:only-of-type	p:only-of-type	匹配元素其没有其他相同类型的兄弟元素。
:only-child	p:only-child	匹配属于父元素中唯一子元素的元素。
:nth-child(n)	p:nth-child(2)	匹配父元素中的第 n 个子元素，元素类型没有限制。 n 可以是一个数字，一个关键字，或者一个公式。
:nth-last-child(n)	p:nth-last-child(2)	匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是一个数字，一个关键字，或者一个公式。
:nth-of-type(n)	p:nth-of-type(2)	匹配同类型中的第n个同级兄弟元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	匹配同类型中的倒数第n个同级兄弟元素。
:last-child	p:last-child	用来匹配父元素中最后一个子元素。

/*选择的 p 元素是其父元素的第一个 p 元素：*/
p:first-of-type{
    background:#ff0000;
}

/*指定其父级的最后一个p元素的背景色：*/
p:last-of-type{
background:#ff0000;
}

/*指定属于父元素的特定类型的唯一子元素的每个 p 元素：：*/
p:only-of-type{
    background:#ff0000;
}

/*匹配属于父元素中唯一子元素的 p 元素:*/
p:only-child{
    background:#ff0000;
}

/*指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：*/
p:nth-child(2){
    background:#ff0000;
}
/*奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：*/
p:nth-child(odd)
{
    background:#ff0000;
}
p:nth-child(even)
{
    background:#0000ff;
}
/*使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。 在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：*/
p:nth-child(3n+0){
    background:#ff0000;
}

/*指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色：*/
p:nth-last-child(2){
    background:#ff0000;
}

/*指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：*/
p:nth-of-type(2){
background:#ff0000;
}

/*指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色：*/
p:nth-last-of-type(2){
	background:#ff0000;
}

/*指定父元素中最后一个p元素的背景色：*/
p:last-child{
background:#ff0000;
}

1.3、CSS3伪元素选择器

选择器	示例	示例说明
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分

1.4、CSS3表单选择器

选择器	示例	示例说明
:enabled	input:enabled	匹配每个启用的的元素（主要用于表单元素）。
:disabled	input:disabled	匹配每个禁用的的元素（主要用于表单元素）。
:checked	input:checked	匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
:read-write	input:read-write	用于匹配可读及可写的元素:read-write 选择器选取没有设置 “readonly” 属性的元素。
:read-only	input:read-only	用于匹配设置 “readonly”（只读）属性的元素；read-only选择器选取设置 “readonly” 属性的元素。
:optional	input:optional	用于匹配可选的输入元素用于匹配没有设置了 “required” 属性的元素
:required	input:required	用于匹配设置了 “required” 属性的元素
:in-range	input:in-range	用于标签的值在指定区间值时显示的样式。
:out-of-range	input:out-of-range	用于标签的值在指定区间之外时显示的样式。
:invalid	input:invalid	选择所有无效的元素
:valid	input:valid	选择所有有效值的属性

/*设置所有type="text"的启用的输入元素的背景颜色：*/
input[type="text"]:enabled{
	background:#ffff00;
}

/*文本输入框禁用设置背景*/
input[type="text"]:disabled{
	background:#dddddd;
}

/*为所有选中的输入元素设置背景颜色：*/
input:checked {
    height: 50px;
    width: 50px;
}

/*如果 input 元素不是只读，即没有 "readonly" 属性，设置输入框样式为黄色:*/
input:read-write{
	background-color: yellow;
}

/*如果 input 元素设置了 "readonly" 属性，设置输入框样式为黄色:*/
input:read-only{
	background-color: yellow;
}

/*如果 input 元素没有设置 "required" 属性，设置其为黄色:*/
input:optional{
	background-color: yellow;
}

/*如果 input 元素设置了 "required" 属性，设置其为黄色:*/
input:required{
	background-color: yellow;
}

/*输入的值在指定区间内时，设置指定样式:*/
<input type="number" min="5" max="10" value="7" />
input:in-range{
	border:2px solid yellow;
}

/*输入的值在指定区间外时，设置指定样式:*/
input:out-of-range{
	border:2px solid red;
}

/*如果 input 元素中的值是非法的，设置样式为红色：*/
<input type="email" value="supportEmail" />
input:invalid{
	border:2px solid red;
}
/*如果 input 元素中输入的值为合法的，设置其为黄色:*/
input:valid{
	background-color: yellow;
}

1.5、CSS3其他选择器

选择器	示例	示例说明
:root	:root	匹配文档的根元素。
:empty	p:empty	选择每个没有任何子级的元素（包括文本节点）。
:target	#news:target	在一个文件中链接到某个元素的URL。元素被链接到目标元素。:target选择器可用于当前活动的target元素的样式。
:not(selector)	:not§	匹配每个元素是不是指定的元素/选择器。

/*设置HTML文档的背景色：*/
:root{
    background:#ff0000;
}

/*指定空的p元素的背景色：*/
p:empty{
    background:#ff0000;
}

/*高亮显示锚点或id区域*/
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
 p:target{
     font-weight: bold;
     color: red;
}

/*为每个并非<p>元素的元素设置背景颜色：*/
:not(p){
	background:#ff0000;
}

二、CSS3颜色表示方法

1、RGBA方式三原色配色方式:

在RGB模式上新增了Alpha透明度。

alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ogPPF3CH-1637594380480)(images03_higher/wps1.jpg)]

2、HSL模式:

语法:HSL(H,S,L)，HSL分别表示色调，饱和度，亮度

H:0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S:(饱和度)。取值为：0.0% - 100.0%

L:(亮度)。取值为：0.0% - 100.0%

3、HSLA模式:

HSL模式上新增了Alpha透明度。

4、transparent

transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。

在CSS3中，transparent被延伸到任何一个有color值的属性上。IE8及以下，color属性值为transparent时，文本显示为黑色。

三、CSS3边框(重要)

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。

3.1、CSS3边框圆角

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。

在 CSS3 中，很容易创建圆角。

在 CSS3 中 border-radius 属性被用于创建圆角：使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角。

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角。

一个值：四个圆角值相同。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S7ITKBma-1637594380481)(images03_higher/wps2.jpg)]

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

div
{
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:300px;
	border-radius:25px;
}
<div>border-radius 属性允许您为元素添加圆角边框！ </div>

3.2、CSS3边框阴影(盒子阴影)

box-shadow属性可以设置一个或多个下拉阴影的框。

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

boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影外延伸的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影，(默认值为outset)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BSd0jOSD-1637594380487)(images03_higher/wps3.jpg)]

div{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}

3.3、CSS3图片边框

CSS3中我们可以使用图片作为元素的边框。

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置none 没有图像被使用image 边框使用图像的路径
border-image-slice	图像边界向内偏移(值,直接写数值,九宫格每一份的大小)此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。
border-image	简写属性,用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。

属性分析:

border-image-source：

边框背景图片。格式为：url(“…”)。

border-image-slice：

图片边框向内偏移的距离。格式：border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AbdXmNyB-1637594380489)(images03_higher/wps4.png)]

该距离接受数值，百分数。默认数值的单位是px,但是不能在数值后面加px，否则这句css将不被浏览器解析。

用法和margin，padding类似。这里以数值举例，百分数同理。

border-image-slice: 10; /距离上下左右均为10px;/

border-image-slice: 10 30; /距离上下10px,左右30px;/

border-image-slice: 10 30 20; /距离上10px,下20px,左右30px;/

border-image-slice: 10 30 20 40; /距离上10px,右30px,下20px,左40px;/

四条线将背景图分割成了9个部分，其中1,2,3,4,6,7,8,9这八个区域将会被切割，作为图片边框，如果除了设置数值或者百分数，还加了一个“fill”，那么区域5就会作为背景填充进元素content，如：

border-image-slice: 25 11 fill;

注意：slice不接受负值；如果slice切割的左右距离之和大于背景图的宽，则上下边框不显示。如果slice切割的上下距离之和大于背景图的高，则左右边框不显示。

border-image-width：

图片边框的宽度。只接受数值，且不能加单位。

border-image-repeat：

图像边框是否应平铺(repeat)、铺满(rounded)或拉伸(stretch)。而无论怎样铺，四个角，即区域1,3,7,9是不会重复铺，只会被相应拉伸。下面以最为经典的图为例吧：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r2c9Tx3Y-1637594380490)(images03_higher/wps5.jpg)]

stretch(默认值)：

.box{
    width: 50px;
    height: 50px;
    border: 40px solid transparent;
    border-image-source: url("img/border.png");
    border-image-slice: 27 fill;
    border-image-repeat: stretch;
}

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

效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ScfWvBo-1637594380492)(images03_higher/wps6.jpg)]

可以看到每个区域都被横向和纵向拉伸了

repeat:

.box{
    width: 100px;
    height: 100px;
    border: 40px solid transparent;
    border-image-source: url("img/border.png");
    border-image-slice: 27 fill;
    border-image-repeat: repeat;
}

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

效果图如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AQzSzihI-1637594380493)(images03_higher/wps7.jpg)]

可以看到背景在以原形状等比例缩放以后，持续平铺，容易出现断层。

round:

.box{
    width: 100px;
    height: 100px;
    border: 40px solid transparent;
    border-image-source: url("img/border.png");
    border-image-slice: 27 fill;
    border-image-repeat: round;
}

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

效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdtikXV1-1637594380494)(images03_higher/wps8.jpg)]

同样是重复平铺，但是round会处理得更平滑，不会出现断层情况，因此round通常比repeat更常用。

border-image-outset:

边框图像区域超出边框的量。格式：border-image-outset : length | number。length是数值加单位“px”，number指的是相对于边框宽度增加的倍数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片边框</title>
<style>
div
{
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
}

#round
{
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image:url(border.png) 30 30 round;
}

#stretch
{
    -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 stretch; /* Opera */
    border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材：</p>
<img src="/images/border.png" />

</body>
</html>

四、CSS3背景

4.1、CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

也可以通过复合属性来实现;

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

4.2、CSS3 background-size 属性

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。

值	描述
像素值	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
百分比	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

改变背景图片大小:

div {
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

伸展背景图像完全填充内容区域：

div {
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

4.3、CSS3的background-origin属性

background-Origin属性指定了背景图像的位置区域。

值	描述
padding-box	背景图像填充框的相对位置（默认值）
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

content-box, padding-box,和 border-box区域内可以放置背景图像。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9jm5bFQ3-1637594380496)(images03_higher/wps9.jpg)]

在 content-box 中定位背景图片：

div {
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

4.4.、CSS3 background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}

五、CSS3渐变

5.1、CSS3渐变概述

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

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

5.2、CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法:

background-image: linear-gradient(direction/degree,color-stop1 占比, color-stop2 占比, ...);

direction方向：渐变的方向位置，属性值可以为(to)left、right、top、bottom(可组合使用)

角度：渐变终止方向的角度，角度以deg表示

起始颜色…

终止颜色… (颜色可以是多个)

5.2.1、线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

5.2.2、线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad { height: 200px; background-image: linear-gradient(to right, red , yellow); }

5.2.3、线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

#grad { height: 200px; background-image: linear-gradient(to bottom right, red, yellow); }

5.2.4、使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-09fT283h-1637594380497)(images03_higher/wps10.jpg)]

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

#grad { background-image: linear-gradient(-90deg, red, yellow); }

5.2.5、使用多个颜色结点(可以设置值改变占据大小)

下面的实例演示了如何设置多个颜色结点：

#grad {background-image: linear-gradient(red, yellow, green); }

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

#grad { /* 标准的语法 */ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }

5.2.6、使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

5.2.7、重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>重复渐变</title>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}
</style>
</head>
<body>

<h1>重复的线性渐变</h1>

<div id="grad1"></div>

<p>45deg:</p>
<div id="grad2"></div>

<p>190deg:</p>
<div id="grad3"></div>

<p>90deg:</p>
<div id="grad4"></div>

<p><strong>注意:</strong> Internet Explorer 9 及更早版本的 IE 浏览器不支持线性渐变。</p>

</body>
</html>

5.3、CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

形状:ellipse（椭圆）/circle（圆形）

大小(半径)：属性值可用像素或关键字表示(圆形演示)

closest-side:圆心到距离最近的边

farthest-side:圆心到距离最远的边

closest-corner：圆心到距离最近的角

farthest-corner：圆心到距离最远的角

发散方向：属性值可以为(at)left、right、top、bottom、center(可组合使用)，像素，百分比

起始颜色…

终止颜色…

5.3.1、径向渐变 - 颜色结点均匀分布（默认情况下）

颜色结点均匀分布的径向渐变：

#grad { background-image: radial-gradient(red, yellow, green); }

5.3.2、径向渐变 - 颜色结点不均匀分布

颜色结点不均匀分布的径向渐变：

#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }

5.3.3、设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

形状为圆形的径向渐变：

#grad { background-image: radial-gradient(circle, red, yellow, green); }

5.3.4、不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side:圆心到距离最近的边

farthest-side:圆心到距离最远的边

closest-corner：圆心到距离最近的角

farthest-corner：圆心到距离最远的角

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变尺寸</title>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>
<h3>径向渐变 - 不同尺寸大小关键字的使用</h3>
<p><strong>closest-side：</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side：</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner：</strong></p>
<div id="grad3"></div>

<p><strong>farthest-corner（默认）：</strong></p>
<div id="grad4"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

5.3.5、重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

#grad1 {height: 200px;background-image: repeating-radial-gradient(red, yellow 10%, green 15%);}

5.4、渐变练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZeoDvVpu-1637594380499)(images03_higher/wps11.jpg)]

六、CSS3 文本效果

6.1、CSS3 的文本阴影

CSS3 中，text-shadow属性适用于文本阴影。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

给标题添加阴影:

h1 { 
    text-shadow: 5px 5px 5px #FF0000; 
}

6.2、CSS3 box-shadow属性

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

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

6.2.1、设置盒子阴影

div { box-shadow: 10px 10px 5px grey; }

6.2.2、使用阴影实现文字卡片效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字卡片</title>
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}
</style>
</head>
<body>

<h2>卡片</h2>

<p>box-shadow 属性用来可以创建纸质样式卡片:</p>

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

</body>
</html>

6.2.3、使用阴影实现图片卡片效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片卡片效果</title>
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h2> 卡片</h2>

<p>box-shadow属性可以用来创建纸质样式卡片:</p>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

</body>
</html>

6.3、CSS3 text-overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。(只在 Firefox 浏览器下有效)

p.test1 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}

p.test2 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}

6.4、CSS3单词拆分换行

word-break 规定非中日韩文本的换行规则。

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

<style>
p.test1
{
    width:9em;
    border:1px solid #000000;
    word-break:keep-all;
}

p.test2
{
    width:9em;
    border:1px solid #000000;
    word-break:break-all;
}
</style>

<p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
<p class="test2"> This paragraph contains some text: The lines will break at any character.</p>

<p><b>注意:</b>  word-break 属性不兼容 Opera.</p>

七、CSS3字体(服务器端字体)

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style>
    @font-face {
        font-family: myFirstFont;
        src: url(sansation_light.woff);
    }
    div {
        font-family:myFirstFont;
    }
</style>

八、CSS3 2D和3D转换

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

它是如何工作？

转换的效果是让某个元素改变形状，大小和位置。

您可以使用 2D 或 3D 转换来转换您的元素。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-83Duc1G3-1637594380500)(images03_higher/微信截图_20200627195410.png)]

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

浏览器坐标轴:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LdUKL3DX-1637594380502)(images03_higher/xyz.jpg)]

8.1、CSS3 2D 转换

新转换属性:

Property	描述
transform	适用于2D或3D转换的元素

2D 转换方法:

函数(transform样式值)	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。x和y是像素值;可以是正数值,也可以是负数值
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。x和y是数值,表示放大或缩小的倍数;
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

8.1.1、translate() 方法

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

div {
    transform: translate(50px,100px);

    /* IE 9 */
    -ms-transform: translate(50px,100px);

    /* Safari and Chrome */
    -webkit-transform: translate(50px,100px);
}

私有前缀解释:

上面的例子,我们可以发现一条样式规则出现了好几次,这是为了因为兼容不同的浏览器。

CSS3目前很多新增属性尚未被W3C列为标准，对这些暂时未被公布为标准的属性，各家浏览器会在属性前加上前缀词，也将其称之为浏览器的私有前缀。

W3C官方认为试验阶段的属性仅为了测试，未来可能修改或删除。

现在主要流行的浏览器内核有：

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

手机等移动端一般是IOS和安卓系统，基本上采用的都是webkit引擎。

浏览器的私有前缀:

Webkit内核：前缀为-webkit-

Trident内核：前缀为-ms-

Gecko内核：前缀为-moz-

Presto内核：前缀为-o-

8.1.2、rotate() 方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

rotate值（30deg）元素顺时针旋转30度。

div{
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

https://blog.csdn.net/u011537053/article/details/51151978?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduend~default-1-51151978.nonecase&utm_term=css3x轴y轴讲解

8.1.3、scale() 方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

div { 
    -ms-transform:scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* 标准语法 */
}

8.1.4、skew() 方法

语法：

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

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

skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

div{
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

8.1.5、matrix() 方法(推荐多值写法,空格隔开)

matrix()方法把2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

接收 6 个参数：a、b、c、d、e、f

其计算规则为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LuMpGZYf-1637594380504)(images03_higher/微信截图_20200627201322.png)]

其中，x 和 y 表示变换前矩阵偏移元素中心点的坐标；x‘ = ax + cy + e 和 y‘ = bx + dy + f 分别表示变换后的坐标。

中心点的坐标固定为(0, 0)，这个值与 transform-origin 的值无关；也就是说，即使 transform-origin 的值从默认的 50% 50% 被指定为（假设）30px 30px ，其意为坐标 (0, 0) 从 50% 50% 的位置移动到 30px 30px 的位置； 30px 30px 这个点是新的中心点，其坐标为 (0, 0) 。

假设 matrix(1,0,0,1,30,30) ;

那么 x‘ 和 y‘ 分别等于 x + 30 和 y +30 ；

也就是说，经过矩阵转换之后，(0, 0) 变成 (30, 30) ，(1, 1) 变成 (31, 31) ，以此类推。。。直到变换元素所有的坐标都经过变化之后，在新的位置上组成了一个新的图形。

其结果与 translate(30px, 30px) 完全相同。

利用matrix()方法旋转div元素30°

div { 
	transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
}

div { 
    transform:scale(2,3); 
    rotate(30deg); 
}

深入理解矩阵:https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

8.2、transform-origin

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

语法

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值：left/center/right/length/%
y-axis	定义视图被置于 Y 轴的何处。可能的值：left/center/right/length/%
z-axis	定义视图被置于 Z 轴的何处。可能的值：length

案例演示（理解）：

<!DOCTYPE html>
<html>
	<head>
		<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
</style>
		<script>
			function changeRot(value)
{
document.getElementById('div2').style.transform="rotate(" + value + "deg)";
document.getElementById('div2').style.msTransform="rotate(" + value + "deg)";
document.getElementById('div2').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('div2').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('div2').style.OTransform="rotate(" + value + "deg)";
document.getElementById('persp').innerHTML=value + "deg";
}

function changeOrg()
{
var x=document.getElementById('ox').value;
var y=document.getElementById('oy').value;
document.getElementById('div2').style.transformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.msTransformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.webkitTransformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.MozTransformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.OTransformOrigin=x + '% ' + y + '%';
document.getElementById('origin').innerHTML=x + "% " + y + "%";            
}
</script>
	</head>

	<body>

		<p>Rotate the red div element, try changing its X-axis and Y-axis:</p>

		<div id="div1">
			<div id="div2">HELLO</div>
		</div>

		Rotate:
		<input type="range" min="-360" max="360" value="45" οnchange="changeRot(this.value)" />
		transform: rotateY:(<span id="persp">45deg</span>);
		<br><br>
		X-axis:<input type="range" min="-100" max="200" value="20" οnchange="changeOrg()" id="ox" /><br>
		Y-axis:<input type="range" min="-100" max="200" value="40" οnchange="changeOrg()" id="oy" />
		transform-origin: <span id="origin">20% 40%</span>;

	</body>
</html>

8.3、CSS3 3D 转换(了解)

CSS3 允许您使用 3D 转换来对元素进行格式化。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GzqptGrq-1637594380507)(images03_higher/微信截图_20200627203034.png)]

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

8.2.1、案例

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。

定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。

注意：perspective 属性只影响 3D 转换元素。

值: 像素值，元素距离视图的距离，以像素计。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #div0{
        width: 300px;
        margin: 30px;
        border: 2px solid red;
        perspective:1000px;
        background: red;
    }
    #div1,#div2,#div3{
        width: 200px;
        height: 150px;
        font-size: 50px;
        margin: 30px auto;
        background: green;
    }

    #div1:hover{
    /*transform: translate3d(0,0,-300px);*/
        transform:translateZ(-500px);
    }
    #div2:hover{
        transform: rotate3d(0,1,0,45deg);
        transform-origin:right;
    }

    #div3:hover{
        transform: scaleZ(2) rotateX(60deg);
        transform-origin:top;
    }

    body{
        perspective:1000px;
    }

    #div0:hover{
        transform:rotateX(45deg);
        -webkit-transform:rotateX(45deg);
        -moz-transform:rotateX(45deg);
        -o-transform:rotateX(45deg);
        -ms-transform:rotateX(45deg);
    }
  </style>
 </head>
 <body>
  <div id="div0">
      <div id="div1">3D平移</div>
      <div id="div2">3D旋转</div>
      <div id="div3">3D缩放</div>
    </div>
 </body>
</html>

九、CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。（以秒或毫秒计）
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。 linear：规定以相同速度开始至结束的过渡效果。 ease:规定慢速开始，然后变快，然后慢速结束的过渡效果。 ease-in：规定以慢速开始的过渡效果。 ease-out：规定以慢速结束的过渡效果。 ease-in-out：规定以慢速开始和结束的过渡效果。
transition-delay	规定过渡效果何时开始。默认是 0。

应用于宽度属性的过渡效果，时长为 2 秒：

div {
	transition: width 2s;
}

/*注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：规定当鼠标指针悬浮(:hover)于 <div>元素上时：*/
div:hover {
	width: 400px;
}

多项改变:

要添加多个样式的变换效果，添加的属性由逗号分隔：

<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
</style>

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div>鼠标移动到 div 元素上，查看过渡效果。</div>

在一个例子中使用所有过渡属性：

<style>
div
{
    width:100px;
    height:100px;
    background:red;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

div:hover
{
    width:200px;
}

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：

div{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

十、CSS3 动画(关键帧动画)

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

10.1、CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。 linear：动画从头到尾的速度是相同的。 ease：默认。动画以低速开始，然后加快，在结束前变慢。 ease-in：动画以低速开始。 ease-out：动画以低速结束。 ease-in-out：动画以低速开始和结束。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式(不设置)。
animation-delay	规定动画何时开始。默认是 0。定义动画开始前等待的时间，以秒或毫秒计。
animation-iteration-count	规定动画被播放的次数。默认是 1。 n：一个数字，定义应该播放多少次动画 infinite 指定动画应该播放无限次（永远）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。normal 默认值。动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。 alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

10.2、CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

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

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst {
	from {background: red;}
	to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */ {
	from {background: red;}
	to {background: yellow;}
}

10.3、CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

div {
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

10.4、百分比关键帧动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

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

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

改变背景色和位置：

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

10.5、设置所有的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>所有属性效果</title>
<style>
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

与上面的动画相同，但是使用了简写的动画 animation 属性：

div{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

十一、Flex 布局(核心)

11.1、Flex 布局是什么

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{  
    display: flex;
}

行内元素也可以使用 Flex 布局。

.box{  
    display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{  
    display: -webkit-flex; /* Safari */  
    display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

总结如下：

（1）.对于它们的内部的项目没有任何区别，也就是效果完全一样。

（2）.对于容器div自身来说，一个表现为块级元素，一个表现为块级内联元素。

11.2、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zCwXww6Y-1637594380509)(images03_higher/wps12.jpg)]

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

11.3、容器样式属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

11.3.1、flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {  flex-direction: row | row-reverse | column | column-reverse;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SqD8sl6j-1637594380510)(images03_higher/wps13.jpg)]

它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

11.3.2、flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScQQjvYq-1637594380513)(images03_higher/wps14.jpg)]

.box{  flex-wrap: nowrap | wrap | wrap-reverse;}

它可能取三个值。

（1）nowrap（默认）：不换行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkhVnf8O-1637594380515)(images03_higher/wps15.jpg)]

（2）wrap：换行，第一行在上方。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vLoNS1S9-1637594380517)(images03_higher/wps16.jpg)]

（3）wrap-reverse：换行，第一行在下方。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RTCBEhcn-1637594380519)(images03_higher/wps17.jpg)]

11.3.3、flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {  
    flex-flow: flex-direction || flex-wrap;
}

11.3.4、justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {  
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tKTYcYcy-1637594380521)(images03_higher/wps18.jpg)]

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

11.3.5、align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {  align-items: flex-start | flex-end | center | baseline | stretch;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wjZb9jg9-1637594380523)(images03_higher/wps19.jpg)]

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

11.3.6、align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {  
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pJW38Y4E-1637594380525)(images03_higher/wps20.jpg)]

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

11.4、项目样式属性

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
Flex
align-self

11.4.1、order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {  order: integer;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ZdbRUSA-1637594380527)(images03_higher/wps21.jpg)]

11.4.2、flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {  flex-grow: number; /* default 0 */}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hrqXNm2H-1637594380530)(images03_higher/wps22.jpg)]

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

11.4.3、flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {  flex-shrink: number; /* default 1 */}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dSb9rdwk-1637594380532)(images03_higher/wps23.jpg)]

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

11.4.4、flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {  flex-basis: length | auto; /* default auto */}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

11.4.5、flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

11.4.6、align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R34KRJcY-1637594380536)(images03_higher/wps24.jpg)]

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

十二、媒体查询 Media Query

12.1、css3 media媒体查询概述

随着响应式设计模型的诞生，Web网站又要发生翻天覆地的改革浪潮，如今淘宝，凡客，携程等等很多公司都已经在使用这项技术，并完美的应用在了自己的网站上了。

12.1.1、为啥有媒体查询:

移动设备的快速普及完全颠覆了Web设计领域。用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。

Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满）

12.1.2、什么是媒体查询?

媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。

css2: media type ,media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。

css3: media query ,media query是CSS3对media type的增强，事实上我们可以将media query看成是media type+css属性(媒体特性Media features)判断。

12.2、使用媒体查询的准备工作

12.2.1、设置Meta标签

首先我们在使用Media query的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释：

width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

12.2.2、加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

12.2.3、设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不过最近又发现了一个更给力的写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。

12.3、CSS3 媒体查询用法

12.3.1、多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

all: 所有设备，这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

demo如下：当前屏幕的宽度大于等于400px时应用 styleA.css样式文件。

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

12.3.2、CSS3 多媒体类型

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

12.3.3、多媒体查询简单实例

使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

12.3.4、多媒体查询综合案例

在不同屏幕上元素显示宽度改变案例

在1200px像素以上的视口,显示1170px 大屏幕显示器

在992px-1200px的视口上,显示970px 中等屏幕显示器

在768px-992px的视口上,显示750px pad设备

在低于768px的视口上,显示100%宽度移动设备

表达式语法:

表达式：像素

min-width: 最小宽度

max-width: 最大宽度

min-height: 最小高度

max-height: 最大高度

<!doctype html>
<html>

<head>
    <title>页面标题</title>
    <meta charset="utf-8">
    <!-- 为了适配移动端,如果想要使用media query兼容移动端,必须添加这句话 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 为了IE9以下的浏览器兼容HTML5和CSS3 -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!-- 让IE浏览器用最新的文档模式来渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

    <!-- 
        在1200px像素以上的视口,显示1170px       大屏幕显示器
        在992px-1200px的视口上,显示970px        中等屏幕显示器
        在768px-992px的视口上,显示750px         pad设备
        在低于768px的视口上,显示100%宽度         移动设备
        @media not|only mediatype and (expressions) {
            CSS 代码...;
        }

        min-width: 最小宽度
        max-width: 最大宽度
        min-height: 最小高度
        max-height: 最大高度
     -->
     <style>
        div{
            border: 1px solid black;
        }
        
        /* 代表在不同的设备上呈现不同的效果 */
        @media screen and (min-width: 1200px) {
            .div1{
                width: 1170px;
                background: red;
            }
        }

        @media screen and (min-width: 992px) and (max-width: 1200px) {
            .div1{
                width: 970px;
                background: yellow;
            }
        }

        @media screen and (min-width: 768px) and (max-width: 992px) {
            .div1{
                width: 750px;
                background: blue;
            }
        }

        @media screen and  (max-width: 768px) {
            .div1{
                width: 100%;
                background: skyblue;
            }
        }
    </style>

</head>

<body>
    <!-- 在我们之前做第一阶段和第二阶段项目的时候,我们都是采用的固定布局 -->
    <div class="div1">
        在不同的设备上,呈现不同的宽度.
    </div>
</body>

</html>

响应式导航栏实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
</style>
</head>
<body>

<ul class="topnav">
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li class="right"><a href="#about">关于</a></li>
</ul>

<div style="padding:0 16px;">
  <h2>响应式导航栏实例</h2>
  <p>在屏幕宽度小于 600px 会重置导航栏。</p>
  <h4>重置浏览器窗口大小，查看效果。</h4>
</div>

</body>
</html>

媒体查询结合Flex布局案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <!-- IE9版本以下的浏览器兼容H5和CSS3的media query -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!-- 让IE使用最新的文档模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <!-- 
        @media not|only mediatype and (expressions) {
            CSS 代码...;
        }
     -->
    <style>
        body{
            margin: 0;
        }
        .responseDiv{
            border: 1px solid black;
            /* height: 120px; */
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        @media screen and (min-width: 1200px){
            .responseDiv{
                width: 1170px;
                /* background: red; */
            }
        }

        @media screen and (min-width: 992px) and (max-width: 1200px){
            .responseDiv{
                width: 970px;
                /* background: yellow; */
            }
        }

        @media screen and (min-width: 768px) and (max-width: 992px){
            .responseDiv{
                width: 750px;
                /* background: skyblue; */
            }
        }

        @media screen and (max-width: 767px){
            .responseDiv{
                width: 100%;
                /* background: springgreen; */
                box-sizing: border-box;
            }
        }

        .responseDiv>div{
            width: 300px;
            height: 200px;
            margin-bottom: 20px;
        }

        .item1{
            background: purple;
            /* flex-grow: 1; */
        }

        .item2{
            background: yellow;
            /* flex-grow: 1; */
            /* flex-shrink:4; */
        }

        .item3{
            background: blue;
            /* order: -2; */
            /* flex-grow: 2; */
        }

        .item4{
            background: skyblue;
            /* flex-grow: 1; */
        }

        .item5{
            background: hotpink;
            align-self: flex-start;
        }

        .item6{
            background: slateblue;
            /* order: -6; */
        }
    </style>
</head>
<body>
    <!-- 
        定义一个div
            在1200px像素以上的视口,显示1170px       大屏幕显示器
            在992px-1200px的视口上,显示970px        中等屏幕显示器
            在768px-992px的视口上,显示750px         pad设备
            在低于768px的视口上,显示100%宽度         移动设备
        表达式语法:
		表达式：像素
			min-width: 最小宽度
			max-width: 最大宽度
			min-height: 最小高度
			max-height: 最大高度
     -->
     <div class="responseDiv">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
     </div>
</body>
</html>

十三、多列与用户界面

13.1、透明度设定

使用CSS很容易创建透明的图像。

**注意：**CSS Opacity属性是W3C的CSS3建议的一部分。

img{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。

opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

opacity与通过rgba()设定透明度的区别：

前者同时作用于元素及其标签内容，后者只是作用于元素本身

13.2、CSS3 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QyvNCI1R-1637594380538)(images03_higher/微信截图_20200627205049.png)]

CSS3 多列属性

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列;目前浏览器都不支持
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	设置 column-width 和 column-count 的简写

CSS3 创建多列

column-count 属性指定了需要分割的列数。

以下实例将 <div>元素中的文本分为 3 列：

.newspaper
{
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
}

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>

CSS3 多列中列与列间的间隙

column-gap 属性指定了列与列间的间隙。

以下实例指定了列与列间的间隙为 40 像素：

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

CSS3 列边框:

/* column-rule-style 属性指定了列与列间的边框样式：*/
div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

/*column-rule-width 属性指定了两列的边框厚度:*/
div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

/*column-rule-color 属性指定了两列的边框颜色：*/
div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

/*column-rule 属性是 column-rule-* 所有属性的简写。*/
div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

指定元素跨越多少列

以下实例指定<h2>元素跨越所有列：

默认值是1,可选值是all；

<div class="newspaper">
	<h2>英国维斯米斯特教堂碑文</h2>
	当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

h2{
	column-span:all;
	-webkit-column-span:all; /* Safari and Chrome */
}

指定列的宽度

column-width 属性指定了列的宽度。

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

13.3、CSS3 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

resize
box-sizing
outline-offset

13.3.1、CSS3 调整尺寸(Resizing)

resize属性指定一个元素是否是由用户调整大小的。

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

13.3.2、CSS3 box-sizing 属性

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

13.3.3、CSS3 外形修饰（outline-offset ）

outline-offset属性设置轮廓框架在 border 边缘外的偏移

Outlines在两个方面不同于边框：

Outlines 不占用空间
Outlines 可能非矩形

值	描述
length	轮廓与边框边缘的距离。

十四、样式应用实例

14.1、CSS 图片

使用 CSS 来布局图片。

圆角图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J30FzXla-1637594380541)(images03_higher/微信截图_20200701123255.png)]

img {
    border-radius: 8px;
	height: 300px;
	width: 400px;
}

<img src="paris.jpg" alt="Paris" >

椭圆形图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-02HUJNyA-1637594380542)(images03_higher/微信截图_20200701123357.png)]

img {
    border-radius: 50%;
}

普通缩略图

我们使用 border 属性来创建缩略图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6MRaCQsY-1637594380545)(images03_higher/微信截图_20200701123432.png)]

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

<img src="paris.jpg" alt="Paris">

链接缩略图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qQaohKjz-1637594380546)(images03_higher/微信截图_20200701123519.png)]

<style>
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>

<a target="_blank" href="paris.jpg">
  <img src="paris.jpg" alt="Paris" width="400" height="300">
</a>

图片文本

<style>
.container {
    position: relative;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}
    
.topright {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
}
    
.bottomleft {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 18px;
}    

.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}
  
.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
	margin-top:-9px;
}
    
img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
    
</style>
<div class="container">
  <img src="images/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">左上角</div>
</div>

卡片式图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GjLwTPxz-1637594380547)(images03_higher/微信截图_20200701123918.png)]

<style>
body {margin:25px;}

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>

14.2、CSS 按钮

基本按钮样式:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-89SMSEoT-1637594380550)(images03_higher/微信截图_20200701123957.png)]

<h2>CSS 按钮</h2>

<button>默认按钮</button>
<a href="#" class="button">链接按钮</a>
<button class="button">按钮</button>
<input type="button" class="button" value="输入框按钮">

<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>

按钮颜色

我们可以使用 background-color 属性来设置按钮颜色:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qUY4CZnA-1637594380551)(images03_higher/微信截图_20200701124201.png)]

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

按钮大小

我们可以使用 font-size 属性来设置按钮大小:

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

圆角按钮

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

按钮边框颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nBweJeB5-1637594380554)(images03_higher/微信截图_20200701124259.png)]

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button3 {
    background-color: white; 
    color: black; 
    border: 2px solid #f44336;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

鼠标悬停按钮

我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 我们可以使用 transition-duration 属性来设置 “hover” 效果的速度:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>鼠标悬停按钮</title> 
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button3 {
    background-color: white; 
    color: black; 
    border: 2px solid #f44336;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: #555555;
    color: white;
}
</style>
</head>
<body>

<h2>鼠标悬停按钮</h2>
<p>我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。</p>
<p><strong>提示:</strong> 我们可以使用 <code>transition-duration</code> 属性来设置 "hover" 效果的速度:</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

按钮阴影

我们可以使用 box-shadow 属性来为按钮添加阴影:

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 “disabled” 属性效果)。

提示: 我们可以添加 cursor 属性并设置为 “not-allowed” 来设置一个禁用的图片:

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

按钮组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>按钮组</title> 
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    float: left;
}

.button:hover {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>按钮组</h2>
<p>移除外边距并添加 float:left 来设置按钮组:</p>

<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>

<p style="clear:both"><br>记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。</p>

</body>
</html>

带边框按钮组

.button {
    float: left;
    border: 1px solid green;
    border-radius: 5px;
}

按钮动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>按钮动画1：</title> 
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
</head>
<body>

<h2>按钮动画</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>
</html>

按钮动画 - "按压效果"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>按压按钮</title> 
<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>

<h2>按钮动画 - "按压效果"</h2>

<button class="button">Click Me</button>

</body>
</html>

14.3、CSS 分页

简单分页

如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
</style>

<h2>简单的分页</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>

点击及鼠标悬停分页样式

如果点击当前页，可以使用 .active 来设置当前页样式，鼠标悬停可以使用 :hover 选择器来修改样式：

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

圆角样式

ul.pagination li a {
    border-radius: 5px;
}

ul.pagination li a.active {
    border-radius: 5px;
}

鼠标悬停过渡效果

我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:

ul.pagination li a {
    transition: background-color .3s;
}

带边框分页

我们可以使用 border 属性来添加带边框分页:

ul.pagination li a {
    border: 1px solid #ddd; /* Gray */
}

圆角边框

.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

分页间隔

ul.pagination li a {
    margin: 0 4px; /* 0 对应的是头部与底部，可以修改它看看效果 */
}

面包屑导航

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>面包屑</title> 
<style>
ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>

<h2>面包屑导航</h2>
<ul class="breadcrumb">
  <li><a href="#">首页 </a></li>
  <li><a href="#">前端 </a></li>
  <li><a href="#">HTML 教程 </a></li>
  <li>HTML 段落</li>
</ul>

</body>
</html>

14.4、CSS工具提示

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            padding: 100px;
        }

        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted #ccc;
            cursor: help;
            color: #006080;
        }

        .tooltip-top {
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            position: absolute;
            width: 120px;
            background-color: #555;
            /* color: #fff; */
            color: red;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
            z-index: 1;
            opacity: 1;
            transition: opacity .6s;
        }

        .tooltip-top::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }
    </style>
</head>

<body>
    <div class="tooltip">
        头部显示
        <span class="tooltiptext tooltip-top">提示框文本</span>
    </div>
</body>

</html>

14.5、响应式相册

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>响应式图片廊</title> 
<base href="https:">
<style>
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>

<h2 style="text-align:center">响应式图片相册</h2>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="images/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_forest.jpg">
      <img src="images/img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_lights.jpg">
      <img src="images/img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_mountains.jpg">
      <img src="images/img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果</h4>
</div>

</body>
</html>

Yz前端知识

关注

25
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
前端开发-CSS快速掌握上手知识详细总结

01_CSS基础前言最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wsmkKve6-1637594225448)(images01_base/wps1.jpg)]HTML:结构层,Hyper Text Markup Language,超文本标记语言CSS:表现层,Cascading Style Sheets，层叠样式表JS:行为层,JavaScript，客户端脚本语言**网页的结构层（stru
复制链接

扫一扫