HTML+CSS

CaraYQ

已于 2024-04-18 09:04:49 修改

阅读量1k

点赞数 1

分类专栏：前端文章标签： html5 css

于 2021-08-15 15:12:35 首次发布

本文链接：https://blog.csdn.net/CaraYQ/article/details/119713469

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

HTML

HTML页面结构

<!DOCTYPE html>：放在HTML文档最前面的位置 加上之后就会按照W3C的HTML5标准解析渲染页面
<html lang="en">：根元素 包含整个网页的内容
<head>：对用户不可见 其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等
<meta charset="UTF-8">：定义文档字符编码
<meta name="keywords" content="HTML">：关键字
<meta name="description" content="HTML">：页面描述
<link>：引入的外部资源的链接
<title>：标题
<style>：页面样式
<script>：可执行脚本 有两个属性：
（1）defer：立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后再执行，只对外部脚本有效。有defer属性的脚本会阻止DOMContentLoaded事件，直到脚本被加载并且解析完成。
（2）async：立即下载脚本，且不妨碍其他操作，比如在下载其他资源或者加载其他脚本的时候，只对外部脚本有效。
<body>：包含能够被用户访问到的内容 包括文本 图像 视频 游戏 音频等

HTML5新特性

语义化标签
新增input标签的输入类型type的取值提供了更好的输入控制和验证。
新增表单元素
新增表单属性
新增<auidio> <video>标签播放音频视频
新增<canvas> 标签用以绘图标签只是图形容器必须使用脚本来绘制图形
新增<svg>标签用以绘图 SVG是指可伸缩的矢量图形是一种使用 XML 描述 2D 图形的语言
新增Geolocation（地理定位）接口用于定位用户的位置
任何元素都可以拖放
新增Web Worker标准，允许JavaScript脚本可以创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。
新增localStorage和sessionStorage 使得本地可以存储用户的浏览数据
新增WebSocket协议 websocket是一种在单个TCP连接上进行全双工通讯的协议浏览器和服务器只需要一次握手，就可以进行持续的，双向的数据传输，因此能节约资源和带宽常用于实时性要求高的场景。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

H标签-P标签-HR标签

H系列标签（header1～header6）

作用：给文本添加标题语意
格式：<h1>xxxx</h1>
属性：left right center justify可改变标题居中靠右靠左
注意：
①用来给文本添加标题语意的而不是用来修改文本的样式
②H标签一共有6个从H1到H6 超过H6则无效
③被H系列标签包裹的内容会独占一行
④在H系列标签中 H1字体最大 H6字体最小
⑤在企业开发中一定要慎用H系列标签特别是H1标签一般情况下一个界面只能有一个H1标签（和SEO有关）

P标签

作用：告诉浏览器哪些文字是一个段落
格式：<p>xxxxx</p>
注意：在浏览器中会单独占一行

Hr标签

作用：在浏览器上显示一条分割线
格式：<hr/>或<hr> 前者按照XHTML规范来编写的后者按着HTML规范来编写由于HTML5兼容HTML和XHTML 所以两者都可以用
注意：在浏览器中单独占据一

IMG标签

作用：告诉浏览器我们需要显示一张图片
格式：<img src="">
其中src=""是img标签的属性用来告诉img标签需要显示的图片地址是什么
注意：
①img标签不会独占一行
②如果我们指定了图片的宽度和高度可能会导致图片变形如果又想指定高度宽度又不想让图片变形我们可以只指定高度或宽度只要指定了宽度系统会自动计算出高度只要指定了高度系统会自动计算出宽度并且都是等比拉伸不变形
img标签中别的属性：
①width：宽度
②height：高度
以上两个属性的作用：告诉img标签将来需要显示的图片有多宽多高如果没有用这两个属性则系统使用图片默认的高和宽如果用了这两个属性系统就按照指定的宽高来显示
③title：告诉浏览器当鼠标悬停在图片上时需要显示什么内容
④alt：用于告诉浏览器当需要显示的图片找不到时显示什么内容

Br标签

作用：换行
格式：<br>
注意：
①多个br标签可以连续使用使用了多少个br标签就会换多少行
②由于HTML的作用就是用来给文本添加语意而br标签的语意是不另起一个段落换行而在企业开发中一般情况下需要换行都是因为需要另起一个段落所以在企业开发中很少使用br标签高级搜索用的br 换行但不另起一个段落
③可以用p标签换行 p标签是另起一行的换行

路径问题

想给scr属性赋值有两种方式：

通过相对路径赋值
相对路径：每次都从.html文件所在的文件夹开始查找
a.同级：图片和.html文件存储在同一个文件夹中格式：<img src="QRCode.jpg"> 含义：在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
b.下级：存储图片的文件夹和.html文件在同一个文件夹中例如. html文件和images文件夹在同一个文件夹是同级关系而QRCode.jpg在images文件夹里格式：<img src="images/QRCode.jpg"> 含义：在.html文件所在的文件夹中找到名称为images的文件夹然后再在images文件夹中找到名称叫做QRCode.jpg的图片
c.上级：存储图片的位置和存储代码的文件夹在同一个文件夹中例如.html文件存储在名为代码的文件夹里代码文件夹和QRCode.JPG位于同一个文件夹格式：<img src="../QRCode.jpg"> 含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹再在上一级文件夹中找到名为QRCode.jpg 其中…/表示从当前的位置找到上一级文件夹
通过绝对路径赋值
绝对路径：每次都从指定的盘符开始查找格式：
注意：
①路径中不要出现中文否则可能出现位置问题
②如果通过相对路径来指定照片就不能跨盘符
③以后企业开发中如果需要编写路径统一使用反斜杠/，不要用正斜杠\ 因为将来我们开发的程序可能会部署到其他操作系统的服务器上而在其他操作系统中路径都是/ 所以如果你写的是\ 可能会引发问题
④在企业开发中一般不使用绝对路径因为可移植性不好也就是说将你写好的代码拷贝给别人别人可能就不能运行了

a标签

作用：实现页面与页面之间的跳转
格式：<a hrcf="指定需要跳转的目标界面（目的地链接）">需要展现给用户查看的内容（点击这个内容才可以跳转）</a>
注意：①a标签不仅可以让文字点击还可以让图片也能够被点击例如：<a hrcf="指定需要跳转的目标界面（目的地链接）"><img src-"QRCode.jpg"></a>
②一个a标签必须有一个href属性否则a标签不知道要跳转到什么地方
③如果通过a标签的href属性指定一个URL地址那么必须在前面加上http://或https://
④a标签的href属性除了可以指定网络地址以外还可以指定本地地址例如：<a hrcf="test/demo/10路径练习.html">10路径练习.html</a>
就会跳转到test文件下的demo文件夹下的10路径练习.html链接下的内容（相对路径的方法 test文件和这个使用a标签的.html文件在同一个文件夹同级的关系）
⑤a标签中有一个叫做target属性专门用于控制如何跳转该属性又有两个属性：
_self：当前选项卡跳转不新建界面跳转默认为_self 例如：<a hrcf="指定需要跳转的目标界面（目的地链接）" target="_self">需要展现给用户查看的内容（点击这个内容才可以跳转）</a>
_blank：在新的选项卡中跳转也就是新建界面跳转
⑥标签还有一个title属性该属性和img标签中的title一样都是用来控制鼠标悬停时显示的提示文本的例如： <a hrcf="指定需要跳转的目标界面（目的地链接）" target="_self" title="提示：会跳转哦">需要展现给用户查看的内容（点击这个内容才可以跳转）</a>

base标签

作用：统一的指定当前网页中所有的超链接（a标签）需要如何打开
注意点：
①base标签必须写在head标签的开始标签和结束标签之间 <base target="_blank">
②如果既在base中指定了target又在a标签中指定了target 那么浏览器会按照a标签中指定的来执行

假链接

假链接：点击之后不会跳转的链接在企业开发前期其他界面都没写出来我们就不知道应该跳转到什么地方所以就只能使用假链接来代替当项目后期其他界面都已经完成时再将假链接替换为真链接
假链接格式：①# ②javascript:
区别：前者的假链接会自动回到网页顶部后者的假链接不会自动回到网页顶部
有这些网页有"回到顶部"的功能就是用的#假链接

锚点

要想通过a标签跳转到指定的位置那么必须告诉a标签一个独一无二的身份证号码这样a标签才能在当前界面中找到需要跳转到的目标位置
如何给HTML中的标签绑定一个独一无二的身份证号码呢在HTML中每一个标签都有一个名称叫做id的属性这个属性就是用来给标签指定一个独一无二的身份证号码的
所以要想实现通过a标签跳转到指定的位置分两步：1给目标位置的标签添加一个id属性然后指定一个独一无二的值2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
格式：<a href="#center">跳转到中部</a>
在href的假链接中添加需要跳转到的目标标签对应的id属性
<h2 id="center">我是中部</h2>
先给目标位置的标签添加id属性给标签添加属性都是在开始标签中添加属性 center为id属性的名称自己随便取
注意：
①通过a标签跳转到指定的位置是没有过度动画的是直接一下子就跳转到了指定位置
② a标签不仅可以跳转到当前界面的指定位置还可以跳转到其他界面的时候直接跳转到其他界面的指定位置例如：假设锚点测试.html文件和锚点.html文件位于同一个文件夹是同级关系在锚点.html文件中写程序要求点击“跳转到锚点界面”能跳转到锚点测试.html文件中“我是锚点测试界面333”内容处：先在锚点.html文件中设置跳转链接：<a href="锚点测试界面.html">跳转到锚点测试界面</a> 再在目标位置（锚点测试.html文件的“我是锚点测试界面333”内容）的标签添加id属性：<h2 id="bottom">我是锚点测试界面333</h2> 再指定位置：<a href="锚点测试界面.html#bottom">跳转到锚点测试界面</a> 即在目标链接后面写#和id名称

列表

无序列表

列表标签的作用：给一堆数据添加列表语意也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体
分类：无序列表unordered list（最常用）有序列表ordered list（最不常用）定义列表definition list（第二常用）
无序列表作用：给一堆数据添加列表语意并且这一堆数据中所有的数据都没有先后之分
什么叫有先后之分：排行榜
什么叫没有先后之分：中国有哪些城市
无序列表格式：

<ul>
	<li>需要显示的条目内容1</li>
	<li>需要显示的条目内容2</li>
	......
</ul>

li是list item列表条目的缩写

注意：
①ul标签是用来给一堆数据添加列表语意的而不是用来给他们添加小圆点的
②ul标签和li标签是一个整体是一个组合所以一般情况下ul标签和li标签都是一起出现不会单个出现也就是说不会单独使用一个ul标签或者单独使用一个li标签都是结合在一起使用
③由于ul标签和li标签是一个组合所以ul标签中不推荐包含其他标签即在ul标签中只会看到li标签
无序列表应用场景：新闻列表商品列表导航条
前面我们说过ul中最好只放li标签但是在企业开发中 li标签中的内容可能会很复杂所以我们可以继续在li标签中添加其他的标签来丰富我们的界面 ul中只能有li li中可以有其他甚至可以添加ul标签来丰富界面也就是说 ul中有li li中又可以有ul

有序列表

有序列表的作用：给一堆数据添加列表语意并且这一堆数据中所有的数据都有先后之分
有序列表格式：

<ol>
	<li>需要显示的条目内容1</li>
	<li>需要显示的条目内容2</li>
	......
</ol>

其他用法同无序列表

定义列表

定义列表：给一堆数据添加列表语意先通过dt标签定义列表中的所有标题然后再通过dd标签给每个标题添加描述信息
定义列表的格式：

<dl>
	<dt>列表中的标题1</dt>
	<dd>描述1</dd>
	<dt>列表中的标题2</dt>
	<dd>描述2</dd>
	......
</dl>

dt是definition title定义标题的缩写所以用来定义列表中的标题
dd是definition description定义描述的缩写所以用来定义标题对应的描述的

定义列表的应用场景：做网站尾部的相关信息做图文混排
注意：
①和ul/ol一样 dl和dt/dd是一个整体所以他们一般情况下不会单独出现都是一起出现
②和ul/ol一样由于dl和dt/dd是一个组合标签所以dl中建议只放dt和dd标签
③一个dt可以没有对应的dd 也可以有多个对应的dd 但是无论有或者没有dd都不推荐使用推荐使用一个dt对应一个dd
④和li标签一样当需要丰富界面时我们可以在dt和dd标签中继续添加其他标签

表格标签

表格标签：用来给一堆数据添加表格语意其实表格是一种数据的展现形式当数据量非常大的时候表格这种展现形式被认为是最为清晰的一种展现形式
表格标签格式：

<table>
	<tr>
		<td>需要显示的内容</td>
	</tr>
</table>

table代表整个表格即一对table标签就是一个表格
tr标签代表整个表格中的一行数据也就是说一对tr标签就是表格中的一行
td标签代表表格中一行中的一个单元格即一对td标签就是一行中的一个单元格

注意：
①表格标签有一个边框属性这个属性决定了边框的宽度默认情况下这个属性的值是0 所以看不到边框 <table border="1">设置边框属性为1 显示边框
②表格标签和列表标签一样他是一个组合标签所以table/tr/td要么一起出现要么都不出现
表格标签的属性：
①宽度和高度的属性：可以给table标签和td标签使用不能给tr标签使用
表格的宽度和高度默认是按照内容的尺寸来调整的也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
如果给td标签设置width/height属性的方式来手动指定表格的高度和宽度会修改当前单元格的宽度和高度不会影响整个表格的宽度和高度
②水平对齐和垂直对齐的属性：水平对齐可以给table标签、tr标签、td标签使用垂直对齐只能给tr标签和td标签使用不能给table标签使用
给table标签设置align属性可以控制表格在水平方向的对齐方式
给tr标签设置align属性可以控制当前行中所有单元格内容的水平方向的对齐方式
给td标签设置align属性可以控制当前单元格中内容在水平方向的对齐方式
如果td中设置了align属性 tr中也设置了align属性那么单元格中的内容会按照td中设置的来对齐
给tr标签设置valign属性可以控制当前行中所有单元格中的内容在垂直方向的对齐方式
给td标签设置valign属性可以控制当前单元格中的内容在垂直方向的对齐方式
如果td中设置了valign属性 tr中也设置了valign属性那么单元格中的内容会按照td中设置的来对齐
③外边距和内边距的属性：只能给table标签使用
外边距：单元格与单元格之间的距离默认情况下单元格与单元格之间的外边距的距离是2px 可以通过cellspacing属性来设置
内边距：单元格的边框和单元格内的文字的间隙默认情况下内边距为1 可以通过cellpadding属性来设置

细线边框

在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的其实他是将两条线合并为了一条线所以看上去很不舒服
细线表格的制作方式：①给table便签设置bgcolor="black"②给（所有）tr标签设置bgcolor="white"③给table便签设置cellspacing=“1px”
table标签和tr标签和td标签都支持bgcolor属性

表格中的其他标签

表格标签中的caption标签用来专门设置表格的标题使表格的标题位于表格中间只要将标题写在caption标签中那么标题就会自动相对于表格的宽度居中

<table>
<caption>
	<h2>标题</h2>
</caption>

注意：①caption标签一定要写在table标签中否则无效
②caption 一定要紧跟在table标签后面

标题单元格标签：在表格标签中提供了一个标签专门用来存储每一列的标题这个标签叫做th标签只要当前列的标题存储在这个标签中就会自动居中加粗文字把td换成th 其实表格中有两种单元格一种是td 一种是th td是专门用来存储数据的 th是专门用来存储当前列的标题的

表格的结构

由于表格中存储的数据比较复杂为了方便管理和阅读自己提升语意我们可以对表格中存储的数据进行分类表格中存储的数据可以分为4类：
①表格的标题
②表格的表头信息（每一列的标题）
③表格的主题信息
④表格的页尾信息
表格的格式：

<table>
	<caption>表格的标题</caption>
	<thead>
		<tr>
			<th>每一列的标题</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>数据</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>数据</td>
		</tr>
	</tfoot>
</table>

caption的作用：指定表格的标题
thead的作用：指定表格的表头信息
tbody的作用：指定表格的主体信息
tfoot的作用：指定表格的附加信息

注意：
①如果我们没有编写tbody 系统会自动给我们添加tbody
②如果指定了thead和tfoot 那么在修改整个表格的高度时thead和tfoot有自己默认的高度不会随着表格的高度变化而变化

表格合并

水平方向上的单元格合并：可以给td标签添加一个colspan属性来指定把某一个单元格当做多个单元格来看待例如：<td colspan="2"></td> 含义：把当前单元格当做两个单元格来看待
注意点：1由于把某一个单元格当做了多个单元格来看待所以就会多出一些单元格所以需要删掉一些单元格才能正常显示
②单元格合并永远都是向后或者向下合并而不能向前或者向上合并
垂直方向上的单元格合并：可以给td标签设置一个rowspan属性来指定把某一个单元格当做多个单元格来看待（垂直方向）例如：<td rowspan="2"></td> 含义：把当前单元格当做两个单元格来看待

表单标签

什么是表单：专门用来收集用户信息的
什么是元素：在HTML中标签/标记/元素都是指HTML中的标签例如：<a>就是a标签/a标记/a元素
什么是表单元素：表单元素也是HTML中的一些标签只不过这些标签比较特殊在浏览器中所有的表单标签都有特殊的外观和默认的功能
表单的格式：

<form>
	<表单元素>
</form>

常见的表单元素：input标签 input标签有个type属性这个属性有很多类型的取值取值不同就决定了input标签的功能和外观通过value为输入框设置默认值

<form>
	<！--明文输入框-->
	账号：<input type="text"><br>
	<！--暗文输入框-->
	密码：<input type="password"><br>
</form>
<！--给输入框设置默认值-->
账号：<input type="text" value="lnj"><br>
密码：<input type="password" value="123"><br>

单选框：
注意：
①默认情况下单选框不会互斥要想单选框互斥那么必须给每一个单选框标签都设置一个name属性然后name属性还必须设置相同的值
②要想让单选框默认选中某一个框子那么可以给input标签添加一个check属性
③在HTML中如果属性的取值和属性的名称一样可以只写一个例如：checked="checked"可以写成checked 但是在XHTML中必须写上取值所以在企业开发中建议大家不要省略取值另外如果单选框写了多个checked 默认选中最后一个checked
例1：性别：

<input type="radio" name="xx" >男
<input type="radio" name="xx" >女
<input type="radio" name="xx" checked>保密

例2：性别：

<input type="radio" name="xx" >男
<input type="radio" name="xx" checked>女
<input type="radio" name="xx" checked>保密

默认选中保密

在单选框和多选框中所有的项目的name必须一致
在表单标签中除了按钮标签以外的标签都可以通过value来指定需要提交到服务器的数据
例如：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" checked value="yao">保密

<form>
	<fieldset>
		<legend>边框标题</legend>
		height：<input type="text"/>
		height：<input type="text"/>
	</fieldset>
</form>

在form标签后写fieldset标签可加边框
legend标签是给边框加标题：
10. type的其他取值

<!--1可以自动校验输入的内容是否符合邮箱的格式-->
邮箱：<input type="email">
<!--2 可以自动校验输入的内容是否是URL地址-->
域名：<input type="URL">
<!--3输入框只能输入数字-->
电话号码：<input type="number">
<!--4可以通过日历来选择时间-->
时间：<input type="date">
<!--5可以通过取色板来选择颜色-->
颜色：<input type="color">

表单标签-按钮

<!--1定义一个普通按钮-->
<!--作用：配合js完成一些操作-->
<input type="button" value="我是按钮" onclick="alert（'lnj'）" >
<!--给form标签的input的type类型设置为button value则输入按钮上你想显示的字 onclick是js语言-->

<!--2定义一个图片按钮-->
<!--作用：配合js完成一些操作-->
<input type="image" src="C:\Users\dc16102111\.WebStorm2019.1\config\scratches\images\登陆.png">

<!--3定义重置按钮-->
<!--作用：清空表单中的数据-->
<!--注意点：重置按钮有默认的按钮标题 默认叫做重置 也可以通过value属性来修改默认标题-->
<input type="reset" value="清空">

<!--4定义提交按钮-->
<!--作用：将表单中的数据提升到远程服务器-->
<!--注意点：要想把表单中的数据提交到远程服务器 必须满足两个条件：
①告诉表单需要提交到哪个服务器 可以通过form标签的action属性来告诉表单 需要提交到哪个服务器
②告诉表单 表单中哪些数据需要提交 只要设置name属性就会提交
-->
<input type="submit" name="aa"> <br>

<!--5隐藏域的作用：悄悄咪咪的收集用户的一些数据 隐藏域是不会出现在界面中的-->
<input type="hidden" name="cc" value="it666">

<!--6默认情况下文字和输入框是没有关联关系的 也就是说 点击文字输入框不会聚焦
如果想点击文字时让对应的输入框聚焦 那么就需要让文字和输入框进行绑定
绑定的格式：
方法一：
①将文字利用label标签包裹起来
②给输入框添加一个id属性
③在label标签中通过for属性和输入框 中的id进行绑定即可
<label for="account">账号：</label><input type="text" id="account">
-->
<form action="http：//baidu.com>
<label for="account">账号：</label><input type="text" id="account"><br>
<label for="pwd">密码： </label><input type="password" id="pwd">
</form>
<!--方法二：-->
<label>账号：<input type="text"></label>

datalist标签

datalist的作用：给输入框绑定待选项
格式：

<datalist>
	<option>待选项内容</option>
</datalist>

如何给输入框绑定待选项列表
①搞一个输入框
②搞一个datalist列表
③给datalist列表标签添加一个id
④给输入框details添加一个list属性将datalist的id对应的值赋值给list属性即可
请输入你的车型：

<input type=" text" list="cars">
<datalist id="cars">
	<option>奔驰</option>
	<option>宝马</option>
	<option>奥迪</option>
	<option>路虎</option>
	<option>宾利</option>
</datalist>

表单标签-非input标签

select标签的作用：定义下拉列表
格式：

<select>
	<optgroup label="分组名字">
		<option>列表数据</option>
	</optgroup>
</select>

3注意：
①下拉列表不能输入内容但是可以直接在列表中选择内容
②可以通过给option标签添加一个selected属性来指定列表的默认值
③可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类 label标签用来定义类名

video标签

什么是video标签：播放视频
格式：

<video src="">
</video>

video标签的属性：
src：告诉video标签需要播放的视频地址
autoplay：告诉video标签是否需要自动播放视频
controls=告诉video标签是否需要显示控制条
poster：告诉video标签视频没有播放之前显示的占位图片
loop：一般用于做广告视频用来告诉video标签视频播放完毕之后是否需要循环播放
preload：预加载视频但是需要注意preload和autoplay相冲突如果设置了autoplay属性那么preload属性就会失效
muted：静音
width/height：和img标准中的一模一样
例如：<video src=images/sb.webm" autoplay="autoplay" loop="loop" muted="muted" width="800px"></video>
video标签的第二种格式：

<video>
	<source src="" type=""></source>
	<source src="" type=""></source>
</video>

由于视频数据非常重要所以五大浏览器厂商都不愿意支持别人的视频格式所以导致了没有一种视频格式是所有浏览器都支持的
w3c为了解决这个问题推出了第二种视频格式 video标签的第二种格式存在的意义就是为了解决浏览器适配的问题
video元素支持三种视频格式我们可以把这三种视频格式通过source标签指定给video标签那么以后当浏览器播放视频时
他就会从这三种中选择一种自己支持的格式来播放

<video>
	<source src="images/sb.webm" type="video/webm"></source>
	<source src="images/sb.mp4" type="video/mp4"></source>
	<source src="images/sb.ogg" type="video/ogg"></source>
</video>

注意：当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式但是显然所有浏览器都通过video标签播放视频还有一个前提条件：浏览器必须支持HTML5标签否则同样无法播放在过去的一些浏览器是不支持HTML5标签的所以为了让过去的一些浏览器也能通过video标签播放视频以后我们可以通过js中名叫html5media的框架来实现

audio标签

audio标签：播放音频
格式：

<audio src="">
</audio> 
或者
<audio>
	<source src="" type="">
</audio>

例1：
<audio src="images/yinyue.MP3" autoplay="autoplay" controls="controls">
</audio>
例2：
<audio autoplay="autoplay" controls="controls">
	<source src="images/yinyue.MP3" type="audio/MP3">
</audio>

注意：audio标签和video标签的使用基本一样 video中能够使用的属性在audio标签中大部分都能使用而且功能都一样
只不过有三个属性不能用：height/width/poster

详情和概要标签

什么是详情和概要标签：利用summary标签来描述概要信息利用details标签来描述详情信息
默认情况下折叠显示想看见详情必须点击
格式：

<details>
	<summary>概要信息</summary>
	详情信息
</details>

marquee标签

什么是marquee标签：跑马灯可以理解为lled灯上面的字滚动的样式
格式：<marquee>内容</marquee>
注意点：marquee标签不是w3c推荐的标签在w3c官方文档中也无法查询到但是各大浏览器对这个标签的支持非常好
属性：
①direction：设置滚动方向 left（默认从右向左滚动）/right（从左向右滚动）/up（从下向上滚动）/down（从上向下滚动）

被废弃的标签

为什么HTML中有些标签被废弃了：因为当前HTML中的标签只有一个作用就是用来添加语意而早期的HTML标签中有一部分标签是没有语意的有一部分标签是用来修改样式的所以这部分标签被淘汰了比如：<br>/<hr>/<font>修改文字样式/<b>/<u>/<i>/<s>这四个标签都是没有语意的都是用来修改样式的
b（bold）：加粗文本没有任何语意
u（underlined）：给文本添加下划线没有任何语意
i（italic）：将文本倾斜没有任何语意
s（strikethrough）：给文本添加删除线没有任何语意
注意点：以后再企业开发中不到万不得已一定不要使用这些被废弃掉的标签如果一定要使用一般情况下都是用来作为CSS的钩子来使用
在把buis四个标签废弃掉后HTML又推出了四个标签来替代他们：strong替代b ins替代u em替代i del替代s 后推出的这四个标签保留了原来四个的功能也拥有了语意
strong语意：定义重要性强调的文字（语意比em强调的重）
ins 语意（inseted）：定义插入的文字
em语意（emphasized）：定义强调的文字
del语意（deleted）：定义被删除的文字

字符实体

在HTML中对空格/回车/tab不敏感会把多个空格/回车/tab当做一个空格来处理
什么是字符实体：在HTML中有的字符是被HTML保留的有的HTML字符在HTML中是有特殊含义的是不能在浏览器中直接显示出来的那么这些东西想显示出来就必须通过字符实体
字符实体：（最后一定要写分号;）

&nbsp;：空格 一个&nbsp;就是一个空格 有多少个&nbsp;就有多少个空格
&lt;：小于符号< less than
&gt;：大于符号> greater than
&copy;：版权符号©

CSS

CSS3新特性

1.新增选择器
在这里插入图片描述

新增边框属性
（1）border-radius：创建圆角边框
（2）box-shadow：为元素添加阴影
（3）border-image：使用图片来绘制边框
新增背景相关属性
（1）background-clip：设定背景颜色或图片的覆盖范围

background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box

（2）background-origin：当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position
默认情况是padding-box，即以padding的左上角为原点

（3）background-size：调整背景图片的大小，主要用于设定图片本身。

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

（4）background-break：元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示

background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景

新增文字相关属性
（1）word-wrap

word-wrap: normal：使用浏览器默认的换行
word-wrap: break-all：允许在单词内换行

（2）text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：

text-overflow: clip：修剪文本
text-overflow: ellipsis：显示省略符号来代表被修剪的文本

（3）text-shadow：向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
（4）text-decoration：对文字的更深层次的渲染

text-decoration: text-fill-color: 设置文字内部填充颜色
text-decoration: text-stroke-color: 设置文字边界填充颜色
text-decoration: text-stroke-width: 设置文字边界宽度

新增颜色表示方式：rgba与hsla
rgba分为两部分，rgb为颜色值，a为透明度
hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
新增transition、transform、animation属性
新增渐变
（1）linear-gradient：线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

（2）radial-gradient：径向渐变

linear-gradient(0deg, red, green);

新增flex布局、grid栅格布局等

CSS固定格式

CSS格式：

<style type="text/css">
	标签名称{
		属性名称：属性对应的值;
		......
	}
</style>
<style type="text/css"> style标签有一个type属性 表示style标签中放的是纯文本文件的CSS代码

注意：
①css代码必须写在<style></style>标签中而<style></style>标签必须写在<head></head>标签中与title标签是平级关系
②style标签中的type属性其实可以不用写默认就是type=“text/css”
③设置样式时必须按照固定的格式来设置 key:value;

文字相关属性

规定文字样式的属性
格式：font-style:italic;（倾斜的）或者font-style:normal;（正常的默认就是正常的）
规定文字粗细的属性
格式：font-weight:bold;
单词取值：bold加粗、bolder比bold加粗更粗、lighter细线默认就是细线
数字取值：100-900整百数字
规定文字大小的属性
格式：font-size：30px;
单位：px（像素pixel）
注意点：通过font-size设置大小一定要带单位也就是一定要这px
规定文字字体的属性
格式：font-family："楷体"; 默认是宋体
注意点：
①如果取值是中文需要用双引号或者单引号括起来
②设置的字体必须是用户电脑里面已经安装的字体
③如果设置的字体不存在那么系统就会使用默认的字体来显示宋体
④如果设置的字体不存在而我们又不想用默认的字体来显示怎么办：可以给字体设置备选方案格式：font-family："字体1"，"备选方案1"...
⑤如果想给中文和英文分别单独设置字体怎么办：但凡是中文字体里面都包含了英文但凡是英文字体里面都没有包含中文也就是说中文字体可以处理英文英文字体不能处理中文注意：如果想给界面中的英文单独设置字体那么英文的字体必须写在中文的后面
补充：在企业开发中最常见的字体：中文：宋体simsun/黑体simhei/微软雅黑Microsoft yahei 英文：times new roman/arial
并不是名称是英文就一定是英文字体因为中文字体其实都有自己的英文名称所以是不是中文字体主要看能不能处理中文
以上内容缩写格式：font:style weight size family例如：font:italic bold 10px "楷体";
注意：
①在这种缩写格式中有的属性值可以省略 style和weight可以省略
②在这种缩写格式中style和weight的位置可以交换
③在这种缩写格式中有的属性值不可以省略 size和family不可以省略
④size和family的位置不能随便乱放 size一定要写在family前面而且size和family必须写在所有属性后面

文本属性

文本装饰的属性
格式：text-decoration:underline;
取值：
underline下划线
line-through删除线
overline上划线
none什么也没有最常见的用法就是用来去掉超链接的下划线
文本水平对齐的属性
格式：text-align:right;
取值：right右/left左/center中
文本缩进的属性
格式：text-indent:2em;
取值：2em其中em是单位一个em代表缩进一个文字的宽度

颜色控制属性

在css中如何通过color属性来修改文字颜色：
格式：color：值;
取值：
（1）英文单词：一般情况下常见的颜色都有对应的英文单词但是英文单词能够表达的颜色是有限制的也就是说不是所有的颜色都能通过英文单词来表达
（2）rgb：
格式：rgb（x1,x2,x3）
x1用来设置三原色的光源原件红色显示的亮度
x2用来设置三原色的光源原件绿色显示的亮度
x3用来设置三原色的光源原件蓝色显示的亮度
这其中的每一个数字他的取值是0-255之间 0代表不发光 255代表发光值越大就越亮
红色：rgb(255,0,0);
绿色：rgb(0,255,0);
蓝色：rgb(0,0,255);
黑色：rgb(0,0,0);
白色：rgb(255,255,255);
在前端开发中其实不常用黑色灰色最常用
只要让红色/绿色/蓝色的值都一样就是灰色而且如果这三个值越小那么就越偏黑色值越大就越偏白色例如：color:rgb(200,200,200);
（3）rgba：rgba中的rgb和前面讲解的一样只不过多了一个a 这个a表示透明度取值是0-1 取值越小越透明例如：color:rgba(255,0,0,0.2)
（4）十六进制：本质是rgb 十六进制中每两位表示一个颜色例如：＃FFEE00中FF表示红色r EE表示绿色g 00表示蓝色b
（5）十六进制缩写：在css中只要十六进制的颜色每两位的值都是一样的那么就可以简写为1位例如：＃FFEE00可以简写为#FE0
注意：
①如果当前颜色对应的两位数字不一样那么就不能简写例如：＃123456不能简写
②如果两位相同的数字不是属于同一个颜色的也不能简写例如：122334不能简写
③每次当你写好颜色的代码时旁边都会出现一个颜色方框点击它可以自己调色也可以取色

选择器

标签选择器

什么是标签选择器：根据指定的标签名称在当前界面中找到所有该名称的标签然后设置属性
格式：标签名称{属性：值;}
注意点：
①标签选择器选中的是当前界面中所有的标签而不能单独选中某一个标签
②标签选择器无论标签藏的多深都能选中
③只要是HTML的标签就可以作为标签选择器

id选择器

id选择器的作用：根据指定的id名称找到对应的标签然后设置属性
格式：

＃id名称{
	属性：值;
}

注意点：
①每个HTML标签都有一个属性叫做id 也就是说每个标签都可以设置id
②在同一个界面中id的名称是不可以重复的
③在编写id选择器时一定要在id名称前面加＃
④id名称只能由字母/数字，下划线组成（只能是a-z 0-9）但是不能用数字开头且不能是HTML便签的名称
⑤在企业开发中如果仅仅是为了设置样式一般不使用id 因为在前端开发中id是留给js用的

类选择器

类选择器的作用：根据指定的类名称找到对应的标签然后设置属性
格式：

.类名{
	属性：值;
}

注意：
①每个HTML标签都有一个属性叫做class 也就是说每个标签都可以设置类名
②在同一个界面中class的名称是可以重复的
③在编写class选择器时一定要在class名称前面加上.
④类名的命名规范和id名称的命名规范一样
⑤类名就是用来给某个特定的标签设置样式的
⑥在HTML中每个标签可以同时绑定多个类名格式：<标签名称 class="类名1 类名2...">
id和class的区别：id相当于人的身份证不可以重复 class相当于人的名称可以重复并且一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称
id选择器和class选择器的区别：前者以＃开头后者以.开头
在企业开发中到底用id选择器还是用class选择器：一般情况下id是给js使用的所以除非特殊情况否则不要使用id去设置样式
在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平一般情况下在企业开发中要注重冗余代码的抽取
可以将一些公共的代码抽取到一个类选择器中然后让标签和这个类选择器绑定即可

后代选择器

后代选择器的作用：找到指定标签的所有后代标签
例1：<div><p></p></div> p标签在div标签里面 p标签就是div标签的后代标签只要是包含在里面就算后代儿子孙子重孙子都是后代
例2：<div><ul><li><p></p></li></ul></div> p标签在div标签里面 p标签是div标签的后代设置属性
格式：

标签名称1 标签名称2{
	属性：值;
}

先找到名称叫做标签名称1的标签然后再在这个标签下面去查找所有名称叫做标签名称2的标签然后再设置属性

注意点：
①后代选择器必须用空格隔开
②后代不仅仅是儿子也包括孙子重孙子只要最终是放到指定标签中的都是后代
③后代选择器不仅仅可以使用标签名称还可以使用其他选择器比如id class等

子元素选择器

子元素选择器的作用：找到指定标签中所有特定的直接子元素然后设置属性
格式：

标签名称1>标签名称2{
	属性：值;
}

先找到名称叫做标签名称1的标签然后在这个标签中查找所有直接子元素（只找指定标签的儿子而不找他的孙子重孙子）名称叫做标签名称2的元素

注意点：
①子元素选择器只会查找儿子不会查找其他被嵌套的标签
②子元素选择器之间需要用>符号连接并且不能有空格
③子元素选择器不仅可以使用标签名称还可以使用其他选择器
④子元素选择器可以通过>符号一直延续下去
后代选择器和子元素选择器的区别：后代选择器使用空格作为连接符号子元素选择器使用>作为连接符后代选择器会选中指定标签中所有的特定后代标签也就是会选中儿子/孙子…只要是被放到指定标签中的特定标签都会被选中子元素选择器只会选中指定标签中所有的特定的直接标签也就是只会选中特定的儿子标签
后代选择器和子元素选择器的共同点：都可以使用标签名称/名称/class名称来作为选择器都可以通过各自的连接符号一直延续下去例如：选择器1 选择器2 选择器3 选择器4{}或者：选择器1>选择器2>选择器3>选择器4{}
在企业开发中如何选择：如果想选中指定标签中的所有特定的标签那么就使用后代选择器如果只是想选中指定标签中的所有特定儿子标签那么就使用子元素选择器

交集选择器

交集选择器的作用：给所有选择器选中的标签中相交的那部分标签设置属性
格式：

选择器1选择器2{
	属性：值;
}

注意：
①选择器和选择器之间没有任何的连接符号
②选择器可以使用标签名称/id名称/class名称
③企业中不常用
感觉和后代选择器差不多

并集选择器

并集选择器的作用：给所有选择器选中的标签设置属性同级选择器
格式：选择器1，选择器2{属性：值;}
注意点：
①并集选择器必须使用，来连接
② 选择器可以使用标签名称/id名称/class名称

兄弟选择器

兄弟选择器：只能选中同级关系的下一个的标签如果是嵌套关系它的儿子/孙子…是不能选中的
相邻的兄弟选择器CSS2的作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式：

选择器1＋选择器2{
	属性：值;
}

将选择器1后面紧跟的选择器2设置为某属性
把紧跟在h1后面的标签的内容设置为红色

注意:
①相邻兄弟选择器必须通过＋连接
②相邻兄弟选择器只能选中紧跟其后的那个标签不能选中被隔开的标签例如:

<body>
	<h1>我是标题</h1>
	<a href="#">我是超链接</a>
	<p>我是段落</p>
	<p>我是段落</p>
</body>
<style>
	h1+p{
		color:red;
	}
</style>

紧跟h1标签后的是a标签所以此语句无法选中p标签

通用兄弟选择器

通用兄弟选择器的作用：给指定选择器后面的所有选择器选中的所有标签设置属性
格式：

选择器1~选择器2{
	属性：值;
}

先找到选择器1 然后看选择器1后面有没有选择器2（不管是紧跟的还是被隔开的都能被选中）有的话就设置所有选择器2的属性

注意：
①通用兄弟选择器必须用~连接
②通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签无论有没有被隔开都可以被选中

序选择器

同级别的第几个：
（1）first-child选中同级别中的第一个标签
（2）last-child选中同级别中的最后一个标签
（3）nth-child(m)选中同级别中的第m个标签
（4）nth-last-child(m）{属性:值;} 选中同级别中的倒数第m个标签
注意：此标签不区分类型直接去取同级别的第一个取出来的可能不是p标签
（5）only-child:选中父元素中唯一的子元素选中body标签中只有一个子元素的标签的那个唯一子元素
（6）选中同级别中所有奇数/偶数：nth-child(odd/even){属性:值;}
（7）nth-child(xn1＋y）{属性:值;}其中 x y由程序员设定n1和n不是一个n 写代码的时候要把n1写成n 这里为了区分写成了n1 n1是总的指定标签个数从0到n1依次递增

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>52-序选择器</title>
    <style>
        /*p:first-child{*/
        /*    color: red;!*选中同级别的第一个标签 然后看他是不是p标签 如果是 就改属性 如果不是就不操作*!*/
        /*}*/
        /*将同级别的第一个标签设为红色*/

        /*p:last-child{*/
        /*    color: purple;*/
        /*}*/
    /*
    选中同级别的最后一个标签 然后看他是不是p标签 如果是 就改属性 如果不是就不操作
    此处第一个同级别中最后一个标签是div标签 不是p标签 所以不操作 第二个同级别中最后一个标签是p标签 就操作
    */

        /*p:nth-child(2){*/
        /*    color: red;*/
        /*}*/
    /*    把同级别中第2个p标签设置成红色*/

        /*p:nth-last-child(2){*/
        /*    color: blue;*/
        /*}*/
    /*    把同级别中倒数第2个p标签设置成蓝色*/


        /*p:only-child{*/
        /*    color:red;*/
        /*}*/
    /*    给段落2改颜色*/

    /*    p:nth-child(odd){*/
    /*        color:blue;*/
    /*    }*/
    /*!*把奇数标签的内容改成蓝色*!*/

    /*    p:nth-child(even){*/
    /*        color:red;*/
    /*    }*/
    /*    把偶数标签的内容改成红色*/

       p:nth-child(2n+3){
           color: purple;
       }
        /*有7个p标签 所以n＝7 当n＝0时 括号里面的值等于3 所以第3个p标签的内容改为紫色 当n＝1时 括号里面的值等于5
        所以第5个p标签的内容改为紫色 当n＝3时 括号里面的值等于9 所以第9个p标签的内容改为紫色
        */
    </style>
</head>
<body>
<!--<p>我是段落1</p>-->
<!--<p>我是段落2</p>-->
<!--<div>-->
<!--    <p>我是段落3</p>-->
<!--    <p>我是段落4</p>-->
<!--    <p>我是段落5</p>-->
<!--</div>-->

<!--<p>我是段落1</p>     要不要这句都无所谓-->
<!--<div>-->
<!--    <p>我是段落2</p>-->
<!--</div>-->

<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

同类型的第几个：
（1）first-of-type选中同级别中同类型的第一个标签
（2）last-of-type选中同级别中同类型的最后一个标签
（3）nth-of-type（m）{
属性:值;} 选中同级别中同类型的第m个标签
（4）nth-last-of-type(m){
属性:值;}选中同级别中同类型的倒数第m个标签
（5）only-of-type{
属性:值;}选中父元素中唯一的元素
（6）nth-of-type(odd/even）{
属性:值;}选中同类型的某个标签的奇数/偶数标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序选择器2</title>
    <style>
        /*p:first-of-type{    !*取出同级别中的同类型p的第一个*!*/
            /*color:red;
        }*/

        /*p:last-of-type{*/
        /*    color: blue;*/
        /*}*/

        /*p:nth-of-type(2){*/
        /*    color: skyblue;*/
        /*}*/

        /*p:nth-last-of-type(2){*/
        /*    color: purple;*/
        /*}*/

        /*p:only-of-type{*/
        /*    color:red;*/
        /*}*/
    /*    给段落一和段落二改颜色 段落一是body标签（段落一的父元素）中的唯一p元素
          段落二是div标签（段落二的父元素）中的唯一p元素 所以他们两个都要选中
    */

        p:nth-of-type(odd){
            color:red;
        }
    /*    把所有同类型的标签p的奇数/偶数改成红色*/
    </style>
</head>
<body>
<!--<a href="#">我是超链接</a>-->
<!--<p>我是段落1</p>-->
<!--<p>我是段落2</p>-->
<!--<div>-->
<!--    <p>我是段落3</p>-->
<!--    <p>我是段落4</p>-->
<!--    <p>我是段落5</p>-->
<!--</div>-->

<!--<p>我是段落1</p>-->
<!--<div>-->
<!--    <p>我是段落2</p>-->
<!--    <h1>我是标题</h1>-->
<!--</div>-->

<p>我是标题</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是标题</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是标题</p>
<p>我是段落</p>
<p>我是标题</p>
</body>
</html>

属性选择器

属性选择器：根据指定的属性名称找到对应的标签然后设置属性
格式：
①[attribute] 的作用：根据指定的属性名称找到对应的标签然后设置属性
② [attribute=value]的作用：找到有指定属性并且属性的取值等于value的标签然后设置属性常用于区分input属性
属性的取值是以什么开头的：
[attribute|=value] CSS2
[attribute^=value] CSS3
区别：前者只能找到value开头并且value是被-和其他内容隔开的（只能找到“value-”开头的）后者只要是以value开头的都可以找到无论有没有被-隔开
属性的取值是以什么结尾的：
[attribute$=value] CSS3
只掌握CSS3 了解CSS2
属性的取值是否包含某个特定的值：
[attribute~=value] CSS2
[attribute*=value] CSS3
区别：前者只能找到独立的单词即包含value 而且value是被空格隔开的（只能找到“value ”）后者只要是以value开头的都可以找到无论有没有被隔开

通配符选择器

什么是通配符选择器：给当前界面中所有标签设置属性
格式：

*{属性：值;}

注意点：由于通配符选择器是设置界面上所有的标签的属性所以在设置之前会遍历所有的标签如果当前界面上的标签比较多
那么性能就会比较差所以在企业开发中一般不使用通配符选择器

a标签伪类选择器

我们发现a标签有一定的状态：
①默认状态从未被访问过
②被访问过的状态
③鼠标长按状态
④鼠标悬停在a标签上的状态
a标签的伪类选择器：专门用来修改a标签不同状态的样式的
格式：
a：link{};：修改从未被访问过状态下的样式
a：visited{};：修改被访问过的状态下的样式
a：active{};：修改鼠标长按状态下的样式
a：hover{};：修改鼠标悬停在a标签的上的状态的样式
注意：
①a标签的伪类选择器可以单独出现也可以一起出现
②如果一起出现就有严格的顺序要求：先编写link 再编写visited 再编写hover 再编写active 否则可能无效记住爱恨原则 love hate 即 lvha
③如果默认状态的样式和被访问过状态的样式一样那么可以缩写：
a{};
后面再写a：hover{};或者其他
④在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
⑤在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽度/高度/padding/margin）
⑥在企业开发中和a标签文字/背景相关的都写在伪类选择器中
⑦hover这个伪类选择器除了可以用在a标签上还可以用在其他的任何标签上

伪类选择器

伪类选择器：专门用来修改特定状态下的特定元素的样式的
伪类就是开头为冒号的关键字
伪类选择器：

:last-child
:only-child
:hover
:focus

伪元素选择器

伪元素选择器的作用：给指定标签的内容的前面/后面添加一个子元素用于创建一些不在DOM树中的元素，并为其添加样式。
格式：
（1）给指定标签的内容的前面添加一个子元素

标签名称::before{
	属性名称：值;
}

（2）给指定标签的内容的后面添加一个子元素

标签名称::after{
	属性名称：值;
}

伪元素开头为双冒号::
以后看到水平导航条要想到用ul和li再加浮动做出来
想要多个盒子顶部对齐最简单的方法就是设置多个盒子同时浮动

::first-line
::first-letter

CSS三大特性

继承性

继承性：给父元素设置一些属性子元素也可以使用
注意：
①并不是所有的属性都可以继承只有以color/font/text/line开头的属性才可以继承
②在CSS的继承中不仅仅是儿子可以继承只要是后代都可以继承
③CSS继承性中的特殊性：
a.a标签的文字颜色和下划线是不能通过继承来更改的
b.h标签的文字大小是不能通过继承的来更改的只能直接单独设置h标签的文字大小
应用场景：一般用于设置网页上的一些共性信息例如：网页的文字颜色字体文字大小等内容

层叠性

层叠性：CSS处理冲突的能力
注意点：层叠性只有在多个选择器选中"同一个标签"然后又设置了"相同的属性"才会发生层叠性
CSS全称：cascading styleSheet

优先级

优先级的作用：当多个选择器选中同一个标签并且给同一个标签设置相同的属性时如何层叠就由优先级来确定
优先级判断的三种方式：
①是否是直接选中（间接选中就是继承）：如果是间接选中那么谁离目标标签比较近就听谁的
直接选中：通过id class p标签通配符选中的都是
例如：

<ul>
	<li>
		<p id="identity" class="para">我是段落</p>
	</li>
</ul>

若ul li都设置了某个属性但是他们的取值不一样由于li离p最近所以p的属性收li的影响
②是否是相同选择器选中的：如果都是直接选中并且是同一个选择器那么就是谁写在后面就听谁的例如：在样式中：

p{
	color:blue;
}
p{
	color:red;
}

那么p变成红色
③不同选择器选中：如果不是相同类型的选择器那么就会按照选择器的优先级来层叠：important>内联>id>类/属性选择器/伪类>标签>通配符>继承>浏览器默认

important标签

什么是important：用于提升某个直接选中标签的选择器中的某个属性的优先级可以将被指定的属性的优先级提升为最高
注意点：
①important只能用于直接选中不能用于间接选中
②important只能提升被指定22的属性的优先级其他的属性的优先级不会被提升
③important只能写到属性值分号; 前面
④important前面的！不能省略color:red!important;

权重问题

权重的作用：当多个选择器混合在一起使用时我们可以通过计算权重来判断谁的优先级最高
权重的计算规则：
①先计算选择器中有多少个id id多的选择器优先级最高
②如果id的个数一样那么再看类名的个数类名个数多的优先级最高
③如果类名的个数一样那么再看标签名称的个数标签名称个数多的优先级最高
④如果id个数一样类名个数也一样标签名称个数也一样那么就不会继续往下计算了此时谁写在后面听谁的即如果优先级一样那么谁写在后面就听谁的
注意：只有选择器是直接选中标签的才需要计算权重否则一定会听直接选中的选择器的

div和span标签

div的作用：一般用于配合CSS完成网页的基本布局
span的作用：用于配合CSS修改网页中一些局部信息
div和span的区别：
①前者会单独占领一行后者不会单独占领一行
②div是一个容器级的标签而span是一个文本级的标签
容器级标签和文本级标签的区别：容器级标签可以嵌套其他所有的标签文本级的标签只能嵌套文字/超链接/图片
容器级标签：div h ul ol dl li dt dd
文本级标签：span p buis stong em ins del
注意：哪些标签是文本级的哪些标签是容器级的不用刻意去记在企业开发中一般要嵌套都是嵌套在div中或者按照组标签进行嵌套

css元素显示模式（display）

HTML将所有的标签分为两类分别是容器级和文本级 CSS将所有标签分为两类分别是块级元素和行内元素
块级元素：会独占一行所有的容器级标签都是块级元素 p也是块级元素如果没有设置宽度那么就会和父元素一样宽如果设置了宽度那么就按照设置的来显示 width和height都起作用内外边距、边框会将其他元素从当前盒子周围推开
行内元素：不会独占一行除了p之外的所有文本级标签如果没有设置宽度那么默认和内容一样宽行内元素不能程序员自己设置宽度和高度 width和height都不起作用垂直方向上内外边距、边框会起作用但不会把其他处于行内状态的盒子推开，水平方向上内外边距、边框会起作用但会把其他处于行内状态的盒子推开
行内块级元素：为了能够让元素既能够不独占一行又可以设置宽度和高度那么就出现了行内块级元素例如：img标签
块级元素：div h ul ol dl li dt dd p h1-h6
行内元素：span buis stong em ins del
如何转换CSS元素显示模式：设置元素的display属性
display取值：
block：转换为块级元素
inline：转换为行内元素
inline-block：转换为行内块级元素

BFC盒模型

BFC：可以理解为一个封闭的大箱子箱子内部的元素无论如何翻江倒海都不会影响到外部
如何让一个盒子成为BFC？如何触发BFC模式？
（1）你是根元素或者你是包含根元素的元素
（2）元素的float属性不为none 是left或right
（3）position为absolute或fixed
（4）display为inline-block table-cell table-caption flex inline-flex
（5）overflow除visible以外的值如hidden auto scroll
BFC规则：
（1）内部的box会在垂直方向上一个接一个的放置
（2）box垂直方向上的距离由margin决定属于同一个BFC的两个相邻的BOX的margin会发生重叠（margin重叠原因：上下两个盒子之间会取margin最大的值作为最终margin的值给其中一个盒子设为BFC即可解决）
（3）BFC的区域不会与float box重叠：BFC的内容不会与外面浮动元素重叠
（4）父盒子中有个子元素父盒子没有设置高度子元素有高度如果子元素设置了浮动那么会导致盒子溢出如何解决：给父盒子设置BFC
（5）计算BFC的高度时浮动元素也参与计算
BFC应用：
（1）清除内部浮动当子元素均浮动时无法撑开父元素可以让父元素生成BFC
（2）防止margin重叠：在发生margin重叠的元素外包裹一个BFC父元素
消除浮动：给父元素设置overflow本质上时让父元素触发BFC模式

盒子模型

什么是CSS盒子模型： CSS盒子模型仅仅是一个形象的比喻 HTML中所有的标签都是盒子
结论：
①在HTML中所有的标签都可以设置高度/宽度(指定可以存放内容的区域) 内边距边框外边距
②开发者工具下面有一个框最里面那个蓝色的用来查看宽度高度绿色用来查看内边距浅黄色用来查看边框黄色用来查看外边距将现实生活中的盒子和HTML的盒子模型比较发现CSS盒子模型仅仅是一个形象的比喻 HTML中所有的标签都是盒子
盒子模型中内容的宽度和高度：通过标签的width/height属性设置的宽度和高度
盒子模型中元素的宽度和高度：
宽度＝左边框＋左内边框＋width＋右内边框＋右边框
高度=同宽度的计算方法
盒子模型中元素空间的宽度和高度
宽度= 左外边距＋左边框＋左内边框＋width＋右内边框＋右边框＋右外边距
增加了padding之后元素的宽高也会发生变化如果增加了padding之后还想保持元素的宽高那么就必须减去内容的宽高
增加了border之后元素的宽高也会发生变化如果增加了border之后还想保持元素的宽高那么就必须减去内容的宽高
两种盒模型：
（1）W3C的标准盒模型：width=content的宽度

（2）在IE盒子模型：width=content+padding+border三个部分的宽度

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

需求：有一个大盒子元素宽高是500 有一个小盒子元素宽高是200 需求将小盒子放到大盒子中并且让小盒子在大盒子中水平垂直居中：
（1）如果两个盒子是嵌套关系那么设置了里面一个盒子顶部的外边距外面一个盒子也会被顶下来
（2）如果外面的盒子不想被一起顶下来那么可以给外面的盒子添加一个边框属性
（3）在企业开发中一般情况下如果需要控制嵌套关系盒子之间的距离首先考虑padding 其次再考虑margin 因为margin本质上是用于控制兄弟关系之间的间隙的
（4）在嵌套关系的盒子中我们可以利用margin：0 auto;的方式来让里面的盒子在外面的盒子中水平居中
（5）margin：0 auto;只对水平方向有效对垂直方向无效可以更改0的值来更改里面的盒子到外面的盒子的垂直距离
text-align:center;和margin:0 auto;的区别:
text-align:center;的作用：设置盒子中存储的文字/图片水平居中
margin:0 auto;的作用：让盒子自己水平居中

内边距属性padding

内边距padding：边框和内容的距离
格式：
①非连写
padding-top::
padding-right::
padding-bottom::
padding-left::
②连写
padding:上右下左 ;
注意点：
①连写时省略时的规律：
上右下左→上右下：左边的取值和右边一样
上右下左→上右：左边的取值和右边一样上边的取值和下边一样
上右下左→上：右下左取值和上边一样
②给标签设置内边距之后标签占有的宽度和与高度会发生变化
③内边距也会有背景颜色
④增加了padding后元素的宽高也会发生变化
⑤如果增加了padding之后还想保持元素的宽高那么就必须减去内容的宽高

外边距margin

外边距margin：标签与标签之间的距离
格式：
①非连写：
margin-top:
margin-right:
margin-left:
margin-bottom:
②连写：
margin：上右下左

例如：

<body>
	<span class="box1">我是span</span>
	<span class="box1">我是span</span>
	<span class="box1">我是span</span>
</body>
<style>
	span{
		display：inline-block;
		width:100px;
		height：100px;
		border：1px solid #000;
	}
</style>

用浏览器打开后观察再把代码改为：

<body>
	<span class="box1">我是span</span><span class="box1">我是span</span><span class="box1">我是span</span>
</body>

用浏览器打开后观察对比之后发现 HTML把回车当成空格显示了

注意点：外边距的那部分没有背景颜色
margin重叠：在默认布局的垂直方向上默认情况下外边距是不会叠加的会出现合并现象谁的外边距比较大就听谁的

清空默认边距

为什么要清空默认边距（内边距和外边距）：在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等所以在企业开发中编写代码之前第一件事情就是清空默认的边距
如何清空默认边距：

<style>
*{
	margin:0;
	padding:0;
}
</style>

注意点：通配符选择器会找到（遍历）当前界面中所有的标签所以性能不好所以用以下方法：

<style>
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,field,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
</style>

行高：在CSS中所有的行都有自己的行高
注意：
①行高和盒子的高不是一个概念行高是一行文字的高度盒子的高是div标签的高
②文字在行高中默认是垂直居中的文字在盒子中的高度不是垂直居中的在企业开发中我们经常将盒子的高度和行高设置为一样那么这样就可以保证一行文字在盒子的高度是垂直居中的简而言之要想一行文字在盒子中垂直居中那么只需要设置这行文字的行高等于盒子的高即可
③在企业开发中如果一个盒子中有多行文字那么就不能使用设置行高等于盒子的高度来实现让文字垂直居中只能通过设置padding来让文字居中
设置行高格式：line-height:10px;//单位是px
在某一个软件里打开一张图片然后点击窗口右边的T 输入图片中每行开头的文字用回车隔开每行之间的文字然后通过改变窗口下方的参数当输入的文字和图片中的文字完全重合在一起时该字体大小行高即所得
用软件里的切片工具选择左边框到左边第一个文字的距离则会在窗口下方出现距离这就是内边距的距离一般左右内边距以左边为准右边会有误差上下内边距一般以顶面的内边距为准由于每一行文字都有行高所以顶部内边距并不是边框到文字顶部的距离而是边框到行高顶部的距离可以让上边框到文字的距离减去行高的距离即顶部内边距的距离
右边内边距的误差从何而来：因为右边如果放不下一个文字那么文字就会换行显示所以文字和内边距之间的距离就有误差

边框属性

什么是边框：环绕在标签宽度和高度周围的线条
边框属性的格式：
①连写（同时设置四条边的边框）：
border:边框宽度边框样式边框颜色;
注意：
a.颜色属性可以省略省略之后默认是黑色
b.样式属性不能省略省略之后就看不到边框了
c.宽度可以省略省略之后还是可以看到边框
连写（分别设置四条边的边框）：
border-top:边框宽度边框样式边框颜色;
border-right:边框宽度边框样式边框颜色;
border-bottom:边框宽度边框样式边框颜色;
border-left:边框宽度边框样式边框颜色;
边框样式：连写（分别设置四条边的边框）：
border-width：上右下左;
border-style：上右下左;
border-color：上右下左;
注意：
a.这三个属性的取值是按照顺时针来赋值的也就是按照上右下左来赋值的而不是按照日常生活中的上下左右
b.这三个属性的取值省略时的规律：
上右下左→上右下：左边的取值和右边一样
上右下左→上右：左边的取值和右边一样上边的取值和下边一样
上右下左→上：右下左取值和上边一样
非连写（方向＋要素）：
border-top-width:
border-top-style:
border-top-color:#000;
border-right-width:
border-right-style:
border-right-color:#000;
border-bottom-width:
border-bottom-style:
border-bottom-color:#000;
border-left-width:
border-left-style:
border-left-color:#000
小技巧：
①可以先设置整体再设置局部根据层叠性同一个选择器后面的边框属性会覆盖前面的边框属性
②border-bottom:none;//不要底部边框以后不想要哪条边框也可以这样设置 none就代表不需要边框

网页布局方式

网页布局方式：浏览器是如何对网页中的元素进行排版的
标准流（文档流/普通流）排版方式
（1）浏览器默认排版方式
（2）在CSS中将元素分为三类分别是块级元素/行内元素/行内块级元素
（3）在标准流中有两种排版方式：一种是垂直排版一种是水平排版块级元素采用垂直排版行内元素/行内块级元素采用水平排版
浮动流排版方式
（1）浮动流是一种“半脱离标准流”的排版方式
（2）浮动流只有一种排版方式就是水平排版他只能设置某个元素左对齐或者右对齐
（3）浮动流中没有居中对齐也就没有center这个取值因此在浮动流中不可以使用margin:0 auto;
（4）取值：
float:left;//与所在标签的父元素的最左端对齐
float:right;//与所在标签的父元素的最右端对齐
float:none;//不左对齐也不右对齐
（5）在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是块级元素/行内元素/行内块级元素都可以水平排版都可以设置宽高
（6）综上：浮动流中的元素和标准流中的行内块级元素很像
浮动元素的脱标
脱标：脱离标准流
当某一个元素浮动之后（从标准流变为浮动流）那么这个元素看上去就像被标准流中删除了一样
浮动元素脱标之后会有什么影响：如果前面一个元素浮动了而后面一个元素没有浮动那么这个时候前面的一个元素就会盖住后面的一个元素
浮动元素排序规则：
（1）相同方向上的浮动元素先浮动的元素会显示在前面后浮动的元素会显示在后面左浮动的话最左边是最前面右浮动的话最右边是最前面
（2）不同方向上的浮动元素左浮动会找左浮动右浮动会找右浮动
（3）浮动元素浮动之后的位置由浮动元素浮动之前在标准流中的位置来决定浮动之前在第二行浮动之后也在第二行哪怕浮动的第一行超级小他也必须在第二行
浮动元素贴靠现象：当父元素的宽度足够放下所有浮动元素时所有浮动元素就会并列显示当父元素的宽度不够放下所有浮动元素时放不下的浮动元素会从最后一个开始往前贴不停往前贴直到贴到父元素的最左边为止
浮动元素字围现象：两个同级别的标签前面一个浮动后面一个没有浮动前面浮动的那个就会位于后面没浮动的那个的上面如果后面没浮动的那个标签里面有文字那么前面浮动的标签不会盖住字而字会围绕前面浮动的标签
字围现象：浮动元素不会盖住没有浮动元素的文字
在企业开发中垂直方向上使用标准流水平方向上使用浮动流
拿到一个很复杂的界面如何入手：
（1）从上至下布局
（2）从外向内布局
（3）水平方向可以先划分为一左一右再对左边或者右边进行进一步布局
在标准流中内容的高度可以撑起父元素的高度
在浮动流中浮动的元素是不可以撑起父元素的高度的
定位流排版方式

清除浮动方式

清除浮动方式一：给前面一个父元素设置高度在企业开发中我们能不写高度就不写高度所以这种方式用的很少
清楚浮动方式二：给父级盒子添加clear属性

clear：

none:默认取值按照浮动元素的排序规则来排序左浮动找左浮动右浮动找右浮动
left:不要找前面的左浮动元素
right:不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素

注意点：当我们给某个元素添加clear属性后该元素的margin属性会失效
为什么margin属性会失效：box1中的p全部左浮动后由于div没有高度所以div没法被顶起来所以box2会位于顶部如果给box2设置了margin-top属性由于box2前面没有任何元素所以box2的margin-top是相对于父元素（body）margin-top 在这种情况下如果父元素没有border属性会和box2一起被顶下来假设给父元素设置了边框如果margin-top的值小于box1中p的高度在视觉上依旧没有margin-top的效果因为margin-top的那段距离被浮动的box1中的p挡住了所以必须要求margin-top的值大于box1中p的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>91-清除浮动方式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        p{
            float: left;
        }

        .box1{
            background-color: red;
            /*清除浮动方式一：给前面一个父元素设置高度*/
            /*height: 20px;*/
        }

        .box2{
            background-color: green;
            /*3清楚浮动方式二：给后面的盒子添加clear属性*/
            clear: both;
            margin-top: 20px;/*无效*/
        }

        .box1 p{
            width: 100px;
            background-color: blue;
        }

        .box2 p{
            width: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
	<!--div.box1>p{我是文字}*3-->
	<div class="box1">
    	<p>我是文字1</p>
    	<p>我是文字1</p>
    	<p>我是文字1</p>
	</div>
	<div class="box2">
    	<p>我是文字2</p>
    	<p>我是文字2</p>
    	<p>我是文字2</p>
	</div>
</body>
</html>

清除浮动方式三-隔墙法：在企业开发中不常用隔墙法来清除浮动
（1）外墙法
先在两个盒子中间添加一个额外的块级元素然后给这个额外添加的块级元素设置clear:both;属性
注意：外墙法可以让第二个盒子使用margin-top属性但是不可以让第一个盒子使用margin-bottom属性可以直接设置额外添加的块级元素的高度
（2）内墙法
在第一个盒子中所有子元素的最后添加一个额外的块级元素给这个额外添加的块级元素设置clear：both;属性
注意：内墙法可以让第二个盒子使用margin-top属性也可以让第一个盒子使用margin-bottom属性
（3）外墙法和内墙法的区别：外墙法不能撑起第一个盒子的高度而内墙法可以撑起第一个盒子的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>92-清除浮动方式3</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        p{
            float: left;
        }

        .box1{
            background-color: red;
            /*不可以让第一个盒子使用margin-bottom属性*/
            /*margin-bottom: 10px;*/
        }

        .box2{
            background-color: green;
            /*margin-top: 10px;*/
        }

        .box1 p{
            width: 100px;
            background-color: blue;
        }

        .box2 p{
            width: 100px;
            background-color: yellow;
        }

        .wall{
            clear: both;
        }

        #h{
            /*一般不设置第一个盒子的margin-bottom属性 也不给第二个盒子使用margin-top属性 而是设置额外添加的块级元素的高度*/
            height: 20px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
<!--    内墙法：-->
    <div class="wall"></div>
</div>
<!--外墙法：-->
<!--<div class="wall" id="h"></div>-->
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>

清除浮动方式四：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>94-清除浮动方式4</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        p{
            float: left;
        }

        .box1{
            background-color: red;
        }

        .box2{
            background-color: green;
        }

        .box1 p{
            width: 100px;
            background-color: blue;
        }

        .box2 p{
            width: 100px;
            background-color: yellow;
        }

        .box1::after{
            /*设置添加的子元素的内容为空*/
            content: '';
            /*设置添加的子元素为块级元素*/
            display: block;
            /*设置添加的子元素的高度为0*/
            height: 0;
            /*设置添加的子元素看不见*/
            visibility: hidden;
            /*给添加的子元素设置clear: both;属性*/
            clear: both;
        }

        /*这个方法在IE6浏览器上没有效果 因为这个方法的兼容性低 添加上以下代码可以兼容IE6*/
        .box1{
            *zoom:1;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>

清除浮动方式五
（1）overflow:hidden;作用：①可以将超出标签范围的内容裁剪掉②清除浮动③可以给第一个盒子设置overflow:hidden;使第二个盒子设置了margin-top之后第一个盒子不被顶下来
（2）如何清除浮动：在style标签中给父级元素设置overflow:hidden; 也就是第一个盒子box1写如下代码：

.box1{
	overflow:hidden;
	*zoom:1;
} //这个方法也要写上这行代码才能兼容IE6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>95-清除浮动方式5</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        /*以下代码展示overflow的作用*/
        /*div{*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    background-color: red;*/
        /*    !*overflow:hidden;*! 可以把这行代码注释/不注释观察区别*/
        /*}*/

        p{
            float: left;
        }

        .box1{
            background-color: red;
            overflow:hidden;
        }

        .box2{
            background-color: green;
        }

        .box1 p{
            width: 100px;
            background-color: blue;
        }

        .box2 p{
            width: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--以下代码展示overflow的作用-->
<!--<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>-->

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>

flex弹性布局

弹性盒子：一种用于按行或按列布局元素的一维布局方法元素可以膨胀以填充额外的空间收缩以适应更小的空间

在flexbox布局中，flex属性是用来控制项目的伸缩性的。它是一个复合属性，包含了flex-grow、flex-shrink和flex-basis这三个子属性，语法格式为：flex: <flex-grow> <flex-shrink> <flex-basis>;

flex-grow：指定项目在剩余空间中所占据的比例，默认值为0，表示项目不会伸展。当设置为正数时，表示该项可以扩展的比例，相对于其他Flex项的比例。
flex-shrink：指定项目在空间不足时的收缩比例，默认值为1，表示项目会按比例收缩。当设置为0时，该项不会收缩。
flex-basis：指定项目在未伸展或收缩时的初始大小，默认值为auto，表示项目的大小由其内容决定。

当我们将一个项目的flex属性设置为1时，会使该项目尽可能地占据父容器中的剩余空间，但不会影响到其他项目：

flex: 1; /* 等同于 flex: 1 1 0%; */

flex-grow 设置为 1，表示该项可以在父容器内扩展，占据所有可用的额外空间。
flex-shrink 设置为 1，表示该项可以在空间不足时收缩，以避免溢出。
flex-basis 设置为 0%，表示项目在分配额外空间之前不占用空间，会自动填充所有可用空间。

示例：假设我们有一个导航栏，其中包含了若干个链接。我们希望这些链接能够水平排列，并且在导航栏宽度发生变化时能够自动调整大小，保持平均分配。

<nav class="navbar">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>

.navbar {
  display: flex;
}

.navbar a {
  flex: 1;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
}

无论导航栏的宽度是多少，链接都会自动调整大小，以适应父容器的空间。

扩展：

flex: 0：则意味着子元素不会自动填充剩余空间，而是根据其内容或固定尺寸进行布局。
flex: none：则表示子元素不可伸缩，其大小仅受到flex-basis的限制，不会根据剩余空间自动调整大小。

定位流（position）

定位流的分类

相对定位：相对于自己以前在标准流中的位置来移动
（1）格式：position:relative;
（2）注意：
①相对定位不脱离标准流会继续在标准流中占用一份空间
②要配合top:; right:; left:; right:;来使用指定了上述四个的位置他就会相对以前的位置进行上下左右的移动但是由于上下在同一直线上左右是同一直线上所以上下只能定义一个左右也只能定义一个
③因为相对是不脱离标准流的所以在相对定位中区分块级元素行内块级元素行内元素
④因为相对是不脱离标准流的并且相对定位的元素会占用标准流中的位置所以当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局也就是说你给相对定位的元素设置margin/padding是设置给他移动前最开始的那个位置而不是移动后/相对定位后的位置设置的
（3）相对定位的应用场景：
①用于对元素进行微调如果想让多个盒子对齐可以使用相对定位对盒子进行微调
②配合后面学习的绝对定位来使用
（4）相对定位弊端：相对定位不会脱离标准流会继续在标准流中占用一份空间所以不利于布局界面
绝对定位：相对于非static定位的父容器进行定位如果没有则相对于body来定位
（1）格式：position:absolute;
要配合top:;right:;left:;right:;来使用
（2）注意：
①绝对定位的元素是脱离标准流 flex布局的
②绝对定位的元素不区分块级元素行内元素行内块级元素
③如果一个绝对定位的元素以body作为参考点其实是以网页首屏（第一次看到网页的页面）的宽度和高度作为参考点而不是以整个网页的宽度和高度作为参考点
④一个绝对定位的元素会忽略祖先元素的padding
（3）绝对定位参考点问题：
①默认情况下所有绝对定位元素无论有没有祖先元素（父级元素爷爷级元素爷爷的爸爸级元素…）都会以body作为参考点
②如果一个绝对定位的元素有祖先元素并且祖先元素也是定位流那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
例如：盒子2嵌套在盒子1中如果盒子1设置了除静态定位外的别的定位流（相对绝对固定）盒子2设置了绝对定位（假设设置的是定位到左下方）那么盒子2就会移动到盒子1的左下角而不是body的左下角
③如果一个绝对定位的元素有祖先元素并且祖先元素也是定位流而且祖先元素中有多个元素都是定位流那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素为参考点
（4）应用场景
“子绝父相”可以避免绝对定位和相对定位的弊端
以后你看到一张图片位于另外一张图片上面要想到定位流想到子绝父相
（5）绝对定位弊端：
默认情况下绝对定位的元素会以body作为参考点所以会随着浏览器的宽度高度的变化而变化
（6）如何让绝对定位元素的水平居中：
只需要设置绝对定位元素的left:50%;//永远保持占浏览器窗口的50%
然后再设置绝对定位元素的margin-left:-（元素宽度的一半）px;
固定定位：相对于浏览器窗口的位置进行偏移
（1）格式：position:fixed;
要配合top:;right:;left:;right:;来使用
（2）注意：
①固定定位的元素是脱离标准流的不会占用标准流中的空间
②固定定位和绝对定位一样不区分块级元素行内元素行内块级元素
③固定定位的元素不会随着滚动条的滚动而滚动
④IE6不支持固定定位
静态定位 static：一个元素默认的就是静态定位
sticky：在目标区域内随着页面的滚动而保持在固定位置，超出这个区域后就随着目标区域滚动。sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。

定位流的z-index属性

什么是z-index属性：默认情况下所有的元素都有一个默认的z-index属性取值是0
z-index属性的作用：专门用于控制定位流元素的覆盖关系
默认情况下定位流的元素会盖住标准流的元素
默认情况下定位流的元素后面编写的会盖住前面编写的
如果定位流的元素设置了z-index属性那么谁的z-index属性比较大谁就是显示在上面
注意：从父现象：如果两个元素的父元素都没有设置z-index属性那么谁的z-index属性比较大谁就显示在上面如果两个元素的父元素设置了z-index属性那么子元素的z-index属性就会失效也就是说谁的父元素的z-index属性比较大谁就会显示在上面

过度模块 2D 3D

过度模块

过度三要素
①必须要有属性发生变化
②必须告诉系统哪个属性需要执行过度效果：transition-property:width;
如果有多个属性都需要执行过度效果用逗号隔开：transition-property:width,background-color;
③必须告诉系统过度效果持续时长此处设置为5秒：transition-duration:5s;
可以设置另外一个过度效果持续时长用逗号隔开：transition-duration:5s,5s;
告诉系统过多久才开始执行过度：transition-delay:2s;
告诉系统过度动画的运动的速度：transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out;
过度连写格式：transition：过度属性过度时长运动速度延迟时间;
两个属性都要执行过度连写格式：（用逗号隔开）：transition：过度属性1 过度时长运动速度延迟时间，过度属性2 过度时长运动速度延迟时间;
连写的时候可以省略后面两个参数因为只要编写了前面两个参数就已经满足了过度三要素
如果多个属性运动速度/延迟的时间/持续时间都一样那么可以简写为：transition:all xs;//x为具体秒
编写过度套路：
①不要管过度先编写基本界面
②修改我们认为需要修改的属性
③再回过头去给被修改属性的那个元素添加过度即可
谁更具体谁的优先级最高

2D转换模块

2d转换模式

旋转多少度：transform:rotate(45deg);
deg是单位代表多少度
平移多少px：transform:translate(100px,0px);
第一个参数代表水平方向平移的距离
第二个参数代表垂直方向平移的距离
负数代表左移/下移正数代表右移/上移
缩放：transform:scale(1，1.5）;
第一个参数代表水平方向缩放的大小
第二个参数代表垂直方向缩放的大小
如果取值是1 代表不变
如果取值大于1 代表需要放大
如果取值小于1 代表需要缩小
如果水平和垂直取值都一样则可以缩写为一个值即transform:scale(1.5)就是transform:scale(1.5，1.5)
如果需要多个转换需要用空格隔开
2d转换模块会修改元素的坐标系所以旋转之后再平移就不是水平平移的旋转时坐标系也跟着旋转

2d转换模块-形变中心点

默认情况下所有的元素都是以自己的中心点作为参考来旋转的我们可以通过形变中心点属性来修改他的参考点
更改中心点格式：transform-origin:0px 0px;//以自身图片左上角为中心点
注意：
①第一个参数：水平方向第二个参数：垂直方向
②取值有三种方式：具体像素百分比

transform-origin:50% 50%;//以自身中心为中心点
transform-origin:0% 0%;//以自身图片左上角为中心点

③有一些特殊关键字：

transform-origin:center center;//以自身中心为中心点
transform-origin:left top;//以自身左上角为中心点

2d转换模块-旋转轴向

我们生活的世界有xyz轴默认情况下所有元素都是围绕z轴旋转
如果想要元素围绕y轴旋转：transform:rotateY(45deg);
如果想要元素围绕x轴旋转

transform:rotateX(45deg);

2d转换模块-透视属性

透视：近大远小
格式：perspective:mpx;// m是个数字表明观看透视效果的距离数字越大距离越远效果越不明显数字越小距离越近效果越明显
注意：透视属性必须添加到需要呈现近大远小效果的元素的父元素（也可以添加到祖先元素上但是建议添加到父元素上）上面

动画模块

过度和动画之间的异同：
不同：过度必须人为的触发才会执行动画动画不需要人为的触发就可以执行动画
同：过度和动画都需要满足三要素才会有动画效果
动画三要素：
①告诉系统需要执行哪个动画：animation-name:lnj;
②告诉系统我们需要自己创建一个名称叫做lnj的动画：

@keyframes lnj{
	from{}
	to{}
}
// 如果动画有很多个样式 要指定多个from to 百分号前面的数字依次递增就可以了
@keyframes lnj{
	1%{}
	2%{}
	3%{}
}

③告诉系统动画持续的时长：animation-duration:xs;//x表示具体数字持续时长
④告诉系统动画执行的速度：animation-timing-function:linear;
⑤告诉系统动画执行的次数：animation-iteration-count:infinite/具体数字（次数）;
⑥告诉系统动画是否往返执行

animation-direction:normal;//不往返执行 第二次仍然从起点开始执行 默认取值
animation-direction:alternate;//往返执行 第二次从终点开始执行回来

如果设置的是往返执行那么从起点到终点算一次从终点返回起点算一次一个来回算两次
⑦告诉系统动画是运动还是静止

animation-play-state:paused/running;
running:执行动画
paused:暂停动画

动画模块连写
格式：animation：动画名称动画时长动画运动速度延迟时间执行次数是否需要往返动画
可以只写前两个参数
⑧指定动画等待状态和结束状态的样式：animation-fill-mode:backwards/none/both/forwards;
none：不做任何改变
backwards：等待状态显示动画第一帧的样子
forwards：结束状态显示动画最后一帧的样子
both：等待状态小时动画第一帧的样子结束状态显示动画最后一帧的样子
注意：动画有一定的状态：等待状态执行状态结束状态

3D转换模块

什么是2d和3d：2d就是一个平面只有宽度和高度没有厚度 3d是一个立体有宽度和高度还有厚度默认情况下所有的元素都是2d展现
如何让某个元素呈3d展现：和透视一样想看到某个元素的3d效果只需要给他的父元素添加一个transform-style属性然后设置为preserve-3d即可
transform-style有两个取值一个是preserve-3d 一个是flat 这是2d模式即默认取值
会做正方体以后给正方体的每一个面设置scale属性然后在把两个侧面移动一下可以改成长方体
只要父元素被拉伸了子元素也会被拉伸
设置background-size:cover;就可以让背景图片永远铺满浏览器窗口
动画中如果有和默认样式中同名的属性会覆盖默认样式中同名的属性在编写动画时固定不变的值写在前面需要变化的值写在后面

背景

如何设置标签的背景颜色：在CSS中有一个background-color属性就是专门用来设置标签的背景颜色的
取值：具体单词/rgb/rgba/十六进制
如何设置背景图片：在CSS中有一个叫做background-image:url();属性就是专门用于设置背景图片的
注意：
①图片的地址必须放在url()的括号中图片的地址可以是本地的地址也可以是网络的地址
网络地址：在网上找到一张图片右击选择复制图片地址
②如果图片的大小没有标签的大小大那么会自动在水平和垂直方向平铺和填充
③如果网页上出现了图片那么浏览器就会再次发送请求获取图片
如何控制背景图片的平铺方式：在CSS中有一个background-repeat属性专门用于控制背景图片的平铺方式的
background-repeat取值：
repeat：默认在水平和垂直都需要平铺
no-repeat：在水平和垂直方向都不平铺
repeat-x：只在水平方向平铺
repeat-y：只在垂直方向平铺
应用场景：可以通过背景图片的平铺来降低图片的大小提升网页的访问速度
注意：同一个标签可以同时设置背景颜色和背景图片如果颜色和图片同时存在那么图片会覆盖颜色
如何控制背景图片的位置：在CSS中有一个叫做background-position属性（background-position:水平方向垂直方向）专门用于控制背景图片的位置
background-position取值：
①具体的方位名词：
水平方向：left center right
垂直方向：top center bottom
background-position:left bottom;
图片位于左下角
②具体的像素：例如：background-position:100px 200px;
注意：
①一定要写单位px 否则无效
②具体像素可以写负数负数表示向左移出范围
应用场景：在企业开发中可以用它来使图片始终居中显示无论是大分辨率还是小分辨率大窗口还是小窗口都能居中显示
背景属性缩写的格式：background：背景颜色背景图片平铺方式关联方式定位方式;
注意：任何一个属性都可以被省略
什么是关联方式：默认情况下背景图片会随着滚动条的滚动而滚动（消失）如果不想让背景图片随着滚动条的滚动而滚动那么我们就可以修改背景图片和滚动条的关联方式
如何修改背景关联方式：在CSS中有一个叫做background-attachment的属性这个属性就是专门用于修改关联方式的
格式：background-attachment:scroll
background-attachment取值：
scroll：默认值会随着滚动条的滚动而滚动
fixed：不会随着滚动条的滚动而滚动
背景图片和插入图片的区别：
①背景图片仅仅只是装饰不会占用位置插入图片会占用位置
②背景图片有定位属性可以控制图片位置插入图片没有定位属性控制图片的位置不太方便
③插入图片的语意比背景图片的语意强在企业开发中如果你的图片想被搜索引擎收录推荐使用插入图片

背景尺寸属性

什么是背景尺寸属性：专门用于设置背景图片大小
格式：background-size:;
取值：
①如果不设置background-size属性那么默认为图片大小即图片有多大就显示为多大
②具体像素如： background-size:200px 100px;第一个参数是宽度第二个参数是高度
③百分比如：background-size:60% 50%;背景图片的宽度是元素的60% 高度是元素的50%
④等比拉伸第一个参数是宽度第二个参数是高度想要宽度/高度等比拉伸就设置第一个/第二个的值为auto
⑤cover：图片需要等比拉伸并且拉伸到宽度和高度都填满元素如：background-size:cover;
⑥contain：图片需要等比拉伸并且拉伸到宽度/高度填满元素

背景图片定位区域属性

背景图片定位区域属性：告诉系统背景图片从什么区域开始显示
格式：background-origin:;
取值：
①padding-box：默认取值图片从padding（内边距）开始显示
②border-box：图片从border（边框）开始显示
③content-box：图片从content（内容）开始显示

背景颜色绘制区域属性

背景颜色绘制区域属性：专门用于指定从哪个区域开始绘制背景的
格式：background-clip:;
取值
①padding-box：背景颜色从padding（内边距）开始绘制
②border-box：默认情况背景颜色从border（边框）开始显示
③content-box：背景颜色从content（内容）开始显示

多重背景

多重背景图片
多张背景图片之间用逗号隔开
先添加的背景图片会盖住后添加的背景图片
写法一：

background:url("images/animal1.jpg") no-repeat left top,url("images/animal2.jpg") no-repeat right top,
url("images/animal3.jpg") no-repeat left bottom,url("images/animal4.jpg") no-repeat right bottom,
url("images/animal5.jpg") no-repeat lcenter center;

写法二：推荐

background-image:url("images/animal1.jpg"),url("images/animal2.jpg"),url("images/animal3.jpg"),url("images/animal4.jpg"),
url("images/animal5.jpg");
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:left top,right top,left bottom,right bottom,center center;

阴影（盒子阴影和文字阴影）

如何给盒子添加阴影：
box-shadow:水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影;
内外阴影如果写inset就是内阴影不写就是默认外阴影
注意：
①盒子的阴影分为内阴影和外阴影默认情况下是外阴影
②可以只写前三个参数阴影颜色默认情况下和盒子内的内容的字体颜色一样
如何给文字添加阴影：
text-shadow:水平偏移垂直偏移模糊度阴影颜色;
用法同盒子阴影
设置元素及元素中的内容的透明度

opacity:0;//透明 完全看不到
opacity:1;//不透明 最明显
可以写0-1之间的任何数字

CSS精灵图

CSS精灵图：是一种图像合成技术
作用：可以减少请求的次数降低服务器处理压力
如何使用CSS精灵图：配合背景图片和背景定位来使用
把所有要用的图片合成为一张大图片以这张大图片为背景图用某软件定位自己想要的小图片在大图片中的位置和大小
然后设置div大小为小图片的大小位置为负的小图片的坐标（x,y）

CSS书写格式

行内样式：可以直接将CSS代码写到开始标签当中例如：<div style="color:red">我是div</div>
内嵌样式：可以在一对head标签标签当中写上一对style标签然后在style标签中编写CSS代码
外链样式（企业开发中一般用这个）：Ctrl+alt+insert选择stylesheet 随便取一个名字假如这里取名叫：CSS书写格式
这样就单独新建了一个.CSS文件然后就可以在这个.CSS文件里写CSS代码然后在对应的.html文件中的head标签里输入link按下tab 自动出现<link rel="stylesheet" href=""> 在href中的""输入对应的.css文件名这里输入CSS书写格式
导入样式：Ctrl+alt+insert选择stylesheet 随便取一个名字假如这里取名叫：CSS书写格式这样就单独新建了一个.CSS文件
然后就可以在这个.CSS文件里写CSS代码然后在对应的.html文件中的head标签里的style标签中输入 @import"CSS书写格式";
外链样式和导入样式的区别：
①外链样式是通过link标签关联导入样式是通过@import关联而@import是CSS2.1推出的所以有兼容问题
②外链样式在显示界面的时候会先加载CSS样式再加载结构所以用户看到界面时一定已经设置了样式导入样式在显示界面的时候
会先加载结构再加载样式所以用户看到界面时不一定已经设置了样式

文字界面

如何做一个文字界面：

清空所有边框
从外向内从上至下的编写网页代码
清空默认样式

a{
	text-decoration:none;
}
ul,ol{
	list-style:none;
}

利用body设置整个界面的文字信息比如：文字大小文字字体文字颜色

CaraYQ

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS

列表中的标题1描述1列表中的标题2描述2......
复制链接

扫一扫

专栏目录