一、概述：认识网页
1.网页的组成部分：
- 文字
- 视频
- 图片
- 音频
- 超链接
2.网页背后的本质：前端程序员的代码，网页最主要包含3部分内容：结构、表现和行为。网页现在新的标准是W3C，要求页面实现结构、表现、行为三层分离，目前模式是HTML、CSS和JavaScript。在网页处右键点击检查：
- HTML：Hyper Text Markup Language（超文本标记语言，用来实现页面元素和内容，是结构层主要部分。
- CSS：层叠样式表，网页元素的外观和位置等页面样式（颜色、大小等），是表现层主要部分。
- JavaScript：前端开发编程语言，用于网页模型的定义与页面交互，是行为层主要部分。
一些常见的其他技术：
- Ajax：异步JavaScript和XML，Asynchronous Javascript And XML，是一种实现交互式网页应用的网页开发技术。
- SEO：搜索引擎优化，Search Engine Optimization，是一种专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。
3.五大浏览器与渲染引擎
- 浏览器：用于网页显示、运行的平台，常用的五大浏览器为，IE浏览器、火狐浏览器（FireFox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）：
- 渲染引擎：浏览器内核，浏览器中专门对前端代码进行解析渲染的部分。不同的浏览器出品的公司不同，内在的渲染引擎也不同：
注：渲染引擎不同，使得解析相同代码时的速度、性能、效果也不同。
二、HTML语法
（一）创建一个.html文件
1.新建文本文档
2.将文件后缀改为.html
3.使用浏览器打开
（二）HTML骨架结构
事实上，网页类似于一篇文章，每一页文章内容有固定的结构，如，开头、正文、落款等，而网页的内容也存在固定的结构，如，整体、头部、标题、主体等，如：
<!DOCTYPE html>
<!--声明是HTML5文档-->
<html lang="en">
<!--lang意为language,表示使用English编写-->
<head>
<meta charset="UTF-8">
<!--定义网页的编码格式为UTF-8-->
<title>Title</title>
</head>
<body>
网页的主体内容
</body>
</html>
- html标签：网页的整体，整个网页从< html >开始，到< /html >结束。
- head标签：网页的头部，往往是在浏览器中不可见的，其内部标签有：
- < title >：定义网页的标题。
- < meta >：定义网页的基本信息，供搜索引擎使用。
- < style >：定义CSS样式。
- < link >：链接外部CSS文件或脚本文件。
- < script >：定义脚本语言。
- < base >：定义页面所有链接的基础定位。
- body标签：定义网页显示的内容，往往是在浏览器中可见的部分。
（三）注释与标签结构
1.HTML中注释的写法
<!--注释内容-->
快捷键：Ctrl+/
2.HTML标签的结构
标签由<、>、/、英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名。
- 双标签：标签由<、>、/、英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名。
- 单标签：少数标签由一部分组成，称之为：单标签，自成一体，无法包裹内容，如，换行标签< br >
3.标签结构
- 父子关系（嵌套关系）
- 兄弟关系（并列关系）
（四）普通标签
①标题标签
在新闻和文章的页面中，都离不开标题，用来突出显示文章主题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>
</body>
</html>
<!--1~6级标签,重要程度依次递减-->
②段落标签
在新闻和文章的页面，用于分段显示，使得段落之间存在间隙，独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。</p>
<p>万维网（world wide web，简称www）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。</p>
</body>
</html>
③换行标签
起换行作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<br>
<br>
<br>
<h1>Good Morning</h1>
</body>
</html>
④水平线标签
起水平线分割作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<h1>Good Morning</h1>
</body>
</html>
⑤文本格式化标签
一般用于给文字加上加粗、下划线、倾斜、删除线等效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
</body>
</html>
（五）媒体标签
①图片标签
用于在场景中显示图片。
<img src="" alt="">
常用属性：
- src：图片的地址。
- alt：替换文本，当图片加载失败时，才会显示alt的文本，若图片加载成功，不会显示alt的文本。
- title：提示文本，是当鼠标悬停时，才会显示的文本。
- width与height：宽度和高度（数字），若值设置了width和height其中一个，则另一个没设置的会自动等比例放缩，使得图片不会变形；若同时设置了两个，且设置不当，则图片可能会变形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="C:\Users\lenovo\Pictures\Saved Pictures\1360075b77db4d3088a0cb92a773a0f6.jpg" alt="替换文本" title="图片" width="1000" height="800">
</body>
</html>
②音频标签
用于在页面中插入音频。
<audio src="./music.mp3 controls"></audio>
常见属性
- src：音频的路径。
- controls：显示播放的控件，如，播放按钮。
- autoplay：自动播放。
- loop：循环播放。
③视频标签
用于在页面中插入视频。
<video src="./video.mp4" controls></video>
④链接标签
又称为a标签、超链接、锚链接，点击之后，从一个页面跳转到另一个页面。
<a href="./目标网页.html">超链接</a>
<!--里面的"超链接"是给超链接起名-->
常用属性：
- target：目标网页的打开形式。
- _self：默认值，在当前窗口跳转（覆盖原网页）。
- _blank：在新窗口跳转（保留原网页）。
（六）列表标签
能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建。
①无序列表
- ul：表示无序列表的整体，用于包裹li标签。
- li：表示无序列表的每一项，用于包含每一项的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<ul>
<li>列表A</li>
<li>列表B</li>
</ul>
</body>
</html>
②有序列表
- ol：表示有序列表的整体，用于包裹li标签。
- li：表示无序列表的每一项，用于包含每一项的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
<ol>
<li>列表A</li>
<li>列表B</li>
</ol>
</body>
</html>
③自定义列表
- dl：表示自定义列表的整体，用于包裹dt//dd标签。
- dt：表示自定义列表的主题。
- dd：表示自定义列表的针对主题的每一项内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dt>选项</dt>
<dd>工具栏</dd>
<dd>帮助</dd>
</ol>
</body>
</html>
（七）表格标签
1.基本标签
- table：表格整体，可用于包裹多个tr。
- tr：表格每行，可用于包裹td。
- td：表格单元格，可用于包裹内容。
嵌套关系：table>tr>td
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--table包含tr、tr包含td-->
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
<td>A</td>
</tr>
<tr>
<td>李四</td>
<td>80分</td>
<td>B</td>
</tr>
<tr>
<td>王五</td>
<td>70分</td>
<td>C</td>
</tr>
</table>
</body>
</html>
2.相关属性
- border：边框宽度。
- width：表格宽度。
- height：表格高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="300">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
<td>A</td>
</tr>
<tr>
<td>李四</td>
<td>80分</td>
<td>B</td>
</tr>
<tr>
<td>王五</td>
<td>70分</td>
<td>C</td>
</tr>
</table>
</body>
</html>
- caption：表格大标题。
- th：表头单元格。
3.表格标题和表头单元格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="300">
<caption><strong>学生成绩单</strong></caption>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
<td>A</td>
</tr>
<tr>
<td>李四</td>
<td>80分</td>
<td>B</td>
</tr>
<tr>
<td>王五</td>
<td>70分</td>
<td>C</td>
</tr>
</table>
</body>
</html>
注：caption标签书写在table标签内部；th标签写在th标签内部（用于替换td标签）。
4.表格的结构标签
让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。
- thead：表格头部。
- tbody：表格主体。
- tfoot：表格底部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="300">
<caption><strong>学生成绩单</strong></caption>
<thread>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</thread>
<tbody>
<tr>
<td>张三</td>
<td>100分</td>
<td>A</td>
</tr>
<tr>
<td>李四</td>
<td>80分</td>
<td>B</td>
</tr>
<tr>
<td>王五</td>
<td>70分</td>
<td>C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>以上即为(3)班全部成绩</td>
</tr>
</tfoot>
</table>
</body>
</html>
5.合并单元格
用于将水平或垂直的多个单元格合并成一个单元格，按合并方式可分为跨行合并（rowspan）和跨列合并（colspan），且，只有同一个结构标签中的单元格才能合并，不能跨结构标签合并，即，thead、tbody、tfoot。
左上原则：
- 上下合并则只保留最上的，删除其他。
- 左右合并则只保留最左的，删除其他。
跨行合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="300">
<caption><strong>学生成绩单</strong></caption>
<thread>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</thread>
<tbody>
<tr>
<td>张三</td>
<!--指定跨度-->
<td rowspan="2">100分</td>
<td>A</td>
</tr>
<tr>
<td>李四</td>
<td>B</td>
</tr>
<tr>
<td>王五</td>
<td>70分</td>
<td>C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>以上即为(3)班全部成绩</td>
</tr>
</tfoot>
</table>
</body>
</html>
跨列合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="300">
<caption><strong>学生成绩单</strong></caption>
<thread>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</thread>
<tbody>
<tr>
<td>张三</td>
<td colspan="2">100分</td>
<td>100分</td>
</tr>
<tr>
<td>李四</td>
<td>100分</td>
<td>B</td>
</tr>
<tr>
<td>王五</td>
<td>70分</td>
<td>C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>以上即为(3)班全部成绩</td>
</tr>
</tfoot>
</table>
</body>
</html>
（八）表单
在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签，而在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成。
- 表单域：一个包含表单元素的区域，在HTML中使用<form>标签来定义表单域，表单域范围内的表单元素信息会被提交给服务器，以实现用户信息的收集和传递。
- 表单元素：在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件
- 提示信息：用于提示数据的输入。
①form表单域标签
<form>标签用来表示一个需要向服务器提交的数据表单，在这个form表单的子标签里，需要实现让用户 输入、单选、多选(input标签)，下拉选择(select标签)，点击(button标签或者input标签)，输入大段文字(textarea标签)等操作。
常用属性：
| 属性 | 值 | 说明 |
|---|---|---|
| action | URL | 指定表单所得数据发送的地址 |
| method | get、post | 指定数据传送到服务器的方式，get会将发送的数据显示在地址栏，post就不会，单论安全而言，post安全性更高。 |
| name | name | 规定表单的名称 |
例：
<form action="" method="post" name="form">
</form>
②input表单标签
<input>常用于在网页中显示收集用户信息的表单效果，如，登录页、注册页，其可通过type属性值的不同来展示不同的效果，常用type属性：
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- text 文本框 -->
用户名:<input type="text" value="请输入用户名"><br>
<!-- password 密码框 -->
密码：<input type="password"><br>
<!-- radio 单选按钮 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的name值 -->
<!-- 单选按钮和复选框可以设置checked属性，页面打开时会默认选中 -->
性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
<!-- checkbox 复选框 -->
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<!-- submit按钮可以把表单域form内的表单元素里面的值提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素的初始状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 结合js使用-->
<input type="button" value="获取短信验证码"><br>
<!-- 文件域 file 用于上传文件 -->
上传头像：<input type="file">
</form>
</body>
</html>
③select表单标签
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签，又称下拉表单标签。
- <select>中至少包含一对<option>标签用于选择。
- 在<option>中定义selected="selected"时，意为设置为默认选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
性别:
<select>
<option selected="selected">男</option>
<option>女</option>
</select>
</form>
</body>
</html>
④textarea表单标签
当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签，在表单元素中，<textarea>标签是用于定义多行文本输入的表单标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
教室评价:
<textarea>请在此输入内容</textarea>
</form>
</body>
</html>
（九）语义化标签
语义是指对一个词或者句子含义的正确解释。语义化标签就是构成HTML结构的标签要有意义，例如，当浏览器解析到< h1 >< h1 >标签时，它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。
①常见的语义化标签
| 标签 | 说明 |
|---|---|
| head标签 | 页眉，通常包括网站标志、主导航、全站链接以及搜索框。 |
| nav标签 | 导航标签，仅对文档中重要的链接群使用。 |
| main标签 | 页面主要内容，一个页面只能有一个。 |
| article标签 | 用来定义独立于文档且有意义的来自外部的内容。 |
| section标签 | 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 |
| aside标签 | 侧边栏标签，定义article标签外的内容，可用作文章的侧边栏。 |
| footer标签 | 页脚，只有当父级是body时，才是整个页面的页脚。 |
| title标签 | 定义文档的标题。 |
| h1~h6标签 | 创建文档结构的层级关系 |
| ul标签 | 无序列表。 |
| ol标签 | 有序列表。 |
| strong标签 | 加粗。 |
| em标签 | 斜体。 |
| p标签 | 段落 |
②语义化标签的好处
- 代码结构清晰，易于开发维护。
- 对搜索引擎友好，良好的结构和语义，有助于爬虫抓取信息。
- 即使因网速的问题而没有加载CSS，页面也能呈现良好的结构。
注：div和span标签都是无语义标签，常配合CSS来定义元素样式。
（十）字符实体
在HTML中为了避免字符使用时的冲突而使得无法在网页上正常显示，故而引入了字符实体。
常用字符实体：
三、CSS
CSS（Cascading style sheets），层叠样式表，是一组样式设置的规则，用于控制页面的外观样式。CSS主要有以下功能：
- 实现内容与样式分离，便于团队开发。
- 样式复用，便于网站后期维护。
- 页面的精准控制，让页面更加精美。
其与HTML、JavaScript在网页中的关系如下图所示：
（一）基本用法
CSS写在HTML的style标签中，而style标签一般写在head标签里，title标签下面，常见格式为：
<head>
<style>
选择器{
属性名：属性值;
属性名：属性值;
}
</style>
</head>
- 选择器：要修饰的对象。
- 属性值：要修饰对象的哪一个属性（样式）。
- 属性值：样式的取值。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
background: #cccc;
}
h2{
color:blue;
}
</style>
</head>
<body>
<p>Hello World!</p>
<h2>Good Morning!</h2>
</body>
</html>
（二）CSS引入方式
①内嵌式
CSS写在style标签中，而style标签虽然可以写在页面任意位置，但是通常写在head标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: brown;
}
</style>
</head>
<body>
<p>CSS从入门到精通</p>
<h2>Hello World</h2>
</body>
</html>
②外联式
CSS写在一个单独的.css文件中，需要通过link标签或@import指令在网页中引入。
1.link标签
使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
<!--type属性可以省略-->
例：
my.css
p{
color: brown;
}
Demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--stylesheet意为样式表,即,link引入的是样式表-->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>CSS从入门到精通</p>
<h2>Hello World</h2>
</body>
</html>
2.@import
使用@import指令导入CSS文件。
<style>
@import "CSS样式文件路径";
@import url(CSS样式文件路径);
</style>
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url("my.css");
</style>
</head>
<body>
<p>CSS从入门到精通</p>
<h2>Hello World</h2>
</body>
</html>
③行内式
CSS写在标签的style属性中，只对设置style的标签起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:brown;font-size: 30px;">CSS从入门到精通</p>
<h2>Hello World</h2>
</body>
</html>
（三）选择器
选择页面中对应的标签，方便后续设置样式。
①基础选择器
1.标签选择器
标签名{
CSS属性名:属性值;
}
作用：通过标签名找到代码中所有这类标签，设置样式。
2.类选择器
.类名{
CSS属性名:属性值;
}
作用：类选择器使得相同的标签可自由选择样式，通过类名，找到页面中所有带有这个类名的标签，设置样式。
注：
- 所有标签上都有class属性，class属性的属性值。
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头。
- 一个标签可以同时有多个类名，类名之间以空格隔开，且，类名可以重复，一个类选择器可以同时选中多个标签。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{
color: red;
}
</style>
</head>
<body>
<div class="one">类选择器</div>
</body>
</html>
3.id选择器
#id属性值{
css属性名:属性值;
}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。
注：
- 所有标签上都带有id属性。
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复，且，一个标签上只能有一个id属性值，一个id选择器只能选中一个标签（一对一关系）。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#one{
color: red;
}
</style>
</head>
<body>
<div id="one">id选择器</div>
</body>
</html>
4.通配符选择器
通配符{
css属性名:属性值;
}
例:
*{
css属性名:属性值;
}
作用：找到页面中所有的标签,设置样式.
②复合选择器
1.后代选择器
父级选择器 后代选择器{}
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
<!--找到div的嵌套子标签p并将其文字颜色设为红色,且不影响到其他p标签-->
<!--父选择器 后代选择器{}-->
div a{
color: red;
}
</style>
</head>
<body>
<div>
父级
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body>
</html>
2.子代选择器
选择器1>选择器2{}
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素。
注：子代选择器只包括儿子，而后代选择器中包含所有的后代。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
<!--找到div的嵌套子标签p并将其文字颜色设为红色,且不影响到其他p标签-->
<!--父选择器 后代选择器{}-->
div>a{
color: red;
}
</style>
</head>
<body>
<div>
父级
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body>
</html>
③并集选择器
作用：同时选择多组标签，设置相同的样式。
选择器1,选择器2,选择器3,...{}
注：
- 并集选择器中的每组选择器之间通过","分隔。
- 并集选择器中每组选择器可以是基础选择器或者是复合选择器。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p,div,h1{
color: red;
}
</style>
</head>
<body>
<p>Hello World</p>
<div>Nice!</div>
<h1>Yeah!</h1>
</body>
</html>
④交集选择器
作用：找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
选择器1.选择器2{}
注：交集选择器中如果有标签选择器，标签选择器必须写在最前面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.box{
color: red;
}
</style>
</head>
<body>
<!--找到第一个p,带box类的,设置文字颜色是红色-->
<p class="box">这是p标签:box</p>
<p>ppppp</p>
<div class="box">这是div标签:box</div>
</body>
</html>
⑤hover伪类选择器
选择器:hover{}
作用：选中鼠标悬停在元素上的状态，设置样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
</body>
</html>
（四）常用属性
①字体属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| font-size | 数字+单位 | 设置字体的大小、尺寸 |
| font-weight | 关键字（正常normal，加粗bold）或纯数字（100~900，正常400，加粗700） | 设置字体的粗细 |
| font-style | 正常normal，倾斜italic | 设置字体样式 |
| font-family | 具体字体（Microsoft YaHei等）或字体系列（sans-serif、serif等） | 从左往右按顺序查找，若电脑中未安装该字体，则显示下一个字体；若都不支持，此时会根据操作系统显示最后字体系列的默认字体。 |
| font | 复合属性，可包含上述属性（顺序必须为：font:stye weight size family） | 是以上属性的连写形式，若需要同时设置单独和连写形式，则要把单独的样式写在连写的下/里面。 |
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#one{
font:italic 700 66px 宋体;
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<div id="one">id选择器</div>
</body>
</html>
事实上，字体是分为三大系列的：
- 无衬线字体(sans-serif)
- 特点：文字笔画粗细均匀，并且首位无装饰。
- 常见该系列字体：黑体、Arial。
- 衬线字体(serif)
- 特点：文字笔画粗细不均，，并且首尾有笔锋装饰。
- 常见该系列字体：宋体、Times New Roman。
- 等宽字体(monospace)
- 特点：每个字母或文字的宽度相等。
- 常见该系列字体：Consolas、fira code。
②文本属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| text-indent | 数字+px或数字+em(1em==当前标签的font-size大小) | 文本缩进 |
| text-align | left（左对齐）、center（居中对齐）、right（右对齐） | 文本水平对齐方式，可使文本、span标签、a标签、input标签、img标签居中 |
| text-decoration | underline（下划线）、line-through（删除线）、overline（上划线）、none（无装饰线） | 文本修饰，常用于清除超链接的下划线 |
| line_height | 数字+px或倍数（当前font-size的倍数） | 行高，用于控制一行的上下间距 |
| white-space | nowrap | 文本超出后是否换行 |
| vertical-align | top、middle、bottom可用于图片和文字的对齐方式 | 垂直对齐方式 |
| text-transform | lowercase、uppercase、capitalize | 字母大小写转换 |
③颜色属性
1.使用颜色名称
<style>
p{
color:red;
}
</style>
2.十六进制RGB值
十六进制表示的是：#RRGGBB
#FFFFFF--->#FFF 白色
#000000--->#000 黑色
#FF0000--->#F00 红色
#00FF00--->#0F0 绿色
#0000FF--->#00F 蓝色
#CCCCCC--->#CCC 灰色
#FF7300--->无法简写
3.rgb函数
<!--格式:rgb(red,green,blue),取值为[0,255]-->
rgb(255,0,0)----->红
rgb(0,255,0)----->绿
rgb(0,0,255)----->蓝
4.rgba函数
<!--格式:rgba(red,green,blue,alpha),aplha取值为[0,1],1表示完全透明,0表示完全不透明-->
rgba(255,0,0,1)----->纯红
rgba(255,0,0,0.5)---->红色半透明
④背景属性
| 属性名 | 说明 | 取值 |
|---|---|---|
| background-color | 背景颜色 | 颜色属性或使用transparent（透明） |
| background-image | 背景图片 | 使用url()的方式指定图片的路径 |
| background-repeat | 背景图片的平铺 | repeat（水平和垂直方向都平铺）、repeat-x（沿着x方向平铺）、repeat-y（沿着y方向平铺）、no-repeat（不平铺） |
| background-position | 背景图片的显示位置 | 使用关键字（top、bottom、left、center）或坐标（默认是左上角(0,0)） |
| background | 简写方式 | background:color image repeat position |
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:400px;
height:400px;
background-color:pink;
background-image:url('地址');
background-repeat:no-repeat;
/*background-position:right 0;*/
/*background-position:right bottom;*/
/*background-position:center center;*/
/*background-position:center;*/
/*background-position:50px 0;*/
/*background-position:50px 100px;*/
background-position:-50px -100px;
background:pink url('') no-repeat 100px 50px;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
⑤列表属性
| 属性名 | 说明 | 取值 |
|---|---|---|
| list-style-type | 设置列表前的标记 | none、disc、circle、square、decimal |
| list-style-image | 将图像作为列表前的标记 | 使用url |
| list-style-position | 设置标记的位置 | outside（默认，相当于一级），inside（相当于二级） |
| list-style | 简写 | list-style:list-style-type |
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* li{
list-style-type:decimal;
} */
.first{
list-style-type:circle;
}
.second{
list-style-image:url(../images/male.gif);
}
.third{
list-style-type:circle;
list-style-position:inside;
}
.fourth{
list-style:circle url(../images/female.gif)inside;
/* list-style:none; */
}
.nav{
/* list-style:none;
float:left; */
}
.nav li{
list-style:none;
float:left;
width:70px;
}
</style>
</head>
<body>
<ul>
<li class="first">hello</li>
<li class="second">hello</li>
<li class="third">hello</li>
<li class="fourth">hello</li>
</ul>
<hr>
<nav>
<ul class="nav">
<li>新闻</li>
<li>小说</li>
<li>艾瑞蒂</li>
<li>政治</li>
<li>学习</li>
</ul>
</nav>
</body>
</html>
（五）元素显示模式
元素：使用"<>"括起来的不仅仅可以称为标签、标记，还可称为元素。
显示模式：如，一个标签是独占一行，还是一行可容纳多个标签。在HTML中，所有的标签一共有三种显示模式，分别是块级、行内、行内块。
①块级元素
特点：
- 每个元素独占一行，且，可自动换行。
- 宽度默认是父元素高度，高度默认由内容撑开。
- 可以设置宽度、高度、margin、padding。
- 可容纳内联元素和块级元素。
常见标签
②行内元素
特点：
- 一行可显示多个。
- 行内元素的大小是靠本身内容的大小，宽高都设置无效，但水平方向的padding、margin都可使用。
- 默认的宽度就是文本内容的宽度。
- 只能容纳文本级元素和内联元素。
常见标签
③行内块元素
特点
- 同时具有块元素和行内元素的特点。
- 一行可放多个行内块元素。
- 可设置宽度（默认宽度是内容宽度）、高度、外边距、内边距。
- 和行内元素同一行，之间会留白。
常见标签：<img>、<input>、<td>、<textarea>、<button>、<select>等。
④元素显示模式转换
- 转换为块级元素：
display:block
- 转换为行内元素：
display:inline
- 转换为行内块元素
display:inline-block
（六）CSS三大特性
①继承性
子元素默认继承父元素样式的特点。
常见可继承属性：
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
注：可用调试工具判断样式是否可继承。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 400px;
color: red;
}
</style>
</head>
<body>
<div>
这是div中第一条语句
<span>这是div中第二条语句</span>
</div>
</body>
</html>
使用Edge调试器查看：
可见，span继承于div标签选择器。
②层叠性
特性
- 给同一个标签设置不同的样式，此时样式会层层叠加，会共同作用在标签上。
- 给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效。
注：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。
③优先级
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式。
1.继承优先级：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注：
- !important写在属性值的后面，分号的前面。
- !important不能提升继承的优先级，只要是继承优先级最低。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
color: orange;
}
.box{
color: blue;
}
div{
color: green!important;
}
body{
color: red;
}
</style>
</head>
<body>
<div class="box" id="box" style="color:pink;">测试优先级</div>
</body>
</html>
2.权重叠加计算
若是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效。
比较规则：
- 先比较第一级数字，若比较出来，之后统统不看。
- 若第一级数字相同，此时再去比较第二级数字，若比较出来了，之后的统统不看。
- … …
- 若最终所有数字都相同，表示优先级相同，则比较层叠性（写在下面的说了算）。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*(0,0,2,1)*/
.c1 .c2 div{
color: blue;
}
/*(0,1,0,1)*/
div #box3{
color:green;
}
/*(0,1,0,1)*/
#box1 div{
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色?
</div>
</div>
</div>
</body>
</html>
（七）盒子模型
①简介
盒子的概念
- 页面中每一个标签都可看作是一个"盒子"，通过盒子的视角更方便进行布局。
- 浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，一般形象地称之为"盒子"。
盒子模型：CSS中规定每个盒子分别由 ：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。
页面中元素实际所占的空间：
- 宽度=width+左右padding+左右border+左右margin
- 高度=height+上下padding+上下border+上下margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:300px;
height: 300px;
background-color: pink;
/*边框线*/
border: 1px solid #000;
/*内边框*/
padding: 20px;
/*外边距*/
margin: 50px;
}
</style>
</head>
<body>
<div>Hello World</div>
<div>Good Morning</div>
</body>
</html>
使用Edge调试器查看：
②内容区域的宽度和高度
作用：利用width和height模型设置盒子内容区域的大小。
属性：width/height
③边框
表示盒子的边框。
| 属性名 | 含义 | 取值 |
|---|---|---|
| border-width | 边框粗细 | 单位：px |
| border-style | 边框样式 | solid（实现边框）、dashed（虚线边框）、dotted（点线边框） |
| border-color | 边框颜色 | |
| border-方位词 | 在边框的某一方位单独设置 | border-left、border-right、border-bottom、border-top |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:300px;
height: 300px;
background-color: pink;
border-left: 5px dotted red;
border-right: 5px dashed skyblue;
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
④内边距
表示盒子的内边距，即内容与边框之间的距离。
| 属性 | 说明 | 取值 |
|---|---|---|
| padding-方位词 | 在内边距的单独方位设置属性值 | padding-left、padding-right、padding-top、padding-bottom |
复合格式
注：
- 若盒子已经有了高度和宽度，再指定内边距，会撑大盒子，内边距padding影响盒子实际大小，此时若要要保证盒子和效果图像大小保持一致，则让width/height减去多出来的内边距大小。
- 盒子本身没有设置width/height属性，此时padding不会撑开盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/*撑大盒子的属性有:border、padding*/
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid #000;
padding:20px;
/*此时会给四个方向都加上外边距*/
margin: 50px;
/*亦可进行单独设置*/
margin-left: 100px;
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
⑤外边距
表示盒子的外边距，即盒子与盒子之间的距离。
| 属性 | 说明 | 取值 |
|---|---|---|
| margin-方位词 | 通过方位词指定设置属性值 | margin-left、margin-right、margin-top、margin-bottom |
复合格式
（八）浮动
①结构伪类选择器
结构伪类选择器常用于查找某父级选择器中的子元素，作用是根据元素在HTML中的结构关系查找元素。
| 选择器 | 说明 |
|---|---|
| E:first-child{} | 匹配父元素中第一个子元素，并且是E元素。 |
| E:last-child{} | 匹配父元素中最后一个子元素，并且是E元素 |
| E:nth-child(n){} | 匹配父元素中第n个子元素，并且是E元素 |
| E:nth-last-child(n){} | 匹配父元素中倒数第n个子元素，并且是E元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*找到第一个子元素*/
li:first-child{
background-color: green;
}
/*找到最后一个子元素*/
li:last-child{
background-color: blue;
}
/*正数任意一个元素*/
li:nth-child(3){
background-color: skyblue;
}
/*倒数任意一个元素*/
li:nth-last-child(3){
background-color: black;
}
</style>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
</ul>
</body>
</html>
注：若n填的是数字，则其从1开始，若其填的是公式，则n从0开始，n组成的常见公式，如：
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前5个 | -n+5 |
| 找到后五个 | n+5 |
| 4的倍数 | 4n |
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*正数偶数序列的元素*/
li:nth-child(2n){
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
</ul>
</body>
</html>
②伪元素
元素，是HTML设置的标签，而伪元素，是CSS模拟出的标签效果，一般页面中的非主体内容可以使用伪元素。
| 伪元素 | 作用 |
|---|---|
| ::before | 在父元素内容的最前添加一个伪元素 |
| ::after | 在父元素内容的最后添加一个伪元素 |
注：必须设置content属性才能生效，且，伪元素默认是行内元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.father::before{
/*内容*/
content: 'Good Morning! ';
color:red;
width: 100px;
height: 100px;
display: block;
}
.father::after{
content: ' Today';
color: green;
width: 150px;
height: 150px;
display: block;
}
</style>
</head>
<body>
<!--伪元素,通过css创建标签,装饰性的不重要的小图-->
<!--找父级,在这个父级里面创建子级标签-->
<div class="father">Hello World</div>
</body>
</html>
此时进行了行内块的转换，否则width和height并不会生效，因为其是行内元素。
③标准流与浮动
网络布局的本质是用CSS来摆放盒子，把盒子放到相应位置，而CSS提供了三种传统布局方式：
- 普通流（标准流）
- 浮动
- 定位
1.标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素，即，标签按规定好的默认方式排列。
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行。
- 行内元素或行内块元素：从左往右，水平布局，空间不够自动换行。
标准流是最基本的布局方式。
2.浮动
标准流存在的问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
display: inline-block;
width: 100px;
height: 100px;
}
.one{
background-color: pink;
}
.two{
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>
虽然二者处于同一排，但仍有空白间距，使用调试器，发现并无默认的margin，这是因为两个标签的代码有换行，这是因为在解析行内块和行内标签时，会产生一个空格的距离（可换到一行写，但是这不是正确的解法办法）。
事实上，有很多的布局效果标准流是无法完成的，此时可以利用浮动来完成布局，这是因为，浮动可以改变元素标签默认的排列方式。
网络布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
float: left;
width: 150px;
height: 200px;
background-color: #d87093;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
2.1什么是浮动？
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
选择器{float:属性值;}
| 属性 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>什么是浮动</title>
<style>
.left,
.right {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="left">左青龙</div>
<div class="right">右白虎</div>
</body>
</html>
2.2浮动特性
加入浮动之后的元素会具备很多特性，如：
- 浮动元素会脱离标准流。
- 脱离标准普通流的控制（浮）移动到指定位置（动）。
- 浮动的盒子不再保留原先的位置。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动特性1</title>
<style>
/* 设置了浮动（float）的元素会：
1.脱离标准普通流的控制（浮）移动到指定位置（动）。
2.浮动的盒子不再保留原先的位置 */
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: gray;
}
</style>
</head>
<body>
<div class="box1">浮动的盒子</div>
<div class="box2">标准流的盒子</div>
</body>
</html>
- 浮动元素会一行内显示且元素顶部对齐。
- 若多个盒子都设置了浮动，则它们会安装属性值一行内显示并且顶端对齐排列。
- 浮动的元素是互相贴靠在一起（不会有缝隙），若父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动元素特性-浮动元素一行显示</title>
<style>
div {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
background-color: skyblue;
height: 249px;
}
.four {
background-color: skyblue;
}
</style>
</head>
<body>
<div>1</div>
<div class="two">2</div>
<div>3</div>
<div class="four">4</div>
</body>
</html>
- 浮动元素会具有行内块元素的特性。
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 - 块级盒子：没有设置宽度时默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
- 行内元素：宽度默认和内容一样宽，直接设置高宽无效，但是添加浮动后，它的大小可以直接设置。
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的。
即：默认宽度由内容决定，同时支持指定高宽，盒子之间无空隙。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动的元素具有行内块元素特点</title>
<style>
/* 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 */
span,
div {
float: left;
width: 200px;
height: 100px;
background-color: pink;
}
/* 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度 */
p {
float: right;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>div</div>
<p>pppppppppppppp</p>
</body>
</html>
注：之所以顶部没有对齐，原因是p标签自带的外边距>span div自带的外边距。
3.浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，网页布局的一般策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准侧。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动布局练习3</title>
<style>
.box {
width: 1226px;
height: 615px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 615px;
background-color: gray;
}
.right {
float: left;
width: 992px;
height: 615px;
background-color: skyblue;
}
.right>div {
float: left;
width: 234px;
height: 300px;
background-color: pink;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左青龙</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
</html>
（九）定位装饰
常见网络布局方式：
- 标准流
- 块级元素独占一行，即为垂直布局。
- 行内元素/行内块元素一行显示多个，即为水平布局。
- 浮动
- 可以让原本垂直布局的块级元素变成水平布局。
- 定位
- 可以让元素自由地摆放在网页的任意位置。
- 一般用于盒子之间的层叠情况。
①定位
定位可让元素自由地摆放在网页的任意位置，解决盒子与盒子之间的层叠问题，且，定位之后的元素层级最高，可层叠在其他盒子上面；亦可让盒子始终固定在屏幕中的某个位置。
设置定位的方式
使用position属性可设置定位的方式：
| 定位方式 | 属性值 |
|---|---|
| 静态定位（不定位） | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
设置定位的偏移值
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可，选取的原则一般是就近原则，即，取left或right和top或bottom。
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+px | 距离下边的距离 |
1.相对定位
相对定位是相对于之前的位置进行移动。
position:relative
- 需要配合方位属性实现移动。
- 相对于自身原先位置进行移动。
- 并不会改变标签原有显示模式的特点。
- 相对定位的元素在网页中仍然占有位置（没有脱标）。
注：若left和right都有，则以left为准，若top和bottom都有，则以top为准。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: relative;
left: 50px;
top: 100px;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<p>测试定位</p>
<div class="box">box</div>
<p>测试定位</p>
</body>
</html>
可见，div覆盖在了p标签上，且，所设置的left与top是相对于原先位置而言的。
使用Edge进行检查：
可见，该div标签仍独占一行，即，仍是块级显示模式，事实上，相对定位并不会改变原先标签的属性。
2.绝对定位
相对于非静态定位的父级元素进行定位移动，即，先找已定位的（只要不是静态定位就行）父级，若存在这样的父级，则就以这个父级为参照物进行定位；若父级并未定位，则以浏览器窗口为参照物（浏览器左上角）进行定位。
position:absolute
- 需要配合方位属性实现移动。
- 默认相对于浏览器可视区域进行移动。
- 在页面中不占位置（已脱标）。
- 会改变标签显示特点，使其具备行内块元素特点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
position:relative;
width: 400px;
height: 400px;
background-color: pink;
}
.son{
position: relative;
width: 300px;
height: 300px;
background-color: skyblue;
}
.sun{
position:absolute;
right: 20px;
bottom: 50px;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun"></div>
</div>
</div>
</body>
</html>
两种居中定位的方式
法一
position: absolute;
/* 上下居中，外边距的属性值为盒子宽度的一半 */
top: 50%;
margin-top: -50px;
/* 左右居中，外边距的属性值为盒子高度的一半 */
left: 50%;
margin-left: -50px;
法二
position: absolute;
top: 50%;
left: 50%;
/* 位移：自己高度宽度的一半 */
transform: translate(-50%,-50%);
3.固定定位
相对于浏览器进行定位移动。
position:fixed;
- 相对于浏览器可视区进行移动。
- 在页面中不占位置（已脱标）。
- 具备行内块元素特征。
元素层级问题
- 不同布局方式元素的层级关系：标准流<浮动<定位
- 不同定位之间的层级关系：相对、绝对、固定定位默认相同层级，此时，HTML中写在下面的元素层级会更高，会覆盖上面的元素。
事实上，可以设置z-index属性来决定显示顺序，其取值为整数，取值越大，显示顺序越靠上，且，需要配合定位来使用。
②装饰
1.垂直对齐方式
基线（baseline）：浏览器中文字类型元素排版中存在用于对齐的直线。
属性名：vertical-align
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
注：
- 浏览器中的行内和行内块标签中的文字默认按基线对齐。
- 图片想要垂直居中只需要将父元素行高line-height设置与height一直，再对图片设置vertical-align:middle;即可。
2.光标类型
设置鼠标光标在元素上时显示样式。
属性名：cursor
| 属性名 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可点击 |
| text | 工字形，提示用户可选择文字 |
| move | 十字光标，提示用户可移动 |
1234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
