Yz前端知识
Yz前端知识

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

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标签中:

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

该语法中，

需要注意的是：

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

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

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

4.2、ID选择器

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

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

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


    Document
    


    
"mytitle">你好

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 中，类选择器以一个点"."号显示：

举例如下：




    
"oneclass">你好

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

class属性的特点：

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

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

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

而不能写成：

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

类选择器使用的举例：

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

应该注意：

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

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

如：

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

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

问题：到底用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 中的 
标签。
nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 
标签为止。
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 选择器中)，每个

元素的计数值都会递增，并在每个

元素前添加 “Section <计数值>:”

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

嵌套计数器

以下实例在页面创建一个计数器，在每一个

元素前添加计数值 “Section <主标题计数值>.”, 嵌套的计数值则放在

元素的前面，内容为 “<主标题计数值>.<副标题计数值>”:

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>JavaScripth2>
<h2>VBScripth2>

<h1>XML 教程:h1>
<h2>XMLh2>
<h2>XSLh2>

<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>itemli>
  <li>item   
  <ol>
    <li>itemli>
    <li>itemli>
    <li>item
    <ol>
      <li>itemli>
      <li>itemli>
      <li>itemli>
    ol>
    li>
    <li>itemli>
  ol>
  li>
  <li>itemli>
  <li>itemli>
ol>

<ol>
  <li>itemli>
  <li>itemli>
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、后代选择器

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

以下实例选取所有

元素插入到

元素中:

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

1.3.2、子元素选择器

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

以下实例选择了

元素中所有直接子元素

：

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

1.3.3、相邻兄弟选择器

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

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

以下实例选取了所有位于

元素后的第一个

元素:

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

1.3.4、后续兄弟选择器

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

以下实例选取了所有

元素之后的所有相邻兄弟元素

:

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:first-letter{
    font-size:200%;
    color:#8A2BE2;
}

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

/*伪元素可以结合CSS类： */
p.article:first-letter {color:#ff0000;}

"article">文章段落


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

/*每个
元素之后插入内容：*/
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:first-child{
    color:blue;
}

在下面的例子中，选择相匹配的所有

元素的第一个 元素：

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

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

元素中的所有 元素：

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 禁用图标 
请把鼠标移动到单词上，可以看到鼠标指针发生变化：
 
"cursor:auto">auto

"cursor:crosshair">crosshair

"cursor:default">default

"cursor:e-resize">e-resize

"cursor:help">help

"cursor:move">move

"cursor:n-resize">n-resize

"cursor:ne-resize">ne-resize

"cursor:nw-resize">nw-resize

"cursor:pointer">pointer

"cursor:progress">progress

"cursor:s-resize">s-resize

"cursor:se-resize">se-resize

"cursor:sw-resize">sw-resize

"cursor:text">text

"cursor:w-resize">w-resize

"cursor:wait">wait

三、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) 初始未定位





    
    
    Document
     


 
    
"first"> first
 
    
"second">second

初始原图：

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

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

偏移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属性：

设置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方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到标签为止，这里还需要注意的是，relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以作为原点定位。和元素相差9px左右。

我们来看下效果：

添加absoulte属性：

 
 

 
    
"first">relative
 
    
"second">absoult

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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属性：





    
    
    Document
    



    
first 
        
second

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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 默认值。不应用任何剪裁。

裁剪一张图像：




    
    
    Document
    


    

        "images/paris.jpg" alt="">

四、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 Flighta>li>
      <li><a href="#city" class="active">The Citya>li>
      <li><a href="#island">The Islanda>li>
      <li><a href="#food">The Fooda>li>
      <li><a href="#people">The Peoplea>li>
      <li><a href="#history">The Historya>li>
      <li><a href="#oceans">The Oceansa>li>
    ul>
  div>

  <div class="column content">
    <div class="header">
      <h1>The Cityh1>
    div>
    <h1>Chaniah1>
    <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">Leftdiv>
    <div class="right">Rightdiv>
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">Leftdiv>
    <div class="right">Rightdiv>
    <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">Leftdiv>
    <div class="right">Rightdiv>
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">Leftdiv>
    <div class="right">Rightdiv>
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">Leftdiv>
    <div class="right">Rightdiv>
div>
<div class="div2">
    div2
div>

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

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

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

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

五、CSS对齐方式

5.1、元素居中对齐

要水平居中对齐一个元素(如

), 可以使用 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;
}

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

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列表导航栏。

导航条基本上是一个链接列表，所以使用

    和
  • 元素非常有意义：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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、垂直导航栏

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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;
}

    创建链接并添加边框

    可以在

  • or 上添加text-align:center 样式来让链接居中。

    可以在 border

      上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个
    • 元素上添加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 Navh2>
      <h3>Try to scroll this area, and see how the sidenav sticks to the pageh3>
      <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;
}

      浮动列表项

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

      对于所有的链接宽度相等，浮动

    • 元素，并指定为 元素的宽度：

      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>

      添加分割线

    • 通过 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 Barh1>
<h2>Scroll this page to see the effecth2>
<h2>The navigation bar will stay at the top of the page while scrollingh2>

<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>菜单项1p>
    <p>菜单项2p>
	<p>菜单项3p>
  div>
div>

body>
html>

      HTML 部分：

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