HTML5 + CSS3 学习笔记

Code HotPot

1008人浏览 · 2025-05-29 16:46:16

Code HotPot · 2025-05-29 16:46:16 发布

写在前面

本套学习课程主要讲解网页布局，即通过 HTML5 和 CSS3 来布局页面。整体分为两大块：PC 端网页布局和移动端网页布局；同时会讲解响应式布局，即一套代码多端适配，在 PC 端、PAD 端、移动端打开网页会自动适配，呈现出不同效果。

学习目标：精通网页布局，可以模拟出任何网站的静态页面（静态页面通常是用HTML、CSS和一些静态的资源文件（如图片、字体等）构建的，浏览器加载页面时，它显示的内容不会随时间变化或用户的操作改变，即内容是固定的，一旦页面加载完毕，就不会发生任何变化），为后面学习 JavaScript 打下坚实基础。

静态页面 (Static Web Page)：

内容由前端文件（HTML、CSS、JS等）直接组成，已预先写好固定。
无需服务器根据用户请求“实时编写/生成”页面内容。
对用户来说，没有和后端的实时数据交换，仅仅是展示文件。
例：公司介绍页面、作品集、个人主页等。
即使页面有动态动画、交互，只要这些是前端代码自行处理，不涉及和服务器的数据或逻辑交换，本质依旧是静态网页。

动态页面 (Dynamic Web Page)：

内容可以根据 “用户请求、时间、环境、数据库、业务逻辑” 等，由服务器端动态生成。
每次打开页面，服务器可根据情况把不同内容返回给用户浏览器。
必须涉及后端（如 PHP、Node.js、Java、Python）。往往依赖数据库、用户身份等。
例：用户登录后展示个人信息、购物车结算页、论坛发帖列表等。

简单通俗表达

只有当网页内容是由后端服务器动态生成，页面依赖此过程，才称为『动态网页』；
静态页面则完全靠前端文件，和服务器没有数据逻辑层面的交互（静态资源如服务器上的 HTML、CSS、图片、JavaScript 文件等下载不算和后端交互数据，这些文件内容已经提前放在服务器，不会随每次请求而变化。浏览器只是把这些文件下载到本地，然后根据其中的代码来显示页面）。

学习路线：

注意：

一开始会使用到记事本进行 HTML 代码书写，这是可行的，但是书写完后需要将文件后缀名改为 .html 才可以使用，除去一开始的了解阶段，不建议使用记事本这种麻烦的方式进行代码书写，一般开发时会使用更加方便的 VS Code （包含代码高亮，自动补全等快捷功能）进行代码书写。

前端最权威、最常用的手册一般是 MDN Web Docs，几乎所有 HTML/CSS/JS 的学习和查阅都用它。

相关概念介绍：

1. 网页

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，是通过 HTML 语言创建出来的，常见以 .html 或 .htm 后缀结尾（二者没有区别，都可以使用）的文件，因此将其俗称为 HTML 文件。

1.2 什么是 HTML

HTML 指的是超文本标记语言（Hyper Text Markup Language），它是专门用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言（markup language）。标记语言是由一套标记标签（markup tag）组成的。

注：绝大部分情况，在实际交流和技术工作交流时称 HTML 代码，这是没问题的，但是在正式场合如科研论文中还是需要称 HTML 文档或 HTML 标记，因为代码本质上还是指代编程语言而非标记语言。

所谓超文本，有两层含义：

1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。

2.它还可以从一个文件（网页）跳转到另一个文件（网页），与世界各地主机的文件连接（超级链接文本）。

下面演示如何创建一个最简单的只显示一张图片的网页：

在桌面新建一个记事本文件，在里面输入一个 HTML 标签 <img src="logo.png">，保存之后将文件后缀 .txt 改为 .html，双击打开后即可在网页显示桌面上的图片文件 logo.png

1.3 网页的形成

网页是由网页元素组成的，这些元素是由前端开发人员在 HTML 文件中利用 HTML 标签描述出来，然后通过浏览器解析来显示给用户的。

1.4 总结

网页是图片、链接、文字、声音、视频等元素组成，其本质就是一个 HTML 文件（后缀名为 .html）。

网页生成制作：由前端人员书写 HTML 文件，文件内写的是 HTML 代码，即各种各样的网页元素的标签，然后使用浏览器打开，即可看到网页。

HTML：超文本标记语言，只用来制作网页的一门语言，由各种标签组成，比如图片标签，链接标签，视频标签等。

2. 常用浏览器以及内核

网页是通过浏览器来展示的，关于浏览器介绍以下两点：

常用的浏览器
浏览器内核

2.1 常用的浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（FireFox）、谷歌（Chrome）、Safari 和 Edge 等。后续的学习基于 Chrome 浏览器来展示网页。

2.2 浏览器内核（了解即可）

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

常用的浏览器内核见下表：

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
FireFox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chorme/Opera	Blink	Chorme/Opera 浏览器内核。Blink 其实是 Webkit 的分支

目前国内一般浏览器都会采用 Webkit/Blink 内核，如360、UC、QQ、搜狗等

3. Web 标准（重点）

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。开发的网页最终是需要发布到互联网中的，所以编写的代码一定要遵循这些组织制定的标准。

3.1 为什么需要 Web 标准

浏览器的种类多种多样，而浏览器不同，对于同一个 HTML 页面（代码），它们解析显示的页面或者排版就有些许差异，这样为了统一展示的内容，开发者就需要为多版本的开发而苦恼。而有了 Web 标准后，只要编写的 HTML 页面符合标准，就能够在不同的浏览器中展示统一的内容，减少了工作量。

遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

让 Web 的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜索引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度

Web 标准需要前端开发者和浏览器开发者双方共同遵守，这是保障网页在不同浏览器中一致、稳定运行的基础。前端开发人员根据 Web 标准编写规范标准的代码，而浏览器开发人员则需要确保他们的浏览器能够准确地解析这些标准，提供一致的用户体验。如果只有一方遵守，后果如下：

情况一：浏览器开发者遵守标准，但前端开发者不遵守

可能结果：
   •   页面在不同浏览器中显示异常，如布局错乱、功能失效。
   •   依赖非标准或过时特性可能导致页面在未来版本中崩溃。
   •   开发的网页兼容性差，维护困难，难以长期稳定运行。

举例：

前端写了不规范的 HTML，如使用已废弃的标签 <center>，虽然某些浏览器可能仍支持，但其他浏览器或未来版本就不一定能正确渲染。

情况二：前端开发者遵守标准，但浏览器开发者不遵守

可能结果：
   •   前端编写的符合标准的代码在部分浏览器中无法正常工作。
   •   出现 “浏览器兼容性 bug”，开发者必须针对某些浏览器写 “hack” 代码。
   •   用户体验受损，甚至可能导致安全风险或功能不可用。

举例：

一个浏览器没有按照标准实现 flexbox 布局，导致前端写的标准 CSS 无效，而其他浏览器却渲染正常。

如果浏览器没有遵守标准，可能会导致网页在不同浏览器中表现不同，甚至无法正常使用。反过来，如果前端开发人员不遵守标准，他们的代码可能在一些浏览器中不兼容，或者无法利用现代浏览器提供的强大功能。

因此，Web 的互操作性（interoperability）依赖于前端与浏览器厂商共同遵守标准。否则就会出现所谓的“浏览器大战”或“兼容性地狱” —— 开发者被迫为每个浏览器写不同的代码，效率极低，用户体验也差。

3.2 Web 标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是 HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是 CSS
行为	行为是指网页模型的定义以及交互的编写，现阶段主要学的是 JavaScript

本文主要介绍结构和表现两部分。

Web 标准提出的最佳体验方案：结构、样式、行为相分离。简单理解就是：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中。

一、HTML学习

HTML 称为超文本标记语言，包含一套标签，只要将里面的标签学会了，自然就学会了这门语言。

1. HTML 语法规范

1.1 基本语法概述

HTML 标签是由尖括号包围的关键词，例如 <html>。

HTML 标签通常是成对出现的，例如 <html> 和 </html>，称之为双标签。标签中的第一个标签是开始标签，第二个标签是结束标签，区别在于结束标签的关键词前面有一个反斜杠 / 。

有些特殊的标签必须是单个标签（极少情况），例如 <br />，称之为单标签，不需要结束标签，只需要在 > 前加上反斜杠 / 即可，并且习惯性的在关键词和 / 之间加一个空格。注：在最新的 HTML5 标准中，单标签可以不用加上 / ，并且也推荐不加上.

1.2 标签关系

标签关系可以分为两类：包含关系和并列关系

包含关系：一个标签对里面包含另外的标签对或标签对

如下面所示的 head 和 title、img 就是包含关系：

<head>
    <title></title>
    <img />
</head>

并列关系：标签对或标签相互并列

如下面所示的 head 和 body、img 就是并列关系：

<head></head>
<body></body>
<img />

2. HTML 基本结构标签

2.1 第一个 HTML 网页

每个 HTML 网页都会有基本结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写，下面介绍四个基本结构标签。

注：HTML 页面也称为 HTML 文档。

标签名	定义	说明
<html></html>	HTML 根标签	页面中最大的标签，称为根标签
<head></head>	文档头部标签	注意在 head 标签中必须设置 title 标签
<title></title>	文档标题标签	让页面有一个属于自己的网页标题
<body></body>	文档主体标签	包含文档的主要内容，页面内容基本都是放到 body 内的

下面以一个网页为例介绍以上标签，其中整个页面是 HTML 页面，即被 html 根标签对所包含：

然后试着写第一个 HTML 网页，仍旧是新建记事本，在里面书写下面代码：

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        键盘敲烂，工资过万
    </body>
</html>

然后将文件的后缀名改为 .html 后使用浏览器打开即可显示网页如下：

HTML 文档的后缀名必须是 .html 或 .htm，浏览器的作用是读取 HTML 文档，并以网页的形式解析显示出他们。若需要查看 HTML 文件的源码，可以右键点击选择以记事本方式打开或者在代码编辑器中打开文件，或者打开 HTML 页面后右键点击页面，选择查看页面源代码。

2.2 基本结构标签总结

3. 开发工具

前面所说的使用记事本进行 HTML 文档的书写是可行的，但是有很多的不方便，因此衍生出了许多方便快捷的开发工具，本文以 VSCode 为进行后续的开发使用。

3.1 VSCode 的使用

双击打开软件
新建文件（Crtl + N）
命名为 .html 文件，顺便进行保存（Ctrl + S）
输入！按下 Tab 键可以自动生成页面骨架结构，然后进行代码书写
利用 open in browser 插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“ Open In Default Browser ”即可在默认浏览器中预览当前页面

VSCode 的常用插件和快捷键可以参考文章：前端 VSCode 常用插件-快捷键-以及常用技巧

3.2 VSCode 工具生成骨架标签新增代码

使用 VSCode 时输入！按下 Tab 键自动生成页面骨架结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

可以发现会有一些没见过的新增代码，下面介绍其中比较重要的三个。

3.2.1 !DOCTYPE 标签

<!DOCTYPE> ：文档类型声明，作用就是告诉浏览器使用哪种 HTML 版本来显示网页。

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是 HTML5 版本来显示网页。

注意：

<!DOCTYPE> 声明必须位于文档最前面的位置，处于<html>标签之前
<!DOCTYPE> 不属于 HTML 标签，他就是文档类型声明标签

3.2.2 lang 语言种类

<html lang="en">

这里的 lang="en" 用于告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文显示。

en 定义语言为英语
zh-CN 定义语言为中文

简单来说，定义为 en 就是英文网页，定义为 zh-CN 就是中文网页。

屏幕阅读器和翻译工具可以根据 lang 属性正确处理内容，如当前页码 lang="en"，但是浏览器检测到本地语言为中文，则会提示是否需要翻译；lang 属性主要是针对搜索引擎的，搜索引擎可以根据 lang 属性更好地理解和索引网页内容。其实对于文档显示来说，定义成 en 的文档也可以显示中文，定义成 zh-CN 的文档也可以显示英文，即 lang 属性对于文档的文本语言的显示不会有影响，但正确设置 lang 属性对于提高网站的可访问性和用户体验非常重要。

3.2.3 字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。

编写 HTML 文档时会选择特定的编码方式，在 <head> 标签内，可以通过 <meta> 标签的 charset 属性来告知浏览器使用何种字符编码来解释当前 HTML 文档。

  <meta charset="UTF-8">

charset 常用的值有：GB2312，BIG5，GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面语法是必须要写的代码，否则可能会引起页面乱码。一般情况下，统一使用 UTF-8 编码，尽量统一写成标准的 UTF-8，不要写成 utf8 或 UTF8。

编码格式在其他地方也很重要，如使用记事本编辑时候保存文件的编码格式与使用 VSCode 打开该文件时使用的编码格式不一样，打开后 VSCode 内的源码也会乱码：

3.2.4 总结

以上三个代码 VSCode 自动生成，基本不需要我们重写
<!DOCTYPE html> 文档类型声明标签，告诉浏览器这个页面采取 HTML5 版本来显示页面
<html lang="en"> 告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文显示
<meta charset="UTF-8"> 必须写，告诉浏览器采取 UTF-8 来解释页面，如果不写页面就很可能会乱码，具体原理后面分析

4. HTML 常用标签

4.1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干什么的。

根据标签的含义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

4.2 标题标签 h1 - h6（重要）

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即 <h1> - <h6>。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
</body>
</html>

标签语义：作为标题使用，并且依据重要性递减。

特点：

加了标题的文字会变得更粗，字号也会更大
一个标题独占一行，即使在结束标签后写上别的内容也会作为非标题内容显示到下一行

4.3 段落和换行标签（重要）

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p> 标签用于定义段落，它可以将整个网页分成若干个段落。

<p>我是一个段落标签</p>

在 HTML 代码中，由于空白折叠规则，即使编写时有连续多个空格，最终显示在浏览器中的也是一个空格（只要不是在<pre>，<textarea>或 white-space:pre 的环境中，正常多个空格都会折叠，部分老版本浏览器可能会非标准的保留某些地方的多个空格，如直接写在<body>体内没有 HTML 标签包裹的纯文本），因此在写代码时，即使使用回车换行了内容，实际显示的时候也不会是分段的，所以需要用到 <p> 标签进行段落分割或 <br> 标签进行强制换行。

标签语义：可以把 HTML 文档分割为若干个段落。

特点：

段落和段落之间会保留一个较大的空隙（一个段落会同时具有上下间距，无论该段落前后跟的是什么标签，该段落都会存在这个间距）

注：HTML 页面的文本会根据浏览器窗口的大小自动换行

在 HTML 中，一段连续的文字会从左到右依次排列，直到浏览器窗口的右端，然后才会自动换行。如果希望某段文本在某处强制换行显示，就需要使用换行标签 <br>。

在此处换行<br>在此处换行

标签语义：强制换行。

特点：

<br> 是单标签
<br> 标签只是简单地开启新的一行，跟段落不一样，段落之间会插入一些垂直的间距，有空隙

4.4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要。

语义	标签	说明
加粗	<strong></strong> 或 <b></b>	更推荐使用 <strong> 标签，语义更加强烈
倾斜	<em></em> 或 <i></i>	更推荐使用 <em> 标签，语义更加强烈
~~删除线~~	<del></del> 或 <s></s>	更推荐使用 <del> 标签，语义更加强烈
下划线	<ins></ins> 或 <u></u>	更推荐使用 <ins> 标签，语义更加强烈

    <p>我是<strong>加粗</strong>文字
        我是<b>加粗</b>文字</p>
    <p>我是<em>斜体</em>文字
        我是<i>斜体</i>文字</p>
    <p>我是<del>删除线</del>
        我是<s>删除线</s></p>
    <p>我是<ins>下划线</ins>
        我是<u>下划线</u></p>

4.5 div 和 span 标签

<div> 和 <span> 是没有语义的，他们就是一个用来装内容（文字、图片等）的盒子，用于页面布局。虽然 div 和 span 标签几乎可以实现网页上的任何结构和布局，很多人甚至习惯“万物皆 div”，但其实这样做并不推荐。因为如果所有内容都用 div 或 span 来构建，页面就失去了原本的语义结构，既影响代码的可读性和后期维护，也会让搜索引擎和屏幕阅读器难以正确理解页面内容。不同行为和数据在页面上有不同的意义，比如需要展示数据列表时用 ul/ol/li，呈现表格时用 table，这样代码更规范，也方便他人理解和机器识别。div 和 span 更适合用来辅助布局和装饰，承载具体语义内容还是应该选择更合适的 HTML 标签。

特点：

<div> 标签用来布局，但是现在一行只能放一个 <div>，并且独占该行。大盒子。
<span> 标签用来布局，一行上能放多个 <span>。小盒子。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div>我是一个div标签我一个人单独占一行</div>
    <div>我是一个div标签我一个人单独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>

</html>

关于后面使用 CSS 进行布局时盒子的宽高情况：

div：默认宽100%、高由内容决定；无内容时几乎看不见。
span：宽高都由内容撑开；无内容时完全不可见。

<div> 和 <span> 的背景颜色的 CSS 属性名都是 background-color。

具体 <div> 和 <span> 标签的使用方法会在后面讲解网页布局的时候详细说明。

4.6 图像标签和路径（重点）

4.6.1 图像标签

1.图像标签介绍

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像，属于单标签。

<img src="图像url">

src 是 <img> 标签的必须属性，用于指定所显示图像文件的路径和文件名（加后缀）。所谓属性，简单理解就是属于这个标签的特性。

图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。当图像无法正常显示时（如不存在该图片），才会出现的文字
title	文本	提示文本。鼠标放到图像上，显示的文字。
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

属性设置值时，HTML5 是推荐任何时候都加引号（单/双都行）的，即使某些情况下不加引号也不会出错，也推荐加上，因为这样会使得代码更规范。

注：具体的宽、高、粗细等大小可以使用测量工具测量出合适的大小后进行设置。一般进行开发时，宽度和高度只会设置一个，另一个会进行等比例自动缩放，如果同时设置宽高，可能会出现图片大小变得很奇怪，如被拉长或被压扁。图片的边框一般使用 CSS 进行设置，在 HTML 中通过 border 属性设置边框粗细时，关键词 border 会标红或不高亮显示，因为是推荐使用 CSS 来设置它的，但这不影响使用。

例如当前编写的 HTML 文件有一个同级的图像文件 anya.jpg（多个属性用空格隔开即可）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>

<body>
    <h4>图像标签的使用</h4>
    <img src="anya.jpg">
    <h4>alt 替换文本</h4>
    <img src="anya1.jpg" alt="Anya Forger">
    <h4>title 提示文本</h4>
    <img src="anya.jpg" alt="Anya Forger" title="Anya Forger is Sleeping">
    <h4>width 给图像设置宽度</h4>
    <img src="anya.jpg" alt="Anya Forger" title="Anya Forger is Sleeping" width="500">
    <h4>height 给图像设置高度</h4>
    <img src="anya.jpg" alt="Anya Forger" title="Anya Forger is Sleeping" width="500" height="100">
    <h4>border 给图像设置边框</h4>
    <img src="anya.jpg" alt="Anya Forger" title="Anya Forger is Sleeping" width="500" border="15">
</body>

</html>

2.图像标签属性注意点

图像标签可以拥有多个属性，但属性必须写在标签名 img 后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均必须以空格分开
属性采取键值对的格式，即 key = "value" 的格式，属性=“属性值”

4.6.2 路径

前期铺垫知识

实际工作中，我们的文件不能随便乱放，否则使用起来很难快速找到他们，因此我们需要一个文件夹来管理他们。

目录文件夹：就是普通文件夹，里面只不过存放了我们做一个页面所有需要的相关素材，比如 html 文件、图片等。

根目录：打开目录文件夹的第一层就是根目录。

2.VSCode 打开目录文件夹

在 VSCode 内选择打开文件夹或者直接将目录文件夹拖动到 VSCode 内都可以打开目录文件夹，然后可以很方便的在 VSCode 内对目录文件夹的内容进行操作管理。

正式内容：

如果图片文件与 HTML 页面文件所在位置同级，则直接使用图片文件名即可（也算一种相对路径），但是若页面中的图片会非常多，通常我们会新建一个专门的文件夹来存放这些图像文件，这时再查找图像，就需要采用路径的方式来指定图像文件的位置。

路径可以分为相对路径和绝对路径。

1. 相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

这里简单来说，就是图片文件相对于 HTML 页面文件的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于 HTML 文件同一级，如 <img src="baidu.gif">
下一级路径	/	图像文件位于 HTML 文件下一级，如 <img src="images/baidu.gif">
上一级路径	../	图像文件位于 HTML 文件上一级，如 <img src="../baidu.gif">

注意：../ 表示上一级，多用几个就回多级。例如 ../../ 就表示上两级。

相对路径是从代码所在的这个文件出发，去寻找目标文件的，我们这里的上一级、下一级和同一级就是相对于当前 HTML 文件的位置来说的。

2. 绝对路径

绝对路径：是指文件的绝对位置，直接到达目标位置，通常是从盘符开始的路径

例如，"D:\web\img\logo.gif" （与相对路径的反斜杠方向不同）或完整的网络地址 "http://www.itcast.cn/images/logo.gif"。

由于每台电脑的文件位置都不尽相同、网络地址所在的文件也可能被拥有者删除，因此这种形式很可能会找不到想要的文件，所以基本很少使用绝对路径，重点记住相对路径。

4.7 超链接标签（重点）

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

4.7.1 链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像等 </a>

此时被<a>标签对包括的文本或图像等就具有了超链接功能。

注意，在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接，直接使用<a>标签包含即可。如下：

<a href="http://www.baidu.com"> <img src="img.jpg"> </a>

两个属性的作用如下：

属性	作用
href	用于指定链接目标的 url 地址，（必须属性）当应用 href 属性时，就具有了超链接的功能
target	用于指定链接页面的打开方式。其中不写明时 _self 为默认值，代表在当前页面中打开（会替换原页面），_blank 为在新窗口中打开

4.7.2 链接分类

1. 外部链接：即外部网站的链接地址（必须以 http:// 或 https:// 开头加上 web 地址），例如 <a href="http://www.baidu.com"> 百度 </a>。

2. 内部链接：网站内部页面之间的相互链接，直接使用相对路径链接内部页面文档名即可，例如<a href="index.html">首页</a>，注意不可使用磁盘绝对路径！一般使用相对路径或根路径绝对路径（即从网站根目录开始寻找，永远以 / 开头，代表根目录，如 /images/logo.png）！

3. 空连接：如果当时没有确定链接目标，可以使用 # 代表空连接，此时点击只会直接跳转到页面顶部，后续确定好链接目标直接替换即可，格式如下，<a href="#">首页</a>。

4. 下载链接：如果 href 里面地址是一个可以下载的文件格式（如.zip, .exe, .apk, .iso 等），若无法直接预览，则会尝试直接下载这个文件，若浏览器可以直接预览，则一般不会自动下载而是直接预览。若想要强制进行下载操作，给 <a> 标签加上 download 属性即可。注意不可使用磁盘绝对路径！一般使用相对路径、根路径绝对路径或外部网络链接（网络链接的 download 属性可能会失效）！

5. 锚点链接：点击链接，可以快速定位到同一页面中的某个位置。

在链接文本的 href 属性中，设置属性值为 #名字的形式（这里名字可以为中文，但是维护和兼容性会变差，并且 URL 会变差乱码，因此推荐写英文），如<a href="#two">第二集</a>
找到目标位置标签，里面添加一个 id 属性等于刚才的名字，如：<h3 id="two">第二集介绍</h3>

4.9 HTML 中的注释和特殊字符

4.9.1 注释

如果需要在 HTML 文档中添加以下便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML 中的注释以  结尾，快捷键是 ctrl + /

4.9.2 特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

特殊字符	描述	字符的代码
	空格符	（不会被折叠）
<	小于号	<
>	大于号	>
&	和号	&
¥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方2（上标2）	²
³	立方3（上标3）	³

重点记住：空格、大于号和小于号。其余的使用很少，有需要查询即可。

4.10 表格标签

4.10.1 表格标签的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性很高。特别是展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。

表格不是用来布局页面的，而是用来展示数据的。

4.10.2 表格的基本语法

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

<table></table>是用于定义表格的标签。一对<table></table>即表示一个表格。
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。一对<tr></tr>即表示一个表格中的一行。
没有列的概念，取而代之的是单元格，<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。一对<td></td>即表示一行中的一个单元格。

注：单元格内可以放任何元素，文字、链接、图片等都可以

4.10.3 表头单元格标签

表头单元格也是单元格，一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th> 标签表示 HTML 表格的表头单元格部分（table head 的缩写）

<table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>

4.10.4 表格属性

表格标签这部分属性实际开发并不常用，而是通过 CSS 来设置（因此书写时也可能不高亮显示或标红，但不影响使用）。此处讲解有两个目的：熟悉相关单词，CSS中也会使用，以及直观感受表格外观形态。

属性名	属性值	描述
align	left(默认)、center、right	规定表格相对周围元素的对齐方式（相对与页面靠左、居中或靠右对齐）
border	1或""	规定表格以及单元格是否有边框，默认为""，表示没有边框（数值表示边框粗细，但是现代浏览器大部分貌似只将粗细应用到表格外边框）
cellpadding	像素值	规定单元格边沿与其内容之间的空白距离，默认1像素
cellspacing	像素值	规定单元格之间的空白距离，默认2像素
width/height	像素值或百分比	规定表格的宽度/高度

4.10.5 表格结构标签

<thead></thead>：用于定义表格的头部，且该标签对内部必须有<tr>标签对。表格头部一般位于表格第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
以上两个标签都是放在<table></table>标签对内部的。

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分，同时也可以使得代码结构更清晰明确（可以概括内容，如下图所示）。

在表格标签中，分别用：<thead> 标签对表示表格的头部区域，<tbody> 标签对表示表格的主体区域，这样可以更好的分清表格结构。

4.10.6 合并单元格

特殊情况下，可以把多个单元格合并成一个单元格，这里介绍最简单的合并单元格。

1. 合并单元格方式

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

2. 目标单元格（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

3. 合并单元格的步骤

先确定是跨行还是跨列合并
找到目标单元格，写上合并方式=合并的单元格数量，如<td colspan = "2"></td>。
删除多余的单元格

注：合并单元格本质也可以理解为扩展了单元格

4.11 列表标签

表格是用来显示数据的，那么列表就是用来组织页面元素的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用场景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。下面介绍三种列表的标签使用，列表布局会在 CSS 部分学习。

4.11.1 无序列表（重点）

<ul>标签对表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签对定义。

无序列表的基本语法格式如下：

 <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
 </ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul>标签对中只能直接嵌套<li>标签对，直接在<ul>标签对中输入其他标签或文字的做法是不被允许的，这是规范。
<li>标签对相当于一个容器，可以容纳所有元素，如图片、链接等。
无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置（如前面自带的小圆点样式属性，一般会针对 li 标签使用 CSS 语法：list-style: none; 直接去掉）。

下面图片都是无序列表的应用实例：

4.11.2 有序列表（理解）

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在 HTML 标签中，<ol>标签对用于定义有序列表，列表排序以数字来显示，并且使用<li>标签对来定义列表项。

 <ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
 </ol>

<ol>标签对中只能直接嵌套<li>标签对，直接在<ol>标签对中输入其他标签或文字的做法是不被允许的，这是规范。
<li>标签对相当于一个容器，可以容纳所有元素，如图片、链接等。
有序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

4.11.3 自定义列表（重点）

又称描述列表，自定义列表的使用场景：自定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。如下图所示：

在 HTML 中，<dl>标签对用于定义描述列表（或定义列表），该标签对会与<dt>标签对（定义项目/名字）和<dd>标签对（描述每一个项目/名字）一起使用。

其基本语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

项目描述前自带的空格可以在后面学习 CSS 时将其修饰掉。

<dl>标签对内只能直接包含<dt>标签对和<dd>标签对。
一个<dl>标签对内的<dt>标签对和<dd>标签对个数没有限制，但通常是一个<dt>标签对对应多个<dd>标签对。

4.12 表单标签

使用表单的目的是为了收集用户信息，并将信息传送到后台。在网页中，也需要和用户进行交互，收集用户资料，此时就需要表单。

4.12.1 表单的组成

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息三个部分构成。

网页中的表单展示：

4.12.2 表单域

表单域是一个包含表单元素和提示信息的区域。

在 HTML 标签中，<form>标签对用于定义表单域，以实现用户信息的收集和传递。

<form>标签对会把其范围内的表单元素的信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url 地址	用于指定接收并处理表单数据的服务器程序的 url 地址
method	get/post	用于设置表单数据的提交方式，其取值为 get 或 post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

目前的学习暂时不用表单域提交数据，只需要写上 form 标签即可，后续的服务器编程学习会重新详细讲解如何使用表单以及这三个属性向后台提交数据。这里只需要记住两点：表单域是 form 标签；在写表单元素之前，应该有一个表单域将他们包含（为了提交数据，没有被包含在表单域内的表单元素数据不会被提交）。

4.12.3 表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或选择的内容控件。

1. input 表单元素

在表单元素中，<input> 标签用于收集用户信息。

前面学习的表格、图片等元素都仅仅可以展示给用户，但是 <input> 表单元素可以实现用户交互，用户可以输入内容。

在 <input> 标签中，包含一个必须属性：type，根据不同的 type 属性值，输入字段（即<input> 表单元素）拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值">

<input>标签是单标签
type 属性设置不同的属性值用来指定不同的控件类型

type 的属性值及其描述如下：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传，也称文件域
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符会被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据，重置为表单初始的默认状态（如恢复初始 value 或重新仅勾选 checked 等）
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段。用户可在其中输入文本，默认宽度为20个字符

除了 type 属性外，<input>标签还有很多其他属性，其常用属性如下：

属性	属性值	描述
name	用户自定义	定义 input 元素的名称
value	用户自定义	规定 input 元素的值
checked	checked或不设置值都行	规定此 input 元素首次加载时应当被选中，主要针对单选按钮和复选框，设置后一打开页面就会默认选中该表单元素（若对同一组的单选框都设置该属性，那么只会选中最后一个选项）
maxlength	正整数	规定输入字段的字符最大长度，使用较少，后面会使用正则表达式对输入字符数量进行限制而不是这个属性

    <form action="xxx.php" method="get">
        <!-- text文本框 用户可以在里面输入任何文字 -->
        用 户 名：<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
        <!-- password密码框 用户看不见输入的密码 -->
        <!-- 对于密码框，设置 value 即初始值/提示文本，也会显示掩码，所以无所谓 -->
        密 码：<input type="password" name="pwd"><br>
        <!-- radio单选按钮 可以实现多选一 -->
        <!-- 单选按钮必须有相同的名字 name 才可以实现同组互斥，即多选一！！！如果 name 没有设置或不同，则会被视为不同分组，导致无法实现多选一 -->
        性 别：男<input type="radio" name="sex" value="male" checked> 女<input type="radio" name="sex" value="female"><br>
        <!-- checkbox复选框 可以实现多选 当然如果只有单个选项也可以使用复选框 不影响 -->
        <!-- 复选框的 name 可以使得提交到后台的数据都在同一个字段下面 方便数据收集整理 -->
        爱 好：吃饭<input type="checkbox" name="hobby" value="eating"> 睡觉<input type="checkbox" name="hobby" value="sleeping">
        打 游 戏<input type="checkbox" name="hobby" value="playing"><br>
        <!-- 此处也就是向后台提交表单数据的常规方法，这里只是简单介绍一下，后续的服务器编程会详细讲解如何提交 -->
        <!-- 点击了提交按钮，就可以把表单域 form 内的表单元素的值提交给后台给服务器 -->
        <!-- 可以设置 submit 的 value 值来改变提交按钮的显示文本 默认为提交 -->
        <input type="submit" value="免费注册">
        <!-- 可以设置 reset 的 value 值来改变重置按钮的显示文本 默认为重置 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button，可以设置 value 来改变按钮的显示文本 默认为空 -->
        <!-- 按钮的功能一般是后期搭配JS自定义编写使用 -->
        <input type="button" value="获取验证码"><br>
        <!-- 上传文件时使用 -->
        头像：<input type="file" name="icon">
    </form>

一般来说 name 和 value 是每个表单元素都需要有的属性，主要给后台人员使用
同一组单选按钮或复选框需要有相同的 name 值
对于 value 设置默认显示的文本，支持所有 type=“text”、“password”、“hidden”、“email”、“number”、“date” 等（部分类型表现不同，如 check box、radio 的 value 含义不同）。

注意：所有的可提交表单元素，不管是 input，还是 select 或 textarea 等，如果没有设置 name 属性，他的数据都不会被提交到后台，浏览器在收集数据时直接忽略这些字段，因为表单提交时只会提交具有 name 属性的控件的数据，提交的数据格式都是 key=value 这种，key 就是 name ，value 是用户输入或选择的内容。

对于已经设置 name 的类似文本框 text 这种的 input 元素，设置 value 就相当于设置一个默认初始值，但可以被用户的输入覆盖（如果用户不输入，那么提交到后台的就是默认值，因此会弄混究竟是用户输入还是默认值，因此一般用 placeholder 而不是 value 来设置默认显示的文本，placeholder 的内容不会被提交到后台）。

对于已经设置 name 的单选按钮或复选框，如果不设置 value，那么提交到后台的 value 值会默认是 on，若是其他 type 的 input 元素，如果不设置 value 并且用户也没有输入，则会提交空。

2. label 标签对

<label>标签对为 input 元素定义标注（标签）。<label>标签对本身不属于表单，但是经常和表单元素一起搭配使用。

<label> 标签对用于绑定一个标签元素，当点击<label>标签对内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用于增加用户操作体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

注意：<label>标签对的 for 属性应当与相关元素的 id 属性相同

3. select 下拉表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义下拉列表。

    <form>
        <select name = "example">
            <option value = "option1">选项1</option>
            <option>选项2</option>
            <option>选项3</option>
        </select>
    </form>

<select>标签对中至少需要包含一对<option>。
selected="selected" 或者直接写 selected 都是有效的
在<option>标签对中定义 selected="selected" 时，当前项即为默认选中项。对于普通单选下拉框，如果写多个 selected，只会选择最后一个选项，对于多选下拉框 <select multiple>，则是全部选中
用户提交表单时，多选框提交到后台的 name 是 <select> 的 name，value 是 <option> 的 value，若 <option> 未设置 value 才提交 <option></option> 的文本内容
一般，对于下拉框， name写在 select，value 写在 option 即可。

4. textarea 文本域元素

当用户输入内容较多的情况下，就不能使用文本框表单元素了，因为它只能输入一行文本，此时我们可以使用<textarea>标签对。在表单元素中，<textarea>标签对是用于定义多行文本输入的控件。<textarea>标签对没有空白折叠规则！

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板或评论。

    <form>
 <!-- 若想设置默认文本直接在文本内容里面写,或者设置 placeholder -->
        <textarea name="example" rows="3" cols="20">
            文本内容
        </textarea>
    </form>

通过<textarea>标签对可以轻松创建多行文本输入框。
该标签的 value 是没有用的，写了也不会生效。
cols=“每行显示的宽度”，rows=“显示的行数”，但用户随意输入，内容可以很多行，超过 cols 时会自动换行，超过 rows 时会自动增加滚动条。但是我们在实际开发中不会使用这两个属性，都是使用 CSS 来改变大小。

注意：这里的 cols 仅仅表示区域宽度，按等宽字符数。英文一个、汉字和部分 emoji 大约算两个（是视觉上宽度，不是内容长度）；而前面所说的 maxlength 限制的是输入内容的字符数（以 Unicode 代码单元为单位），汉字、字母、数字、常规 emoji 都算1个。

二、CSS 学习

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

1. HTML 的局限性

HTML 只关注内容的语义。比如<h1>表明这是一个大标题，<p>表示这是一个段落，<img>表明这是一个图片。

很早的时候，世界上的网站虽然很多，但是都有一个共同点：丑。虽然 HTML 也可以做很简单的样式，但是非常的臃肿和繁琐，并且太过简单。

2. CSS-网页美容师

CSS 是层叠样式表（Cascading Stytle Sheets）的简称。有时也会称之为 CSS 样式表或级联样式表。

CSS 是一种样式表语言，主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）已经版面的布局和外观显示样式。

CSS 让网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML，让 HTML 更漂亮，让页面布局更简单。

3. 总结

HTML 主要做结构，显示元素内容。
CSS 美化 HTML，布局网页。
CSS 最大价值：由 HTML 专注去做结构呈现，样式交给 CSS，即结构（HTML）与样式（CSS）相分离。

注：大多数浏览器对于 CSS 样式都有默认的样式设定（UA 样式表），不同的浏览器设定也可能不同。注意并非是 CSS 属性的默认初始值，而是默认设定值。

1. CSS 语法规范

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

CSS 规则主要由两个主要的部分构成：选择器以及一条或多条声明。选择器表示给谁修改样式，后面的花括号内容表示修改何种样式以及如何修改，即分两步：选择指定标签，修改指定标签。

上图 CSS 做了两件事：首先找到所有的 h1 标签（选对人），然后设置这些标签的样式（做对事）。

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式。
属性和属性值以键值对的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用 : 分割，每个键值对后面一定要加上 ; 表示结束。

CSS 一般可以写在 <head> 标签对内的 <stytle> 标签对里面（而常用的网页元素在 <body> 标签对里面，体现了结构与样式相分离的特点），通常 <stytle> 标签对是写在 </head> 标签上方。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        p {
            color: red;
            /* 字体大小的修改后面一定要加上单位 px，表示像素 */
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

注：在 VSCode 内，CSS 的注释快捷键与 HTML 一样也是 Ctrl+/，但由于 CSS 是样式表语言，因此他的注释格式会有差别，不是像 HTML 一样的，而是/* */

2. CSS 代码风格

以下代码书写风格不是强制的，而是符合实际开发的推荐书写方式规范。

2.1 样式格式书写

1. 紧凑格式

p { color: red; font-size: 16px; }

2.展开格式

p {
    color: red;         
    font-size: 16px;
}

强烈推荐第二种格式，因为每个属性占一行更直观。（在实际开发时使用展开格式会方便进行代码修改维护，担心此格式太占行数是不必要的，因为当开发完成投入使用时可以使用代码压缩将代码压缩成想要的格式）

2.2 样式大小写风格

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

2.3 样式空格风格

属性值前面，冒号后面，保留一个空格。
选择器（标签）和大括号中间保留一个空格。

3. CSS 基础选择器

3.1 CSS 选择器的作用

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

3.2 选择器分类

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

基础选择器是由单个选择器组成的。
基础选择器有：标签选择器、类选择器、id 选择器和通配符选择器。

3.2.1 标签选择器

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

语法：

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

作用：

标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。

优点：

能够快速为页面中的同类型标签设置统一样式。

缺点：

不能设计差异化样式，只能选择全部的当前标签。

3.2.2 类选择器

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

语法：

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

.类名这种写法代表拥有该类名的所有元素，即选择所有 class ="类名" 的元素。所有具有对应 class 属性的结构（即 HTML 标签）会被类选择器选中进行对应修改。

注意：对于 CSS，如果某些样式属性对于选中元素类型不适用，浏览器会自动忽略这些不兼容的属性，不会报错，也不会影响其它元素的样式生效。因为 CSS 的设计理念就是宽容解析：即能是别的就用，不能识别的就忽略，即使属性本身不存在或者写错了也没事儿。

例如：将所有拥有 red 类的 HTML 元素均修改为红色。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 /* 类选择器口诀：样式点定义，结构类调用，一个或多个，开发最常用 */
       .bered {
           color: red;
           font-size: 16px;
       }
    </style>
</head>
<body>
    <ul>
        <li class="bered">列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    <div class="bered">也可以变红</div>
</body>
</html>

可以理解为结构中的类调用对应的样式，也可以理解为样式针对性修改具有对应类的结构（这样更容易理解）。

注意：

标签内直接使用 class = “类名”即可，不需要加 . 了，类选择器使用 . 进行表示，后面紧跟类名（自定义）。
不可以使用如 p、div、ul 等作为类名，因为已经被标签选择器使用。
长名称或词组可以使用中横线来为选择器命名，如gender-male。
不要使用纯数字、中文等命名类，尽量使用英文字母来表示。
命名要有意义，尽量使别人一眼就能看出来类名的目的。
关于前端的命名规范，详情见：Web前端开发规范手册

3.2.3 类选择器-多类名

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

1. 多类名使用方式

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

在标签 class 属性中写多个类名，多个类名中间必须用空格分开，然后这个标签就可以分别具有这些类名的样式。

注意：当多个类中有相同的属性时，最终生效该属性的是 CSS 文件中靠后的那一条。 class 的顺序（写在 HTML 里的顺序）不影响结果。

2. 多类名开发中的使用场景

可以把一些标签元素相同的样式（共同的部分）放到一个类里面，这些标签都可以调用这个公共的类，然后再调用自己独有的类，从而节省 CSS 代码，统一修改也很方便。

3.2.4 id 选择器

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

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

语法：

 #id名 {
         属性1: 属性值1;         
         属性2: 属性值2;
         属性3: 属性值3; 
         ...
 }

如将字体改为红色：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     /* 口诀：样式 # 定义，结构 id 调用，只能调一次，别人莫使用。 */
       #bered {
           color: red;
       }
    </style>
</head>
<body>
        <div id="bered">字体</div>
</body>
</html>

具体的使用方法与类选择器非常相似，但是 id 属性只能在每个 HTML 文档中出现一次，也就是说某个标签使用了这个 id 之后别的标签就不允许再次使用了，即 id 具有唯一性，id 选择器与类选择器最大的区别就是在于使用次数上。

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

3.2.5 通配符选择器

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

 * {
         属性1: 属性值1;         
         属性2: 属性值2;
         属性3: 属性值3; 
         ...
 }

通配符选择器不需要 HTML 中的任何标记，自动就会给所有的元素使用相应样式
只有在特殊情况才会使用通配符选择器，后续会讲解

注意：CSS 是“容忍未知”或“容错”的样式语言。如果你给某个元素设置它本身不支持的属性，浏览器会自动忽略那些无效的或不适用的样式，而不是报错。

3.2.6 基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如 p 标签	不能差异化选择	较多	p {color: red;}
类选择器	可以选出1个或多个标签	可以根据需求选择	非常多	.nav {color: red;}
id 选择器	一次只能选择一个标签	id 属性只能在每个 HTML 文档中出现一次，具有唯一性	一般和 JS 搭配	#nav {color: red;}
通配符选择器	选择所有标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}

4. CSS 字体属性

CSS Fonts（字体）属性用于定义字体系列（种类）、大小、粗细和文字样式（如斜体）。

4.1 字体系列

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

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

各种字体之间必须使用英文状态下的逗号隔开，最后一个字体以分号结尾
为了避免报错和规范，字体名有空格或非英文字符，一律加引号（单双均可），英文单词型字体名中没有空格或特殊字符的，一般可以不用加引号，当然也可以加引号。（注意：对于通用字体簇绝对不可以加引号，因为字体簇不是一款具体的字体，比如 monospace、serif 等）
尽量使用系统默认自带字体，不要用花里胡哨的字体，防止用户未安装该字体或其他问题，保证在任何用户的浏览器中都能正常显示。
最常见的几个字体：font-family: "Microsoft YaHei", Tahoma, Arial, "Hiragino Sans GB";
同时写了多个字体，浏览器会依次检查字体是否安装，如果已安装，则就使用该字体，否则继续向后检查，如果都没有安装，则会使用浏览器默认字体进行显示。
实际开发中，经常把字体定义给 <body> 标签，这样页面中的主要元素（<body></body> 标签内的自动继承字体样式的 HTML 元素）都会以该字体进行显示。（不推荐使用通配符选择器，因为这样会使所有元素都强制应用该字体，包括继承和不继承 font-family 的元素，可能会有兼容性和显示问题，开销也很大。

注：部分字体名称可以用汉字写，但是推荐使用英文来写，这样兼容性更好。

4.2 字体大小

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

p { font-size: 10px;}

一定要加单位px，px（像素）大小是我们网页最常用的单位，谷歌浏览器默认的文字大小是 16px，不同浏览器可能默认显示的字号大小不一致，因此尽量给一个明确大小，不要默认大小。和字体系列一样，也可以给 body 指定整个页面主要元素文字的大小（标题标签比较特殊，不会自动继承字体大小和下面所说的字体粗细，需要单独指定）。

4.3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

font-weight 的值有多个：

normal：正常字体，同时也是默认值（在 CSS 手册里面该项为紫色，表示默认值）。相当于 number 400
bold：粗体。相当于 number700。
bolder：特粗体。
lighter：细体。
number：100|200|300|400|500|600|700|800|900，数字后面不需要加单位，格式如下：font-weight：700即可。实际开发中也是提倡使用数字来改变字体粗细。（注：CSS 规范允许使用1-1000任意数字来表示字体粗细，但大部分传统字体只支持固定权重即100|200|300|400|500|600|700|800|900，写720浏览器会自动映射到最近的可用值700。而可变字体如 Inter Variable、Roboto Flex 等则支持连续的粗细值）

如果文字很重要的话，推荐使用 HTML 的 strong 标签对，语义会更强烈。

4.4 字体样式

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

p { font-style: normal;}

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

注意：平时我们很少给文字加斜体，反而要使用 normal 给斜体标签 em、i 改为不倾斜字体。为什么不直接不写斜体标签呢？是为了保留语义、方便机器看得懂，比如阅读器或盲人辅助设备在读到有斜体标签的时候会读出强调语气或直接“强调”，如果不写则机器无法识别。其实如斜体标签 em、加粗标签 strong、删除标签 del，下划线标签 ins 等都是语义标签，他们的样式是附带的，真正的功能是表达语义，因此有时不需要他们的样式只需要语义。

4.5 字体复合属性

字体复合属性可以把以上文字样式综合来写，这样更节约代码。

body{ font : font-style font-weight font-size/line-height font-family;}

例：

font: italic bold 16px/1.5 "Microsoft YaHei", Arial;

使用 font 属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各个属性之间用空格隔开，最后一个属性以分号结尾
除了 font-size 和 font-family，其他都可以省略（浏览器将使用默认值或继承），但你必须写对语法顺序且要包含最核心的两个值，否则会报错或样式不生效。

注意：顺序绝对不可以改变！！！行高如果要写是需要按照 /行高这样的格式加在font-size后面的。

4.6 字体属性总结

属性	表示	注意点
font-size	字号	通常用的单位是 px 像素，一定要带单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是700或 bold，不加粗是400或 normal，记住数字不要带单位
font-style	字体样式	倾斜是 italic，不倾斜是 normal，工作中最常用 normal
font	字体连写	1，有顺序要求，不能随意更换顺序 2，字体和字号必须有

5. CSS 文本属性

字体属性：管的是“字是什么形状的”。
文本属性：管的是“字在页面上的展示方式和排版表现”。

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距（即行高）等。

注意：当文本是连续的英文或数字时不会触发自动换行，浏览器将其视作一个整体单词，此时如果长度超过容器宽度则会溢出显示或者出现滚动条。CSS 设置 word-break 或者 overflow-wrap 可以让他换行，避免这种情况。

5.1 文本颜色

color 属性用于定义文本颜色。

div {
     color: red;
}

属性值的表示方式	属性值格式
预定义的颜色值	red、green、blue等
十六进制（#RRGGBB）	#FF0000，#FF6600，#29D794等
RGB 代码	rgb(255,0,0)或rgb(100%,0%,0%)

实际开发中最常用的是十六进制表示。（对于形如 #AABBCC 的十六进制颜色可以简写为 #ABC，但必须是 R、G 和 B 均成对出现的时候才能像这样简写）

或者直接在 VS Code 里面使用调色板也可以切换颜色。

注：具体颜色的表示不需要记，实际开发中一般可以使用吸管工具将效果图的颜色直接吸取使用。

5.2 对齐文本

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

div {
     text-align: center;
}

属性值	解释
left	左对齐（默认值）
center	居中对齐
right	右对齐

注：要想设置图片对齐方式，直接对 img 标签设置 text-align 是没用的，必须将图片看作文本，设置包裹图片的标签的 text-align 才可以。

5.3 装饰文本

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

div {
     text-decoration: underline;
}

属性值	解释
none	默认。没有装饰线（最常用）
underline	下划线（常用）。链接 a 自带下划线
overline	上划线（几乎不用）
line-through	删除线（不常用）

5.4 文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进，单位通常有 px 和 em。

div {
     text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值（文字会往前进，可能导致看不见）。

p {
     text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置 font-size，em 的基准值会向上继承，直到父元素最近的（层层往上，直到 body 或根元素），用它的 font-size 作为基准。对于根元素（如 html），em 单位通常最终会落到浏览器的默认字体大小（如通常 16px）。

5.5 行间距

line-height 属性用于设置行间距（行高）。行间距可以带单位也可以不带单位，不带单位时表示行间距为当前元素的文本大小 font-size 的倍数。

div {
     line-height: 26px;
}

修改行间距本质是修改上下间距。上间距=下间距=（行间距-文本高度）/ 2。

TIP：如果一个页面上有多行文本，可使用测量工具如 FSCapture 测量上一行文本的下边沿到下一行文本的下边沿，这个长度就是行间距。还有，行高始终是从内容区域的上边界来计算的，所以行高太大会将文字挤出盒子（同时，知道行高、文字大小和内容区域上边界位置，也可以得到文字的位置）。

5.6 文本属性总结

属性	表示	注意点
color	文本颜色	通常使用十六进制，而且是简写形式，如#FF0000
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常用于段落首行缩进 2 个字距离，text-indent：2em
text-decoration	文本修饰	添加下划线：underline，取消下划线：none
line-height	行高	控制行与行之间的距离

6. CSS引入方式

6.1 CSS 的三种样式表

按照 CSS 样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：

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

6.2 内部样式表

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

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

<style>标签对理论上可以放在 HTML 文档的任何地方，但一般都会放在文档的<head>标签对中。
通过此种方式，可以方便控制当前整个 HTML 页面中的元素样式设置。
代码结构清晰，但是并没有实现结构与样式完全分离，因为最终的 CSS 还是放到了 HTML 页面里。
使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是平时练习的常用方式

6.3 行内样式表

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

<div style="color:red; font-size:12px;">行内样式表示例</div>

style 其实就是标签的属性
要写在双引号中间，写法要符合 CSS 规范
控制范围：仅为当前的标签设置样式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对少数举个元素添加特定的简单样式的时候，可以考虑使用
使用行内样式表设定 CSS，通常也被称为行内式引入

6.4 外部样式表

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

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

新建一个后缀名为 .css 的样式文件，把所有的 CSS 代码都放入此文件中。
在 HTML 页面中，使用<link>标签（单标签）引入这个文件。
```
<link rel="stylesheet" href="css文件路径">
```

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

link 标签写在 head 标签对内。
.css 样式文件中不需要写 style 标签对，只需要写 CSS 代码。
使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式。

6.5 CSS 引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	结构与样式部分相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构与样式相分离	需要引入	最多	控制多个页面

7. Chrome调试工具

Chrome 浏览器提供了一个非常好用的调试工具，可以用来调试 HTML 结构和 CSS 样式。

7.1 打开调试工具

打开 Chrome 浏览器，按下 F12 键或者右击页面空白处-检查即可，选择 Elements（元素）就可以查看当前页面的 HTML 结构和 CSS 样式了。

7.2 使用调试工具

Ctrl + 滚轮可以调整开发者工具代码大小
Elements（元素）中 HTML 和 CSS 是分开展示的。
可以点击选择元素的按钮，然后选择页面上的某个元素查看他的 HTML 和 CSS 代码。
选择查看元素的样式时，可以直接改动数值（上下箭头或直接输入），但注意者这仅仅用于调试，并不会真正应用到源代码上。
Ctrl + 0 复原浏览器页面大小
如果点击元素，发现没有对应的样式引入，极有可能是类名或者样式引入错误
如果有样式，但是样式前面有黄色感叹号提示，则是样式属性书写错误

8. Emmet 语法

Emmet 语法的前身是 Zen Coding，它使用缩写，来提高 HTML/CSS 的编写速度，VSCode 内部已经集成了该语法。

8.1 快速生成 HTML 结构语法

生成标签，直接输入标签名，按下 TAB 即可，比如输入 div，按下 TAB键，即可生成<div></div>
如果想要生成多个相同标签，加上 * 按下 TAB 键即可，比如 div*3（不要加空格写成 div * 3！！！会不生效），就可以快速生成3个 div 标签
如果有父子级关系的标签，可以用 > 按下 TAB 键即可，比如 ul>li
如果有兄弟关系的标签，用 + 后，按下 TAB 键即可，比如 div + p
如果生成带有类名或者 id 名字的，直接在标签名写 .demo 或者 #two，然后按下 TAB 键即可。如 p.nav、span.name等。（直接写 .名或 #名不写标签名会默认生成为 div 标签）
接第 5 条，如果希望生成的标签类名或者 id 名是有顺序的（从 1 开始计数），可以用自增符号 $，然后按下 TAB 键即可，如 p.name$*5，会生成 class 为 name1 到 name5 的5个 p 标签，不加 $ 则会生成5个 class 都是 name 的 p 标签
如果想要在生成的标签内部写内容可以用 {} 表示，然后按下 TAB 即可，如 div{这是 div 标签}，div{这是 div 标签}*5，div{这是 div 标签$}*5

注：上述的写法都不要在符号、字母和数字之间加上空格，会不生效。

8.2 快速生成 CSS 样式语法

CSS 基本采取简写形式即可：

比如 w，按 TAB 键，即可生成 width: ;
比如 lh26，按 TAB 键，即可生成 line-height:26px;
比如 ti2em，按 TAB 键，即可生成 text-indent:2em;

注：多数常用的 CSS 属性，在使用 Emmet 语法时，不写单位，只写数字，按下 TAB 键后会自动补全默认单位 px，如果需要指定别的单位，需要显式写出来。若属性本身没有或不需要单位，则不会自动补全。

9. 复合选择器

9.1 什么是复合选择器

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

复合选择器可以更准确高效地选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

9.2 后代选择器（重要）

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

语法：

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

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

元素1和元素2之间一定要用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意的基础选择器（如下列代码）
不仅限于两个元素的选择，可以多层，最终选择的是符合条件的最右边的元素，如下面的ol li a（即使有时候省略了一部分也能选择出想要的结果，一般也还都推荐将选择器元素写全，防止后续出现问题。）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol li a {
            color: red;
        }
        .nav li a {
             color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ol>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

</body>
</html>

注：ol li a 表示所有的 ol 包含的 li 内的 a 标签，而 ol a 表示所有的 ol 标签的后代 a 标签。前者必须是某个 li 标签的后代。

对前面知识点的补充：如果子标签没有自己明确设置一个可继承属性，那么对父标签进行该属性的样式修改，会影响到子标签。
如果子标签已经明确设置了该属性，或者该属性本身不可继承，那么父标签的样式不会影响子标签。
例如 <h1>、<h2> 等标题标签，浏览器默认已经给它设置了 font-size、font-weight等非继承属性，所以父元素设置这些属性不会影响到它们，但诸如 color 继承属性这种仍然能被继承，若子元素没设置，那么父元素的修改就会影响到子元素。

9.3 子选择器（重要）

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

语法：

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/* 选择 nav 类下的所有最近一级的 a 标签元素 */
        .nav>a{
            color: black;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">Home</a>
        <p><a href="#">About</a></p>
        <p><a href="#">Contact</a></p>
    </div>
</body>
</html>

元素1和元素2之间用大于号 > 隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子、重孙之类都不归他管，因此也可以称为亲儿子选择器
元素1和元素2也可以是任意的基础选择器，并且也可以连续多层选择

9.4 并集选择器（重要）

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

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

语法：

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

上述语法表示选择元素1和元素2（可继续添加如元素3等）

元素1和元素2之间用逗号隔开
并集选择器通常用于集体声明
约定的语法规范：并集选择器喜欢竖着写各个元素（如下）
最后一个选择器元素不需要加逗号

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div,
       p,
       .nav li {
           color: red;
       }
    </style>
</head>
<body>
    <div>内容1</div>
    <p>内容2</p>
    <span>内容3</span>
    <ul class="nav">
        <li>内容4</li>
        <li>内容5</li>
        <li>内容6</li>
    </ul>
</body>
</html>

9.5 伪类选择器

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

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

伪类选择器有很多种，比如有链接伪类、结构伪类等，下面介绍两种伪类选择器。

9.5.1 链接伪类选择器

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将未访问的链接字体修改为黑色并去除下划线 */
      a:link{
        color: #333;
        text-decoration: none;
      }
      /* 将已访问的链接字体修改为紫色 */
      /* 由于在 CSS 的层叠和继承规则下，没有被新状态明确写出的属性会继承之前的状态 */
      /* 所以点击链接后 虽然颜色变成紫色，但没有设置 text-decoration，依旧保留 a:link 的 text-decoration: none； */
      /* 因此会保持无下划线的样式 */
      a:visited{
        color: purple;
      }
      /* 将鼠标悬停时的链接字体修改为亮蓝色 */
      a:hover{
        color: royalblue;
      }
      /* 将鼠标按下但未弹起时的链接字体修改为红色 */
      a:active{
        color: red;
      }
    </style>
</head>
<body>
    <a href="#">链接网站1</a>
    <a href="#">链接网站2</a>
    <a href="#">链接网站3</a>
    <a href="#">链接网站4</a>
    <a href="#">链接网站5</a>
    <a href="#">链接网站6</a>
</body>
</html>

注意事项

为了确保生效，请按照 LVHA 的顺序声明，即：link，：visited，：hover，：active（CSS 是一种样式语言，不会“运行”，而是被浏览器解析并应用到页面上的 HTML 元素。浏览器会从上到下依次解析样式规则。只有在页面加载、内容变更或元素状态变化等需要更新样式时，才会重新解析和应用这些规则。因此在权重相同的情况下，后写的样式可以覆盖前面的样式。）
因为 a 链接在浏览器中具有初始默认样式，所以实际工作中都需要给链接单独指定样式。

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

/* 给一般状态下的链接设置一个样式 */
a{
color: gray;
text-decoration: none;
}
/* 给鼠标经过时设置一个样式 */
a:hover{
color: royalblue;  
text-decoration: underline;    
}

9.5.2 :focus 伪类选择器

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     input:focus{
        background-color: skyblue;
     }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

注意：只有在获得光标的时候才会变为指定样式，失去光标后，这些样式也会取消。

9.6 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于.nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号.nav,.header
连接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover，实际开发写法
:focus 选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

10. CSS 的元素显示模式

10.1 什么是元素的显示模式

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

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

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

10.2 块元素

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

块级元素的特点：

独占一行
高度、宽度、外边距以及内边距都可以手动控制
高度默认随内容高度变化
宽度默认是容器（父级容器内容区域宽度）的100%
是一个容器及盒子，里面可以放行内元素或者块级元素

注意：

文字类的块级元素内不允许使用块级元素，<p>标签主要用于存放文字，因此<p>标签对内不能放块级元素，特别是不能放<div>，同理，<h1>-<h6>等都是文字类块级标签，里面也不能放其他块级元素

10.3 行内元素

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

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置样式是无效的
默认宽度就是它本身内容的宽度（像 input、textarea、button 这类表单控件，默认都有浏览器自己设定的宽度，因此即使本身内容为空也会显示一个宽度）
行内元素只能容纳文本或其他行内元素

注意：

链接里面不能再放链接；特殊情况下链接<a>里面可以放块级元素，但是给<a>转换一下成为块级模式最安全。

10.4 行内块元素

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

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度、行高、外边距以及内边距都可以控制（块级元素特点）

10.5 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	他本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	他本身内容的宽度

10.6 元素显示模式的转换

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将行内元素 a 转换为块级元素 */
     a{
        width: 200px;
        height: 100px;
        background-color: skyblue;
        color:gray;
        text-decoration:none;
        display: block;
     }
     /* 将块级元素转换为行内元素 */
     div{
        width: 200px;
        height: 100px;
        background-color: orange;
        display: inline;
     }
     /* 将块级元素转换为行内块元素 */
     span{
        width: 200px;
        height: 100px;
        background-color: yellow;
        display: inline-block;
     }
    </style>
</head>
<body>
    <a href="#">我现在是一个块级元素</a>
    <div>我现在是一个行内元素</div>
    <span>我现在是一个行内块元素</span>
</body>
</html>

注意：只要在同一个 CSS 选择器或规则块内，属性的顺序并不影响最终样式表现。只要属性没有被后面的同选择器或更高优先级的 CSS 覆盖，它们的生效顺序和写的先后顺序无关，都会生效。唯一有影响的是：同一属性在同一个 CSS 规则块内被重复写了多次，那么“后写的会覆盖前面的”。因此这里 display 即使写在 width 和 height 后面也没关系。

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

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

解决方案：让单行文字的行高等于盒子的高度，就可以让该行文字在当前盒子内垂直居中。默认情况下，盒子内的文本是靠左上角排列的。若行高小于盒子高度，则文字偏上，若文字行高大于盒子高度，则文字偏下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>我要居中</div>
</body>
</html>

注意：区分文本和元素，二者不属于一体，便于后续理解。

11. CSS 的背景

一般，盒子的背景范围是内容区域+padding 区域，但是也可以通过 background-clip 属性来修改这个范围。

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

11.1 背景颜色

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

background-color：颜色值;

一般情况下元素背景颜色默认值是 transparent （透明），当然也可以手动指定背景颜色为透明色。

11.2 背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

background-image：none|url(url);

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

11.3 背景平铺

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

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

平铺的效果类似下图：

注：页面元素可以同时添加背景颜色和背景图片，只不过背景图片会显示在背景颜色上层

11.4 背景图片位置

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

background-position：x y;

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

参数值	作用
精确单位	百分数/由浮点数字和单位标识符组成的长度值
方位名词	left/center/right top/center/bottom

1.参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一样
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

因为很简单就能通过一个方位名词判断另一个方位名词代表的轴

2.参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个肯定是 y 坐标,，并且必须带单位（px、%、em等），否则无效。且均是以左上角为偏移起点。
如果只指定一个数值，那么该数值一定是 x 坐标，另一个默认垂直居中

2.参数是混合型

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

注：

如果页面上仅需要显示一张很大的图片用于装饰或主视觉，并且不需要被下载、SEO 收录或者被辅助工具识别，推荐用 CSS 背景图片（background-image），这样可以方便地控制图片裁剪、居中和重点内容展示。如果图片本身信息很重要，需要被搜索收录、下载保存或对无障碍友好，则应使用<img>标签插入图片，并通过 CSS 控制显示效果。简单理解：背景图片适合“只看”，而图片插入适合“还要操作”。
前端 CSS 属性值带单位时，每个数值的单位可以自由混合使用，只要语法和属性要求正确就可以。

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

background-attachment 属性设置背景图像在页面滚动时，是否固定或者随着页面的其余部分滚动。后期可以用于制造视差滚动的效果。

background-attachment：scroll | fixed

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

background-attachment: scroll

背景图片始终随着它所属的元素（比如你设置在 div 上）一起定位和滚动。
如果盒子内容有滚动条，滚动内容时，背景图片不会跟着内容一起移动。
如果滚动的是页面（比如 body 滚动），而你的 div 位置没变，背景图片也会跟着 div 保持固定，相当于“粘在盒子里”。
背景永远只显示在它所属的元素区域内，不会露出到外面。

background-attachment: fixed

背景图片是相对于整个页面视口“固定”的。
无论你的元素怎么移动（因为页面滚动、盒子滚动或其它布局变化），背景图片都是显示在视口上某个位置——盒子相当于是一个“窗口”，可以看到“页面上的固定背景”。
如果页面滚动，盒子位置变了，盒子里看到的背景图片也会“跟着页面动”，所以盒子里能看到的就是背景图片的不同部分。

11.6 背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并写在同一个属性 background 中，从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；这是实际开发中提倡的写法。

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

注：每个属性之间需要用空格隔开；对于 CSS 的复合属性，省略的属性的参数值会按照默认值生效

11.7 背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

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

前三个参数表示三原色，最后一个参数是 alpha 透明度，取值范围在0~1之间。0表示完全透明，1表示不透明。
习惯上会将0.3的0去掉，写为background-color: rgba(0,0,0,.3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
是 CSS3 新增属性，是 IE9+ 版本浏览器才会支持的。但现在实际开发中，不太关注兼容性写法了，可以大胆使用

11.8 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是 x 和 y 坐标
background-attachment	背景附着	scroll（背景滚动）/ fixed（背景固定）
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；
背景色半透明	背景颜色半透明	background-color: rgba(0,0,0,0.3); 后面必须是4个值

12. CSS 三大特性

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

12.1 层叠性

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

层叠性原则：样式冲突，遵循的原则是后写的样式会覆盖掉前面的样式；样式不冲突，不会层叠。因此如果后面的选择器只修改了部分样式，只会覆盖前面相同的样式，未被修改的其它样式依然保留并生效。

12.2 继承性

CSS 中，子标签会继承父标签的某些样式，如文本颜色和字号，称为继承性。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

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

12.3 优先级

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

选择器相同，执行层叠性
选择器不同，则根据选择器权重执行

选择器权重如下表所示。

选择器	权重
继承或 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器(形如:hover而非a:hover)	0，0，1，0
ID 选择器	0，1，0，0
行内样式 style=“”	1，0，0，0
!important 重要的（例：color:pink!important）	∞无穷大

优先级的注意事项：

权重的等级判断从左向右，如果某一位数值相同，则判断下一位数值大小
继承的权重是0，即如果某个元素的某个样式是通过“继承”来的，那么这个样式的权重是0。只要有任何对这个元素本身的直接样式（如通过选择器直接选中它赋值的样式），无论这个直接样式权重高低，都会覆盖继承的样式。父元素的权重有多高都没用，子元素就算被父亲影响了但继承得到的都是权重为0的样式。（注意 a 链接本身是会被浏览器设置一个初始样式的，也会覆盖继承的样式）
* 是直接作用于目标元素的，而继承只是没有作用时的“兜底”。只要某个样式是直接作用于该元素的（无论权重多低），都会优先于继承。因此如果 * 和继承同时出现，即使他们的权重都是0，* 还是优先于继承。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。权重叠加的时候四位数字分别相加，互不影响，不会产生进位，如10个0，0，0，1相加结果是0，0，0，10。

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

13. CSS 盒子模型

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

13.1 网页布局的本质

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子
通过 CSS 设置好盒子样式，然后放到相应位置
往盒子里面装内容

网页布局的核心本质：利用 CSS 装饰、摆放盒子。

13.2 盒子模型的组成

盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器，而 CSS 盒子模型指的是 CSS 层面怎样处理、布局、渲染这些盒子的一套机制。

CSS 盒子模型包括：边框、外边距、内边距和实际内容。

元素的 box-sizing 属性可以被指定为下面的两种关键字，分别代表两种盒子模型。

content-box，默认值，标准盒子模型。盒子的 width 与 height 属性只包括内容区域的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。下面大部分讲的时候都是基于默认值 content-box 的。

border-box，盒子的 width 与 height 属性包括内容区域、内边距和边框，但不包括外边距。

这两种模型的盒子实际占用大小都是内容区域 + 内外边距 + 边框

注意：盒子里面的内容默认是紧贴盒子内容区域左上角的

13. 3 边框（border）

盒子模型默认是没有可见边框的，但 border- 属性可以设置元素的边框。边框由三部分组成：边框宽度（粗细）、边框样式、边框颜色。（浏览器为了方便表单交互，会给一部分元素如 textarea、input 设置默认边框）

属性	作用
border-width	定义边框粗细，一般情况下单位用 px，默认值是由浏览器设定，一般为 medium
border-style	边框样式，默认值是 none，必须设置该属性才能启用并看见边框，重点记住三个参数值：solid 实线、dashed 虚线、dotted 点线，其余的用的少且兼容性差，使用的时候查阅即可
border-color	边框颜色，默认值为黑色

注：不设置 border-style，其余两个设置是没有用的，边框不存在。

边框属性的复合写法（没有顺序限制，但推荐书写顺序如下例所示）：

border: 1px solid red;

边框四边可以单独设置，并且可以只给盒子设置其中某几条边框而不全设置，如下例单独设置上边框，显示也只会显示上边框：

border-top: 1px solid red;
/* 上边框：border-top、下边框：border-bottom */
/* 左边框：border-left、右边框：border-right */、
/* 也可继续加-color、-style、-width 限定 */

这种写法属性值直接写 0 或者 none 表示没有边框。

注：设置 border 相当于分别对 border-top，border-bottom，border-left 和 border-right 进行了设置，因此可以再利用层叠性单独对每条边框进行调整。

13.4 表格的细线边框

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

语法：

border-collapse: collapse;

由于 border-collapse 的默认值是 separate，因此表格之间的单元格之间以及单元格和整个表格边框之间默认是有一个间隔距离的，通常是2px，因此如果不合并边框会使得边框之间有间隙或者线条变粗(贴到一起了)，border-collapse: collapse;表示相邻的边框合并到一起，使用之后会解决这个问题。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>今日小说排行榜</title>
    <style>        
        /* table就是一个大盒子，而td和th是内部的小盒子 */
        /* 因此表格table和单元格td以及头部单元格th都需要设置边框，只设置table则只会有盒子外边框而没有内部的行列划分 */
        table,
        td,
        th {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }


        table {
            width: 500px;
            height: 249px;
        }

        th {
            height: 35px;
        }
    </style>
</head>

<body>
    <!-- 使用 HTML 属性写法：<table align="center" width="500" height="249" border="1" cellspacing="0"> -->
    <!-- 不推荐使用 HTML 设置这些属性，以上属性均可以通过 CSS 设置 -->
    <table align="center" cellspacing="0">
    <!-- align 和 cellspacing 表示表格相对周围元素的对齐方式和单元格间距， 在 HTML5 中不支持，后续会讲如何使用 CSS 来设置 -->    
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>

            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

13.5 内边距（padding）

默认的内容是紧贴盒子左上角显示的，padding- 属性用于设置内边距，即边框与内容之间的距离，若盒子没有边框则以内容区域的边为准。

（注：盒子的自身实际大小始终=内容区域+内边距+边框，不包括外边距，外边距表示盒子与其他元素之间的距离）若已经设置了 width 和 height，对于 content-box，设置内边距或边框，内容区域大小不变，相当于外扩，盒子的实际大小会变化。而对于 border-box，设置内边距或边框，盒子的实际大小不会变，因此会会压缩内容区域的大小，因为 border-box 的 width 和 height 是包含了内边距和边框的。

若没有设置 width 和 height，即均为 auto(对于块级元素，表示为填满父容器，不允许超过父容器，若要超过父容器了则会强制压缩内容区域大小，注意区分与100%的差异)。当 height 未设置时，无论是 content-box 还是 border-box，设置内边距或边框都会往外撑高盒子，不会压缩内容区域。当 width 未设置时，对于块级元素，content-box 若设置内边距或边框都会往外扩，不会压缩内容区域，border-box 的总宽度依然由 auto 算成填满父容器，内边距或边框会压缩内容区域；对于行内元素，是不受 box-sizing 影响的，宽度永远跟随内容，不会被挤压，只会外扩；对于行内块元素，宽度由内容决定，会包裹内容，content-box 若设置内边距或边框都会往外扩，不会压缩内容区域，而 border-box 若设置内边距或边框会压缩内容区域。

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

padding 复合属性可以有一到四个值，用于简化代码。以下四种情况，在实际开发中都会经常遇到。

值的个数	表达意思
padding:5px;	1个值，代表上下左右都有5像素内边距
padding:5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding:5px 10px 20px;	3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding:5px 10px 20px 30px;	4个值，代表上内边距是5像素，右内边距是10像素，下内边距是20像素，左内边距是30像素（即顺时针）

当我们给盒子指定 padding 的值后，内容和边框/边就有了距离，即添加了内边距。

13.6 外边距（margin）

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

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

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

tip：浏览器按下 F12 后进入已计算可以查看当前网页元素的盒子模型的具体数值。

13.7 外边距典型应用

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

盒子必须指定了宽度 width。（不指定就和父容器一样宽了）
盒子左右的外边距都设置为 auto。（父容器视口宽度会动态变化（响应式、滚动条、缩放、边框、内边距、媒体查询），因此手动测量浏览器宽度后再设置左右边距具体值是麻烦且不准确的）

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

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0（或其他值） auto;

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

13.8 外边距合并

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

主要有两种情况：

相邻块元素垂直外边距的合并
嵌套块元素垂直外边距的塌陷

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

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

解决方案：尽量只给一个盒子添加 margin 值。

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

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值（即视觉上父元素的上外边距会取最大的那个值，子元素在父元素内部仍然不变化。实际上父元素和子元素的 margin 的值还是原来的值，只是视觉上合并了）。

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加 overflow: hidden（后续详细介绍）

注意：上外边距的塌陷只会发生在父元素和第一个子元素之间，中间的子元素 margin 不会影响父元素。

13.9 清除内外边距

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

* {
    padding:0; /* 清除内边距 */
    margin:0; /* 清除外边距 */
  }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（设置了也没用或者影响其他布局），但是转换为块级和行内块元素就可以了。

13.10 PS 基本操作

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

文件 - 打开：可以打开我们要测量的图片
Ctrl + R：可以打开标尺，或者视图 - 标尺
右击标尺，把里面的单位改为像素
Ctrl + 加号/减号可以放大或缩小视图
按住空格键，可以拖动 PS 视图
用选区工具可以测量大小，吸管工具可以获取颜色
Ctrl + D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

13.11 总结

1. 布局为啥用不同盒子，能不能只用 div？

标签都是有语义的，合理的地方用合理的标签，比如产品标题就用 h，大量文字段落就用 p。

2. 为什么使用非常多的类名？

类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也更方便。

3. 究竟使用 margin 还是 padding？

大部分情况下两者可以混用，两者各有优缺点，但是根据实际情况，一般总是用更简单的那种方法实现。

4. 自己做页面的时候没有思路？

同一个页面是可以有很多种布局的实现方式的，可以一开始先模仿别人的写法，然后再提炼出自己的风格。

14. 圆角边框

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

border-radius 属性用于设置元素的外边框圆角(注意只是视觉上的裁剪，并不会改变盒子模型各个部分的真实样子和大小)，且始终是贴紧盒子最大可视区域的外边框的，内部区域的矩形会以这个圆/椭圆的圆心为基准继续裁剪为圆角。

语法：

border-radius:length

例：

div{
    width:300px;
    height:150px;
    background-color:pink;
    border-radius:10px;
   }

radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。注意这里的边框指的就是 border 的外沿。

参数值可以为数值或者百分比（一个百分比分别表示（椭）圆的 rx、ry 是基于盒子的 width 和 height，此时若是长方形盒子，那么就会以椭圆来裁剪）的形式，两种形式可以混写。如果数值写为10px/20px，代表该圆角的 rx 为10px，ry 为20px，如果只写10px，代表 rx、ry 都是10px；如果百分比写为10%，代表圆角的 rx 为 width 的10%，ry 为高度的10%，如果写为10%/20%，代表代表圆角的 rx 为 width 的10%，ry 为高度的20%。
针对正方形盒子，设置 border-raidus 为盒子最大可视区域的外边框边长的一半即可显示为一个圆形盒子。
如果是矩形盒子，设置 border-raidus 为盒子最大可视区域的外边框高度的一半，则可显示为一个圆角矩形。
该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角。跟两个值则第一个值代表左上角和右下角，第二个值代表右上角和左下角。跟三个值则第一个值代表左上角，第二个值代表右上角和左下角，第三个代表右下角。
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius。

15. 盒子阴影

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

语法：

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

值	描述
h-shadow	必需。阴影在水平方向的位置，允许负值。
v-shadow	必须。阴影在垂直方向的位置，允许负值。
blur	可选。模糊距离（阴影的虚实程度）。为0表示实阴影，不模糊。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色，请参阅CSS颜色值。一般设置成半透明灰色比较好看，如rgba(0, 0, 0, .3)
inset	可选。将外部阴影(ouset)改为内部阴影。

注意：

默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效。
盒子阴影不占用空间，不会影响其他盒子排列。
前四个属性单位一般是 px

不仅仅a:hover是可以的，任何盒子都可以加:hover，这样鼠标经过盒子就会有对应效果，如div:hover，可以利用这个和上面的阴影使得鼠标经过盒子时产生阴影。

16. 文字阴影（了解即可）

在 CSS3 中可以使用 text-shadow 将阴影应用于文本。

语法：

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

值	描述
h-shadow	必需。阴影在水平方向的位置，允许负值。
v-shadow	必须。阴影在垂直方向的位置，允许负值。
blur	可选。模糊距离（阴影的虚实程度）。为0表示实阴影，不模糊。
color	可选。阴影的颜色，请参阅CSS颜色值。一般设置成半透明灰色比较好看，如rgba(0, 0, 0, .3)

17. 浮动

17.1 浮动

17.1.1 传统网页布局的三种方式

网页布局的本质——用 CSS 来摆放盒子，把盒子摆放到相应位置。

CSS 提供了三种针对 PC 端的传统布局方式（简单说就是盒子如何进行排列顺序）：

普通流（标准流）
浮动
定位

标准流（普通流/文档流）

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

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

常用元素：div, hr, p, h1-h6, ul, ol, dl, form, table

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

常用元素：span, a, i , em 等

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

这三种布局方式都是用来摆放盒子的，盒子摆放到合适的位置，布局自然就完成了。

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

17.1.2 为什么需要浮动？

提问：我们用标准流能很方便地实现如下效果吗？

1. 如何让多个块级盒子（div）水平排成一行？

比较难，虽然转换成行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙（来源是 HTML 源码中的换行/空格），很难控制。

2. 如何实现两个盒子的左右对齐？

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变标签元素默认的排列方式。

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

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

网页布局第一准则：先设置盒子的大小，再设置盒子的位置。

17.1.3 什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块的内容区域边界（即使包含块没有高，他也会有一个块左上界起始点和块宽度，可以参考这个来推断边界）或者另一个浮动框的 margin 边缘。

浮动的本质不是脱离一切控制，而是脱离标准块级布局，但仍然参与行内排版，让父元素的后续行内元素环绕自己。

注：在一个容器中，若有一个浮动元素，那么如果后面跟着纯文本、行内元素内包含文本、不浮动的块级元素包含文本，这些文本都是会环绕这个浮动元素来显示的。

语法：

选择器{ float:属性值;}

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

两个浮动元素如果都是左/右浮动，那么它们会紧贴在对方的 margin 显示

17.1.4 浮动的特性（重难点）

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

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

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

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

4. 浮动元素仍然会参与行内排版，也就是后面如果还有其他行内/行内块元素，会被这个浮动元素挤开，而不会跑到浮动元素的 z 轴下方

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

脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标。浮动的盒子不再保留原先的位置

关于浮动的形象理解：排队的时候，给其中一个人加了浮动，那么他会飞到天上，他原来的位置会空出来，被后面的人补齐，他和下面的人不属于同一级别了。对于元素来说相当于进入了更上方的图层。

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

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

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

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。比如行内元素有了浮动，则不需要转换为块级或行内块元素就可以直接设置宽高；如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加了浮动之后，它的大小会根据内容来定。

17.1.5 浮动元素经常搭配标准流的父元素

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

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

17.1.6 常见的网页布局

下面这种布局是最常见的（注意：通栏盒子表示宽度和浏览器一样宽，对于块级元素不设置宽度就可以实现）：

17.1.7 浮动布局注意点

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

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

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

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟最好也应该浮动，以防止引起问题。

浮动的盒子只会影响它后面的标准流（后面的会补上浮动元素的空），不会影响前面的标准流。例如，某个浮动盒子前面是一个标准流的块级盒子，那这个浮动盒子并不会遮盖住这个块级盒子而是在块级盒子下面一行，若是标准流行内块盒子，那就紧贴这个盒子右侧显示。

额外 tip：块级元素和行内块元素都是有自己的独立盒子的（行内块元素的盒子宽度随着内容自适应），而行内元素是没有独立盒子的，这一点也可以从他们是否能设置宽高发现（相当于行内元素只有“文字排版占位”）。因此如果是块级元素和行内块元素内部的浮动元素，他们的浮动参考边界都是盒子边缘，而行内元素因为没有盒子，因此浮动的参考是当前行框，一般这个行框由最近的块级/行内块容器生成，其宽度在常见情况下等于该块级/行内块容器的内容区域宽度。

注意：行内元素准确的说是有行内盒子，用于排字、交互和绘制，只参与行内水平布局（可以推开同一行的其他行内盒子），控制自己在行框内的位置和宽度，和通常说的盒子，即块级/行内块盒子不一样，不用于垂直布局，不参与块级维度的空间分配（比如设置上下内边距不会推开别的盒子，开发工具看他的行内盒子依旧只显示文本高度，只是绘制的区域变大，可以通过添加背景色观察），同时他可以设置边框和边距，但是其中垂直的外边距是不会起效果的。

这也能解释形如<li><a href="#">前端开发<span> > </span></a></li>，当设置 span 右侧浮动时，为什么鼠标移动到”前端开发“上，>也会变色，但是它们之间的空白区域是无法交互的，因为 a 只有文字排版占位，并不是一整块盒子，相当于里面的内容是四散的盒子一样。

注意：浮动的盒子是不会发生外边距合并的，因为他已经脱离标准流的控制了。

还有：行内元素的内容区域的高度始终是他的文本高度，而行高在这里是可以比内容区域高的，它会用于计算行框高度。当块级/行内块父元素的 height 为 auto，它的内容区域高度取决于子元素排版后在垂直方向占据的空间（行内内容体现为行框高度，块级/行内块内容体现为盒子高度，不合并外边距的情况下还需要考虑 margin）。注意：父元素和子元素都是行内元素的时候，它们是公用一个行框的，且行框高度是他们中最大的那一个（此时开发者工具里查看父子元素的内容区域都是一样的，都是子元素的文本区域）。

17.2 清除浮动

17.2.1 为什么要清除浮动

前面所讲的浮动元素都有一个标准流的父元素，并且他们的父元素都有一个共同点：有高度。但是有时候不是所有的父盒子都必须有高度，某些情况下，希望的是让子盒子撑开父盒子，父盒子的高度会自适应变化。但是举个例子：如果一个盒子没有设置高度，并且将他的子盒子都设置为浮动，那么浮动的元素是脱离了标准流的，不占有位置，父盒子会以为内部没有元素了，内容区域高度会变成0，这时候就会出现问题了。

为了解决这个问题，就有了清除浮动。

17.2.2 清除浮动的本质

清除浮动的本质就是清除浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动。清除浮动之后，父级就会根据浮动的子盒子自动检测高度，有了高度，就不会影响父级后续的标准流了。

语法：

选择器{clear:属性值;}

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

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

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

17.2.3 清除浮动的方法

额外标签法也称为隔墙法，是 W3C 推荐的做法
父级添加 overflow 属性
父级添加 after 伪元素
父级添加双伪元素

额外标签法（不常用）

额外标签法一般会在父元素内部，最后一个浮动元素之后添加一个空的标签（让父元素知道：浮动的影响到这里结束，从这个标签（包括这个标签）都是从前面的浮动元素下方开始显示，阻断浮动对后续内容的影响，并撑开父元素高度），该标签属性有 clear: both;。例如<div style="clear: both;"></div>，或者其他标签（如 <br /> 等）。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化比较差

注意：规定要求这个新添加的空标签必须是块级元素（<br />是例外）

父级添加 overflow 属性

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

优点：代码简洁
缺点：无法显示溢出的部分

父级添加 after 伪元素

:after 方式是额外标签法的升级版，也是给父元素添加。与下面的双伪元素使用方法一样，都是给需要清除浮动的父盒子添加类名 clearfix 即可。

语法：

        .clearfix:after {
            content: "";
            display: block;/* 伪元素默认是行内元素，需要转换 */
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix{/* IE6/7 专有 */
            *zoom: 1;
        }

使用这个方法也就是相当于在父盒子最后的位置添加了一个新的空盒子，因此称为额外标签法的升级版。但是不需要在结构里面写标签，而是通过 CSS 去自动生成盒子，因此更简洁。

父级添加双伪元素

语法：

    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix{/* IE6/7 专有 */
        *zoom: 1;
    }

使用这个方法也就是相当于在父盒子开始和最后的位置都添加了一个新的空盒子

优点：代码更简洁
缺点：需要照顾低版本浏览器

注：clear:both 相当于这个元素在垂直方向上避开浮动元素，因此会将这个没有高度的盒子(可以理解为线)推到左侧浮动元素下面（规范规定只能下移），从而变相撑开了父盒子，清除了浮动。

17.2.4 清除浮动总结

父盒子没高度，子盒子浮动了，影响了下面的布局，就应该清除浮动了

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级 overflow	书写简单	溢出隐藏
父级 after 伪元素	结构语义化正确	由于 IE6-7 不支持 :after，兼容性问题
父级双伪元素	结构语义化正确	由于 IE6-7 不支持 :after，兼容性问题

18. 切图

18.1 常见的图片格式

jpg 图像格式：JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，产品类的图片经常使用 jpg 格式
gif 图像格式：GIF 格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
png 图像格式是一种新兴的网络图形格式，结合了 GIF 和 JPEG 的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选中 png 格式
PSD 图像格式：是 Photoshop 的专用格式，里面可以存放图层，通道，遮罩等多种设计稿，对前端人员来说，最大的优点是可以直接从上面复制文字，获得图片，还可以测量大小和距离。注：不能直接放到页面中使用

18.2 像素大厨

PS 因为各种原因，安装完整版非常麻烦，现在开发前端测量主要使用蓝湖、摹客、像素大厨等，只要学会其中一种，其余的都很容易学会，因为非常相似。它们都可以用来打开 PSD 文件。

注意：上述工具和F12 查看网页源码并不冲突，因为一般前端设计拿到的设计稿 PSD 文件都是没有源码没有盒模型的。而 F12 查看源码一般用于学习阶段学习他人的网页，或者是还原别人的网页。

TIP：在开发过程中，网站首页的 html 文件一般约定命名伪 index.html。

CSS 属性书写顺序（重点）

为了前端书写的代码标准规范，优雅高质量，建议遵循以下顺序从上往下，从左往右来书写属性：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
其他属性（CSS3 新增属性）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient....

页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

必须确定页面的版心宽度（主要可视区），测量可以得到。
分析页面中的行模块，以及每个行模块中的列模块，其实就是页面布局第一准则。
一行中的列模块经常浮动布局，先确定每个列的大小之后确定列的位置，也就是页面布局第二准则。
制作 HTML 结构，我么还是遵循现有结构，后有样式的原则，结构永远最重要。
所以，先理清楚布局结构，再写代码。

导航栏注意点：

在实际开发中，我们不会直接用链接 a 而是用 li 包含链接 a 的做法来构建导航栏。因为 li + a 语义更清晰，一看就是有条理的列表型内容。而且直接用 a，搜索引擎容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎降权）从而影响网站排名。

同时要让导航栏显示在一行需要给 li 加浮动，因为 li 是块级元素。并且不需要给 navi 也就是导航栏盒子宽度了，因为他浮动之后就具有了行内块元素的特性，会自动被内容撑开，方便后续添加模块，此时 navi 的宽度是根据 ul 内部的内容宽度决定的（因为 ul 宽度是铺满父容器的，但此时父容器的宽度是自适应的，ul 不知道怎么铺满，所以流程是先根据 li 确定 navi 宽度，然后 ul 铺满 navi）。

在做导航栏的时候，因为每个模块的字数可能不一样，因此固定宽度不太合适，而为了让每个模块的文字距离盒子左右的距离相等，可以使用 padding 将盒子撑开。注意虽然使用 margin 也能达到一样的视觉效果，但是 margin 部分是无法点击的，不属于盒子本身。

个人额外理解：开发的时候，区域最好根据类别都装到对应的 div 里面，方便管理。比如头部盒子，头部内部的 logo 盒子，导航栏盒子，搜索框盒子等。

19. CSS 定位

19.1 为什么需要定位？

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

某个元素可以自由地在一个盒子内部移动位置，并且压住其他盒子。
让某个元素固定在屏幕上的某一个位置。

以上效果，标准流或者浮动都无法快速实现，此时需要定位来实现。

所以：

浮动可以让多个块级盒子在一行没有缝隙得显示，经常用于横向排列盒子。
定位则可以让盒子自由的在某个盒子内部移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。

19.2 定位组成

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

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

19.2.1 定位模式

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

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

19.2.2 边偏移

边偏移就是定位的盒子移动的最终位置，有 top、bottom、left 和 right 4 个属性（这 4 个属性只有盒子是定位且是非静态定位的时候才起作用）。

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，通常定义盒子相对于其参考盒子上边线的距离。
bottom	bottom: 80px	底部偏移量，通常定义盒子相对于其参考盒子下边线的距离。
left	left: 80px	左侧偏移量，通常定义盒子相对于其参考盒子左边线的距离。
right	right: 80px	右侧偏移量，通常定义盒子相对于其参考盒子右边线的距离。

注意：这些属性值可以为负值；这里的边线指的是盒子的内容区域的边界，并且相对定位的偏移量不是按这个来而是参考自己原来的盒子的对应的点。

个人额外理解：

在同一个堆叠上下文中，定位元素（非静态，且 z-index >= 0）的绘制层级一般高于浮动元素，浮动元素高于普通静态定位元素，普通静态定位元素高于 z-index < 0 的非静态定位元素。
浮动元素可以设置定位，但只有相对定位和静态定位的时候浮动仍然会生效，如果是其他定位，则浮动会被忽略。

19.2.3 静态定位 static（了解）

静态定位是元素的默认定位方式，表示无定位。

语法：

选择器 { position:static;}

静态定位是按照标准流的特性摆放位置，它没有边偏移。
静态定位在布局时很少用到。

19.2.4 相对定位 relative（重要）

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

语法：

选择器 { position:relative;}

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

是相对于自己原来的位置移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子依然以标准流的方式对待原来的标准流位置。（不脱标，原来的标准流位置继续保留）

因此，相对定位并没有脱标，他最典型的应用是给绝对定位做基础。

19.2.5 绝对定位 absolute（重要）

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

语法：

选择器 { position:absolute;}

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

如果没有祖先元素或者祖先元素没有定位（即父元素是静态定位），则以初始包含块为准定位（其大小、位置和浏览器初始视口通常一样）
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考移动位置。
绝对定位不再占有原先的位置（脱标）
如果绝对定位没有写任何偏移量（即 auto），那么他会出现在原本的的标准流位置。

19.2.6 子绝父相

子绝父相：子级使用绝对定位，父级则一般需要使用相对定位。（使用定位时必须记住的口诀）

子级绝对定位，不会占有位置，可以放到父盒子内任意地方，不会影响其他兄弟盒子。
父盒子需要加定位（非静态）让子盒子以父盒子为参考进行偏移。
父盒子布局时，如果需要占有位置，此时父盒子只能是相对定位

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。子绝父相不是永远不变的，比如如果父元素不需要占有位置，子绝父绝也会遇到，也是可以的等等，但一般子绝父相是比较常见的。

19.2.7 固定定位 fixed（重要）

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

语法：

选择器 { position:fixed;}

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

以浏览器的可视窗口（该窗口是可变大小的）为参照移动元素。（和父元素没有任何关系，不随着滚动条的滚动而滚动）
固定定位不占有原先位置。（固定定位也是脱标的，可以看作是一种特殊的绝对定位）

小 tip：一般页面中会有很多图片，因此习惯性给图片套一个盒子，通过盒子来控制图片的布局和尺寸，图片只负责显示内容更方便更精准操作。

固定定位小技巧——固定到版心右侧

小算法：

让固定定位的盒子 left:50%，走到浏览器可视区（也可以看作版心）的一半位置。
让固定定位的盒子 margin-left:版心宽度的一半距离，多走版心宽度的一半位置（此时 margin-left 越大，离版心盒子的右侧距离越大）。

19.2.8 粘性定位 sticky（了解）

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

语法：

选择器 { position:fixed; top:10px;}

粘性定位的特点：

以浏览器的可视窗口为参考移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top, left, right, bottom 其中至少一个才有效

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

19.2.9 定位的总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否（占有位置）	相对于自身位置移动	常用
absolute 绝对定位	是（不占有位置）	带有定位的父级	常用
fixed 固定定位	是（不占有位置）	浏览器视口	常用
sticky 粘性定位	否（占有位置）	浏览器视口	当前阶段少

一定记住相对定位、固定定位、绝对定位两个大的特点：是否占有位置以及以谁为基准点移动
学习定位重点学会子绝父相

19.2.10 定位叠放次序 z-index

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

语法：

选择器{ z-index:1;}

数值可以是正整数、负整数或0，默认是 auto（同一个堆叠上下文中 auto 和 0 按照后来者居上的规则），数值越大，盒子越靠上。
如果属性值相同，则按照书写顺序，后来者居上。
数字后面不能加单位。
z-index 属性是定位(非静态定位)的盒子专有的，标准流和浮动的盒子没有。

19.2.11 定位的拓展

1. 绝对定位的盒子居中

加了绝对定位的盒子如果没有设置上下和左右偏移，不能通过 margin:auto 水平和垂直居中（因为没有偏移，不知道边界，margin:auto 就无法启用），但是可以通过以下计算方法实现水平居中（垂直居中同理）。

left:50%;：让盒子的左侧移动到父级元素的水平中心位置
margin-left:-100px;：让盒子向左移动自身宽度的一半

注：固定定位的盒子居中也参考上述说法

2. 定位的特殊特性

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

行内元素添加绝对定位或者固定定位，可以直接设置宽度和高度。
块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

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

浮动元素、绝对定位和固定定位元素都不会触发外边距合并的问题，因为都脱离了标准流。

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

浮动元素不同，只会压住他下面标准流的盒子，但是不会压住下面标准流盒子里面的文字和图片。

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

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

注意：如果一个盒子既有 left 属性也有 right 属性，那么默认执行 left 属性。同理，top 和 bottom 默认执行 top。

19.3 网页布局总结

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

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

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

1.标准流

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

2.浮动

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

3.定位

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

19.4 元素的显示和隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，就会重新出现（也体现了并不是删除而是隐藏）。还有某些类型的下拉显示框，当鼠标移上去，就会出现，鼠标移走就消失。

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

display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏

19.4.1 display 属性（重要）

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

display:none; 隐藏对象，让其不渲染、不参与布局
display:block/inline/inline-block......; 除了转换为块级/行内/行内块......元素之外，同时还有显示元素的意思。

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

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

19.4.2 visibility 可见性

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

visibility：visible；元素可见
visibility：hidden；元素隐藏

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

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

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

19.4.3 overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过 padding 外沿）时，会发生什么。

overflow：visible；默认值，不隐藏溢出的内容也不添加滚动条
overflow：hidden；隐藏溢出的部分
overflow：scroll；不管有没有溢出，都显示滚动条
overflow：auto；有溢出时显示滚动条，无溢出时不显示滚动条

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

但是如果有定位的盒子，有时候我们会故意让里面的内容溢出一部分，此时谨慎用 overflow：hidden；因为它会隐藏多余的部分。

注意：对于使用 display 或者 visibility 隐藏起来的元素，他们都是无法交互的，此时 hover、click 或者 focus 等都是无法对他们其交互效果的。而对于 overflow，当 visible 时，溢出的部分是可以交互的，当 hidden 时，溢出的部分看不见，也无法交互，当 auto 或 scroll 时，只有在滚动区域内可见的那一部分才可以交互。

TIP: 当工作中需要使用到遮罩层的时候最好使用 display 来进行隐藏和显示，因为 display 隐藏得更干净，而 visibility 会留下一个幽灵盒子（占有原来的位置）。

hover 也经常类似这样使用 .tudou:hover .shadow，表示当鼠标经过 tudou 这个盒子时，选中 tudou 里面的 shadow 盒子。

20. CSS 高级技巧

20.1 精灵图

20.1.1 为什么需要精灵图

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

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

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

20.1.2 精灵图的使用

使用精灵图核心：

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中（插入式的图片可能会经常更换，不需要精灵技术）。
这个大图片也称为 sprites 精灵图或者雪碧图。
在不同的目标盒子内部放置大背景图片，并移动大背景图片位置，此时可以使用 background-position（盒子的背景图片默认是从盒子左上角开始，并且一般不主动设置 background-clip 时，背景图片默认铺满盒子的内容区域和内边距区域），将精灵图中的目标背景图片移动显示到目标盒子内即可。
移动操作的是这个目标图片的 x 和 y 坐标。注意网页中的坐标和普通几何坐标有所不同，原点在左上角。
因为一般情况下都是往上往左移动，所以数值通常是负值。

20.2 字体图标

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

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

图片文件还是比较大的
图片本身放大和缩小会失真
一旦图片制作完毕想要更换修改非常复杂

此时，有一种技术的出现很好地解决了以上问题，就是字体图标 iconfont。

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

20.2.1 字体图标的优点

轻量级：一个字体图标要比一系列的图像小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
灵活性：本质其实是文字，可以随意更改颜色和大小、产生阴影和透明效果、旋转等等。
兼容性：几乎支持所有的浏览器

注意：字体图标不能替代精灵技术，只是对于工作中图标技术部分的提升和优化。当浏览器遇到需要加载渲染的字体图标是，会向服务器发送一次请求，服务器会将其对应的字体文件夹返回给浏览器，此后若遇到其他字体图标也是属于这个字体文件夹，则直接根据之前接收到的文件夹进行渲染，不需要再次请求服务器了，所以也只需要请求一次即可。

总结：

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

20.2.2 字体图标的使用

字体图标是一些网页常见的小图标，我们直接网上下载即可（比较出名的有阿里巴巴矢量图标库等等）。因此使用可以分为：

字体图标的下载
字体图标的引入（引入到 html 页面中）
字体图标的追加（以后添加新的小图标）

1. 字体图标的下载

推荐下载网站：

IcoMoon 字库

IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，并可以自由编辑。该字库内容种类繁多，非常全面。

阿里巴巴矢量图标库

是阿里巴巴 M2UX 的一个 IconFont 字体图标库，包含了淘宝图标库和阿里巴巴图标库，可以使用 AI 制作图表上传生成。

2. 字体图标的引入

下载完毕之后，注意原先的文件最好不要删，以防后面需要用到。

该下载包文件夹内 fonts 文件夹里的 ttf 文件就属于字体文件类型之一，比如我们电脑本身就自带例如微软雅黑这些字体的 ttf 文件，所以可以使用，但是对于这些不是自带的字体，就需要额外下载。

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

TureType（.ttf）格式是 Windows 和 Mac 最常见的字体，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+；
Web Open Font Format（.woff）格式，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
Embedded Open Type（.eot）格式是 IE 专用字体，支持这种字体的浏览器有 IE4+；
SVG（.svg）格式是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

1. 把下载包内的 fonts 文件夹放入到页面根目录下（如果不是则需要额外注意引入时的路径）。

2. 在 CSS 样式中全局声明字体：简单理解就是把这些字体文件通过 CSS 引入到页面中。一定要注意字体文件路径的问题。（下面的引入代码不需要记住，使用时去网上找模板即可，或者下载的字体安装包里一般都会有一个 css 文件记录这些代码，直接复制使用）

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

3. 在 html 标签内添加对应的小图标。（下图中的页面可以在下载的字体安装包内的 demo.html 页面打开查看）

只添加小图标依旧只会显示小方块(不同的图标对应的小方块显示是一样的但本质不一样)，还必须要给标签样式添加对应的 font-family 属性才能正常显示。如下代码所示。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.eot?p4ssmb');
        src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
            url('fonts/icomoon.woff?p4ssmb') format('woff'),
            url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }

    span {
        font-family: 'icomoon';
    }
</style>

<body>
    <span></span>
</body>

</html>

3. 字体图标的追加

在工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

在原字体图标网站把原压缩包里面的 selection.json 重新上传，然后选中自己想要的新图标，重新生成并下载压缩包，然后替换原来的文件即可。

20.3 CSS 三角

网页中常见的一些三角形（比如对话框气泡上的小三角之类），使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

具体做法就是给一个没有宽高的盒子设置边框，例如下图就是给没有大小的盒子设置了四个不同颜色的边框的效果（注意此时三角形的高就是边框的宽度）。

此时可以将某三条边框设置为透明，再设置不透明的那条边框来控制三角形的方向，通过边框粗细来控制三角形大小。

    div {
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        /* 上面这两个加上是为了兼容低版本浏览器，一般移动端和高版本浏览器不需要 */
        border: 50px solid transparent;
        border-left-color: red;
    }

20.4 CSS 用户界面样式

20.4.1 什么是用户界面样式

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

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

1. 鼠标样式 cursor

li{cursor:pointer;}

设置或检索在对象上移动的鼠标指针采取何种系统预定义的光标形状。下面是几个比较常用的鼠标样式。

属性值	描述
default	小白箭头
pointer	小手
move	移动十字架
text	文本
not-allowed	禁止符号

2. 轮廓线 outline

(outline) 轮廓线是在元素（例如按钮，活动表单域等）的边框边缘外部绘制的一条线，以使其突出。轮廓通常用于突出显示元素。轮廓一眼看上去与边框非常相似，但在以下方面与边框有所不同：

轮廓不占用空间，因为它们始终放置在元素框的顶部，这可能导致它们与页面上的其他元素重叠。
与边框不同，轮廓不允许我们将每个边缘设置为不同的宽度，也不能为每个边缘设置不同的颜色和样式。轮廓在所有方面都是相同的。
轮廓除了重叠之外，对周围的元素没有任何影响。
与边框不同，轮廓不会更改元素的大小或位置。
轮廓可能不是矩形的

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

input{outline: none;}

3. 防止拖拽文本域 resize

textarea 文本域在页面中是可以拖动进行缩放的，即使给了固定的宽度和高度，但这在我们页面布局中，使我们不需要的，因为可拖拽很多时候会影响我们页面的布局和整体的美观度。

实际开发中，我们的文本域一般不允许拖拽。

textarea{resize: none;}

小细节：<textarea>< /textarea> 标签对最好写在一行，如果分行写，并且有一段空行，可能会导致文本域框内开头出现一段空白区域。因为标签对之间出现的换行、空格、空行都会被当作 textarea 的初始文本内容。

20.5 vertical-align 属性应用

20.5.1 图片、表单垂直居中对齐文字

CSS 的 vertical-align 属性经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素（以 margin 外沿为参考）的垂直对齐方式，但是只针对于行内元素或者行内块元素有效。

语法：

vertical-align: baseline | top | middle | bottom

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐。
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低元素的顶端对齐。

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

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中了。

20.5.2 解决图片底部默认空白缝隙问题

bug：在一个盒子内部只放一个图片，图片底侧通常会距离盒子内容区域底部有一个空白缝隙，原因是行内块元素会与文字的基线对齐（个人理解：如果没有图片也没有文本那一定没有基线；有文本一定有基线；如果有图片，且图片是 baseline 对齐，即使不存在文本，浏览器也会假定有文本生成基线；如果有图片，没有文本，图片不是 baseline 对齐，那也不存在基线）。

主要解决办法有两种：

给图片添加 vertical align:middle | top | bottom 等。（提倡使用的）
把图片转换为块级元素 display:block；（没有 vertical-align 属性，不会有基线问题）

vertical-align 属性的具体理解和使用比较复杂，这里讲解的内容不是很全面，暂时只需要记住如何利用他的 middle 值使图片或表单与同一行的文本居中垂直对齐以及如何解决图片底部默认的空白缝隙即可。

20.6 溢出的文字省略号显示

20.6.1 单行文本溢出显示省略号

必须满足三个条件：

/* 1.先强制一行内显示文本 */
white-space:nowrap;（表示不换行，默认 normal 表示文本显示不开则自动换行）
/* 2.超出的部分隐藏 */
overflow:hidden;
/* 3.文字用省略号代替超出的部分 */
text-overflow:ellipsis;

20.6.2 多行文本溢出显示省略号

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

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display:-webkit-box;
/* 限制在一个块元素显示的文本行数，超出部分会在 clamp 行显示省略号 */
/* 但如果显式设置了元素高度 height，那么可能不会截断超过 clamp 的行，但依旧会在 clamp 行处显示省略号 ，后面的行正常显示*/
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推荐让后台人员来做多行文本溢出显示省略号这个效果，因为后台人员可以设置显示多少个字，操作更简单。

20.7 常见布局技巧

20.7.1 margin 负值运用

对于上图中的五个盒子，可以发现它们之间都有一个 1px 的灰色细线边框，但是如果给每个 ul 的浮动的 li 一个 1px 的灰色细线边框，会发现它们之间最终显示的是 2px 的边框。要解决这个问题，可以让每个盒子 margin-left 设置为 -1px，正好压住相邻盒子边框。这样就不会出现边框粘结变粗的情况了。

但此时又出现了新情况，如果想要实现鼠标经过盒子，盒子的边框变色，会发现当前这种做法除了最后一个盒子正常变色，其余的盒子的右边框都不会变色，因为他们被右侧的盒子的左边框压住了。要解决这个问题，可以在鼠标经过盒子的时候，提高盒子的层级即可（如果没有定位，则加上相对定位（保留位置）即可；如果有定位，则加 z-index即可）

20.7.2 文字围绕浮动元素

上图的效果不需要我们在大盒子里面左右均放置浮动的盒子，而是让左盒子浮动即可，余下的文字会自动环绕左盒子显示，这是浮动的特性之一。

20.7.3 行内块巧妙运用

上图中的页码跳转布局，需要在版心居中对齐，一般对于这个模块可能想到的做法是：利用浮动的 li 来做，给每个 li 一个大小......但此处使用行内块元素会更方便来进行布局：可以给他们的父元素添加 text-align:center，这样所有的行内块元素就会水平居中了，而且行内块元素本身就可以设置大小，还自带缝隙。

20.7.4 CSS 三角强化

图中的梯形外形的做法可以利用在一个大盒子里放两个 span 盒子，让第一个盒子靠左浮动，第二个盒子会自然被挤到右侧，然后将一个直角三角形盒子放到红色矩形盒子右侧即可。

如何得到一个直角三角形盒子呢：基于前面学习的 CSS 三角，首先去掉左侧和下侧的边框，然后将上侧的边框设置为透明色，分别调整上侧和右侧额边框粗细即可调整三角形的宽和高。

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

最终得到下图所示的直角三角形盒子。

20.8 CSS 初始化

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

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

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

下面以京东的某个页面的 CSS 初始化代码为例讲解（不唯一，每个人写网站的初始化代码都可能不一样，大部分情况我们复制使用别人的就行）：

    /* 清除所有标签的内外边距 */
    * {
        margin: 0;
        padding: 0;
    }

    /* em,i斜体的文本不倾斜 */
    em,
    i {
        font-size: normal;
    }

    /* 去掉li的小圆点 */
    li {
        list-style: none;
    }

    img {
        /* border:0 照顾低版本浏览器：如果图片外包含了链接会右边框的问题 */
        border: 0;
        /* 解决图片底侧有空白缝隙的问题 */
        vertical-align: middle;
    }

    /* 当鼠标经过 button 时变成小手 */
    button {
        cursor: pointer;
    }

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

    a:hover {
        color: #c81623;
    }

    button,
    input {
        font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    }

    body {
        /* CSS3 抗锯齿属性，文字放大后减少锯齿 */
        -webkit-font-smoothing: antialiased;
        background-color: #fff;
        font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
        color: #666;
    }

    /* 隐藏元素 */
    .hide,
    .none {
        display: none;
    }
    /* 清除浮动 */
    .cleardix:after{
        visibility: hidden;
        clear:both;
        display: block;
        content: ".";
        height: 0;
    }

    .cleardix{
        *zoom: 1;
    }

注意：“\5B8B\4F53” 代表宋体，这里把中文字体的名称用相应的 Unicode 编码来代替，可以有效地避免浏览器解释 CSS 代码的时候出现乱码的问题。比如：黑体 \9ED1\4F53 宋体 \5B8B\4F53 微软雅黑 \5FAE\8F6F\96C5\9ED1

三、HTML5 和 CSS3 提高

1. HTML5 的新特性

HTML5 的新增特性主要是针对于以前的不足（比如很多地方都只用 div，表单输入框无法限制只能输入数字等等），增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性的问题，基本是 IE9+ 及以上版本的浏览器或移动端才支持，如果不考虑兼容性的问题，可以大量使用这些新特性。

声明：

新特性增加了很多，但是我们专注于开发常用的新特性。
本文暂且讲解部分新特性，后续会讲解其他新特性。

1.1 HTML5 新增的语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。下面是部分 HTML5 新增的语义化标签（都可以理解为带语义的 div 盒子）：

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

注意：

这种语义化标准主要是针对搜索引擎的
这些新标签在页面中可以使用多次
在 IE9 中，需要把这些元素转换为块级元素使用
其实，移动端更喜欢使用这些标签，因为移动端没有兼容性问题

1.2 HTML5 新增的多媒体标签

新增的多媒体标签主要包含两个：

音频：<audio>
视频：<video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。

1.2.1 视频 <video>

HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然支持的格式是有限的。当前 <video> 元素支持三种视频格式：尽量使用 MP4 格式。

视频 <video> 常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要额外添加 muted 来解决自动播放问题）
controls	controls	向用户显示播放控件（播放\暂停\全屏\音量等）
width	像素值	设置播放器宽度
height	像素值	设置播放器高度
loop	loop	播放完是否循环播放
preload	auto（预先加载视频） none（不预先加载视频）	规定是否在未播放时预加载视频（如果有了 autoplay 就忽略该属性）
src	url	视频 url 地址
poster	imgurl	视频封面图片(播放后就不再显示)
muted	muted	静音播放

注意：对于不同的浏览器可能他们显示的 controls 会不一样，所以一般开发时会去掉 controls，如果希望在不同浏览器显示的 controls 都一样，需要学习 JS。

语法：

<video src="文件地址" controls="controls"></video>

为了兼容性也可以这样写：

<video width="320" height="240" controls ="controls">
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        <source src="movie.WebM" type="video/WebM">
        您的浏览器不支持 video 标签
    </video>

此时浏览器会从上往下寻找格式可以支持的视频来播放，如果全部不支持就显示最后一行的文本告知用户，这样就大大减少了兼容性问题。但是当前大部分主流浏览器都是支持 MP4 格式的视频，所以一般只用写上述两种写法中的第一种写法即可。

如何在网页扒视频：F12 打开开发者工具，选择想要扒取的视频元素，找打他的路径，右击在新标签页中打开，然后即可另存为本地文件。

1.2.2 音频<audio>

HTML5 在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然支持的格式是有限的。

当前 <audio> 元素支持三种音频格式：

语法：

<audio src="文件地址" controls="controls"></audio>

为了兼容性也可以这样写：

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

<audio> 常见属性

属性	值	描述
autoplay	autoplay	音频就绪自动播放
controls	controls	向用户显示播放控件（播放\暂停等）
loop	loop	音频结束后重新开始播放
src	url	音频的 url

谷歌浏览器也禁用了音频的 autoplay 功能，暂时没有解决办法，只能在后面学习 JS 来解决。

1.2.3 多媒体标签总结

音频标签和视频标签使用方法基本一致
不同浏览器支持的文件格式情况不同（推荐：音频就用 MP3，视频就用 MP4，基本能适配大部分浏览器）
谷歌浏览器把音频和视频的自动播放禁止了，但我们可以通过给视频标签添加 muted 属性来静音自动播放，音频不可以（可以通过 JS 解决）
视频标签是重点，我们一般设置自动播放，循环和设置大小属性，不使用 controls 控件即可满足大部分情况需求

1.3 HTML5 新增的 input 类型

属性值	说明
type="email"	限制用户输入必须为 Email 类型（提交时会验证）
type="url"	限制用户输入必须为 URL 类型（提交时会验证）
type="date"	限制用户输入必须为日期类型（一个年月日选择器）
type="time"	限制用户输入必须为时间类型（一个时分选择器）
type="month"	限制用户输入必须为月类型（一个年月选择器）
type="week"	限制用户输入必须为周类型（一个年周选择器）
type="number"	限制用户输入必须为数字类型（非数字无法输入），拥有动态键盘的设备上会显示数字键盘。
type="tel"	手机号码，拥有动态键盘的设备上会显示电话数字键盘。
type="search"	搜索框，在支持的浏览器中可能有一个删除按钮，用于清除整个区域。
type="color"	生成一个颜色选择表单（一个取色器）

这些 input 类型能使得 input 表单的语义化更好，并且省去了 JS 的一部分数据校验

重点记住：number、tel、search

1.3 HTML5 新增的表单属性

属性	值	说明
required	required	表单元素拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单元素的提示信息，若存在默认值 value 将不显示
autofocus	autofocus	自动聚焦属性，页面加载完后自动聚焦到指定表单元素(同一个文档中，若同时设置了多个元素自动聚焦，只会让第一个被解析到、且可获得焦点的元素该属性生效)
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过并成功提交的值（并且前提是该表单元素有 name 属性），应该显示出在字段中填写的选项。默认已经打开。
multiple	multiple	对于 file 类型的 input 表单元素，可以多选文件提交。也可用于 email 类型和 select 元素，具体可查询 MDN 文档。

可以通过以下设置方式(伪元素，后续讲解)修改 placeholder 里面字体的颜色：

input::placeholdeer{
    color:blue;
}

2. CSS3 的新特性

2.1 CSS3 的现状

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

2.2 CSS3 新增选择器

CSS3 新增了一些选择器，可以更加便捷、自由地选择目标元素。

属性选择器
结构伪类选择器
伪元素选择器

2.2.1 属性选择器

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

类选择器、属性选择器（是 [att] 不是 E[att]）、伪类选择器（是 : 不是 E:）权重都为10。

选择符	简介
E[att]	选择具有 att 属性的 E 元素
E[att="val"]	选择具有 att 属性且属性值等于 val 的 E 元素
E[att^="val"]	匹配具有 att 属性且值以 val 开头的 E 元素
E[att$="val"]	匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*="val"]	匹配具有 att 属性且中含有 val 的 E 元素

注意：属性选择器的 val 在某些情况下可以不加双引号，如 text、password等，但为了安全和规范，推荐全部加上双引号。

2.2.2 结构伪类选择器

结构伪类选择器(属于伪类选择器)主要根据文档结构来选择元素，常用于根据父级元素来选择里面的第几个子元素。

注：形如 :first-child 才是结构伪类选择器，而 E:first-child 是复合选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素，且该元素必须是 E，不然不选中
E:last-child	匹配父元素中的最后一个子元素，且该元素必须是 E，不然不选中
E:nth-child(n)	匹配父元素中的第 n 个子元素，且该元素必须是 E，不然不选中
E:first-of-type	指定父元素中类型 E 的子元素的第一个
E:last-of-type	指定父元素中类型 E 的子元素的最后一个
E:nth-of-type(n)	指定父元素中类型 E 的子元素的第 n 个

nth-child(n)、nth-of-type(n)：选择某个父元素的一个或多个特定的子元素

n 可以是数字、关键字或公式
n 如果是数字，就是选择第 n 个子元素
n 如果是关键字：even 偶数、odd 奇数
n 如果是公式：常见的公式形式如下（如果是公式，则 n 的值从 0 开始计算，但是第 0 个元素或者超出了元素的个数会被忽略，而且必须是 n 作为自变量，其他字母不可以）
公式取值
2n 偶数
2n+1 奇数
5n 5 10 15 ...
n+5 从第 5 个开始（包含第 5 个）到最后
-n+5 前 5 个（包含第 5 个）

-child、-of-type 的使用是非常相似的，但是也有很重要的区别。

-child、-of-type 的区别：

-child 先对父元素里面所有的孩子进行排序，找到第 n 个孩子，然后看是否和 E 匹配，不匹配就谁也不选择
-of-type 先对父元素里面指定的所有 E 类型的孩子进行排序，然后再找到第 n 个

注：

:-child、:-of-type 的前面不加 E 表示的意思有区别。对于 :-child，表示选中父元素的第一个子元素，不管是什么类型；而对于 :-of-type，则表示选中父元素中每一种类型的第一个该类型元素。
虽然不明确指明结构伪类选择器的父元素在语法上是正确的，也确实能选中元素，如直接写 E:first-child{}、:first-child{}。但在实际工作中，基本都要指明父元素，如div>E:first-child{}、div :first-child{}。因为不指明在语义上很难理解，而且很范围很大很容易命中或失效，难以看出究竟选中了哪些元素，大部分情况下没有实际使用意义或是有语义更简单更好理解的写法。

2.2.3 伪元素选择器

伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构。结构永远比样式更重要，因此结构写起来越简单越好。

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

注意：伪元素的前面是双冒号 ::，这是 CSS3 为了将伪类伪元素区分，同时浏览器也支持 CSS2 中的单冒号伪元素写法，但会被解析成双冒号。推荐在写伪元素时尽量还是写双冒号。同时，伪元素选择器必须写明父元素，不然是错误的。

before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以称为伪元素
语法：element::before{}，element 是想要添加伪元素的父元素
before 和 after 必须有 content 属性才可以生效，content 值要加双引号，里面写想要的内容即可，置空""也可以（不是写 none）
可以给 before 或 after 生成的元素添加浮动、转换显示模式（转换为行内块/块级元素可以设置宽高）、定位等等
before 在父元素 element 内容的前面创建元素，after 在父元素 element 内容的后面创建元素（理解为伪元素生成的盒子，是父元素内容流中的虚拟的第一个/最后一个子元素）
伪元素选择器和标签选择器一样，权重都为1

在以前，像插入字体图标我们的做法一般是在父盒子中再放入一个子盒子，子盒子内部放置字体图标，但是这样会增加父子盒子嵌套，提高阅读复杂性。现在，只需要通过伪元素插入字体图标即可，不需要额外的 HTML 标签。

2.2.3.1 伪元素使用场景一：伪元素字体图标

在这里 content 里面的值，对于字体图标，除了之前讲到的引入字体库后复制方框来使用，也可以使用对应编码（前面一定要加上转义字符 \），这样在代码里不会看起来都是一样的方块。如下例代码。

@font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.eot?p4ssmb');
        src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
            url('fonts/icomoon.woff?p4ssmb') format('woff'),
            url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
p::before{
    font-family: 'icomoon';
    position: absolute;
    right: 20px;
    top: 10px;
    content: "\e91e";
    font-size: 20px;
}

2.2.3.2 伪元素使用场景二：仿土豆半透明遮罩层效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .tudou {
        position: relative;
        height: 320px;
        width: 444px;
        background-color: pink;
        margin: 30px auto;
    }
 
    .tudou img {
        width: 100%;
        height: 100%;
    }
 
    .tudou::before {
        content: "";
        /* 隐藏遮罩层 */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
    }
 
    /* 当鼠标经过盒子时，就让遮罩层显示出来  注意不要有空格 */
    .tudou:hover::before {
        display: block;
    }
</style>
 
<body>
    <div class="tudou">
        <!-- <div class="mask"></div> -->
        <img src="images/tudou.jpg" alt="">
    </div>
</body>
 
</html>

2.2.3.3 伪元素使用场景三：伪元素清除浮动

前面讲解清除浮动时，里面的额外标签法，每次清除浮动都需要添加一个新的空标签，如果要清除的地方很多，那么结构会很繁杂，但同时提到过给父级添加 after 伪元素或者双伪元素都可以清除浮动，算是额外标签法的升级和优化，下面讲解原理。

2.3 CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有两个值：content-box、border-box。

盒子的实际大小总是内容区域+内边距+边框，其中：

content-box 盒子的 width、height 只包括内容区域
border-box 盒子的 width、height 包括内容区域，内边距和边框

如果盒子模型改为 border-box，那么 padding 和 border 就不会撑大盒子了（前提 padding 和 border 之和不会超过 width）

2.4 CSS3 其他特性（了解）

图片变模糊
计算盒子宽度 width:calc 函数

CSS3 滤镜 filter 属性：

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

语法：

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

函数相关概念后续学习 JS 时会详细讲解。除了 blur 函数外，具体 filter 还可以使用哪些函数可以查询 MDN 文档。

CSS3 calc 函数：

在CSS 的属性值里不能直接写数学表达式，是错误的，因此需要用到calc 函数，calc() 函数可以在声明 CSS 属性值时执行一些计算。

如：

width:calc(100%-80px);数值要加单位

括号里面可以使用 + - * / 来进行计算，注意 + - 运算符左右必须加空格，* / 不是必须但也推荐加上，而且 + - 要求两侧单位必须可兼容，不能是 20px - 2em，* / 一侧必须是无单位数字。

CSS3 还新增了一些动画、2D、3D特性，后面会学习。

2.5 CSS3 过渡（重点）

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

过渡动画：可以使一个状态渐渐地过渡到另一个状态。让我们的页面更好看，变化更平滑，虽然低版本浏览器不支持（IE9 以下版本），但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用。

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

属性：想要逐渐变化的 CSS 属性，宽度高度、背景颜色、内外边距都可以（基本常用的可以计算的属性值都可以过渡，还有其他的部分属性也可以，具体支持哪些属性可以查阅 MDN 文档或css3的过度效果transition支持哪些属性，Transition 所支持的css属性）。如果想要某个元素所有的属性都变化过渡，写一个 all 即可。
花费时间：单位是秒（必须写单位），比如 0.5s
运动曲线（可以省略）：默认是 ease
何时开始（可以省略）：单位是秒（必须写单位），可以设置延迟触发变化的时间，默认是 0s

下图是几种运动曲线：

记住过渡的使用口诀：谁做过渡给谁加 transition 属性，如下代码所示。

div{
    width: 200px;
    height: 100px;
    background-color: blue;
    /* 如果想要同时过渡多个属性，利用逗号进行分割 */
    transition: width 0.5s ease 0s, height 0.5s ease 0s;
}
div:hover{
    width: 400px;
    height: 200px;
}

注意，如果想要同时过渡多个属性，利用逗号进行分割即可，千万不能写多个 transition，会起样式冲突，导致一些样式不生效或其他问题。

下面是一个进度条变化的代码示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bar{
        width: 150px;
        height: 15px;
        border: 1px solid red;
        border-radius: 7.5px;
        padding: 1px;
    }

    .bar_in{
        width: 50%;
        height: 100%;
        border-radius: 7px;
        background-color: red;
        transition: width 5s ease 0s;
    }
    /* 如果 transition 写在 hover 里面，那么变宽是过渡的， */
    /* 但是移开鼠标变窄是秒回的，因为此时 transition 针对的是有鼠标 hover 的盒子变化才会过渡，移开了鼠标自然就不会过渡 */
    /* 只有写在 bar_in 里面才是无论何时宽度变化都是过渡的 */
    .bar:hover .bar_in{
        width: 100%;
    }
</style>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

</html>

tip: 广义的 HTML5 指的是 HTML5+CSS3+JavaScript。

四、品优购项目开发

目标：

独立完成品优购首页制作
独立完成品优购列表页制作
独立完成品优购注册页制作
能够将品优购网站部署上线

网站制作流程

一般这个流程会由项目经理来把控。

由于图片一旦设计完成，修改起来非常麻烦，所以会先制作原型图，将网站的大概模块以及他们的位置和内容通过各种形状和文字勾勒出来，如下图所示。

原型图审核通过后会根据原型图继续制作 PSD 效果图。然后前端人员根据 PSD 效果图进行开发。

1.品优购项目规划

1.1 品优购项目整体介绍

项目名称：品优购
项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作

1.2 品优购项目学习目的

电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。
品优购项目能复习、总结、提高前面学习的布局技术。
写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体感知。
为后面学习移动端项目做铺垫。

1.3 开发工具以及技术栈

1. 开发工具

VSCode、Photoshop、主流浏览器（以 Chrome 浏览器为主）

2. 技术栈

利用 HTML5+CSS3 手动布局，可以大量使用 H5 新增标签和样式
采取结构和样式相分离，模块化开发
良好的代码规范有利于团队更好的开发协作、提高代码质量，因此本项目，请遵循此代码规范

1.4 品优购项目搭建工作

1. 创建如下文件夹

名称	说明
项目文件夹	shopping
样式类图片文件夹	images(背景图标类图片)
样式文件夹	css
产品类图片文件夹	upload(产品展示类图片)
字体类文件夹	fonts
脚本文件夹	js

2. 创建如下文件

名称	说明
首页	index.html
CSS 初始化样式文件	base.css
CSS 公共样式文件	common.css

有些网站初始化不太提倡 *{ margin:0; padding:0;}，比如新浪使用: html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset.legend,img{ margin:0; padding:0;}。后者的可控性更高，不容易误伤组件。

3. 模块化开发

所谓的模块化，就是将一个项目按照功能划分，一个功能一个模块，互不影响。模块化开发具有重复使用、更换方便等优点。

有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有，并且非常相似，此时，可以把这些结构和样式单独作为一个模块，然后重复使用。
这里最典型的应用就是 common.css 公共样式。写好一个样式，其余页面都可以直接引入然后使用这些相同的样式，而不用重复写。
模块化开发具有重复使用，修改方便等优点。

1.5 网站 favicon 图标

这里前面的图标就是网站的 favicon 图标。

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或标签上。目前主要的浏览器都支持 favicon.ico 图标。一般设置网站的 favicon 图标有如下三步：

1. 制作 favicon 图标

把品优购图标切成 png 图片
把 png 图片转换为 ico 图标，这需要要借助于第三方转换网站，例如比特虫

2. 放置 favicon 图标到网站目录（一般是根目录）下

3. HTML 页面引入 favicon 图标

在 html 页面里面的 <head></head> 元素之间引入代码。

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

1.6 网站 TDK 三大标签 SEO 优化

SEO（Search Engine Optimization），即搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

一般每个项目都配备有专门的 SEO 人员，但是前端人员在书写前端的时候也要注意一部分迎合 SEO 的写法。

页面必须有三个标签用来符合 SEO 优化。对于前端人员，只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备，然后前端人员直接复制使用即可。

如下图京东页面源代码所示：

1. title 网站标题

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

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

例如：

京东(JD.COM)-综合网站首选-正品低价、品质保障、配送及时、轻松购物！
小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站

2. description 网站说明

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

我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是......”、“我们提供......”、“XXX网作为......”、“电话：010.....”之类的语句。这里面的内容一般由 SEO 人员负责书写，前端人员直接复制使用即可。

例如：

3. keywords 关键字

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

keywords 最好限制为 6~8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式。里面的内容一般也是 SEO 人员负责书写。

例如：

2.品优购首页制作

网站的首页一般都是使用 index 命名，比如 index.html 或 index.php。

我们开始制作首页的头部和底部时，会发现多个页面的头部底部之间都很相似，根据模块化开发，他们的样式要写到 common.css 里面作为公共样式。

2.1 常用模块类名命名

以下是约定的命名模块，可以直接使用。

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dropdown 包含.dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

2.2 快捷导航 shortcut 制作

通栏的大盒子命名为 shortcut，是快捷导航的意思。注意这里大盒子的行高可以继承给里面的子盒子。
大盒子里面包含版心盒子
版心盒子里面包含1号左侧盒子左浮动
版心盒子里面包含2号右侧盒子右浮动

2.3 header 制作

header 盒子必须有高度
1 号盒子时 logo 标志定位
2 号盒子是 search 搜索模块定位
3 号盒子是 hotwords 热词模块定位
4 号盒子是 shopcar 购物车模块（count 统计部分用绝对定位做，不要给宽度，因为买的件数可能比较多，让件数撑开就好了，给一个高度，一定注意左下角不是圆角，其余三个角是圆角，写法：border-radius:7px 7px 7px 0;）

LOGO 的 SEO 优化

logo 盒子里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1 里面再放一个链接，可以返回首页，设置 a 的大小和 logo 盒子一样大，再将 logo 图片作为链接的背景图片即可
为了搜索引擎更好地收录网站，链接里面要放文字（网站名称），但是文字不要显示出来。方法1：text-indent 移动到盒子外面（text-indent:-9999px），然后 overflow:hidden，这是淘宝的做法；方法2：直接给 font-size:0，就看不到文字了，这是京东的做法。
最后给链接标签一个 title 属性（注意区分标签属性和样式属性，别写错地方），这样鼠标放到 logo 上就可以看到提示文本了。

2.4 nav 导航制作

nav 盒子通栏，有高度，而且有个下边框
nav 盒子里有个版心盒子，存放 1、2 号盒子
1 号盒子左侧浮动，dropdown
2 号盒子左侧浮动，navitems 导航栏组
1 号盒子有讲究，根据相关性，里面包含 .dt（全部商品分类）和 .dd（详细商品分类）两个盒子（布局页面的时候，不仅要看左右的布局和相关性，也要看上下的布局和相关性，比如这里的全部商品和下方的详细分类应该是属于一个整体（详细分类是对全部分类的具体解释），最好是放在一个盒子里面而不是拆分开）。通常大部分情况下是使用 dl 标签，鼠标移动到 dt 上会下拉出 dd，这个项目里面我们使用 .dt 和 .dd 两个盒子来实现，但是逻辑还是和 dl 标签的差不多，因此给大盒子命名 dropdown，小盒子命名 dt 和 dd。

TIP：对于都是标准流，且没有设置 z-index 的盒子，如果前面的盒子的子盒子溢出了，并且与后面的盒子有重叠，那么后面的盒子会盖住前面写的盒子的溢出部分，因为后写的元素后画。

3.品优购列表页制作

4.品优购注册页制作

5.域名注册与网站上传

广州城市开发者社区

欢迎加入我们的广州开发者社区，与优秀的开发者共同成长！

更多推荐

2026年10大网络爬虫工具横评：从Scrapy到Bright Data，我为什么最终选择了“不写代码”？

本文分享了一个跨境电商竞品监控项目团队的技术选型复盘。面对每日200万条数据抓取需求，团队评估了10款主流爬虫工具（包括Scrapy、Beautiful Soup、Bright Data等），通过真实场景压力测试（100请求/秒并发测试），最终放弃自研架构（Scrapy+代理池+Playwright），转向SaaS服务。测试聚焦Amazon等强反爬网站，核心指标包括成功率（＞90%）、延迟（＜15

广州城市开发者社区

2026远程桌面软件年终推荐榜单：ToDesk、RustDesk、向日葵、UU和QQ远程

本文对5款主流远程桌面软件（ToDesk、RustDesk、向日葵、UU远程、QQ远程）进行横向评测。重点测试了连接速度、流畅性、画质、功能完整性和安全性等核心指标。ToDesk表现突出，具备低延迟、多设备管理、高帧率画质（最高支持8K 60帧）以及端对端加密等优势；RustDesk支持开源但配置复杂；向日葵功能全面但偶现卡顿；UU远程需注册且体验一般；QQ远程轻便但功能有限。综合推荐ToDesk

广州城市开发者社区

RS232与RS485的区别，以及它们与Modbus RTU的关系

广州城市开发者社区

所有评论(0)

查看更多评论

Code HotPot

@2501_91088181

已为社区贡献1条内容

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 ...
n+5	从第 5 个开始（包含第 5 个）到最后
-n+5	前 5 个（包含第 5 个）

HTML5 + CSS3 学习笔记

Code HotPot

写在前面

简单通俗表达

1. 网页

1.1 什么是网页

1.2 什么是 HTML

1.3 网页的形成

1.4 总结

2. 常用浏览器以及内核

2.1 常用的浏览器

2.2 浏览器内核 （了解即可）

3. Web 标准（重点）

3.1 为什么需要 Web 标准

3.2 Web 标准的构成

一、HTML学习

1. HTML 语法规范

1.1 基本语法概述

1.2 标签关系

2. HTML 基本结构标签

2.1 第一个 HTML 网页

2.2 基本结构标签总结

3. 开发工具

3.1 VSCode 的使用

3.2 VSCode 工具生成骨架标签新增代码

3.2.1 !DOCTYPE 标签

3.2.2 lang 语言种类

3.2.3 字符集

3.2.4 总结

4. HTML 常用标签

4.1 标签语义

4.2 标题标签 h1 - h6（重要）

4.3 段落和换行标签（重要）

4.4 文本格式化标签

4.5 div 和 span 标签

4.6 图像标签和路径（重点）

4.6.1 图像标签

1.图像标签介绍

2.图像标签属性注意点

4.6.2 路径

前期铺垫知识

1. 相对路径

2. 绝对路径

4.7 超链接标签（重点）

4.7.1 链接的语法格式

4.7.2 链接分类

4.9 HTML 中的注释和特殊字符

4.9.1 注释

4.9.2 特殊字符

4.10 表格标签

4.10.1 表格标签的主要作用

4.10.2 表格的基本语法

4.10.3 表头单元格标签

4.10.4 表格属性

4.10.5 表格结构标签

4.10.6 合并单元格

4.11 列表标签

4.11.1 无序列表（重点）

4.11.2 有序列表（理解）

4.11.3 自定义列表（重点）

4.12 表单标签

4.12.1 表单的组成

4.12.2 表单域

4.12.3 表单控件（表单元素）

1. input 表单元素

2. label 标签对

3. select 下拉表单元素

4. textarea 文本域元素

二、CSS 学习

1. CSS 语法规范

2. CSS 代码风格

2.1 样式格式书写

2.2 样式大小写风格

2.3 样式空格风格

3. CSS 基础选择器

3.1 CSS 选择器的作用

3.2 选择器分类

3.2.1 标签选择器

3.2.2 类选择器

3.2.3 类选择器-多类名

2.2 浏览器内核（了解即可）