01:HTML基础
头部<head>
HTML文档的头部标记主要包含页面标题标记、元信息标记、样 式标记、脚本标记、链接标记等。头部标记所包含的信息一般不 会显示在网页上
HTML文档的头部标记主要包含页面标题标记、元信息标记、样 式标记、脚本标记、链接标记等。头部标记所包含的信息一般不 会显示在网页上。
2.2.1 页面标题<title></title>
- 基本语法标题信息显示在浏览器的标题栏上
- 语法说明 title标记是双标记，是开始标记，是结束标 记，两者之间的内容为显示在浏览器的标题栏上的信息。
2.2.2 元信息<meta>
- meta标记用来描述一个HTML网页文档的属性，也称为元信息（ meta-information），这些信息并不会显示在浏览器的页面中。 例如作者、日期和时间、网页描述、关键词、页面刷新等。该标记 位于文档的头部(其属性形式是“名称/值”对)。
1.<meta>标记
基本语法：<meta name=" " content=" ">
<meta http-equiv=" " content=" ">
属性说明 meta属性主要分为两组。
name属性与content属性
name属性用于描述网页，它是以“名称/值”形式中的名称， name属性的值所描述的内容通过content属性表示，便于搜索引 擎机器人查找、分类。
http-equiv属性与content属性
http-equiv属性用于提供HTTP协议的响应头报文，它是以“ 名称/值”形式的名称，http-equiv属性的值所描述的内容通过 content属性表示，通常为网页加载前提供给浏览器等设备使用。
HTML颜色设置方法
- 使用RGB（R，G，B），其中R、G、B为是0～255的整数；
- 使用RGB（R%，G%，B%），其中R、G、B为0～100的整数；
- 使用3位或6位十六进制数#RGB或#RRGGBB，R、G、B为十六 进制数，取值范围：0～9、A～F，每一种颜色用2位十六进制数 表示，RR：红色部分，GG：绿色部分，BB：蓝色部分。红色为 #FF0000； #RGB可以转换为#RRGGBB 。例如红色 分别 表示为 #F00、#FF0000。
- 使用颜色英文名称，如red表示红色，green表示绿色，blue表 示蓝色等。
属性语法
基本语法 ：
- <标记名称 属性1=“属性值1”属性2=“属性值2... 属4n=”属性值n">
- 属性应在开始标记（首标记）内定义，并且和标记名之间有 一个空格分隔。例如，上例中hr标记中，align为属性，center为 属性值，属性值可以直接书写，也可以使用双引号“”括起来。
添加空格与特殊符号
在HTML文件中，添加空格的方式与其他文档添加空格 的方式不同，网页中通过代码控制来添加空格，而在其他编 辑器中通过键盘空格键来输入空格。
基本语法： <body> &It;®×</body>
注：在body标记内通过键盘无论输入多少空格、回车符，页面 在显示时都会忽略。
标签语法
HTML 超文本标记语言——HyperText Markup Language。
-
超文本：链接
-
标记：标签，带尖括号的文本
标签结构
-
标签要成对出现，中间包裹内容
-
<>里面放英文字母（标签名）
-
结束标签比开始标签多 /
-
标签分类：双标签和单标签
HTML骨架
-
html：整个网页
-
head：网页头部，用来存放给浏览器看的信息，例如 CSS
title：网页标题 -
body：网页主体，用来存放给用户看的信息，例如图片、文字
提示
VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键
标签的关系
作用：明确标签的书写位置，让代码格式更整齐
-
父子关系（嵌套关系）：子级标签换行且缩进（Tab键）
<html>
<head></head>
</html>-
兄弟关系（并列关系）：兄弟标签换行要对齐
<head></head>
<body></body>
注释
概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。
注释不会再浏览器中显示。
在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /,html文件中注释为<!-- -->。
标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>显示特点：
-
文字加粗
-
字号逐渐减小
-
独占一行（换行）
经验
h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
h2 ~ h6 没有使用次数的限制
段落标签
一般用在新闻段落、文章段落、产品描述信息等等
<p>段落</p>显示特点：
-
独占一行
-
段落之间存在间隙
换行和水平线
-
换行：br
-
水平线：hr
<br>
<hr>文本格式化标签
文本修饰标记各类浏览器均支持，各类网页开发工具中仍然有 这类标记。
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
提示：strong、em、ins、del 标签自带强调含义（语义）。
字体font标记
- font标记用来改变默认的字体、颜色、大小等属性，这些 更改分别通过不同的属性定义完成
- 基本语法：
<font face=" " size=" " color=" "></font>
属性说明：
拼音/音标注释ruby 标记和rt/rp 标记
基本语法：
<ruby>
中<rp>(</rp><rt>zhong</rt><rp>)</rp>
国<rp>(</rp><rt>guo</rt><rp>)</rp>
</ruby>
- ruby标记定义中文注音或字符，与rt/rp标记一同使用。
- ruby标记由一个或多个字符（需要解释或发音的字符）和 一个提供该信息的rt 标记组成，还包括可选的rp标记，rp标 记定义当浏览器不支持ruby标记时显示的内容。
- 注意有些浏览器当定义rp标记后，将不起效果。
段落缩进标记<blockquote>
段落缩进blockquote标记是块级标记，常称为块引用标 记，浏览器在 blockquote标记前后添加了换行，并增加了 外边距。
- 一对blockquote标记能够向右缩进5个西文字符的位置。
- 基本语法
<body>
<blockquote>需要缩进的内容</blockquote>
</body>
预格式化标记<pre>
-
<pre></pre>标记对网页中的文字段落进行预格式化，浏览器 会完整保留设计者在源文件中所定义的格式，包括各种空格、缩 进以及其他特殊格式。
- 基本语法
<pre>预格式化文本</pre >
<pre>
春 晓
孟浩然春眠不觉晓，
处处闻啼鸟
夜来风雨声，
花落知多少
</pre>
图像标签
网页上插入图像的方法就是使用标记。它的众多 属性可以控制图像的路径、尺寸和替换文字等各种功能。
基本语法： <img src="url" width="" height="" hspace="" vspace="" align="" border="" alt="">
属性说明：
- src(source):图像的 URL路径。alt ：添加图片的替代文字。
- width/height：设置图片的宽度和高度(px,%)。
- border：设置图片边框 (px);
- align:设置图片对齐方式（水平/垂直两个方向）;
- hspase/vspase: 图片的间距设置(单位不加px)
设置图像对齐方式及间距
设置图像热区链接
基本语法：
<img src="图片地址" usemap="#映射图片名称">
<map name="映射图片名称”>
<area shape="热区形状1" coords="热区坐标1" href="URL1">
<area shape="热区形状2"coords="热区坐标2" href="URL2">
</map>
作用：在网页中插入图片
<img src="图片的 URL">src用于指定图像的位置和名称，是 <img> 的必须属性。
图像属性
属性语法
-
属性名="属性值"
-
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
路径
概念：路径指的是查找文件时，从起点到终点经历的路线。
路径分类：
-
相对路径：从当前文件位置出发查找目标文件
-
绝对路径：从盘符出发查找目标文件
-
Windows 电脑从盘符出发
-
Mac 电脑从根目录出发
-
相对路径
查找方式：从当前文件位置出发查找目标文件
特殊符号：
-
/ 表示进入某个文件夹里面 → 文件夹名/
-
. 表示当前文件所在文件夹 → ./
-
.. 表示当前文件的上一级文件夹 → ../
绝对路径
查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发
<img src="C:\images\mao.jpg">
提示
Windows 默认是 \ ，其他系统是 /，建议统一写为 /
特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接
超链接标签
超链接是指从一个网页指向一个目标的连接关系。
这个目标可以是：一个网页、图片、一个电子邮件地址 、一个文件或是一个应用程序。
作用：点击跳转到其他页面。
<a href="https://www.baidu.com">跳转到百度</a>href 属性值是跳转地址，是超链接的必须属性。
超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。
拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。
<a href="https://www.baidu.com/">跳转到百度</a>
<!-- 跳转到本地文件：相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>
<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>超链接语法、路径及分类
超链接a (Anchor 锚)标记语法
基本语法：<a href="url" name=" " title=" " target=" ">超链接标题</a>
语法说明:
超链接由目的地址、链接标题、打开方式等三部分组成。
- 1.href （href-Hypertext reference）：链接指向的目标文件。
- 2.title：指向链接的提示信息。
- 3.target：指定链接页面打开的窗口，有5 种取值：_parent –父框架中 打开；_blank-新窗口；_self – 当前窗口，默认值；_top -在顶级窗 口或标签页中打开，忽略所有框架；framename-框架或浮动框架名
超链接路径
超链接路径：绝对路径、相对路径、根路径。
绝对路径指文件的完整路径，包括盘符或文件传输的协议http、 ftp等，一般用于网站的外部链接。 绝对路径有2种。（1）从盘符开始定义的文件路径，如 D:\web\index.html;（2）从协议开始定义的URL网址，例如中国 教育与科研计算机网的网址http://www.edu.cn。
- 相对路径是指相对于当前文件的路径，从当前文件所在位置指向 目的文件的路径。例如 web/index.html。
- 根路径是指从网站的最底层开始起，一般网站的根目录就是域名 下对应的文件夹。以一个斜杠“/”开头，代表根目录，然后书写文 件夹名，最后书写文件名。例如/download/index.html。
超链接分类
超链接可以分为内部链接和外部链接两种。内部链接是指网 站内部文件之间的链接，而外部链接是指网站内的文件链接 到站点内容外的文件。
超链接的应用
创建文件下载超链接
网站提供软件、文件等资料下载，下载文件的链接指向文件 所在的相对路径或绝对路径，文件类型： *.doc/*.pdf/*.exe/*.rar等。
基本语法：<a href="url">链接内容</a>
5.3.2 创建FTP站点访问超链接
FTP服务器链接和网页链接区别在于所用协议不同，浏览网页 采用http协议，而FTP服务器采用FTP协议连接。
基本语法 :<a href="ftp:服务器IP地址或域名">链接的文字</a>
创建图像链接
链接标题是一个图像，浏览时单击链接图像时，可以打开 超接href所设置的URL。
基本语法：<a href="#"><img src="url" width="" height="" align="" border="" alt=""></a>
创建电子邮件超链接
一般网站上都会设置“联系我们”这样的栏目或超链接，目的是方便用户及 时与网站管理员进行沟通与联系--电子邮件超链接。
基本语法：<a href="mailto:E-mail地址[?subject=邮件主题[&参数=参数值]]">链接内容</a>
创建页面书签链接
书签是指到文章内部的链接，可是实现段落间的任意跳转 。实现这样的链接要先定义一个书签作为目标端点，再定义到 书签的链接。
书签定义步骤：
1.定义书签名：<a name="书签名称">书签标题</a>
2.定义书签链接：
<a href="#书签名称">书签标题</a><!--同一页面-->
<a href="URL#书签名称">书签标题 </a><!--不同页面间-->
注意：URL：是放置标记的HTML文件的URL
滚动文字
要设计一个更加生动的网站还需要在网页中添加多媒体 元素。多媒体元素还可以更好地体现设计者的个性，通常滚动 文字可以增加文字的动态效果。
添加滚动文字
通过marquee标记可以添加滚动文字(内容)，增加动态 效果，丰富网页的内容。
基本语法：
<marquee width="" height="" bgcolor="" direction="upldown/left/right" behavior="scroll/slide/alternate" hspace="" vspace="" scrollamount="" scrolldelay="" loop="" οnmοuseοver="this.stop()" onMouseOut="this.start()">滚动内容
</marquee>
语法说明 :
- marquee标记是双(成对)标记，以开始，以结 束，将需要滚动的内容放到marquee标记之间，同时也可以设置滚动内 容的样式。
- marquee标记中设置onMouseOver= “this.stop()”属性值对的作用是 当光标移动到滚动文字区域时，滚动内容将暂停滚动；设置 onMouseOut= "this.start()"属性值对的作用是当鼠标移出滚动文字区域 时，滚动内容将继续滚动。
设置滚动文字其它属性
embed标记
<embed>标记定义了一个容器，用来嵌入外部应用或者互 动程序（插件）。可以嵌入图像、音频、视频文件以及 HTML文件，为网页增加更多的炫丽的效果。
注意：现在已经不建议使用<embed>标记了，可以使用 <img>,<iframe>,<video>,<audio>等标记代替。
基本语法:<embed src="ur!" width="" height=""type="">
语法说明:width、height:整型值，单位为像素。设置宽度和高度会出现播放界面，否则不显示播放界面。一些高版本浏览器不设置宽度和高度也可以出现播放界面。如果播放声音、音乐文件作为背景音乐时，必须同时将宽度和高度属性的值设置为0。
src:设置媒体文件的路径。
浮动框架
浏览器窗口含有孤立的子窗口称为浮动框架。在浏览器 窗口中使用标记可以嵌入浮动框架。
音频
<audio src="音频的 URL"></audio> 常用属性
拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词
<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>
视频
<video src="视频的 URL"></video>常用属性
<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>
02：列表、表格、表单
HTML中列表一共有5种，分别是无序列表、有序列表、定义 列表、菜单列表和目录列表。常用的列表有无序列表、有序列表、 定义列表等3种。
列表
作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。
无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>
注意事项：
-
ul 标签里面只能包裹 li 标签
-
li 标签里面可以包裹任何内容
有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>
注意事项：
-
ol 标签里面只能包裹 li 标签
-
li 标签里面可以包裹任何内容
定义列表
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>
- dt标记的由来:definition term
- dd标记的由来: definition description
注意事项：
-
dl 里面只能包含dt 和 dd
-
dt 和 dd 里面可以包含任何内容
列表嵌套
在HTML文件中，列表嵌套使用不仅使网页的内容布局更加美 观，而且使显示的内容更加清晰、明白。
基本语法：
<ul>
<Ii >项目名称
<o1>
<li >项目名称 </li>
</o1>
</li>
</ul>
表格
网页中的表格与 Excel 表格类似，用来展示数据。
表格是网页设计制作不可缺少的元素，它以简洁明了和高 效快捷的方式将图片、文本、数据和表单的元素有序的显示在 页面上，让我们可以设计出漂亮的页面。
基本使用
标签：table 嵌套 tr，tr 嵌套 td / th。
注意:<table>、<tr>和<td>是创建表格的基本标签，缺一不可。<table>用于定义一个表格<tr>用于定义表格中的行，必须嵌套在<table>标签中，<td>用于定义表格中的单元格，也可称为表格中的列，必须嵌套在<tr>标签中。
提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
提示：表格结构标签可以省略。
表格属性设置
表格是网页文件中布局的重要元素，制作网页的过程中常常需 要对网页中的表格做一些设置，对表格的设置实质是对表格table标 记属性的一些设置。
1.表格的边框属性--border
2.边框的颜色--bordercolor
3.背景颜色—bgcolor
4.背景图像—background
5.表格宽度与高度—width/height
6.表格对齐属性-align
表格单元格间距、单元格边距属性
设置表格行的属性
表格行tr标记的属性用于设置表格某一行的样式，其属 性设置如下表所示。
11.4.1 表格行内容水平对齐的属性
<tr align="left | center |right"> </tr>
11.4.2 表格行内容垂直对齐的属性
<tr valign="top | middle | bottom"></tr>
设置单元格的属性
表格列标记td的属性可以设置表格单元格的显示风格。常用的 属性如下表所示。单元格的颜色、边框和对齐属性与行tr标记一样。
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息
合并单元格的步骤：
-
明确合并的目标
-
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
-
跨行合并，保留最上单元格，添加属性 rowspan
-
跨列合并，保留最左单元格，添加属性 colspan
-
-
删除其他单元格
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。
表 格 嵌 套 - 语 法
表单
表单是较为复杂的HTML元素，经常与脚本、动态网页、后台 数据处理等结合在一起使用，是设计动态网页的必备元素。
利用表单可以在HTML页面中插入一些表单控件(元素)，如文 本框、提交按钮、重置按钮、单选按钮、复选框、下拉列表框等， 完成各类信息的采集。
作用：收集用户信息。
基本语法:
<form method="post" action="">
<input type="text" name="">
<textarea name="" rows="" cols=""></textarea>
<select name="">
<option value=""selected> </option >
</select>
</form>
使用场景：
-
登录页面
-
注册页面
-
搜索区域
表单form标记属性
name:给定表单名称，表单命名之后就可以用脚本语言(如VBScript或JavaScript)对它进行控制。action:设置表单处理程序的网络路径和程序名，当用户提交表单时，服务器将执行action属性所设置的程序。
method:用于指定表单处理表单数据方法，有get和post两个值(默认get)
- GET 为默认值这种方式提交的数据将以"?key=value&key=value”显示在浏览器的地址栏中，保密性差且有数据量限制;
- post方法，使用HTTP实体头域发送数据到Web服务器，没有数量限制，因此开发中通常使用POST方式提交表单。
enctype: 规定表单数据在发送到服务器之前如何编码。有三种 取值，分别如下 ：
- application/x-www-form-urlencoded (默认值，在发送前编码所 有字符，空格被编码为’+’ ，特殊字符被编码为ASCII十六进制字符, 少量文本数据)
- multipart/form-data (指定传输数据编码方式为二进制，比如图片、 mp3、文件，主要用于文件上传功能，并且不对字符编码 )
- text/plain (纯文本的传输，空格转换为 “+” 加号，但不对特殊字符 编码，上传大量文本数据)
表单信息的输入
表单的主要功能是为用户提供输入信息的接口，将输入信息发送请求 到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输 入一行信息。
一般形式：输入类型标记 <input type="控件类型 ” name="” value=" ...>
< input >标记属性
◼ type属性，给出输入控件的类型，常用的控件类型有：text，textarea，radio， checkbox，button，image，hidden，password，file，submit/reset
◼ name属性，设置输入控件的名字，程序需要通过控件名称处理用户输入数据，同 时，设置控件名称可以增加HTML代码的可读性。
◼ value属性，保存用户的输入和选择，服务器通过调用输入区域的value属性值来 获得输入控件的数据。另外，用户可以通过value属性来指定输入区域的缺省
input 标签
input 标签 type 属性值不同，则功能不同。
去掉边框线
outline：1px solid green
<input type="..." > 
单行文本输入框
<input name="" type="text" maxlength="" size="" value="" readonly>
语法说明：
- maxlength：设置单行输入框输入的最大字符数；
- size：设置单行输入框可显示的最大字符数；
- value：文本框的值，指定输入框中初始值；
- readonly: 只读,文本框不可编辑。
input 标签占位文本
占位文本：提示信息，文本框和密码框都可以使用。
<input type="..." placeholder="提示信息">单选框
常用属性
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
提示：name 属性值自定义。
上传文件
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。
<input type="file" multiple>
多选框
多选框也叫复选框，默认选中：checked。
常用属性
◼name属性，name为复选框的名称，便于程序获取用户输入
◼value属性，每一个checkbox 必须有一个value，当复选框选中时，value值 便会传到表单form的action属性指定的程序中。
◼checked属性，用来设置该复选框缺省时是否被选中。
每一个复选框name、value属性都是不同的
<input type="checkbox" checked> 敲前端代码
其它表达方式
<textarea rows=""cols=""wrap="soft|hard" readonly required disabled maxlength></textarea>
注：rows:指定输入的行数；cols:指定输入的列数；wrap:指定文本自动换行，值 分别为：soft|hard，HTML5中soft-提交时不换行，hard-提交时换行。
- readonly：指示用户无法修改文本区内的内容
- required：定义为了提交该表单，该 textarea 的值是否是必需的
- disabled：规定禁用文本区域
- maxlength：在文本区域中允许的最大字符数
下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
默认显示第一项，selected 属性实现默认选中功能。
文本域及隐藏框
文件上传标记 <input name="" type="file” size="" accept="">
语法说明：
- 选择文件后并不能真正打开，只是将文件名回填到文件输入框内。
- size属性显示文本框长度。
- accept属性设置上载文件过滤，即点击“浏览”按钮时，只显示指定文件 类型的文件列表。
作用：多行输入文本的表单控件。
<textarea>默认提示文字</textarea>
注意点：
-
实际开发中，使用 CSS 设置 文本域的尺寸
-
实际开发中，一般禁用右下角的拖拽功能
隐藏输入域<input name=”" type="hidden" value="">
语法说明：
- 在一个表单中，可以定义隐藏表单元素，它在网页上并不显示，不需要 用户输入。
- 主要目的是随表单一起传给表单处理程序一个特定的值，用于为网页处 理程序传送数据。
label 标签
作用：网页中，某个标签的说明文本。
经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
-
写法一
-
label 标签只包裹内容，不包裹表单控件
-
设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
-
<input type="radio" id="man"> <label for="man">男</label>
写法二：使用 label 标签包裹文字和表单控件，不需要属性
<label><input type="radio"> 女</label>
提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮
<button type="">按钮</button>
表单提交
- 表单填写完毕后，单机submit按钮，结束表单输入，将表单数据传送到服务器端 ，由表单<form>标记中的action属性指定的服务器上的程序处理用户输入数据。
表单重置
- 表单清除就是要将表单中已做的输入和选择全部清除，重新填写。
value: 指定显示在按钮上的文字，默认值分别为“提交” 、 “重置 ” 、 “确定”等。需要给value赋个初值。
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<!-- 如果省略 type 属性，功能是 提交 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>提示：按钮需配合 form 标签（表单区域）才能实现对应的功能
提交按钮、重置按钮和普通按钮
普通按钮 <input name="" type="button" value="" oncick="">
- name: name为按钮名称，便于程序对按钮的操作
- value: 指定显示在按钮上的文字
- 单击普通按钮时，如果定义onclick属性，才能调用相应的事件 处理函数
图像按钮
设置input标记的type属性值为image, 可以实现向表单中插入一个图像按钮 ，用户可利用图像按钮在网页中插入一张图像，通过src属性加载图像。
定义域和域标题
利用域标记可将表单内的相关元素进 行分组。当一组表单元素放到fieldset标记内时，浏览器会以特殊方 式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个 子表单来处理这些元素。 标记定义域标题。
基本语法：
语义化
无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
-
div：独占一行
-
span：不换行
<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>
有语义的布局标签
字符实体
03：CSS基础
CSS属性值中的单位
绝对单位
绝对单位在网页中很少使用，一般多用在传统平面印刷 中，但在特殊场合使用绝对单位是很必要时的。
绝对单位包括：英寸、厘米、毫米、磅和pica（皮卡），其对 应的英文单位分别是in（1in=2.54cm）、cm、mm、 pt（ 1pt=1/72in）、pc（1pc=12pt）。
相对单位
相对单位与绝对单位相比显示大小不是固定的，它所设置的对 象受屏幕分辨率、或视觉区域、浏览器设置以及相关元素的大小等 因素影响。
注意：经常使用的相对单位包括：em、ex、px、%。
- em：em参照的对象是其父元素的font-size，1em等于其父元素 的font-size一倍。如果设置当前元素的font-size为0.75em，而其 父元素的font-size是16px时，则当前元素的font-size是0.75 * 16px = 12px;
- ex：以所使用的字体中小写字母x的高度作为参考，在实际使用中 ，浏览器将通过em的值除以2得到ex的值
- px：像素是CSS中使用频率最高的单位，是相对于屏幕显示器分 辨率而言的。
- %：参考父元素中相同属性的值。例：父元素宽度为200px, 子元 素宽度为50%，则子元素实际宽度为100px
CSS初体验
CSS（Cascading Style Sheet）层叠样式表，也称为级 联样式表，用来设计网页风格。
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
<title>CSS 初体验</title>
<style>
/* 选择器 { } */
p {
/* CSS 属性 */
color: red;
}
</style><p>体验 CSS</p>
提示：属性名和属性值成对出现 → 键值对。
CSS的特点
CSS 通过定义标记或标记属性的外在表现，对页面结构 风格进行控制，分离文档的内容和表现，克服了传统HTML 的缺点。将CSS 嵌入在页面中，通过浏览器解释执行，而且 CSS 文件是文本文件，只要理解了HTML 就可以掌握它。
CSS的优势：
1.表现和内容相分离 CSS通过定义HTML标记的样式，使得页面内容和显示 相分离，简化了网页格式设计，也使得对网页格式的修改更 方便。
2.加强了网页的表现力 CSS样式属性提供了比HTML更多的格式设计功能。例如，去掉网页 超级链接的下划线、给文字添加阴影等。
3.增强了网站风格的一致性 CSS样式定义到样式表文件中，在多个网页中同时应用样式表文件 中的样式，就确保了多个网页具有一致的格式。可以随时更新样式表文件 ，改变网站风格。大大降低了网站的开发与维护工作。
CSS编辑方法
1.写在HTML文件里；
2.写在独立的*.CSS文件里。
CSS基本语法：
CSS引入方式
◼内联样式表(行内样式)（Inline Style Sheet）
◼内部样式表（Internal Style Sheet）
◼链接外部样式表（Link External Style Sheet）
◼导入外部样式表（Import External Style Sheet）
-
内部样式表：学习使用
-
CSS 代码写在 style 标签里面
-
-
-
外部样式表：开发使用
-
CSS 代码写在单独的 CSS 文件中（.css）
-
在 HTML 使用 link 标签引入
-
-
<link rel="stylesheet" href="./my.css">
行内样式（内联样式） ：配合 JavaScript 使用
-
CSS 写在标签的 style 属性值里
-
<div style="color: red; font-size:20px;">这是 div 标签</div>
导入外部样式表
选择器
作用：查找标签，设置样式。
标签选择器
标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如：p, h1, div, a, img......
<style>
p {
color: red;
}
</style>
注意：标签选择器无法差异化同名标签的显示效果
类选择器
作用：查找标签，差异化设置标签的显示效果。
步骤：
-
定义类选择器 → .类名
-
使用类选择器 → 标签添加 class="类名"
<style>
/* 定义类选择器 */
.red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>注意：
类名自定义，不要用纯数字或中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开
开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。
id选择器
作用：查找标签，差异化设置标签的显示效果。
场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式
步骤：
-
定义 id 选择器 → #id名
-
使用 id 选择器 → 标签添加 id= "id名"
<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>规则：同一个 id 选择器在一个页面只能使用一次。
CSS 属性选择器
定义属性选择器时，方括号“[]”将属性包围住，如下所示： [属性名]{属性:属性值;属性:属性值;...;} [title]{color:red;} /*带有title属性的所有元素设置样式*/
通配符选择器
作用：查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
* {
color: red;
}
经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。
盒子尺寸和背景色
CSS列表样式
1. list-style-type: disc|circle|square|decimal|lowerroman|upper-roman|lower-alpha|upper-alpha|none
2. list-style-image : url(*.gif)|none
3. list-style-position : inside | outside
CSS文本样式
1. 字符间距 letter-spacing：normal | 长度单位
2. 行距 line-height：normal | 比例 | 长度单位 | 百分比
3. 首行缩进 text-indent：长度单位 | 百分比单位
4. 字符装饰 text-decoration:none | underline | overline | linethrough
5. 英文大小写转换 text-transform：uppercase | lowercase | capitalize[首字母大写]| none
6. 水平对齐 text-align：left | right | center | justify
7. 垂直对齐 vertical-align: top | middle | bottom | text-top | text-bottom
6、7只对inline元素、inline-block元素和普通的文本起作用
文字控制属性
字体大小
-
属性名：font-size
-
属性值：文字尺寸，PC 端网页最常用的单位 px
经验：谷歌浏览器默认字号是16px。
字体样式（是否倾斜）
作用：清除文字默认的倾斜效果
属性名：font-style
属性值
-
正常（不倾斜）：normal
-
倾斜：italic
行高
作用：设置多行文本的间距
属性名：line-height
属性值
-
数字 + px
-
数字（当前标签font-size属性值的倍数）
line-height: 30px;
/* 当前标签字体大小为16px */
line-height: 2;
行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。
单行文字垂直居中
垂直居中技巧：行高属性值等于盒子高度属性值
注意：该技巧适用于单行文字垂直居中效果
div {
height: 100px;
background-color: skyblue;
/* 注意：只能是单行文字垂直居中 */
line-height: 100px;
}字体族
属性名：font-family
属性值：字体名
拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
-
font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;font复合属性
使用场景：设置网页文字公共样式
- font-size设置字号
- font-family设置字体
在CSS中使用font属性可以设置丰富的字体，美化页面的外观。 其中font-family专门用于设置字体名称系列。
1.基本语法: font-family:字体1,字体2,…,字体n
2.语法说明 属性值为多个字体名称时，可以使用逗号（,）分隔。浏览器依 次查找字体，只要存在就使用该字体，不存在将会继续找下去，以 此类推，直到最后一种字体，仍不存在则使用默认字体（宋体）。 如果字体名称中出现空格，必须使用双引号将字体括起来，比如 Times New Roman。
- font-style设置字体样式
在HTML中，使用、标记可将文字设置 成为斜体。在CSS中可以使用font-style属性设置字体的风格，例如 显示斜体字样。
1.基本语法
font-style: normal | italic | oblique
2.语法说明
font-style : normal （不使用斜体，默认） italic (斜体显示) oblique(倾斜字体显示)
- font-weight设置字体粗细
在HTML中使用或标记 来设置字体加粗。在CSS中可以使用font-weight属性用于设 置文本字体的粗细。
1.基本语法
font-weight: normal | bold | bolder | lighter |100|200|…|900
2.语法说明
100-900(9个层次,数字越小字体越细、数字越大字体越粗)
- font-variant设置字体变体
font-variant属性用于设置字体变体，主要用于设置英文 字体，实际上是设置文本字体是否为小型的大写字母。
1.基本语法
font-variant: normal | small-caps
2.语法说明
font-variant: normal (默认正常)| small-caps (小型的大写字 母字体)
- font设置综合字体属性
font属性是复合属性，包括字体粗细、风格、字体变体、 大小/行高及字体名称等多个属性的设置。
1.基本语法 font: font-style font-weight font-variant font-size/line-height font-family
2.语法说明
- 利用font属性一次完成多个字体属性的设置，属性值与属性值之间必须使 用空格隔开。前三个属性值可以不分先后顺序，默认为normal。
- 大小和字体名称系列必须显式指定，先设置大小，再设置字体系列。行高 、字体大小中间用“/”分隔，行高为可选的属性。font属性可以继承。
CSS属性命名规范：CSS样式属性由多个单词构成时，单词之间使用“-” 连字符连接。
复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
div {
font: italic 700 30px/2 楷体;
}
注意：字号和字体值必须书写，否则 font 属性不生效 。
文本缩进
属性名：text-indent
属性值：
-
数字 + px
-
数字 + em（推荐：1em = 当前标签的字号大小）
p {
text-indent: 2em;
}
文本对齐方式
作用：控制内容水平对齐方式
属性名：text-align
text-align本质是控制内容的对齐方式，属性要设置给内容的父级。
<style>
div {
text-align: center;
}
</style>
<div>
<img src="./images/1.jpg" alt="">
</div>文本修饰线
属性名： text-decoration
color 文字颜色
提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。
调试工具
作用：检查、调试代码；帮助程序员发现代码问题、解决问题
-
打开调试工具
-
浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
-
F12
-
使用调试工具
04-1-CSS进阶
复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）。
后代选择器
后代选择器：选中某元素的后代元素。
选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。
<!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 {
color: red;
} */
/* .red {
color: red;
} */
/* 后代选择器 中间用空格隔开 */
/* ul li {
color: red;
} */
/* 只让第一组ul 里面的li变色 */
.first li {
color: red;
}
</style>
</head>
<body>
<ul class="first">
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
<ol>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
</body>
</html>小技巧： 后代选择器执行代码的时候，先执行孩子，后执行父亲。 先找li 后找ul
子代选择器
子代选择器：选中某元素的子代元素（最近的子级）。
选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。
<style>
div > span {
color: red;
}
</style><div>
<span>这是 div 里面的 span</span>
<p>
<span>这是 div 里面的 p 里面的 span</span>
</p>
</div>
并集选择器
并集选择器：选中多组标签设置相同的样式。
选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。
<style>
div,
p,
span {
color: red;
}
</style><div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>
交集选择器
交集选择器：选中同时满足多个条件的元素。
选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。
<style>
p.box {
color: red;
}
</style><p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>
注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
伪类选择器
伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。
鼠标悬停状态：选择器:hover { CSS 属性 }
<style>
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style><a href="#">a 标签</a>
<div class="box">div 标签</div>
超链接伪类
选择器：：marker{
color:red;
}
可以改变li标签小圆点颜色。
提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。
经验：工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置
表单获得焦点选择器 focus
/* 当表单得到光标的时候 */
input:focus {
width: 300px;
background-color: pink;
}
基本选择器
| 基本选择器 | 说明 | 举例 |
|---|---|---|
| 标签选择器 | 选择页面中同名标签 | div {color: red;} |
| 类选择器 | 选择1个或者多个 | .red {color: red;} <div class="red"></div> |
| id选择器 | 唯一的，只能使用一次 | #red {color: red;} <div id="red"></div> |
| 通配符选择器 | 选择所有的标签 | * {color: red;} |
复合选择器
| 复合选择器 | 说明 | 举例 |
|---|---|---|
| 后代选择器 | 选择子孙后代 用 空格 隔开 | div span {color: red;} |
| 子代选择器 | 只选最近一级孩子（亲儿子选择器） 用 > 隔开 | div>span{color: red;} |
| 并集选择器 | 选择多个标签， 用 逗号 隔开 理解为 和 | div, span, p {color: red;} |
| 交集选择器 | 既又的关系，既是某标签，又是某类名 | p.one {color: red;} |
| 伪类选择器 | 状态关系， :hover 鼠标经过 | div:hover {color: red;} |
CSS特性
CSS特性：化简代码 / 定位问题，并解决问题
-
继承性
-
层叠性
-
优先级
继承性
继承性：子级默认继承父级的文字控制属性。
注意：如果标签有默认文字样式会继承失败。 例如：a 标签的颜色、标题的字体大小。
层叠性
特点：
-
相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
-
不同的属性会叠加：不同的 CSS 属性都生效
<style>
div {
color: red;
font-weight: 700;
}
div {
color: green;
font-size: 30px;
}
</style>
<div>div 标签</div>注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断
优先级
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
<style>
div {
color: red;
}
.box {
color: green;
}
</style>
<div class="box">div 标签</div>基础选择器
规则：选择器优先级高的样式生效。
公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
（选中标签的范围越大，优先级越低）
复合选择器-叠加
叠加计算：如果是复合选择器，则需要权重叠加计算。
公式：（每一级之间不存在进位）
规则：
-
从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
-
!important 权重最高
-
继承权重最低
| 选择器 | 权重 | 说明 |
|---|---|---|
| 继承/ *通配符 | 0 | 没有权重 |
| 标签选择器 | 1 | 累加 |
| 类选择器/伪类选择器 | 10 | 累加 |
| id选择器 | 100 | 累加 |
| 行内 | 1000 | |
| !important | ∞ | |
继承的权重是0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* li的权重是1 ，比 0 高 */
li {
color: red;
}
/* 继承的权重是 0, 所以无法直接修改 li的样式 */
.box {
color: green !important;
}
/* 结论： 想要修改谁的样式，就要选择谁 */
</style>
</head>
<body>
<ul class="box">
<li>我是文字</li>
</ul>
</body>
</html>z-index:设置图层层叠的上下层关系，实现多个图层层叠的效果，子层 永远在父层之上，值越大越在上层，前提条件是position属性值为 “absolute” 。
Emmet 写法
Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。
-
HTML标签
-
CSS：大多数简写方式为属性单词的首字母
04-背景属性
背景图
网页中，使用背景图实现装饰性的图片效果。
-
属性名：background-image（bgi）
-
属性值：url(背景图 URL)
div {
width: 400px;
height: 400px;
background-image: url(./images/1.png);
}提示：背景图默认有平铺（复制）效果。
平铺方式
属性名：background-repeat（bgr）
背景图位置
属性名：background-position（bgp）
属性值：水平方向位置 垂直方向位置
-
关键字
坐标
-
水平：正数向右；负数向左
-
垂直：正数向下；负数向上
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: center bottom;
background-position: 50px -100px;
background-position: 50px center;
}提示：
关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
背景图缩放
作用：设置背景图大小
属性名：background-size（bgz）
常用属性值：
-
关键字
-
cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
-
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
-
-
百分比：根据盒子尺寸计算图片大小
-
数字 + 单位（例如：px）
div {
width: 500px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-size: cover;
background-size: contain;
}提示：工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同
背景图固定
作用：背景不会随着元素的内容滚动。
属性名：background-attachment（bga）
属性值：fixed
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}显示模式
显示模式：标签（元素）的显示方式。
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。
块级元素
特点：
-
独占一行
-
宽度默认是父级的100%
-
添加宽高属性生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块元素</title>
<style>
/* 块级元素 */
/* 1. 独占一行 */
/* 2. 可以设置宽度和高度 */
/* 3. 宽度默认和父亲一样宽，如果么有父亲，则和浏览器一样宽 */
.box1,
.box2 {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<p>abc</p>
<div class="box1">div1</div>
<div class="box2">
<p>123</p>
<p>123</p>
</div>
</body>
</html>行内元素
特点：
-
一行可以显示多个
-
设置宽高属性不生效
-
宽高尺寸由内容撑开
行内块元素
特点：
-
一行可以显示多个
-
设置宽高属性生效
-
宽高尺寸也可以由内容撑开
转换显示模式
属性：display
经验：
我们重点记住把行内元素比如链接转换为 块级或者行内块即可
display: block 尽量写到样式的第一行
块级元素可以控制里面的行内元素或者行内块元素 左中右对齐 tac 控制
块级元素不能控制里面的块级元素对齐
04-2-CSS高级
01-定位（重点）
position:定位，static|absolute|relative|fixed
定位的盒子通过边偏移来移动位置。在CSS中，通过top、bottom、left和right属性定义元素的边偏移
作用：灵活的改变盒子在网页中的位置
实现：
1.定位模式：position
2.边偏移：设置盒子的位置
-
left
-
right
-
top
-
bottom
静态定位static
- 静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的 none，不要定位的时候用。
- 静态定位按照文档流特性摆放位置，它没有边偏移。
- 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列， 块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的 排在后面，每个盒子都占据自己的位置。
相对定位
position: relative
特点：
-
不脱标，占用自己原来位置
-
显示模式特点保持不变
-
设置边偏移则相对自己原来位置移动
绝对定位
position: absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：
-
脱标，不占位
-
显示模式具备行内块特点
-
设置边偏移则相对最近的已经定位的祖先元素改变位置
-
如果祖先元素都未定位，则相对浏览器可视区改变位置
.father {
position: relative;
}
.father span {
position: absolute;
top: 0;
right: 0;
}定位居中
实现步骤：
-
绝对定位
-
水平、垂直边偏移为 50%
-
子级向左、上移动自身尺寸的一半
-
左、上的外边距为 –尺寸的一半
-
transform: translate(-50%, -50%)
<!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: absolute;
/* 移动父亲的50% */
left: 50%;
/* 往左走自己宽度的一半 */
/* margin-left: -100px; */
top: 50%;
/* margin-top: -100px; */
/* 让子盒子走自己宽度和高度的一半 */
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: pink;
/* 绝对定位让margin 0 auto 失效 */
/* margin: 0 auto; */
}
img {
position: absolute;
top: 50%;
left: 50%;
/* 让子盒子走自己宽度和高度的一半 */
transform: translate(-50%, -50%);
/* 注意，translate 百分比相对于盒子自身的宽度和高度来说 */
}
</style>
</head>
<body>
<!-- <div class="box"></div> -->
<img src="./images/down-open.png" alt="">
</body>
</html>固定定位
position: fixed
场景：元素的位置在网页滚动时不会改变
特点：
-
脱标，不占位
-
显示模式具备行内块特点
-
设置边偏移相对浏览器窗口改变位置
堆叠层级z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
属性名：z-index
属性值：整数数字（默认值为auto，取值越大，层级越高）
02-高级技巧
CSS精灵
CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤：
-
创建盒子，盒子尺寸与小图尺寸相同
-
设置盒子背景图为精灵图
-
添加 background-position 属性，改变背景图位置
3.1 使用 PxCook 测量小图片左上角坐标
3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）
字体图标（重点）
字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的、颜色单一的小图标
优点
-
灵活性：灵活地修改样式，例如：尺寸、颜色等
-
轻量级：体积小、渲染快、降低服务器请求次数
-
兼容性：几乎兼容所有主流浏览器
-
使用方便：先下载再使用
下载字体
https://www.iconfont.cn/登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地
使用字体
-
引入字体样式表（iconfont.css）
-
标签使用字体图标类名
-
iconfont：字体图标基本样式（字体名，字体大小等等）
-
icon-xxx：图标对应的类名
-
<!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>
<link rel="stylesheet" href="./fonts/iconfont.css">
<style>
.iconfont {
font-size: 300px;
color: pink;
}
</style>
</head>
<body>
<!-- 必须2个类名，第一个类名iconfont -->
<i class="iconfont icon-shouji"></i>
<span class="iconfont icon-zhaoxiangji"></span>
</body>
</html>03-CSS修饰属性
垂直对齐方式
属性名：vertical-align
去除图片底部缝隙的两种方法：
-
给图片添加 display: block;
-
给图片添加 vertical-align: middle; 等，只要不是 baseline就行
<!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>
img {
/* 行内块元素 默认和文字的基线对齐*/
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
background-color: pink;
}
div {
/* width: 300px;
height: 300px; */
border: 2px solid red;
}
</style>
</head>
<body>
<img src="./images/computer.png" alt=""> my name is 刘德华
<span></span> my name is 刘德华
<hr>
<div>
<img src="./images/1.webp" alt="">
</div>
</body>
</html>过渡
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费时间 (s)
提示：
-
过渡的属性可以是具体的 CSS 属性
-
也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
-
transition 设置给元素本身
<!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 {
width: 200px;
height: 200px;
background-color: pink;
/* 谁做过渡给谁加 */
transition: all .3s;
}
.box:hover {
height: 300px;
width: 300px;
background-color: green;
}
input {
width: 200px;
height: 30px;
transition: all .3s;
}
/* 当表单得到光标的时候 */
input:focus {
width: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="text">
</body>
</html>透明度opacity
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0 – 1
-
0：完全透明（元素不可见）
-
1：不透明
-
0-1之间小数：半透明
光标类型cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
<!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:nth-child(1) {
cursor: default;
}
div:nth-child(2) {
/* 小手 */
cursor: pointer;
}
div:nth-child(3) {
/* 文本 */
cursor: text;
}
div:nth-child(4) {
/* 移动 */
cursor: move;
}
div:nth-child(5) {
/* 禁止 */
cursor: not-allowed;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<div>鼠标默认</div>
<div>鼠标小手</div>
<div>鼠标选择文本</div>
<div>鼠标移动</div>
<div>鼠标禁止</div>
<button>注册</button>
</body>
</html>禁用鼠标样式
div:nth-child(5) {
/* 禁止 */
cursor: not-allowed;
}
05-盒子模型
选择器
结构伪类选择器
基本使用
作用：根据元素的结构关系查找元素。
<!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>
/* 结构伪类选择器 */
/* 1.选择第一个li */
ul li:first-child {
color: pink;
}
/* 2. 最后一个小li */
ul li:last-child {
color: green;
}
/* 3. 选择其中任意一个 */
ul li:nth-child(6) {
color: red;
}
</style>
</head>
<body>
<!-- ul>li{第$个}*8 -->
<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>
:nth-child(公式)
提示：公式中的n取值从 0 开始。
伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。
div::before {
content: "before 伪元素";
}
div::after {
content: "after 伪元素";
}注意点：
必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相
PxCook
PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
-
开发面板（自动智能识别）
-
设计面板（手动测量尺寸和颜色）
使用方法：创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿
盒子模型
什么是CSS盒模型？
W3C组织建议把所有网页上的对象都放在一个盒(box) 中，设计师可以通过创建定义来控制这个盒的属性，这些对 象包括段落、列表、标题、图片以及层。
盒模型主要定义四个区域MBPC：边界(margin) 、边框 (border) 、填充(padding)和内容(content) 。
作用：布局网页，摆放盒子和内容。
盒子模型-组成
-
内容区域 – width & height
-
内边距 – padding（出现在内容与盒子边缘之间）
-
边框线 – border
-
外边距 – margin（出现在盒子外面）
外边距还可以通过单边属性进行设置，不会影响其他外边距，且这 些单边属性可以设置一个或多个，具有4个单边外边距属性：
• margin-top：20px;
• margin-right ：20px;
• margin-bottom ：20px;
• margin-left ：20px;
• margin:10px; /* 4个边均为10px */ • margin:10px 20px ; /* 上下|左右*/
• margin:10px 20px 30px; /* 上|左右|下*/
• margin:10px 20px 30px 40px; /* 上|右|下|左*/
div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
边框线-四个方向
属性名：border（bd）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
div {
border: 5px solid brown;
width: 200px;
height: 200px;
background-color: pink;
}
单方向边框线
属性名：border-方位名词（bd+方位名词首字母，例如，bdl）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}
边框属性设置
- 边框粗细 border-width: thin、medium、thick 、length ； 复合属性，分border-top-width、border-right-width、 border-bottom-width、border-left-width四个子属性。
- 边框样式 border-style :none|dotted|dashed| solid|double|groove[凹型线］|ridge ［凸型线］ |inset ［嵌入线］ |outset ［嵌出线］; --复合属性，分top、right、bottom、left四个子属性。
- 边框颜色 border-color: 颜色关键字 | RGB值 ;
- border:边框粗细 边框样式 边框颜色;
- border:2px solid #ff33ee;
内边距
作用：设置 内容 与 盒子边缘 之间的距离。
-
属性名：padding / padding-方位名词
div {
/* 四个方向 内边距相同 */
padding: 30px;
/* 单独设置一个方向内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
提示：添加 padding 会撑大盒子。
填充属性设置
- 元素内边界主要是指边框和内部元素之间的空白距离，利用 padding属性设置元素内的边界时，也包括5个属性，同样也 有四种设置方法。
- padding:长度 | 百分比
- padding-top、padding-right、 padding-left、padding-bottom
-
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>
.box {
/* 1. 手动去减 */
/* width: 160px;
height: 160px; */
/* 2. css3 盒子模型 box-sizing: border-box */
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">qwe</div>
</body>
</html>尺寸计算
默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论：给盒子加 border / padding 会撑大盒子
解决：
-
手动做减法，减掉 border / padding 的尺寸
-
內减模式：box-sizing: border-box
外边距
作用：拉开两个盒子之间的距离
属性名：margin
提示：与 padding 属性值写法、含义相同
版心居中
左右 margin 值 为 auto（盒子要有宽度）
div {
margin: 0 auto;
width: 1000px;
height: 200px;
background-color: pink;
}
行内和行内块元素水平居中对齐，给块级的父元素添加 tac
块级元素水平居中对齐： 让盒子的
左右外边距设置为 auto 就可以了。 margin: auto;
小米 margin-left: auto; margin-right: auto;
京东/淘宝： margin： 0 auto；
清除默认样式
清除标签默认的样式，比如：默认的内外边距。
/* 清除默认内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
list-style: none;
}
元素溢出
作用：控制溢出元素的内容的显示方式。
属性名：overflow
外边距问题
合并现象
场景：垂直排列的兄弟元素，上下 margin 会合并
现象：取两个 margin 中的较大值生效
.one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}
外边距塌陷
场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题
现象：导致父级一起向下移动
.son {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
解决方法：
-
取消子级margin，父级设置padding
-
父级设置 overflow: hidden
-
父级设置 border-top
行内元素 – 内外边距问题
场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
解决方法：给行内元素添加 line-height 可以改变垂直位置
span {
/* margin 和 padding 属性，无法改变垂直位置 */
margin: 50px;
padding: 20px;
/* 行高可以改变垂直位置 */
line-height: 100px;
}
圆角
作用：设置元素的外边框为圆角。
属性名：border-radius
属性值：数字+px / 百分比
提示：属性值是圆角半径
多值写法
技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。
-
正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%
img {
width: 200px;
height: 200px;
border-radius: 100px;
border-radius: 50%;
}
胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半
div {
width: 200px;
height: 80px;
background-color: orange;
border-radius: 40px;
}
盒子阴影（拓展）
作用：给元素设置阴影效果
属性名：box-shadow
属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
-
X 轴偏移量 和 Y 轴偏移量 必须书写
-
默认是外阴影，内阴影需要添加 inset
div {
width: 200px;
height: 80px;
background-color: orange;
box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}
06-Flex布局
标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
浮动(了解即可，不用复习)
基本使用
作用：让块元素水平排列。
属性名：float
属性值
-
left：左对齐
-
right：右对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
.left,
.right {
/* width: 200px; */
height: 200px;
background-color: pink;
}
.left {
/* 左浮动 */
float: left;
margin-left: 20px;
}
.right {
/* 右侧浮动 */
float: left;
height: 300px;
background-color: purple;
}
.bottom {
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="left">左侧123</div>
<div class="right">右侧123</div>
<div class="bottom"></div>
</body>
</html>特点：
-
浮动后的盒子顶对齐
-
浮动后的盒子具备行内块特点
-
浮动后的盒子脱标，不占用标准流的位置
产品区域布局
左右布局
html结构
<div class="mi"> <div class="left">左侧</div> <div class="right">右侧</div> </div>
css样式
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.mi {
width: 1226px;
height: 614px;
/* background-color: pink; */
margin: 100px auto;
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: skyblue;
}
.right {
float: right;
width: 978px;
height: 614px;
background-color: purple;
}
</style>
效果：
区域小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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.mi {
width: 1226px;
height: 614px;
/* background-color: pink; */
margin: 100px auto;
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: skyblue;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: purple; */
}
.right li {
float: left;
width: 234px;
height: 300px;
background-color: pink;
margin-bottom: 14px;
margin-right: 14px;
}
/* 让第4,8 个li 去掉外边距 */
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="mi">
<div class="left">左侧</div>
<div class="right">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</body>
</html> 
清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）
解决方法：清除浮动（清除浮动带来的影响）
场景搭建
<style>
.top {
margin: 10px auto;
width: 1200px;
/* height: 300px; */
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right {
float: right;
width: 950px;
height: 300px;
background-color: orange;
}
.bottom {
height: 100px;
background-color: brown;
}
</style>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>额外标签法
clear:left|right|both|none，与浮动属性是一对作用相反的属性，可以 清除左、右、两边及允许浮动。
在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both
<style>
.clearfix {
clear: both;
}
</style><div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
单伪元素法
-
准备 after 伪元素
.clearfix::after {
content: "";
display: block;
clear: both;
}父级使用 clearfix 类
<div class="father clearfix"></div>
双伪元素法
-
准备 after 和 before 伪元素
/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
/* after 清除浮动 */
.clearfix::after {
clear: both;
}-
父级使用 clearfix 类
<div class="father clearfix"></div>
overflow法
.father {
margin: 10px auto;
width: 1200px;
/* height: 300px; */
background-color: pink;
overflow: hidden;
}
Flex布局（重点）
Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
CSS对象的显示与隐藏
在CSS的布局中实现特定对象显示与隐藏方法有两种，设 置display和visibility属性来达到显示与隐藏，但在使用上略 有区别。图层div的显示与隐藏经常用在多级菜单或相关内容 附加展示的需求场景。
- display:block|none|inline
- #div1{display:none;} /* 让div1初始装载时不显示 */
- #nav a:hover #div1{ display:block;} /* 鼠标滑过时div1显示 */
- visibility : inherit|visible|collapse|hidden
- img { visibility: hidden; float: right; } /* 让对象隐藏*/
- img { visibility: visible; float: right; } /* 让对象恢复可视*/
Flex组成
display：
⚫ block： 独占一行；如果不指定宽高，默认会继承父元素的宽度
⚫ inline：设置了该属性之后设置高度、宽度都无效，同时text-align属性设置 也无效，但是设置了line-height会让inline元素居中。默认为inline的元素： span、a、label、input、 img、 strong 和em就是典型的行内元素元素。
行内元素和块级元素的区别
- 行内元素通常不会独占一行，它们会沿着父元素的水平方向排列，并且它们的宽 度和高度由内容决定，无法直接设置，但可以通过padding和margin来间接影响 其尺寸
- 行内元素只能设置左右的margin和padding，而不能设置上下的margin和 padding
- 行内元素可以包含文本或其他行内元素，但不能包含块级元素。
- 块级元素独占一行，每个块级元素会新起一行，它们的宽度可以设置，如果不明 确设置宽度，则默认宽度通常是其父元素的100%
- 块级元素的高度、行高、外边距以及内边距都可以控制，块级元素可以包含行内 元素和其它块级元素。
⚫ inline-block：既具有block的宽高特性又具有inline的同行元素特性， inline-block最大的优势是不会脱离文档流，可以让其元素在一行显示
⚫ none：隐藏元素，且不占空间
⚫ flex：将对象作为弹性伸缩盒，解决元素在容器中的对齐、方向、顺序问题， 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
⚫ inline-flex：将对象作为内联块级弹性伸缩盒显示
设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸
组成部分：
-
弹性容器
-
弹性盒子
-
主轴：默认在水平方向
-
侧轴 / 交叉轴：默认在垂直方向
-
flex：1表示三个属性简写1 1 0分三等分
主轴对齐方式
属性名：justify-content
justify-content: space-between;
显示效果：两侧没缝隙
效果如下： 记住2倍
justify-content: space-around;
justify-content: space-evenly;
效果如下： 记住空隙一样大
效果如下： 经常用于让一个盒子水平居中
justify-content: center;
记忆：
-
两侧没缝隙是 between`
-
缝隙一样大是 evenly
-
2倍缝隙是 around
<!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 {
/* 给父亲添加 flex */
display: flex;
/* 主轴的排列方式 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* 让子盒子居中对齐 */
/* justify-content: center; */
/* between */
/* justify-content: space-between; */
/* justify-content: space-around; */
justify-content: space-evenly;
width: 900px;
height: 200px;
background-color: pink;
}
.box div {
width: 249px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html> 
侧轴对齐方式
-
align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
-
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
<!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 {
/* 给父亲添加 flex */
display: flex;
/* 主轴的排列方式 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* 让子盒子居中对齐 */
/* justify-content: center; */
/* between */
/* 两侧没缝隙 */
/* justify-content: space-between; */
/* 两倍缝隙 */
/* justify-content: space-around; */
justify-content: space-evenly;
/* 侧轴的对齐方式 */
/* 顶部对齐 */
/* align-items: flex-start; */
/* 底部对齐 */
/* align-items: flex-end; */
/* 居中对齐 */
/* align-items: center; */
/* 默认的 拉伸和父亲一样 */
align-items: stretch;
width: 900px;
height: 500px;
background-color: pink;
}
.box div {
width: 249px;
/* height: 200px; */
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</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>
<style>
.father {
/* 利用flex实现 */
display: flex;
/* 主轴水平居中 */
justify-content: center;
/* 侧轴水平居中 */
align-items: center;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名：flex-wrap
属性值
•wrap：换行
•nowrap：不换行（默认）
多行对齐方式
如果有多行侧轴对齐，则去找align-content
如果是单行侧轴对齐，则去找 align-items
修改主轴方向
属性名：flex-direction
<!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 {
display: flex;
/* 默认主轴是横向 row */
/* 更改主轴的方向 我想要1和2盒子竖着排列 */
flex-direction: column;
width: 300px;
height: 300px;
border: 1px solid #000;
/* 主轴 */
justify-content: center;
/* 侧轴 */
align-items: center;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
</div>
</body>
</html> 
弹性伸缩比
作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数。
<!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 {
display: flex;
width: 80%;
height: 200px;
border: 1px solid #000;
}
.box span {
/* 不会区分原来属于什么模式 */
/* width: 100px;
height: 100px;
background-color: pink; */
flex: 1;
background-color: pink;
}
/* 圣杯布局两侧固定，中间自适应 */
.left,
.right {
width: 100px;
background-color: skyblue;
}
.center {
flex: 1;
background-color: purple;
}
.center1 {
flex: 2;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="box">
<div class="left">左</div>
<div class="center">中</div>
<div class="center1">中</div>
<div class="right">右</div>
</div>
</body>
</html>07-移动 Web 第一天
01-平面转换
简介
作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换也叫 2D 转换，属性是 transform
平移
transform: translate(X轴移动距离, Y轴移动距离);
-
取值
-
像素单位数值
-
百分比（参照盒子自身尺寸计算结果）
-
正负均可
-
-
技巧
-
translate() 只写一个值，表示沿着 X 轴移动
-
单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
-
定位居中
方法一：margin
方法二：平移 → 百分比参照盒子自身尺寸计算结果
旋转
transform: rotate(旋转角度);
-
取值：角度单位是 deg
-
技巧
-
取值正负均可
-
取值为正，顺时针旋转
-
取值为负，逆时针旋转
-
转换原点
默认情况下，转换原点是盒子中心点
transform-origin: 水平原点位置 垂直原点位置;
取值：
-
方位名词（left、top、right、bottom、center）
-
像素单位数值
-
百分比
多重转换
多重转换技巧：先平移再旋转
transform: translate() rotate();
-
多重转换原理：以第一种转换方式坐标轴为准转换形态
-
旋转会改变网页元素的坐标轴向
-
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
-
缩放
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
技巧
-
通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
-
取值大于1表示放大，取值小于1表示缩小
倾斜
取值：角度度数 deg
transform: skew();
02-渐变
渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);取值：
-
渐变方向：可选
-
to 方位名词
-
角度度数
-
-
终点位置：可选
-
百分比
-
径向渐变
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);取值：
-
半径可以是2条，则为椭圆
-
圆心位置取值：像素单位数值 / 百分比 / 方位名词
03-空间转换
空间转换简介
-
空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
-
空间转换也叫 3D转换
-
属性：transform
平移
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();
取值与平面转换相同
默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果
视距
作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：(添加给父级，取值范围 800-1200)
perspective: 视距;
旋转
Z 轴：rotateZ()
X 轴：rotateX()
Y 轴：rotateY()
rotate3d
-
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
-
x，y，z 取值为0-1之间的数字
立体呈现
作用：设置元素的子元素是位于 3D 空间中还是平面中
属性名：transform-style
属性值：
-
flat：子级处于平面中
-
preserve-3d：子级处于 3D 空间
04-动画
-
过渡：实现两个状态间的变化过程
-
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画实现步骤
-
定义动画
/* 方式一 */
@keyframes 动画名称 {
from {}
to {}
}
/* 方式二 */
@keyframes 动画名称 {
0% {}
10% {}
......
100% {}
}2.使用动画
animation: 动画名称 动画花费时长;
animation复合属性
提示：
-
动画名称和动画时长必须赋值
-
取值不分先后顺序
-
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
animation拆分写法
/* linear:匀速移动 */
animation-timing-function: linear;
精灵动画
制作步骤
1.准备显示区域
盒子尺寸与一张精灵小图尺寸相同
2.定义动画
移动背景图（移动距离 = 精灵图宽度）
3.使用动画
steps(N)，N 与精灵小图个数相同
div {
width: 140px;
height: 140px;
border: 1px solid #000;
background-image: url(./images/bg.png);
animation: run 1s steps(12) infinite;
}
@keyframes run {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}05-适配器
屏幕分辨率
分类：
-
物理分辨率：硬件分辨率（出厂设置）
-
逻辑分辨率：软件 / 驱动设置
结论：制作网页参考 逻辑分辨率
视口
作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸
-
width=device-width：视口宽度 = 设备宽度
-
initial-scale=1.0：缩放1倍（不缩放）
<!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>
</body>
</html>适配方案
-
宽度适配：宽度自适应
-
百分比布局
-
Flex 布局
-
-
等比适配：宽高等比缩放
-
rem
-
vw
-
02-rem
简介
-
rem单位，是相对单位
-
保证在不同的设备下有不同的大小
-
rem单位是相对于HTML标签的字号计算结果
-
1rem = 1HTML字号大小
媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
@media (width:320px) {
html {
background-color: green;
}
}
rem 布局
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。
flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
<body>
......
<script src="./js/flexible.js"></script>
</body>
rem 移动适配
rem单位尺寸
-
确定基准根字号
-
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
-
rem单位的尺寸
-
rem单位的尺寸 = px单位数值 / 基准根字号
03-less
Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件
VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件
运算
-
加、减、乘直接书写计算表达式
-
除法需要添加 小括号 或 .
-
表达式存在多个单位以第一个单位为准
变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
-
定义变量：@变量名: 数据;
-
使用变量：CSS属性：@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {
color: @myColor;
}
a {
color: @myColor;
}
导入
作用：导入 less 公共样式文件
语法：导入: @import “文件路径”;
提示：如果是 less 文件可以省略后缀
@import './base.less';
@import './common';
导出
写法：在 less 文件的第一行添加 // out: 存储URL
提示：文件夹名称后面添加 /
// out: ./index.css
// out: ./css/
禁止导出
写法：在 less 文件第一行添加: // out: false
06-vw适配方案
vw和vh基本使用
vw和vh是相对单位，相对视口尺寸计算结果
-
vw：viewport width（1vw = 1/100视口宽度 ）
-
vh：lviewport height ( 1vh = 1/100视口高度 )
vw布局
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
vh问题
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变
07-响应式布局方案
-
媒体查询
-
不同的设备大小，不同的效果
-
Bootstrap框架
01-媒体查询
基本写法
-
媒体特性：
-
max-width：最大宽度（小于等于）
-
min-width：最小宽度（大于等于）
书写顺序
-
min-width（从小到大）
-
max-width（从大到小）
媒体查询-完整写法
关键词 / 逻辑操作符
-
and
-
only
-
not
媒体类型
媒体类型用来区分设备类型
-
screen：屏幕设备
-
打印预览：print
-
阅读器：speech
-
不区分类型：all
媒体特性
-
视口宽高：width / height
-
视口最大宽高：max-width ；max-height
-
视口最小宽高：min-width；min-height
-
屏幕方向：orientation
-
protrait：竖屏
-
landscape：横屏
-
媒体查询-外部CSS
02-Bootstrap
简介
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: Bootstrap中文网
使用步骤
下载
下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件
字体图标
下载
导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip
使用
-
复制 fonts 文件夹到项目目录
-
网页引入 bootstrap-icons.css 文件
-
调用 CSS 类名（图标对应的类名）
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
