HTML与CSS学习笔记
HTML5
1.标签
简单的网页的基本结构
<html>
<head>
<title>我的网页<title/>
</head>
<body>
这是内容
<!-- 注释 应该简单明了
标签一般成对出现但也有一些自结束标签
<img>;自结束标签
<img/>;自结束标签
<input>;自结束标签
<input/>;自结束标签
-->
</body>
</html>;结束标签
说明：使用注释有点麻烦所以使用";"进行说明。
2.注释
<!-- -->
注释应该简单明了，且注释不能嵌套去写（浏览器编译代码时是按照从上向下的顺序）
<!--
<!-- -->
--> 看这里最后会显示出来
3.设置属性
<html>
<head>
<title>这是我的第三个网页</title>
</head>
<body>
<!--
标签属性：仅在开始标签和自结束标签中可设置
属性是一个名值对(x=y)
属性用来设置标签中的内容如何显示
属性和标签或其他属性用空格隔开
有的属性没有属性值
有属性值的，属性值根据规定编写，属性值用引号引起
关于设置字体、颜色及大小
-->
<h1><font color="red" size="5">不知名</font>的古诗</h1>
<h2>二级标题</h2>
<p>笑问客从何处来，这是内容</p>
<p>牧童遥指杏花村，这也是内容</p>
</body>
</html>
4.网页的基本结构
<!doctype html>
<html>
<!--通过mate标签来设置网页上的字符集，避免乱码问题 -->
<meta charset="UTF-8">
<head>
<title>网页的基本结构</title>
</head>
<body>
<!--
迭代：
网页的版本
html4
XHTML2.0
html5
文档声明（doctype）:用来告诉浏览器当前网页的版本
html5的文档声明
<!doctype html>
<!Doctype HTML>
进制：已经学过
十进制
二进制 八位二进制与十六进制的转换 每四位为一个十六进制数
8bit=1byte
1024byte=1mb
1024mb=1gb
1024gb=1tb
1024tb=1pb
八进制
十六进制
字符编码：
字符转二进制
二进制转字符
编码：字符转二进制
解码：二进制转字符
字符集：编码解码采用的规则
乱码：编码和解码采用的字符集不同引发的问题
常见字符集：ASCLL
ISO88591
GB2312 中国
GBK 中国
UTF-8 万国码 开发时使用的字符集都是它
-->
<body/>
</html>
<!--文档声明，声明当前网页的版本为html5 -->
<!doctype html>
<!--根标签(元素)，网页中的所有内容都要写到根元素里面-->
<html>
<!--head是网页的头部，不会出现在网页中
主要用来帮助浏览器解析网页 -->
<head>
<!--meta 用来设置网页中的元数据
可以理解为编码解码用哪各字符集，避免乱码 -->
<meta charset="UTF-8">
<!--title中的内容会显示在浏览器的标题栏
搜索引擎根据其来判断网页的主要内容 -->
<title>网页的标题</title>
</head>
<!--body是html的子元素，是网页的主体
网页中所有可见内容都应该写在body里-->
<body>
<h1>网页的一级标题</h1>
</body>
</html>
5.关于文档
文档：就是说明手册，在开发中经常用它进行查阅
文档建议不要使用font标签属性去设置字体大小、颜色，样式这部分由CSS负责(即美化)
6.关于VS code
VS code也是文本编辑器，用来写前端代码。
插件：下载插件可以更好使用，live server 修改代码时可以刷新网页
快捷键：“！”+Tab键可快速生成网页的基本结构的代码
“ctrl”+“/”可以添加注释
7.标签html的一个属性
<html lang="en">
en表示英文，zh表示中文
8.实体
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
在网页中写的多个空格会被浏览器解析为一个空格
在html中字母前后有大于小于号如：<b>会被浏览器解析为标签
在这些特殊情况下我们需要用实体(转义字符)
实体的语法：&实体名称;
空格
>大于
<小于
©版权符号
其余符号可在W3Cschool中查询使用
-->
<h1>hello</h1>
<p>使 用空格隔开</p>
<p>使>用大于号©</p>
</body>
</html>
9.meta标签说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
meta标签说明及其属性
-meta主要设置网页中的一些元数据，用于让爬虫程序识别
-可设置的属性：
-charset:设定网页字符集，或者说叫使用的编码集
-name:数据名称
-可选项 :
-keywords 即网页网页关键词,可同时指定多个关键词，用","隔开
-description 即网站描述，用于介绍网站,会出现在搜索引擎的搜索结果中
例如京东购物网站源代码：
<meta name="description"
content="京东JD.COM-专业的综合网上购物商城，满足各种购物需求。"/>
-content:数据内容
例如京东网页源代码：<meta name="Keywords"
content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
-http-equiv:页面重定向，将页面重定向到其他网站
-content 中的内容可更改，3为3秒，url是网址
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
title标签：内容会作为搜索结果的超链接上的文字显示
-->
<meta name="keywords" content="html,css">
<meta http-equiv="refresh" content="5;url=https://www.baidu.com">
<title>Document</title>
10.语义化标签
再次声明：html更注重的是网页结构，而不是样式。所以学习标签时注重语义而不是样式。
Tpis:cttrl+enter光标下移 ，而不使内容下移。
标签整体分为两大类：块元素和行内元素。
块元素(block element)：独占一行，所有标签都是块元素，大部分标签都是。
如下：
hgroup：给标题分组，通常将具有相关性的标题放入其中
h1-h6：标题标签，重要性递减，h1-h3常用，其他不常用。可以理解为作文大大题目与小标题。h1一般只出现一次，是作为网页的大标签，其重要性仅次于title。
p：段落标签，其中内容是一段。
blockqoute：表示长引用，起到缩进换行的效果。
q：表示短引用，不会换行。
br：表示页面中的换行。
b:也是表强调，有加粗的效果。
i：也是强调，有倾斜的效果。
sub:有向上的效果
sup:有向下的效果
更多标签请查阅文档。
行内元素(inline element)：不会独占一行的元素。
如下：
em：加重标签，表示语音语调的强调。
strong：强调标签,表示内容的强调。
small：也是强调，有缩小的效果。
span：行内元素，没有任何语义，一般用于在网页中选中文字。
a：超链接，行内元素，注意：可以放除它外的任何元素，包括块元素和行内元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 在页面中独占一行的元素叫块元素(block element)
标题标签都是块元素-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<!-- p标签中的内容是页面的一个段落，也是块元素 -->
<p>我是一个段落</p>
<hgroup>
<h1>回乡偶书</h1>
<h2>其一</h2>
</hgroup>
<!-- em标签用来表示语音语调的加重,em不会换行 -->
<p>内容真好<em>这是加重的</em>内容</p>
<p>这是重点<strong>强调</strong>的内容</p>
鲁迅说：
<!-- blockquote表示引用 -->
<blockquote>这话我从来没说过！</blockquote>
子曰：<q>学而时习之，不亦乐乎！</q>
<br>
我不快乐了
<br>
<!-- 其他标签 -->
<b>它有什么用？</b>
<p><i>这个<small>我也</small>不知道</i></p>
对比一下
<sub>这也不知道</sub>
<sup>这个也不知道</sup>
</body>
</html>
11.块元素和行内元素
块元素(block element)：主要是对页面进行宏观布局，使页面有一块一块的效果。
行内元素(inline element)：主要是来包裹文字。
注意事项：
一般会在块元素中放行内元素，但不会在行内元素中放块元素。
块元素中什么都能放。
p标签中不能放任何块元素，这是规定。（事实上，浏览器在解析发现这个错误后会修正）
<p><h1>我是错误的</h1></p>
修正为
<p></p><h1>我是错误的</h1><p></p>
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。
比如：
标签写在根元素的外面
p元素中嵌套了块元素
根元素中出现除head、body以外的块元素
块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea, cite,
12.布局标签（结构化语义标签）
header：表示网页的头部，即页面最上面的那部分，可能会有多个头部。
main：网页的主体部分，一个页面中只有一个主体。
footer：页面的底部，页面最下面的那部分，可能会有多个。
注意：header,footer不常用，是新增的，对于有的浏览器不兼容。
nav：网页中导航的部分。
aside：可以理解为侧边栏。
article：表示一个独立的文章。
section：表示一个独立的区块，上面的标签都不能使用时可以用它。
div：没有语义，就用来表示一个区块，目前来讲div是主要的布局元素。即它可以替代上面的标签。
（与它类似，span：行内元素，没有任何语义，一般用于在网页中选中文字。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<div>试试它和别的有什么不同</div>
<p>来看一看</p>
<div>再<span>试试</span>另一个</div>
<div>对比<em>一下</em>看看</div>
</body>
</html>
13.列表(list)
顾名思义，就是列表。生活中有很多列表，比如：购物清单等等。
html中有三种列表：有序列表、无序列表、定义列表。
有序列表：使用ol来创建有序列表，最前面有序号。使用li表示列表项，有几项就写几
无序列表：使用ul来创建无序列表，即最前面是原点没有序号。使用li表示列表项，有几项就写几个。
定义列表：使用dl来创建定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- list -->
<!-- 无序 -->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!-- 有序 -->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!-- 无序列表 -->
<dl>
<dt>结构</dt>
<dd>结构，表示网页的结构，用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
<!-- 列表之间可以嵌套 -->
<ul>
<li>
a1
<ol>
<li>a2</li>
<li>a3</li>
</ol>
<dl>
<dt>内容</dt>
<dd>解释说明</dd>
</dl>
</li>
</ul>
</body>
</html>
14.超链接
Tips：“alt”+“shift”+"方向键"可以复制到上一行或下一行。
超链接：可以从一个页面跳转到另一个页面，或者当前页面的其他位置。
标签：使用a标签来定义，超链接也是行内元素，在a标签中可以嵌套除它自身外的其他任何元素。
所以不会换行，换行时可以使用br标签。br*n,可以出现n个br标签。
a标签的属性：
href：指定跳转的目标路径，可以是外部网站地址，也可以是内部页面的地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- a标签语义为超链接
通常情况下，访问过的超链接为紫色，没有访问过的为蓝色-->
<a href="https://www.baidu.com">超链接1</a>
<br>
<!-- 页内路径这么写必须保证是在同一目录 -->
<a href="07列表.html">超链接2</a>
</body>
</html>
15.相对路径（接超链接）
当需要跳转到服务器的内部页面时，一般会使用相对路径。可以回想一下linux。
常用：
“…/”（表示当前文件/页面所在的路径的上一级路径，即父路径）；
“./ “（表示当前文件/页面所在的路径）， 若没有指出是哪一个，则一般为”./”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 09所在路径为path,07所在路径为path的上一个路径 -->
<a href="../07列表.html">超链接1</a>
<br>
<a href="./path2/相对路径2.html">超链接2</a>
</body>
</html>
16.标签a的其他属性（接超链接）
target：用来指定超链接打开的位置。
_self：默认值，在当前页面打开超链接
_blank：在一个新的页面中打开超链接
#：可以转到当前页面的顶部(在开发中可以将其作为超链接的路径的占位符使用)
javascript:; ：可以使用其来做属性值，此时点击时什么都不会发生，作为占位符使用
id：唯一标识一个标签，类似人的身份证号
每一个标签都可以添加一个id属性
id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
属性值区分大小写，且一般为字母开头
有了id这个属性，我们就可以跳转到页面的任何部分。
只需将a标签中href的属性值设置为"#目标元素的id属性值"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="07列表.html" target="_self">超链接1</a>
<br>
<a href="07列表.html" target="_blank">超链接2</a>
<br>
<!-- 此时#号作为占位符 -->
<a href="#">不知道该往哪里跳转</a>
<br>
<a href="javascript:;">不知道该往哪里跳转2</a>
<br>
<!-- 去底部 -->
<a href="#bottom">去底部</a>
<br>
<a href="#p5">去中间</a>
<!-- 输入lorem会出现一串文字-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p id="p5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam quod sunt eum porro quaerat sint velit minima laudantium vel. Maiores soluta consequuntur velit quis ipsum? Tempore sapiente veniam a.</p>
<!-- 回到顶部 -->
<a id="bottom" href="#">回到顶部</a>
</body>
</html>
17.图片标签
img：图片标签，用于向当前页面引入一个外部图片，img是自结束标签。
该元素为替换元素，介于块元素和行内元素之间，具有两种元素的特点。
属性：
scr：指定外部图片的路径（路径规则同超链接）
可以引入当前目录下文件夹中的图片，也可以引入网页上的，复制图片地址即可。
alt：图片的描述，默认情况不显示，有些浏览器会在图片无法加载时显示，搜索引擎根据alt中的内容来识别图片。不写alt属性则不会被搜索引擎收录。
width：图片的宽度，单位是像素
height：图片的高度，单位是像素，若只修改了其中一个，则图片会等比例缩放。
注意：为了防止图片变形一般只会修改一个。一般在PC端不建议修改图片大小，会改变图片像素会失真，需要多大就裁多大。主要是大图缩小。
18.图片格式
jpeg(jpg)：支持颜色比较丰富，不支持透明效果，不支持动图。一般用来显示照片。
gif：支持的颜色比较少，支持简单透明，支持动图。用于颜色单一的图片，动图。
png：支持的颜色丰富，支持复杂透明，不支持动图。用于颜色丰富，复杂透明图片（专为网页而生）。
webp：谷歌新推出的专门用来表示网页中图片的一种格式。具备其他图片格式的所有优点，而且文件特别小。缺点：兼容性不好，特别不好。有的浏览器不能用。
dase64：将图片进行编码，可以将图片转为字符，通过字符的形式来引用。一般用于一些需要和网页一起加载的图片使用。确保能及时加载出来，使用不多。（在加载网页时，先加载出网页，若有n张图片，则还需向服务器申请n次，即加载n次才可）。转换：网上搜图片在线转换即可。
使用规则：效果一样用小的（大小比较小）；效果不一样用效果好的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./image/2.gif" width="300" alt="动漫人物">
<!-- 在这种情况时，图片连接不一定能用 -->
<img src="https://img0.baidu.com/it/u=1073311174,4054903017&fm=26&fmt=auto&gp=0.jpg" >
</body>
</html>
19.内联框架
frame：用于向当前页面中引入一个其他页面，很少使用。
属性：
src：指定要引入的网页的路径
frameborder:指定内联框架的边框，一般不用，可选择0\1
width：指定宽度
high:指定高度
<body>
<iframe src="https://www.qq.com" width="800" high="600" frameborder="0">
</body>
20.音视频标签
audio：用于向页面中引入一个外部的音频文件，默认情况下不允许用户自己控制播放停止
兼容性:chrom,火狐，ie dege 都可以 ，ie 8不行。老版本中使用embed引入音频，打开自动播放，必须指定宽高，具体查看文档。
属性：
src：指定音频路径
controls：是否允许用户控制播放
autoplay:音频文件是否自动播放，设置后会自动播放，但大部分浏览器都不会对音乐进行播放
loop：循环播放
<body>
<audio src="./source/1.mp3" controls aotoplay loop></audio>
</body>
除了使用src指定路径外，还可以通过source来指定路径
<body>
<audio src="./source/1.mp3" controls aotoplay loop></audio>
<!-- 有效防止浏览器不兼容的问题 -->
<audio>
<!--对不起浏览器不支持该音频格式！-->
<source src="source/1.mp3">
<source src="source/1.ogg">
<!--所有都能兼容-->
<embed src="source/1.mp3" type="audio/mp3" width="300" high="100">
</audio>
</body>
video：使用同audio
一般不在服务器保存音视频，通常使用第三方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<audio src="./source/1.mp3" controls aotoplay loop></audio>
<!-- 有效防止浏览器不兼容的问题 -->
<audio controls>
<!-- 对不起浏览器不支持该音频格式！ -->
<source src="source/1.mp3">
<source src="source/1.ogg">
<embed src="source/1.mp3" type="audio/mp3" width="300" high="100">
</audio>
<video controls>
<source src="source/6.mp4">
<!-- 这是谷歌推出的 -->
<source src="source/6.webm">
<!-- ie8 -->
<embed src="source/6.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=o00156q517h" allowFullScreen="true" width="300" high="500"></iframe>
</body>
</html>
CSS3
1.CSS简介
网页分为三个部分：结构（HTML）、表现（CSS）、行为（JAVASCRIPT）
CSS：是层叠样式表，比如化妆，铺了好多层，但我们只能看到最后一层。网页实际上是多层结构，通过CSS可以分别为每一层来设置样式，而我们只能看到最上面一层。总之，CSS用来设置网页中元素的样式。
方式1（内联样式，行内样式）：style 在标签内部通过属性设置元素的样式。
问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每个元素中复制一遍，修改时也很不方便。开发时绝对不用使用。
<body>
<p style="color:red; font-size:60px;">少小离家老大回，乡音无改鬓毛衰</p>
</body>
方式2（内部样式表）：将样式编写到head中的style标签里，通过CSS选择器来选择元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需修改一处即可全部应用，方便对样式进行复用。
问题：只对一个页面起作用，不能跨页面进行复用。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{color:green;
font-size: 50px;
}
</style>
</head>
<body>
<p>少小离家老大回，乡音无改鬓毛衰</p>
</body>
方式3：外部样式表，创建后缀为css的文件，通过link来引入外部的css文件。
这意味着，只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面中复用。最佳实践。将样式编写到外部的css文件中可以最大限度的使用到浏览器的缓存机制。从而加快网页的加载速度，提高用户体验。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <style>
p{color:green;
font-size: 50px;
}
</style> -->
<link rel="stylesheet" href="./01style.css">
</head>
<body>
<p>少小离家老大回，乡音无改鬓毛衰</p>
</body>
</html>
2.CSS的语法
注释："/* */",快捷键同html。
基本语法：包括两大块选择器和声明块。
选择器：通过选择器可以选中页面中的指定元素，p的作用就是选中页面中的所有的元素p
声明块：通过声明块来指定要为元素设置的样式，声明块由一个个的声明组成。
声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以":"连续，以“;”结尾。
3.常用选择器
元素选择器：根据标签名来选中指定的元素。
语法：标签名{}
例子：p{} h1{}
id选择器：根据元素的id属性来唯一选中一个元素。
语法：#id属性值{}
例子：#red{} #box{}
类选择器：根据元素的class属性选中一组元素。class可以重复使用，也可以同时为一个元素指定多个class,用空格隔开。
语法：.class属性值{}
统配选择器：选中页面中所有元素。
语法：#{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:red;
}
#green{
color:green;
}
.blue{
color:blue;
}
.pink{
color:pink;
}
.size{
font-size:50px;
}
</style>
</head>
<body>
<p>少小离家老大回1</p>
<p>少小离家老大回2</p>
<p id="green">少小离家老大回3</p>
<p class="blue size">少小离家老大回4</p>
<p class="blue">少小离家老大回5</p>
<p class="pink">少小离家老大回6</p>
</body>
</html>
4.复合选择器
交集选择器：选中同时复合多个条件的元素。
语法：选择器1选择器2…选择器n{}，有元素选择器时必须以元素选择器开头。
并集选择器（选择器分组）：有多个选择器时，语法“选择器1,选择器2,选择器n{}”。
选中所有用*。
<!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>
<!-- 将class为red的div元素设为50px -->
<style>
div.red{
color:red;
}
.a.b{
font-size:50px;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red b">我是元素</p>
<p class="blue a b">我是另一个</p>
</body>
</html>
5.关系选择器
父子元素：
父元素：直接包含子元素的元素叫父元素。
子元素：直接被父元素包含的元素是子元素。
祖先元素：直接或间接包含后代元素的元素叫祖先元素，元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫后代元素。
兄弟元素：拥有相同父元素的元素是兄弟元素。
子元素选择器：选中子元素，语法：“父元素>子元素”。
后代元素选择器：选中祖先元素中的后代元素，语法：“祖先元素+“空格”+后代元素”。
兄弟元素选择器：
选中下面的一个兄弟，语法：“兄+弟”
选中下面所有的兄弟，语法：“兄~弟”
<!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的子元素span设为红色
div.red>span{
color:red;
}
div>span{
color:orange;
}
后代元素怎么写
div span{
color:blue;
}
可以无限写
div>p>span{
color:skyblue;
}
兄弟元素
选择下面一个兄弟
p+span{
color:rgb(101, 175, 98);
} */
/* 兄弟元素
选择下面所有的兄弟*/
p~span{
color:rgb(101, 175, 98);
}
</style>
</head>
<body>
<div class="red">
我是div元素
<p>
我是div中的p元素
<span>
我是p中的span元素
</span>
</p>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
<div>
<span>我是div中的span元素</span>
</div>
</body>
</html>
6.属性选择器
语法：“[属性名]”，选中含有指定属性的元素。
语法：“[属性名=“属性值”]”，选中含有指定属性和属性值的元素。
语法：“[属性名^=“属性值”]”，选中属性值以指定值开头的元素。
语法：“[属性名$=“属性值”]”，选中属性值以指定值结束的元素。
语法：“[属性名*=“属性值”]”，选中属性值中含有某值的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*p[title]{
color:red;
}
p[title="p1"]{
color:green;
}
p[title^="p"]{
color:green;
p[title$="b"]{
color:green;
p[title*="ab"]{
color:green;
*/
</style>
</head>
<body>
<p title="p1">少小离家老大回1</p>
<p title="p2">少小离家老大回2</p>
<p title="ab">少小离家老大回3</p>
<p title="abc">少小离家老大回4</p>
</body>
</html>
7.伪类选择器
tips:当输入“父元素>子元素”+“enter”时会自动生成这样的元素关系，其他关系也是一样。
当输入“元素*n”时会出现n个元素。
伪类：特殊的类，用来描述一个元素的特殊状态。
比如：第一个元素，被点击的元素，鼠标移入的元素…
特点：一般使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素
范围 n到正无穷
2n(even) 表示选中偶数位的元素
2n+1(odd) 表示选中奇数位的元素
以上伪类都是根据所有的子元素进行排序。
:first-of-type
:last-of-type
:nth-of-type()
和以上类似这几个是在相同类型里进行排序。
:not()否定伪类，将符合条件的元素从选择器去除
<style>
/* ul>li:first-child{
color:red;
} */
/* ul>li:last-child{
color:red;
}
ul>li:nth-child(odd){
color:green;
} */
/* ul>li:first-of-type{
color:green;
} */
ul>li:not(:nth-of-type(3)){
color:green;
}
</style>
8.a元素的伪类
:link 表示没访问过的链接(正常的链接)
:visited 表示访问过的链接
由于隐私的原因，只能修改颜色，不能修改大小等
:hover 表示鼠标移入的状态
:active 表示鼠标点击
<!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>
/* :link 表示没访问过的链接(正常的链接) */
a:link{
color:red;
}
/* :visited 表示访问过的链接
由于隐私的原因，只能修改颜色，不能修改大小 */
a:visited{
color:blue;
}
/* :hover 表示鼠标移入的状态 */
a:hover{
color:rgb(141, 228, 155);
font-size: 50px;
}
/* :active 表示鼠标点击 */
a:active{
color:rgb(228, 141, 182);
}
</style>
</head>
<body>
<a href="https://www.baidu.com">访问过的链接</a>
<br>
<a href="https://www.baidu123.com">没访问过的链接</a>
</body>
</html>
9.伪元素选择器
伪元素 表示页面中一些特殊的并不真实存在的元素(特殊的位置)
以 ::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的最开始的位置
::after 表示元素的最后的位置
这两个必须结合content使用
<style>
p{
font-size: 20px;
}
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: sandybrown;
}
p::selection{
background-color: salmon;
}
div::after{
content:"abc"
}
div::before{
content: "ss";
}
</style>
10.样式的继承
样式的继承：为一个元素设置的样式同时也会应用到它的后代元素上，继承是发生在祖先元素和后代之间的。 继承的出现是为了方便我们开发，利用继承我们可以将一些通用的样式统一设置到 共同的祖先元素上，从而使后代元素也具有相同的样式，这样只需设置一次就能让 所有的元素都具有该样式。
注意：并不是所有的样式都会被继承，比如：背景相关，布局相关等这些样式都不会被继承。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>我是一个p元素
<span>我是p中的span元素</span>
</p>
<span>
我是p外的span元素
</span>
</body>
</html>
11.选择器的权重
更加详细
选择器的权重：发生样式冲突时应用哪个样式由选择器的权重决定
权重排行：
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0 "*{}"
继承的样式 没有优先级
比较优先级：
-需要将所有的选择器的优先级进行相加计算，最后优先级越高，越优先显示（分组选择器单独计算）
-选择器的累加不会超过**数量级**（比如10个类选择器相加得到100但不会超过id选择器）
-如果优先级数计算后相同，则优先使用靠下的样式。
-可以在某一个样式后面加“!important”，此时它会获得最高的优先级，甚至超过内联样式。慎用！
#red{
background-color: sandybrown !important;
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 选择器的权重：发生样式冲突时应用哪个样式由选择器的权重决定
权重排行：内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0,0,0,0 "*{}"
继承的样式 没有优先级
-->
<style>
/* 101 */
div#red{
background-color: sandybrown !important;
}
/* 10 */
.blue{
background-color: blue;
}
/* 100 */
#red{
background-color: red;
}
/* 分组计算 1 1 */
div,p{
background-color: palegreen;
}
/* 0 */
*{
background-color: ;
}
</style>
</head>
<body>
<!-- style="background-color: orange;" -->
<div id="red" class="blue" >我是一个div元素
<p>我是后代p</p>
</div>
<p>我是一个p元素</p>
</body>
</html>
12.长度单位
长度单位：
像素：
屏幕是由一个个的像素格子构成
不同屏幕的像素格子大小不同，越小越清晰
所以同样的200px在不同设备下不同(因为格子大小不同)
百分比：
将属性值设置为相对于父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变
em:
em是相对于元素的字体大小来计算的
1em=1font-size=16px(一般是16，随font-size的值改变)
根据字体的大小而改变
rem:
相对于根元素(html)的字体大小来计算
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html{
font-size: 20px;
}
.box1{
width: 200px;
height: 200px;
background-color: salmon;
}
.box2{
width: 50%;
height: 50%;
background-color: rgb(70, 40, 36);
}
.box3{
font-size: 20px;
width: 10em;
height: 10em;
background-color: rgb(114, 250, 148);
}
.box4{
font-size: 30px;
width: 10rem;
height: 10rem;
background-color: rgb(103, 91, 168);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
13.颜色单位
颜色单位：在css值可以直接使用颜色名字来设置各种颜色，但很不方便
RGB值：
RGB通过通过三种不同浓度来调配出不同的颜色
R red G green B blue
每一种颜色的范围 0-255(0%-100%)之间
语法：RDB(红色，绿色，蓝色)
RGBA:
需要四个值
A是不透明度，就是在RGB基础上加了透明效果
范围：0-1 0为完全透明，1为完全不透明
十六进制RGB值：
语法：#红色绿色蓝色
颜色浓度通过 00-FF控制
如果颜色两位两位重复可以进行简写， #aabbcc->#abc
HSL值 HSLA值
H色相 (0-360) S饱和度(颜色浓度0%-100%) L亮度(颜色亮度，0%-100%)
background-color:rgb(255,0,0);
background-color:rgb(255,0,0);
background-color:#FF0000;
background-color: hsl(30,100%, 40%);
layout（布局）
1.文档流
文档流(normal)：
网页是一个多层结构，一层落一层
通过css可以分别为每一层来设置样式
作为用户只能看到最顶上一层
这些层中，最底下的一层叫文档流，文档流是网页基础
我们所创建的元素默认都是在文档流中进行排列
元素有两个状态：
在文档流中
不在文档流中(脱离文档流)
元素在文档流中有什么特点：
-块元素：
块元素在页面中独占一行
默认宽度是父元素的全部(会把父元素撑满)
默认高度被内容撑开(子元素，可理解为字体样式高度)
指定后会发生改变
-行内元素：
行内元素不会独占页面的一行，只占自身大小
行内元素在页面中自左向右水平排列
若一行中不能写下所有的行内元素则会切到第二行继续自左向右排列
默认宽度和高度都是被内容撑开（很重要）
2.盒子模型
盒模型，盒子模型，框模型(box model)：
css将页面中的所有元素都被设置为一个矩形的盒子
将样式设置为矩形，对页面布局就变为摆放盒子
每一个盒子都由以下几个部分组成：
内容区(content)
内边距(padding) 内容与边框之间的距离
边框(border)
外边距(margin) 盒子与盒子之间的距离
边框：属于盒子边缘，边框里边属于盒子，边框外是盒子的外部
要设置边框，需要至少设置三个样式：
边框的宽度:border-width
边框的颜色:border-color
边框的样式:border-style 虚线实线等
边框宽度会影响盒子大小，要把边框计算进去
内容区(content)：元素中的所有子元素和文本内容都在内容区中排列
大小由 width 和 height 来设置
width 宽度 height 高度
3.盒子模型_边框
border-width： 有默认值，为3px ，用来指定四个方向的边框的宽度。
border-width: 10px 20px 30px 40px;
按顺时针方向安排，即上，右，下，左
若不写左，则会按右的值来写(即按对称的那一边来写)
值的情况：
四个 上，右，下，左
三个 上，左右，下
两个 上下，左右
一个 上下左右
有一组border-xxx-width来指定某一边；xxx:top right bottom left
border-color：同上,可以分别指定四个边框的颜色
可以不写，默认为color设置的颜色值
border-style ：可以指定四个边框，规则同上
soild 实线 dotted 点状虚线
dashed 虚线 double 双线
默认值为 none 没有边框
border简写（最常用）：border: 10px red soild;
还有borer-xxx,同上。
border: 10px red soild;
border-top: none;
4.盒子模型_内边距
内边距(padding)：内容区和边框之间的距离是内边距
一共有四个方向
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
盒子的可见框的大小，由内容区、内边距和边框共同决定
计算盒子大小时，需要将这三个区域加到一起算
padding的简写，可同时指定四个方向的内边距，规则同border-width一样
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
padding: 100px;
5.盒子模型_外边距
外边距(margin): 外边距不会影响盒子的可见框的大小，外边距会影响盒子的位置
一共有四个方向的外边距：
margin-top 设置一个正值，元素向下移动
margin-right 默认情况下设置它，不会产生任何效果
margin-bottom
margin-left 设置一个正值，元素向右移动
当设置负值，则元素会向相反的方向移动
元素在页面中按自左向右的顺序排列， 默认情况下，设置左和上会移动也是自身，而下和右会移动其他元素。
margin的简写属性，同上。
margin-top :100px;
margin-bottom :100px;
margin: 100px;
6.盒子的水平布局
元素的水平方向的布局：元素在其父元素中水平方向的位置由几个属性共同决定
margin-left border-left padding-left width padding-right border-right margin-right
一个元素在其父元素中，水平布局必须满足以下的等式：
margin-left+border-left+padding-left+width
+padding-right+border-right+margin-right=其父元素内容区的宽度
以上等式必须满足，如果相加结果不满足，则称为过渡约束，等式会自动调整。
情况调整：如果这几个值中没有自动(auto)的情况，则浏览器会自动调整margin-right值以使等式满足。
0+0+0+0+200+0+0+600=800，margin-right为600px
有三个值可以设置为auto: width: margin-left margin-right。
如果某个值为auto,则会自动调整auto的那个值，以使等式成立(若不写width则其默认为auto)。
0+0+0+0+auto+0+0+0=800 auto=800px
-若设margin-left为200px,则auto=600px
-若设一个width和margin-left为auto,则width的auto会为最大，margin-left为0
auto+0+0+0+auto+0+0+0=800
0+0+0+0+auto+0+0+0=800 auto=800px
- 若设三个值都为auto，则外边距都是0，宽度最大
- 若将外边距设置为auto,宽度为固定值，则外边框为相同的值
auto+0+0+0+200+0+0+auto=800 auto=300px
经常利用这个特点来使一个元素在其父元素中水平居中
width:xxpx; margin:0 auto;
.outer{
width: 800px;
height: 200px;
border:10px red solid;
}
.inner{
width: 200px;
height: 200px;
background-color: orange;
margin-right: auto;
margin-left: 100px;
7.盒子的垂直布局
默认情况下，父元素的高度被内容撑开，即没有指定高度时被子元素撑开，有指定时就是指定的内容。
溢出：子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
解决：使用 overflow 属性来设置父元素如何处理溢出的子元素。
overflow:
visible(默认值，溢出的部分会显示)
hidden(隐藏，溢出的内容会被裁剪不会显示)
scrol(滚动，生成垂直水平方向滚动条，通过滚动条来查看完整的内容)
auto(根据需要生成滚动条，不会生成多余的滚动条)
overflow-x(处理水平方向的溢出)
overflow-y(处理垂直方向的溢出)
.box1{
width: 200px;
height: 200px;
background-color: rgb(118, 202, 202);
overflow-x:hidden ;
}
.box2{
width: 10px;
height: 200px;
background-color: purple;
}
8.外边距的折叠
垂直外部距的折叠：相邻的垂直方向外边距会发生重叠。
兄弟元素：两者都是正值，会取两者之间的较大值；
特殊情况：
一正一负，取两者的和
两个负值，取绝对值较大者
兄弟元素之间的外边距的重叠对开发是有利的，我们不需要进行处理。
父子元素：父子元素相邻的外边距，在元素的会传递给父元素(上外边距)
父子外边距的折叠会影响到页面的布局，必须进行处理。
解决方法（不好用）：
1，还使用外边距，给父元素加边框
2，使用内边距，给父元素加内边距
9.行内元素的盒子模型
行内元素的盒模型：
行内元素不支持设置宽和高
行内元素可以设置padding，但是垂直方向不会影响页面布局。
行内元素可以设置border，但是垂直方向不会影响页面布局。
行内元素可以设置margin，但是垂直方向不会影响页面布局 。
display 用来设置样式显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内元素
简单来说就是行内块，即可以设置宽度和高度又不会独占一行
table 将元素设置为一个表格
none 元素不在页面中显示，不会占据位置
visibility 用来设置元素的显示状态
可选值：
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏，不显示，但是依然占据位置
10.浏览器的默认样式
默认样式：
通常情况，浏览器会为样式设置一些默认样式
默认样式的存在影响页面布局
通常情况下，在编写网页时要去除样式(PC端)
/* 最简单做法 ,使用全部选择器*/
*{
margin:0;
padding:0;
}
使用reset.css和normalize.css文件
reset.css：去除浏览器默认样式
normalize.css：统一各个浏览器默认样式的格式
练习总结
1.先写结构，再写样式
2.注意细节，是选择margin还是padding
3.反复练习
11.盒子的尺寸
1.默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
2. box-sizing 用来设置盒子尺寸的计算方式
可选值：
content-box 默认值，width 和 height 来设置内容区的大小
border-box 宽度和高度用来设置整个盒子的大小
包括 内容区、内边距和边框
12.轮廓和圆角
1.轮廓
outline 用来设置元素的轮廓线，用法和border一样
不同：out-line不会影响可见框的大小，而border会影响
outline只是在上面覆盖了一层轮廓
outline:10px red solid;
2.阴影
box-shadow 用来设置元素的阴影效果，元素的阴影在其正下方，阴影不会影响页面布局
格式：box-shadow:10px 10px color;
第一个值：水平偏移量 设置阴影的水平布局 正值向右移动，负值向左移动
第二个值：垂直偏移量 设置阴影的垂直布局 正值向下移动，负值向上移动
第三个值：阴影的模糊半径
第四个值：阴影的颜色
box-shadow: 20px 20px 10px rgba(0, 0, 0, .3);
3.圆角
border-radius:用来设置圆角，指定设置圆角的半径大小
border-top-left-radius 左上
border-top-right-radius 右上
border-bottom-left-radius 左下
border-bottom-right-radius 右下
border-radius 可以分别指定四个角的圆角(看对角线)
四个值 左上 右上 右下 左下
三个值 左上 右上/左下 右下
两个值 左上/右下 右上/左下
/* border-radius: 20px; 圆形的角*/
/* border-radius: 20px/40px; 椭圆的角，以左上为例：20px指定上，40px指定左 */
/* border-radius: 50%; 圆形*/
Float
1.浮动简介
通过浮动可以使一个元素向其父元素的左侧或右侧移动
float 可选值：
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
特点：
1.元素设置浮动后，水平布局的等式便不需要强制满足
2.元素设置浮动后会完全脱离文档流，不再占用文档流的位置(所以元素下边还在文档流中的元素会自动向上移动)
3.浮动元素不会从父元素中移出
4.设置浮动元素后，元素会向父元素的左侧或右侧移动
5.(水平方向上)浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
6.若浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移（看图）
7.(垂直方向上)浮动元素不会超过它上边浮动的兄弟，最多和它一样高
2浮动的其他特点（脱离文档流的特点）
1.浮动
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，可以利用浮动来设置文字环绕图片的效果。
2.脱离文档流
元素设置浮动后，会从文档流中脱离，元素的特点也会出现变化。
脱离文档流的特点：
块元素：
1.块元素不再独占一行
2.块元素的宽度和高度默认(可设置)被内容撑开
行内元素：脱离文档流后可以设置宽和高变成块元素，特点和块元素一样(上面块元素的特点)
即元素脱离文档流后，不再区分块元素和行内元素
3.网页的布局
要在父元素中水平排列必须将元素全部设置为浮动。
4.高度塌陷的问题
高度塌陷的引入：为了防止在布局时有溢出或者填充不完全的出现，父元素我们不会写死
一般是由内容撑开父元素。但会出现一个问题，当子元素水平布局时会设为浮动，此时父元素没有内容撑开
会出现高度塌陷，导致下面的元素上移，导致布局混乱。
解决方法：使用css隐藏属性BFC。
BFC(Block Formming Context)块级格式化环境
BFC是css的一个隐藏属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局环境
特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
开启方式：1.设置元素的浮动(不推荐)
2.将元素设置为行内块元素(不推荐)(独占一行，被内容撑开)
3.将元素的overflow设置为非visible的值，一般设置为auto/hidden,使其可以包含浮动元素。
5.clear
clear属性:
如果我们不希望某个元素因为其他元素的影响而改变位置
可以通过clear属性来清楚浮动元素对当前元素的影响
作用：清除浮动元素对当前元素的影响
可选值：
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both:清除两侧中最大影响的那侧
原理:设置清除后，浏览器会自动为颜色添加一个上外边距
以使其不受其他元素的影响
.box3{
width: 100px;
height: 100px;
background-color: olivedrab;
clear: left;
}
6.高度塌陷的最终解决方案
1.html
添加一个空标签，再为空标签添加clear属性，以解决高度塌陷的问题。
2.css的解决方法
同样也是在最后加一个空的标签，再对其添加clear属性
.box1::after{
content: "";
display: block;
clear: both;
}
7.clearfix类
为了解决外边距的问题，可以使用伪元素选择器，在父子元素的top加一个东西将其隔开。
clearfix(是个类，给元素添加)可以同时解决margin-top和高度塌陷。
.clearfix::before,.clearfix::after{
content: "";
display: table;
clear: both;
}
<div class="box1 clearfix">
<div class="box2"></div>
</div>
POSITION
1.定位的简介及相对定位
1.定位(position)
-定位是一种更高级的布局手段
-通过定位可以将元素摆放到页面的任意位置
-使用position属性来设置定位
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
2.相对定位
-特点：（1）开启相对定位后，若不设置偏移量，元素不会发生任何变化
（2）相对定位是参照于元素在文档流中的位置进行定位的
（3）相对定位会提升元素的层级
（4）相对定位不会使样式脱离文档流
（5）相对定位不会改变元素的性质，是块还是块，行内还是行内
3.偏移量(offset)：元素开启定位后，可以通过偏移量来设置元素的位置
top 定位元素和定位位置(元素原来的位置的原点，构成了坐标系)上边的距离
bottom 定位元素和定位位置下边的距离
二者来控制垂直方向的位置，一般只用一个，top越大越往下移，bottom越大越往上移
left 定位元素和定位位置左边的距离
right 定位元素和定位位置右边的距离
二者来控制水平方向的位置，一般只用一个，left越大越往右移，right越大越往左移
.box2{
width: 200px;
height: 200px;
background-color: rgb(114, 112, 216);
position: relative;
top: -200px;
left: 200px;
}
2.绝对定位（absolute）
绝对定位的特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化(但性质已经发生了变化)
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对元素是相对于其包含块进行定位的(进行偏移)
包含块(containing block)：
-正常情况：
包含块就是离当前元素最近的祖先块元素(不是行内元素)
<div><div></div></div>
<div><span><em></em></span></div>
-绝对定位的包含块：
包含块就是离它最近的开启了定位(不是static就行)的祖先块元素
如果所有祖先元素都没有开启定位则根元素就是它的包含块
-html(根元素，初始包含块)
3.固定定位（fixed）
固定定位(fixed)：
-固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
-唯一不同的是固定定位永远参照于浏览器的视口进行定位
-固定定位的元素不会随网页的滚动条滚动，只会一直出现在视口的某一个位置
视口：可视窗口，固定不变，一般为你打开的网页窗口大小。
应用：注意水平布局的等式
.top-wrapper{
width: 26px;
height: 206px;
background-color: salmon;
/* 开启固定定位 */
position: fixed;
bottom: 41px;
/* 水平布局要满足的等式：left默认为auto
left+margin-left+padding-left+width+padding-right+margin-right+right=视口宽度
要使元素固定在对应位置，需要满足等式
*/
/* 为视口的一半 */
right: 50%;
/* 向右移动，只能减少右侧的距离以使等式满足,计算得出639
left+margin-left+padding-left+width+padding-right+margin-right+right=视口宽度
auto+0+0+26+0+0+50%=视口宽度
*/
margin-right: -639px;
}
4.粘滞定位(sticky)
粘滞定位(sticky)
-粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。
比如：京东网页最上面的那一栏。
5.绝对定位元素的布局
元素开启绝对定位后的布局
1.水平布局：
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=包含块(特别注意)的内容区的高度
当开启了绝对定位后：
水平方向的布局等式就需要添加left和right两个值，规则同之前一样
当发生过渡约束(即当前值不满足上述等式)时：
-如果没有值设置auto则自动调整right的值以使等式满足
-如果有auto,则自动调整auto的值以满足等式
可设置auto的值：margin width left right
left和right的值默认为auto，但首先设置right
水平居中：left:0px right:0px margin-left/right:auto（margin:auto;即可）
2. 垂直方向：
top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块的高度
垂直居中：top:0px bottom:0px margin-top/bottom:auto
6.元素的层级（z-index）
把网页想象为一个三维坐标系，x垂直向下，y水平向右，z指出屏幕。
-开启了定位的元素可以通过z-index来指定元素的层级
-z-index需要一个整数作为参数，值越大元素的层级越高
-元素的层级一样，则优先显示靠下的元素
-祖先的元素的层级再高也不会盖住后代元素
FONT&BACKGROUND
1.字体
字体相关：
color 用来设置字体颜色
font-size 字体大小
em 相当于当前元素的一个font-size
rem 相对于根元素(html)的一个font-size
font-famliy字体族(字体的格式)
-font-famliy 可以同时指定多个字体，多个字体间使用“，”隔开
-字体生效时优先使用第一个，第一个无法使用则使用第二个以此类推
可选值：(字体的大类)
serif 衬线字体
sans-serif 非衬线字体
monospace等宽字体
按指定字体的类别，浏览器会自动使用该类别下的字体
p{
color: red;
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
当用户计算机内没有下载指定的字体时，可以使用服务器的字体
问题：1.加载速度较慢 2.版权问题 3.字体格式问题在每个浏览器上不一样
@font-face {
/* 指定字体的名字 */
font-family: ;
/* 指定服务器中字体的路径 */
src: url('');
}
2.图标字体
1.图标字体(iconfont)
-在网页中经常需要使用一些图标，可以通过图片来引入，但是图片较大且不灵活
-所以使用图标，在使用图标时，，可以将图标直接设置为字体，通过font-face的方式进行引入
-可以通过使用字体的形式来使用图标
2.fontawesome使用
使用图标字体(在引入all.css后)
-通过类名来使用图标字体 格式：class=“fas(或者fab) fa-bell(可替换)”
具体使用哪个图标，参考文档
<i class="fas fa-bell" style="font-size: 80px;color: red;"></i>
<i class="fas fa-audio-description"></i>
3.图标字体的设置
1.通过伪元素来设置图标字体
-找到要设置的图标，通过before或after选中
-在content中设置字体的编码，格式content:"\编码"
-设置字体的样式
fab:font-family: “Font Awesome 5 Brands”;
fas:font-family: “Font Awesome 5 Free”;
font-weight:900;
更加具体，查看all.css文档
li{
list-style: none;
}
li::before{
content:"\f0d8";
/* font-family: "Font Awesome 5 Brands"; */
font-family:'Font Awesome 5 Free' ;
font-weight: 900;
}
2.类的方式
<li><i class="fas fa-star"></i>锄禾日当午</li>
3.实体的方式
&#x+“编码”
<span class="fas"></span>
4.阿里云的字体库
从上面下载下来使用，不要demo的两个文件，拖进项目里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
i.iconfont{
font-size: 100px;
}
/* 伪类 */
p::before{
content: "\e61f";
font-family: 'iconfont';
font-size: 100px;
}
</style>
</head>
<body>
<!-- 实体 -->
<i class="iconfont"></i>
<!-- 类 -->
<i class="iconfont icon-zhixianghuishou"></i>
<p>hello</p>
</body>
</html>
5.行高
1.行高(line height)
-行高指的是文字占有的实际高度，并不是文字的大小(一般会比文字本身所占高度要大)
-可以通过line-height来设置行高
行高可以直接指定一个大小(px em)
也可以直接为行高设置一个整数，该整数为字体大小的倍数
-使文字居中，可以将line-height设置为和height一样的高度
-行高会均匀分布在文字上下
-行高经常用来设置文字的行间距
行间距=行高-字体大小
2. 字体框
-字体框就是字体所在的格子(文字是在字体框中)，设置font-size实际上就是在设置字体框的高度
6.字体的简写
1.font 可以设置字体相关的所有属性
语法：font:字重 风格 字体大小/行高 字体族
行高可以省略不写，不写则为默认值，字重和风格也是一样
不写时还想指定行高，字重风格，则必须把 line-height等写到 font下面
2.font-weight 字重 字体的加粗效果
可选值：
normal 默认值，不加粗
bold 加粗(100-900,共九个级别，没什么用)
3.font-style 字体风格
可选值：
normal 正常值
italic 斜体
<style>
div{
border: 1px red solid;
font:italic bold 50px 微软雅黑,"serif";
line-height: 3;
font-weight: bold;
font-style: oblique;
}
</style>
7.文本的对齐样式（消除图片与父元素的缝隙）
1.文本的水平对齐方式
text-align 文字的水平对齐
可选值：
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
2.文本的垂直对齐
vertical-align 设置元素垂直对齐的方式
可选值：
baseline 默认值 基线对齐(比如写字时的横线，以这条线为基线)
top 顶部对齐(对齐父元素最上面的那条线)
bottom 底部对齐(对齐父元素最下面的那条线)
middle 居中对齐(对齐字母 x 的中线，上下都空出相同的距离)
3.消除图片与父元素的缝隙
当我们引入图片时，会发现图片与父元素有间隙(因为是基线对齐)
消除缝隙：给图片设置 top bottom 当对齐最上面或下面时，父元素的边框会变小，不会有缝隙
<p><img src="../exercise/image2/1.webp" alt=""></p>
8.文本的对齐样式2
1.文本修饰
text-decoration 设置文本修饰
可选值：
none 无
underline 下划线
line-through 删除线
overline 上划线
可添加 颜色 样式，但低版本的IE浏览器不支持
text-decoration: line-through red dotted;
2.给多出的文本设置省略号
/*
实现文本省略号的效果
*/
.box2{
/*
white-space 设置网页如何处理空白
可选值：
normal正常
nowrap 不换行
pre 保留空白(保留在元素中的文本的所有格式)
*/
white-space: nowrap;
width: 200px;
overflow: hidden;
/*
文本溢出
*/
text-overflow: ellipsis;
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem nemo molestiae aspernatur dolorum harum, eveniet est expedita fuga suscipit dolor, ducimus consectetur assumenda, alias iusto beatae voluptatum quidem! Dolore, sequi?
</div>
9.背景
背景及相关属性
1.background-color 设置背景颜色
2.background-image 设置背景图片
-可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
-如果背景图片小于元素，则背景颜色会自动在元素中平铺将元素铺满
-如果背景图片大于元素，则背景图片无法全部显示出来
-如果背景图片和元素一样大，则会正常显示
3.background-repeat 用来设置背景的重复方式
可选值：
repeat 默认值，背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
4. background-position 用来设置背景图片的位置
设置方式：通过 top left bottom right center方位来设置背景图片
只填写两个值，有多种组合,可以看做是一个九宫格
左上 上中 右上；左中 中中 右中；左下 下中 右下；
通过偏移量来指定背景图片的位置：水平 垂直
background-color: teal;
background-image: url("./image/8.jpg");
background-repeat: no-repeat;
/* background-position:center center; */
background-position:100px 100px;
10.背景2
1.设置背景颜色和边框后，发现边框下也有背景的颜色
background-clip 设置背景的范围
可选值：
border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只会出现在内容区和内边距
content-box 背景只会出现在内容区
2.background-orgin 背景图片(计算偏移量的)的原点
可选值：
padding-box 默认值，background-position从内边距处开始计算
content-box background-position从内容区处开始计算
border-box 背景图片的变量从边框处开始计算
3.background-size 设置背景图片的大小
可选值：
-格式：宽度 高度
如果只写一个值，则另一个默认为auto
-cover 图片的比例不变，将元素铺满
-contain 图片的比例不变，将图片在元素中完整显示
4.background-attachment 设置背景图片是否跟随元素移动
可选值：
scroll 默认值 背景图片跟随元素移动
fixed 背景图片固定在页面中，不会随元素移动
5. background 背景的简写属性，可将所有相关背景的属性都写进去,没有顺序和内容要求
注意：
-size必须写到 position的后面
-对于 orgin和 clip,必须先写 orgin再写clip
11.背景-雪碧图
(1)图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载
-浏览器加载外部资源时时按需加载的，用则加载，不用则不加载
-上面的练习link会首先加载，而hover和active会在指定状态触发时才加载
所以在移入和点击时会出现白色的闪现
(2)解决图片闪烁问题：使用一张图片可以解决该问题，通过background-position使其移动。这样图片在第一次时就加载到网页中，有效避免出现闪烁的问题，该技术应用广泛被称为 CSS-Sprite，而这种图片我们称为雪碧图。
(3) 雪碧图的使用步骤：
1.确定使用的图标
2.测量图标大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置偏移量以显示正确的图片
雪碧图的特点：
一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验。
.box2{
width: 79px;
height: 78px;
background-image: url("09img/xue.png");
background-position: -30px -180px;
}
12.渐变及颈向渐变
1.渐变
通过渐变实现一个颜色向其他颜色过渡的效果，渐变是图片，需要通过background-image来设置。
(1)线性渐变，颜色沿着一条直线发生变化，liner-gradient()：
-linear-gradient(red,blue,…) 红色为起点，蓝色为终点(可以写多种颜色)
-渐变可以同时指定多个颜色，多个颜色默认情况下平均分布
- 也可以指定渐变的分布情况
linear-gradient(red 50px,blue 70px),即red从0-50px不渐变，50px后渐变，blue从70px后不渐变
-线性渐变的开头，可以指定一个渐变的方向
to left
to right
to bottom
to top
to top left…等多种组合
xxxdeg deg表示度数
xxturn turn表示几圈
(2)repeating-linear-gradient() 可以平铺的线性渐变
-repeating-linear-gradient(red 0,blue 50px) 渐变效果为50px的宽度，高度为200px,故会重复四次
background-image: linear-gradient(rgb(31, 24, 71) 50px,rgb(11, 11, 99) 70px,rgb(72, 41, 187) 100px,red 150px);
background-image: repeating-linear-gradient(red 0,blue 50px);
2.颈向渐变
radial-gradient() 颈向渐变(放射性的效果)
默认情况下颈向渐变的形状根据元素的形状来计算的
-正方形 -->圆形
-长方形 -->椭圆形
可以指定颈向渐变的大小 radial-gradient(100px 100px,red,blue);
可以指定形状：
-circle 圆形
-ellipse 椭圆 radial-gradient(ellipse,red,blue);
可以指定渐变的位置：
-radial-gradient(100px 100px at 0 0,red,blue);
-radial-gradient(100px 100px at top center,red,blue);
可以指定渐变效果的大小：
-closest-side 近边
-farthest-side 远边 radial-gradient(farthest-side at 50px 50px,red,blue);
-closest-corner 近角 radial-gradient(closest-corner at 50px 50px,red,blue);
-farthest-corner 远角 radial-gradient(farthest-corner at 50px 50px,red,blue);
总结：
语法 radial-gradient(大小 at 位置，颜色，颜色 位置…)
大小：形状(circle)，渐变效果的大小(近边…)
位置：top bottom left right
HTML补充
1.表格
标签：table 创建表格，tr 表示一行，td 表示一个单元格
合并单元格：
纵向合并单元格： rowspan 纵向合并单元格
横向合并单元格： colspan
<table border="1" width="50%" align="center">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<!-- 合并A3A4 -->
<!--
rowspan 纵向合并单元格
-->
<td rowspan="2">A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<!-- <td>A4</td> -->
<td>B4</td>
<!-- 合并单元格
横向合并单元格 colspan
-->
<td colspan="2">C4</td>
<!-- <td>D4</td> -->
</tr>
</table>
2.长表格
可以将一个表格分成三个部分
头部 thead 头部的单元格标签 th 有加粗居中的效果
主体 tbody
底部 tfoot
<table border="1" width="50%" align="center">
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tfoot>
</table>
3.表格的样式
1.缩小边框之间的距离
当给table和td设置边框后，二者之间会有缝隙，此时可以缩小边框距离。
border-spacing 指定边框之间的距离（border-spacing: 0px;）
2.设置边框的合并
border-collapse: collapse;
3.垂直居中
(1)默认情况下元素在td中是垂直居中的，可以通过vertical-align来设置
td{
border: 1px black solid;
height: 50px;
vertical-align: middle;
text-align: center;
}
(2)垂直居中的使用
垂直居中的新方法，通过将父元素变为单元格，然后将子元素垂直居中。
此时table-cell可以当做块元素来使用，但不会独占一行。
.box1{
width: 200px;
height: 200px;
background-color: khaki;
/* 设置为单元格 */
display: table-cell;
/* 垂直居中的新方法，通过将父元素变为单元格，然后将子元素看作文本垂直居中 */
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: lightblue;
/* 水平居中 */
margin: 0 auto;
}
4.关于tbody
若表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody,并且将tr全部放进去，所以tr不是table的子元素，而是tbody。
通过伪元素来给不同的行设置颜色。even是偶数行。
tbody>tr:nth-child(even){
background-color: khaki;
}
4.表单
表单：
-在现实生活中表单用于提交数据
-在网页中也可以使用表单，网页中的表单用于将本地的数据提交给服务器
-使用form标签来创建一个表单
标签：
-form 创建表单，属性action表单要提交的服务器的地址
-文本框
-密码框
-单选按钮
-多选按钮
-下拉列表
-提交按钮
<form action="tijiao.html">
<!--
-注意，数据要提交到服务器，必须为元素指定一个name属性
文本框
-->
文本框<input type="text" name="username">
<br>
<!--
密码框
-->
密码框<input type="password" name="password">
<br>
<!--
单选按钮
-必须指定相同的name属性才能进行选择
-必须给每一个元素指定value属性，value属性最后会作为用户填写的值
-checked 可以将单选按钮设置为默认选中
-->
单选按钮<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br>
<!--
多选按钮
-必须指定相同的name属性才能进行选择
-必须给每一个元素指定value属性，value属性最后会作为用户填写的值
-checked 可以将单选按钮设置为默认选中
-->
多选框<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3">
<br>
<!--
下拉列表
-selected 可以默认选中
-->
<select name="haha">
<option value="1" selected>选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<!--
提交按钮
-->
<input type="submit" value="注册">
</form>
5.表单补充
(1)一些属性：
autocomplete=“off”，关闭自动补全(输入时有之前输过的信息)，可在 form input标签中写
readonly 只读，数据可提交
disabled 禁用，数据不会提交
autofoucs 自动获取焦点，光标会在该表单处
<input type="text" name="username" autocomplete="off">
<br>
<input type="text" name="username" value="hello" readonly>
<br>
<input type="text" name="username" value="hello" disabled>
<br>
<input type="text" name="username" autofocus>
(2)按钮
<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮">
<br>
<!-- 同上，不同的是是非自结束标签 -->
<button value="submit">提交</button>
<button value="reset">重置</button>
<button value="button">按钮</button>
(3)不常用
<!-- 不常用，了解，IE不支持 -->
<input type="color">
<br>
<input type="email">
CSS补充内容
1.边框-小三角：如何得到小三角
（1）写出边框
（2）宽高设置为0px
（3）消除上边框
（4）左右颜色设置为透明
.box{
width: 0px;
height: 0px;
border: 10px red solid;
border-top: none;
border-color: transparent transparent blue transparent ;
}
2.伪元素和伪类的写法
这种写法很重要！
.app:hover::after{
display: block;
}
3.过渡效果
transition为实现隐藏的效果
/* 隐藏 */
/* height: 228px; */
height: 0;
overflow: hidden;
/* 添加动画效果 */
transition: height 0.3s;
height可换为任意一属性
4.隐藏元素
隐藏的几种方法
1.display:none; 开启定位后多用
2.height:0px;->恢复为原来的 主要用来添加效果
3.visibility: hidden; 占据位置但不显示
5.实践心得
选择器的写法，优先级很重要
开启定位是相对于谁很重要
层级要好好设置
a是行内元素，要转换为块元素才能设置宽高
设置轮播图时，图片会开启绝对定位
6.浮动和绝对定位的区别
设置全部元素向左或向右浮动时，元素会排列在一起
设置绝对定位会使元素重叠在一起
7.设置层级
当开启定位后设置层级没用时，不妨给整块都设置层级，以使弹出层显示。
8.对项目文件进行压缩
右击压缩，一般都会进行压缩，主要是去除换行和注释，以实现最小空间
9.link及网页图标
<!-- 设置网页图标 (标题栏和收藏夹)
-网站图片一般都存储在网站的根目录下，名字一般叫 favicon.ico
-->
<link rel="icon" href="./favicon.ico">
10.水平居中与垂直居中小结
1.水平
文字
-text-align:center;
元素
-margin:0 auto;
-开启绝对定位
left:0;
right:0;
margin:0;
2.垂直
文字
-line-height:height的值；
-vertical-align:middel;
元素
-开启绝对定位
top:0;
bottom:0;
margin:0;
-将元素变为单元格，将子元素垂直居中
.box1{
display:table-cell;
vertical-align:middel;
}
-table-cell具有块元素的特性，但不会独占一行
ANIMATION动画
1.过渡
1.过渡
添加过渡效果
transition(过渡)
-可以指定属性发生变化时的切换方式
-通过过渡可以创建一些非常好的效果，提升用户体验
2.相关属性
transition-property
-指定要执行过渡的属性，多个属性用逗号隔开，若所有属性需要过渡，使用all关键字
-大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另一个有效数值过渡，即一定有初值，有最终的值
transition-duration
-指定过渡效果的持续时间
-可以用逗号隔开对于不同属性设置的不同值
transition-timing-function
-过渡的时序函数，指定过渡的执行方式
-可选值
ease 慢速开始，先加速后减速
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速，后减速
linear 匀速运动
cubic-bezier()来指定时序函数
-httpS://cubic-bezier.com
-transition-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)
step() 分布执行过渡效果
-transition-timing-function:steps(5,end)
-分几步执行，可选值 end(默认值),start 在时间结束/开始时执行过渡
transition-delay
-过渡效果的延迟，等待相应的时间后执行效果
-transition-delay:2s;
简写属性 transition
-可以同时设置过渡相关的所有属性，没有顺序要求
-注意，要写时间第一个为持续时间，第二个为延迟时间
2.动画
1.动画
动画
-实现动态效果
-可以自动触发动态效果
-设置动画效果必须先设置一个关键帧，关键帧设置了动画执行的每一个步骤
2.关键帧
-@keyframes +关键帧名字{}
-from或 0% 动画开始位置
-to或 100% 结束位置
@keyframes test {
from{
margin-left:0;
background-color: rgb(73, 122, 51);
}
to{
margin-left:200px;
background-color: tomato;
}
}
3.相关属性
animation-name 要对当前元素生效的关键帧的名字
-animation-name: test;
animation-duration 动画的执行时间
-animation-duration: 2s;
animation-delay 动画的延迟时间
-animation-delay: 1s;
animation-timing-function
-过渡的时序函数，指定过渡的执行方式
-可选值
ease 慢速开始，先加速后减速
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速，后减速
linear 匀速运动
cubic-bezier()来指定时序函数
animation-iteration-count
-动画执行的次数
-可选值
次数 infinite 无限执行
animation-direction
-指定动画的运行方向
-可选值
normal 默认值，from->to
reverse to->frfom
alternate from->to,重复执行动画时 from->to->from
alternate-reverse to->from,重复执行时 to->from->to
animation-play-state
-设置动画的执行状态
-可选值
running 默认值 动画执行
paused 动画暂停
animation-fill-mode
-动画的填充模式
-可选值
none 默认值，动画执行完后回到元素原来位置，不受 from 影响
forwards 动画执行完后到 to 指定的位置
backwards 动画延时等待时，元素就会处于开始位置，若不写，等待结束后会在开始位置
both 结合以上两者的特点
简写属性 animatiion
-无顺序要求，只有时间要求
-要写时间第一个为持续时间，第二个为延迟时间
-animation: name duration timing-function delay iteration-count direction fill-mode;
4.补充关键帧
@keyframes run {
from{
margin-top: 0px;
}
25%,75%,to{
margin-top: 500px;
animation-timing-function: ease-in;
}
50%{
margin-top: 350px;
}
/* 75%{
margin-top: 500px;
animation-timing-function: ease-in;
} */
90%{
margin-top: 400px;
}
/* to{
margin-top: 500px;
animation-timing-function: ease-in;
} */
}
3.变形
1.变形
变形
-通过css来改变元素的形状或位置
-transfrom 用来设置元素的变形效果
-平移：
translateX() 沿着x轴平移
translateY() 沿着y轴平移
translateZ() 沿着z轴平移
-平移元素，百分比是相对于自身计算
2.利用变形居中
居中方式
-适用于元素大小确定
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
-适用于任何情况
left: 50%;
top: 50%;
transform: translate(-50% -50%);
-多个属性用空格隔开
4.变形-旋转
1.旋转
旋转
-可以使元素沿着x,y,z轴旋转指定的角度
-可选值
transform: rotateX(45deg)
transform: rotateY(45deg)
transform: rotateZ(45deg)
2.要有透视效果必须
html{
/* 设置网页视距，人眼距离网页的距离 */
perspective: 800px;
}
3.是否显示元素背面
旋转180deg后，z轴方向会跑到背面
transform: rotateY(180deg);
/* 是否显示元素的背面 */
backface-visibility: visible;
5.变形-缩放
1.变形的原点
transform-origin
-指定变形的原点
-可选值
center 中心，默认值
left
right
xx xx 水平 垂直
2.缩放
缩放(本质上是缩放轴)
-可选值
scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scaleZ() 有3d效果时才能直观看出
scale() 双方向缩放，括号内填写倍速
LESS
1.less简介
1.less简介
less是一门预处理语言
-是css的增强版，可以编写更少的代码实现更多样式
-在less中添加了许多新特性，比如对变量的支持
-语法和css大体一致，但添加了许多对css的扩展
-浏览器无法直接执行less代码，必须less->css,再由浏览器执行
2.css的新特性，兼容性不好
html{
/* css也支持变量的设置，但兼容性不好 */
--color:#bfa;
--width:200px;
}
.box1{
width: var(--width);
/* calc()计算函数 */
height: calc(200px/2);
background-color:var(--color);
}
2.less语法
//1.注释
// less的注释是单行注释
/*
css的注释是多行注释
*/
//2.后代，兄弟关系
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
// 后代关系
.box2{
width: 50px;
height: 50px;
background-color: aqua;
.box4{
width: 20px;
height: 20px;
background-color: blueviolet;
}
}
// 兄弟关系
.box3{
width: 50px;
height: 50px;
background-color: cadetblue;
}
}
//3.变量
// 在变量中可以存储一个任意的值
// 在需要时可以任意改变变量的zhi
// 语法：@变量名
/*
使用变量：
-直接使用 @变量名
-作为类名或一部分值使用 @{变量名}
-变量名重名时，会优先使用比较近的变量
-可以在变量声明前使用变量，但不推荐
-新版语法 通过 $+变量名 来引用变量
height: $width;
*/
@w:200px;
@c:red;
@d:300px;
@d:400px;
@b:box5;
div{
width: @w;
// 此时会优先使用较近的
height: @d;
}
//作为类名
.@{b}{
width: @w;
height: @d;
}
//新版语法
div{
width: 300px;
height: $width;
}
3.less语法
//1.&表示父元素
.box1{
width: 100px;
height: 100px;
.box2{
width: 50px;
height: 50px;
&:hover{
background-color: cadetblue;
}
}
&:hover{
background-color: chocolate;
}
}
//2.:extend() 当前选择器拓展了(就是继承)指定选择器的样式
.p1{
width: 100px;
height: 100px;
background-color: chocolate;
}
.p2:extend(.p1){
color: #000;
}
//3.可以在类选择器后添加括号，相当于创建了一个mixins
//-直接对指定的样式进行引用，相对于将p3的样式进行了复制
.p3(){
width: 100px;
height: 100px;
background-color: chocolate;
}
.p2{
.p3()
}
//4.混合函数
//-在混合函数中可以直接设置变量
.test(@w,@h,@bg-color){
width: @w;
height: @h;
background-color: @bg-color;
}
div{
//第一种写法
// .test(200px, 100px, red)
//第二种写法
.test(@bg-color:red,@h:100px,@w:200px)
}
//-还可以指定默认值,引用时也可以修改
.test2(@w:100px,@h:200px,@bg-color:blue){
width: @w;
height: @h;
background-color: @bg-color;
}
div{
.test2(200px)
}
//5.混合函数举例，可直接使用
span{
// 在两者之间取平均值
color: average(red,blue);
}
div{
width: 100px;
height: 100px;
//颜色加深
background-color: darken(#bfa,20%);
}
4.other
//1.通过import来将其它less引入到当前less
@import"less3.less";
//2.在less中所有的数值都可以直接进行运算
// + - * /
.box5{
width: 100px+100px;
height: 100px*2;
background-color: #bfa;
}
FLEX
1.弹性盒
1.弹性盒
flex(弹性盒)
-css中的布局手段，用来代替浮动来完成页面的布局
-可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
-弹性容器
-要使用弹性盒，必须先将一个元素设置为弹性容器
-通过 display 来设置
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
-弹性元素
-弹性容器的子元素是弹性元素(弹性项)
-一个元素可以同时是弹性容器和弹性元素
2.弹性容器的样式
flex-direction
-指定容器中弹性元素的排列方式
-可选值
row 默认值，弹性元素在容器中水平排列，左向右
row-reverse 弹性元素在容器中反向水平排列，右向左
column 弹性元素纵向排列，从上到下
column-reverse 弹性元素反项纵向排列，从下到上
主轴
-弹性元素的排列方向，由设置的值来决定(从左到右还是其他)
侧轴
-与主轴的方向垂直
3.弹性元素的样式
弹性元素的属性
-flex-grow
-指定弹性元素的伸展的系数，默认值为0(不伸展)
-当父元素有多余空间时，子元素如何伸展
-父元素的剩余空间会按比例进行分配
-flex-shrink
-指定弹性元素收缩的系数，默认值为1(可收缩)
-当父元素中的空间不足以容纳所有的子元素时，可对子元素进行收缩
-缩减多少是根据缩减系数和元素大小来计算的
flex-grow: 1;
flex-shrink: 1;
2.弹性容器的样式
flex-wrap
-设置弹性元素是否在弹性容器中自动换行
-可选值
nowrap 默认值，元素不会自动换行
wrap 元素沿着副轴方向自动换行
wrap-reverse 元素沿着副轴反方向换行
flex-flow
-warp,derection 的简写属性
justify-content
-如何分配主轴上的空白空间(主轴上的元素如何排列)
-可选值
flex-start 元素沿着主轴起边(开始的那条边，垂直于主轴)
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白均匀分布到元素的两侧
space-between 空白均匀分布到元素间
space-evenly 空白均匀分布到元素的单侧
align-content
-如何分配辅轴上的空白空间
-可选值
flex-start 元素沿着辅轴起边(开始的那条边，垂直于主轴)
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白均匀分布到元素的两侧
space-between 空白均匀分布到元素间
space-evenly 空白均匀分布到元素的单侧
align-items
-元素在辅轴上如何排列
-元素间的关系
-可选值
stretch 默认值，将元素的长度设置为相同的值(同一行)
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 元素不会拉伸，沿着辅轴终边对齐
center 居中对齐
baseline 基线对齐(文字)
3.弹性元素的样式
align-self
-用来覆盖当前弹性元素上的 align-items(即设置新的样式)
-可选值
stretch 默认值，将元素的长度设置为相同的值(同一行)
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 元素不会拉伸，沿着辅轴终边对齐
center 居中对齐
baseline 基线对齐(文字)
flex-basis
-指定的是元素在主轴上的基础长度
-主轴是横线的则该值指定的是元素的宽度
-主轴是纵向的指定的是元素的高度
-默认值为 auto，表示参考元素自身的高度或宽度
-如果传递了一个具体的数值，则以该值为准
简写属性
-flex 增长 缩减 基础
-可选值
initical :0 1 auto,缩减
auto :1 1 auto，可伸缩
none :0 0 auto，不可伸缩
order
-决定弹性元素的排列顺序(有点像z-index)
-order:3;
4.像素
像素
-屏幕是由一个发光的小点构成
-分辨率：1920*1080 说的就是屏幕中小点的数量
-在前端开发中像素需要分成两种情况：css像素和物理像素
-物理像素：一个个的像素点
-css像素，编写网页时，用的都是css像素
-浏览器在显示网页时，需要将css像素转换为物理像素再呈现
-一个css像素由几个物理像素显示，由浏览器决定
-默认情况下，在pc端，一个css像素=一个物理像素
视口
-视口就是屏幕中用来显示网页的区域
-可以通过查看视口大小来观察css像素和物理像素的比值
-默认情况下：
ss像素=物理像素
比例：1:1
-视口放大两倍
比例：1:2 1个css像素由2倍物理像素形成
-可以通过改变视口的大小来改变css像素和物理像素的比值
5.移动端
像素
-在不同的屏幕，单位像素的大小是不同的，像素越小屏幕越清晰
-https://material.io/resources/devices/
-智能手机的像素点远远小于计算机的像素点
i6 4.7寸 750*1334 (物理像素)
-默认情况下，移动端的网页都会将视口设置为 980像素(css像素，这个点有问题，现在已经不是了)
以确保 pc 端的网页可以在移动端正常访问，但是如果网页的宽度超过了
移动端的浏览器会自动对网页进行缩放以显示完整网页
-通常会设置专门的移动端网页
6.vw适配
1.不同设备的视口大小不同，375px在不同设备的意义也不同。
2.移动端开发不能用px来布局
vw 表示视口的宽度
100vw会撑满视口
1vw=1%视口
3.若设计图为：750px*1125px
750px=100vw
1px=100vw/750
48px=1px*48=100vw/750 *48
这样换算并不好用。
4.最终
已知：1rem=1html的字体大小
1px=100vw/750=0.133333333vw
html{
font-size:0.133333333vw;(1rem=1px=0.133333333vw)
}
width:48rem;(48px)
!!网页中字体大小最小为12px，不能设置比它更小的。
所以，把它扩大40倍 1rem=40px=5.33333333vw
html{
font-size:5.33333333vw;(1rem=40px=5.33333333vw)
}
width:48/40rem;(48px)
总结：将html的字体大小设置为 100vw/宽度 *40 即可,
使用时将 xxpx/40得到rem（less可直接计算）。
7.响应式布局
响应式布局
-网页可以根据不同的设备或窗口大小呈现出不同的效果
-使用响应式布局，可以使一个网页适用于所有设备
-关键是媒体查询
-通过媒体查询，可以为不同的设备，或设备的不同状态来设置样式
8.媒体查询
媒体查询
-语法 @media 查询规则{}
-媒体类型
all 所有设备
print 打印设备
screen 带哦屏幕的设备
speech 屏幕阅读器
-可以使用逗号连接多个媒体类型，或的关系
@media print,screen{}
-可以在媒体类型前添加 only ,代表只仅仅，主要是为了兼容一些老版本的浏览器
媒体特性
-width 视口的宽度
-height 视口的高度
-max-width 视口的最大宽度(视口小于指定宽度时生效)
- min-width 视口的最大宽度(视口大于指定宽度时生效)
断点
-样式切换的分界点，网页的样式会在这个点时发生变化
-常用断点
小于768 超小屏幕 max-width：768px
大于768 小屏幕 min-width:768px
大于992 中型屏幕 min-width:992px
大于1200 大屏幕 min-width:1200px
连接词
-逗号 或
-and 且
-not 非
-only 只
10.练习总结
1.网页关键词
关键词一般会放在logo处，通常会使用方法将其隐藏
<h1 class="logo">
<a href="#">
<span>美图</span>
</a>
</h1>
.logo{
text-indent: -9999px;
background-image: url("../img/18/logo-primary.png");
background-size: 73px auto;
width: 73px;
height: 20px;
}
2.less除法
1.加括号
2.“./”强制转换
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
