CSS介绍
CSS是指层叠样式表 cascading style sheets
通过CSS可以让我们定义HTML元素如何显示
CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来
通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率
CSS与HTML结合方式--------------------
第一种方式 内联/行内样式：
就是在我们的HTML标签上通过style属性来引用CSS代码
优点：简单方便
缺点：只能对一个标签进行修饰
style 英文意思：样式
值为键值对的形式，用分号隔开，最后一个可以不用写分号
第二种方式 内部样式表：
<!--
我们通过<style>标签来声明我们的CSS
通常<style>标签我们推荐写在head和body之间，也就是"脖子"的位置（注意是为了不影响引入的地方，虽然操作了补充，具体看自己想放哪里吧）
若位置错误，浏览器会放到离位置对的地方，且靠近上面，位置优先级仍然是越后面越覆盖（可以理解为，只有覆盖的了）
位置对的地方就是body标签里和head标签里
优点:可以通过多个标签进行统一的样式设置
缺点: 它只能在本页面上进行修饰
语法： 选择器 {
属性:值;
属性:值
}
其中值不可加引号，否则不识别，那么就会按照默认值来操作
注意：与html一样，错误的不识别，只要识别了就会执行
-->
style的注释用/**/来进行注释
第三种方式 外部样式表---------------------
我们需要单独定义一个CSS文件，注意CSS文件的后缀名就是.css（后缀不对，可能不识别，也就是说，他可能看后缀，而不完全看内容，这就是为什么有后缀的原因，总不能只要是个问题就操作吧，虽然有时候有些只看内容，但还是建议写上对应的后缀）
在项目根目录下，创建css目录，在css目录中创建css文件 css01.css
在<head>中使用<link>标签引用外部的css文件
其中link可以引入css
<!--
对于<link href="css/test01.css" rel="stylesheet"/>
href是可以指定css的文件路径，而直接的引入是不会起作用的
首先，我们要知道Link标签有两个作用：
定义文档与外部资源的关系
是链接样式表
而link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系
说白了就是指明你链进来的对象是个什么东西的
就如招聘一个员工，你最起码要他做什么，而rel="stylesheet"就是让他当作样式表来用
rel 英文意思：有关的
stylesheet 英文意思：样式表
-->
还可以使用另一种引入css文件的方式
<!--
也可以这样
<style>
@import 'css/css01.css'
必须写在style里，否则不识别
单引号变双引号也可以，但不能不写引号或者出错，否则不识别，即没有导入css文件
但最好加上url，虽然他们不严谨，但我们要严谨，是为了好观察和维护
</style>
不识别的意思就是错误的不操作，即不识别错误，相当于没写这个代码
-->
<!--
关于外部导入css使用<link>与@import的区别:
加载顺序不同
@import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面
如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面
也就是说，html和css和js都是先后操作，link先，import后，js，html，css互相通知渲染
@import方式导入css样式，它是不支持javascript的动态修改的，因为他是最后的，js早没了，当然，如果你改变元素内容（css，html,js都可以修改，一般js修改并没有什么作用，但是js一般与渲染提交是串行的（一般代表后面的内容，但是他的执行可能导致不显示，或者阻止其他js执行（如alert），或者显示一瞬间，具体可以看这个博客：https://www.zhihu.com/question/61309490/answer/2402372679?utm_id=0），也就是说js不执行完，页面没有渲染，虽然他们修改了，但是还是需要提交的），那么自然也会变，因为你直接操作修改了
而link支持
三种样式表的优先级：满足就近原则:
内联 > 内部（@import无论先后都比其他内部优先级低，但是比外部大） > 外部，加载顺序是加载顺序，优先级是优先级并不互相影响，但是可能在中途会出现先操作外部的然后变回来（因为如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面）
其中id选择器由于权重大于类选择器，即id和类一起用时，会使用id，而不是类
对于权重来说，就是谁大谁使用
-->
css中选择器----------------------
元素（标签）选择器：
它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称
注意：其实标签和属性可以一样的自定义，即可以直接写一个标签，如b标签，同样也可以使用元素（标签）选择器
且对于属性来说引号必须成对，否则不识别，如一个单引号和一个双引号，或者说一个引号会不识别
类选择器：
类选择器在使用时使用"."来描述，它描述的是元素上的class属性值
id选择器：
它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值
id选择器，比类选择器更具有唯一性
选择器组：
逗号表示，谁和谁，即用逗号合并（逗号必须是英文逗号，否则不识别）
例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写
可以看百度源代码，查找逗号，就可以知道他的作用有多大了
<!--
我,你,他{
手机
}
->>
派生选择器：
子代：父子关系（隔代不管），即只作用与该标签的内容对应的标签，而内容里的标签的内容作用不到
后代：父子孙，曾孙，从孙…，即只要是该标签的，都作用
<!--
div p：后代选择器，div下的所有p标签都会被选取，忽略层级
div>p：子代选择器，div的子级元素p被选取，只选取一级
-->
CSS伪类：
CSS伪类可对css的选择器添加一些特殊效果
只要触发时，才会有效果
可以理解位该标签的使用这个曹祖偶，如a:link即a标签使用:link操作，这是style的语法，可以将:link看出{}，类似于a{}
大括号里有操作，即在这个操作上，加一点操作{}，相当于两个{}，实现不用在{}里多写了
伪类属性列表：
:active向被激活的元素添加样式
:hover当鼠标悬浮在元素上方时，向元素添加样式
上面两个作用元素，基本是所有标签
:link向未被访问的链接添加样式
:visited向已被访问的链接添加样式
上面两个作用链接，如a标签
:first-child向元素的第一个子元素添加样式
上面一个作用元素，基本所有标签
上面的需要有些只作用与链接，有些可以作用与元素，元素包括所有标签，当然自定义的也算
超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha
<!--
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
-->
对于浏览器，若出现一些问题，可以进行清除缓存操作
在浏览器的设置里可以找到清除浏览数据的选项，清楚后可以解决因为数据而造成的错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
/* 未点击
:link向未被访问的链接添加样式
只作用与链接，如a标签，不是链接不作用
即也要是链接（比如改成div，那么这里就不会存在了，因为他说明了是向未被访问的"链接"添加样式）
color设置文本颜色，就是字颜色
*/
a:link {
color: darkgreen;
}
/* 悬停
鼠标在上面悬停，即就放在上面不操作
:hover当鼠标悬浮在元素上方时，向元素添加样式
font 英文意思：字型
font-size设置字体大小
*/
a:hover {
font-size: 30px;
}
/* 访问过，且默认颜色为深紫色
根据浏览器的上面存留的页面
只要经过该地址（与href关联的访问的，所以如果是#，那么就是当前路径加上#的地址），如只要你在浏览器上有经过该网址的记录就会是访问过
可以进行清除缓存，使得访问过的记录清除，那么就会变成没有访问过了
注意：最好清除所有时间的记录，因为只要有历史记录，就会是访问过
若href(地址)为空，那么无论是否清除缓存，都一定是访问过（因为link对空的不生效）
:visited向已被访问的链接添加样式
即也要是链接（比如改成div，那么这里就不会存在了，因为他说明了是向已被访问的"链接"添加样式）
*/
a:visited{
color:red;
}
/* 激活：（点住，别松手）
:active向被激活的元素添加样式
*/
a:active{
color:chocolate;
}
</style>
<body>
<a href="https://www.baidu.com/">拉勾网</a>
</body>
</html>
<!--
对于为什么在a标签中的伪类选择器的要先后顺序问题
主要是优先级的问题，其中标签里属性不会覆盖，谁前谁作用，但不同的标签属性就会操作转移
如selected属性，相当于一个样式覆盖操作，像这样的属性，可以叫做样式属性
且对于同样的样式修饰也会进行覆盖，就如selected一样进行覆盖
即样式覆盖，可以理解为原来的没有识别，只识别覆盖的
就是同一样式采用优先级的方式来进行选取，剩下的不起作用
即对于冲突的样式，会采取优先级的方式进行使用，对于不冲突的样式，会进行样式叠加
由于上述的选择器都优先级都相同，那么就要看源码顺序了
在这里说明一下，在style里，写在后面的样式，在使用到时（即满足条件）先起作用，是因为写在后边的会覆盖前边
使得只要后面的样式起作用（注意需要相同的）
在样式弄好后，一个一个读取
最后就是后面的在上，当然你没使用，就不会覆盖使用中的样式，就如div之间的图片覆盖类似，只要你使用就会覆盖
即我只会覆盖我操作的地方，如颜色，若我们都修改颜色，那么就只会显示我覆盖的内容
若你是字体大小，我是颜色，这时我覆盖不到，即我只能覆盖你在我操作范围里的内容
这就是为什么需要有顺序的原因，否则的话，有些被覆盖的操作是不起作用的
上述的覆盖的意思就是，相同的样式，只会取一个，由于后写的样式会覆盖前面的样式，虽然前面的样式还在
但浏览器只会取一个样式，使得还在的样式不起作用，但他还是在的（可以通过检查删除覆盖的样式，来进行实验）
就如div标签覆盖类似
但div是起作用的覆盖，而这里是没有起作用的覆盖，时空间不同，即div是操作后的覆盖，这里是操作前的覆盖
那么ok，看以下介绍
link:未点击
hover:悬停
visited:访问过
action:点击不动
由鼠标到内容的先后顺序是，鼠标在内容之外，这时若我们先写点击不动:
link
hover
visited
action
action在后面，那么当你没点击不动时，action没操作，由于link和visited都会执行，且无论link和visited谁先执行
另外一个一定不执行，因为访问过就是点击过，未访问就是未点击，即这两个顺序位置可以随便交换
如果是
link
action
visited
hover
这时移动一定会覆盖点击不动，所以你点击后action在移动中的操作会被覆盖
最后得出结论
若将link和visited放在后面，这时会始终覆盖action和hover在他们其中的操作，因为他们两个必定有一个会始终作用
所以link和visited必须放在最前面防止覆盖操作，而hover移动必须放在action前面，因为要使得点击不动起作用
由于link和visited可以随便位置交换
所以根据好的记忆方式，使用爱恨原则 LoVeHAte，lvha
即
link
visited
hover
action
这样的操作，当然，visited可以和link交换位置
对于标签的地址
link标签：href，可以指定css文件路径，需要rel="stylesheet"说明
a标签：href，可以指定本地和网页的路径，没有指定特定东西的就是都可以，如图片，文件，视频，音频都可以
img标签：src，可以指定本地和网页的路径图片，只能指定图片，否则就会显示加载图片失败，静态和动态的图片都可以
form标签：action，可以指定本地和网页的路径，且可以带数据
frame标签：src，可以指定本地和网页的路径
video标签：src，可以指定本地和网页的路径视频，只能指定视频
audio标签：src，可以指定本地和网页的路径音频，只能指定音频
href 英文意思：水平参考
src 英文意思：文件名
action 英文意思：作用
对于@import
在style中使用@import指定路径时，可以加上url()里面写路径（可以有单引号和双引号，或者没有引号）
也可直接写路径
而其他的指定图片的路径，如背景图片，则需要url()来操作（可以有单引号和双引号，或者没有引号），但不可以直接写
否则不识别，一般来说不能在前面加上/，否则会认为是绝对路径，且默认c盘（项目也是如此，除非他不是html，jsp可能不是，是项目的路径）
而在开始标签里就只能直接写路径
-->
<!--
对所有body标签下且包括body标签的第一个li标签进行添加样式，除了li标签下的li标签
因为是过滤形式，即添加后，就不再向里找了
:first-child向元素的第一个子元素添加样式
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#title{
font-family:"隶书";
font-size:2em; /* 默认字体大小的2倍 */
font-weight:bold; /*字体加粗*/
color:red; /*字体颜色*/
text-align: center; /*居中对齐*/
text-decoration: underline; /*下划线*/
line-height: 30px; /* 行高*/
font-style:oblique;/*浏览器会显示一个倾斜的字体样式，像/斜着*/
}
.content{
text-indent:2em; /*首行缩进*/
}
/*
其实我们再对标签进行修饰时，主要是对标签本身和其内容的修饰，那么就可以这样理解
以p标签为例子，他占一行
对p标签内容指定字体：font-family : value;
p标签内容字体大小：font-size : value;
负数默认为（默认值）16px，也可以为小数，一般所以有值的地方都可以为正整数px（必须要单位，除了个别的，如line-height）
所以就不介绍正整数px了
px：像素
em：倍数
p标签内容字体加粗：font-weight : normal/bold，normal默认字体，bold字体加粗
也可以是数字和小数,数字范围是1到1000,包括1和1000，若超出这个范围的话，就是默认字体,如负数，0，1001
数字值400等价于normal，700等价于bold
p标签文本颜色：color : value;
文本在p标签里的排列：text-align : left/right/center;，向左靠，中间，右靠
p标签里的文字修饰：text-decoration : none/underline;,none默认，underline下划线
p标签所占行的高度：line-height : value;单位是px，若为数字，如2,就表示200%,也就是2em，两倍行高
即除了px单位外，就是倍数关系，有em当作em，没有就当作百分比的大小，如2就是200%
p标签中第一行的文本缩进（页面边界之间的距离），这里指第一行与左边界的距离
若缩进的内容到右边界，会从左边界出来
text-indent : value （em和px为单位，这里的1em代表一个字的大小），其中value可以为负数和小数，默认为0
若为%,则按照父元素的宽度进行%分配，将得到的缩进距离进行缩进
font 英文意思：字型
family 英文意思：家庭
size 英文意思：大小
weight 英文意思：重量
normal 英文意思：正常的
bold 英文意思：粗体的
color 英文意思：颜色
text 英文意思：文本
align 英文意思：排列
left 英文意思：左边
right 英文意思：右边
center 英文意思：中心
decoration 英文意思：装饰
none 英文意思：没有
underline 英文意思：字下线
line 英文意思：边线
height 英文意思：高度
所有line-height就是所占行（边线）高度
indent 英文意思：缩进
*/
</style>
<body>
<p id="title">中华人民共和国万岁！</p>
<p style="text-align: right;">作者：老孙</p>
<p class="content">我们相亲相爱，是一家人！</p>
<p>我们相亲相爱，是一家人！</p>
</body>
</html>
CSS基本属性--------------------------------------
上面是文本属性，下面是背景属性
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
div {
width: 500px;
background-color: pink; /* 背景颜色 */
background-image: url("img/cat.gif");
background-repeat: no-repeat; /* 平铺方式*/
background-position: 0px 100px; /*背景的位置（移动）*/
background-attachment: fixed; /* 固定的背景*/
}
/*
div标签需要style进行修饰出现
由于块级元素默认宽度为占满一行，默认高度由内容决定，即内容的高度
所以我们需要给他高度或者内容,宽度可以不给
若要给高度和宽度即可以使用px和em表示，或者%表示，1em=100%，使用小数和负数的话，则使用默认值
以div标签为例
设置div标签的背景颜色：background-color: pink;，值只能是颜色，否则不识别
设置div标签的背景图片，把图像设置为背景：background-image: url("img/cat.gif");
可以是本地的也可以是网页的图片，只能是图片
这两个可以用bcakground来表示所有路径，即颜色和图片都可，只不过具体的color和image可以更好的观察出需要的东西
图片设置背景时，一定会将整个背景都铺满，不可有一处不是图片，而多出来的图片
则根据div容量进行裁剪，即消除多余的图片，而这样就会导致小的图片会形成平铺状态
而大的图片就会被裁剪，除非刚刚好的才可完全显示出来，且不平铺
当然，相差不大的也影响不了观看，但这样的就需要手动的去调整，所以为了节省，就有了不让他平铺的操作
让该div标签的背景图，不平铺，设置背景图像的墙纸效果，是否及如何重复
background-repeat: no-repeat;
repeat：在垂直方向和水平方向重复，为重复值，默认值
repeat-x：仅在水平方向重复
repeat-y：仅在垂直方向重复
no-repeat：仅显示一次
设置div的背景图像的起始位置：background-position
值可以为小数和负数，若只有一个值，另外一个值为50%
控制水平方向 x轴：
正值，向右移动
负值，向左移动
控制垂直方向 y轴：
正值，向下移动
负值，向上移动
可以理解为操作最开始背景图像所在位置的左上角坐标
使得div的背景图像是否固定或者随着页面的其余部分滚动：background-attachment
注意是背景图像，与元素的移动无关（一般也包括他的属性，如背景图），即元素移动我不移动，因为我已经固定在显示框里了
默认值是 scroll：默认情况下，背景会随文档滚动
可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动
浏览器的页面其实有固定的宽度和高度，只有你的内容突出或者自己去设置才可改变
由于屏幕并不能将浏览器页面完全的显示，所以可以理解为我们一个屏幕相当于一个显示框
而浏览器的页面相当于一个大格子，而div就是大格子里的小格子，最开始我们的显示框在左上角
我们在滚动时，其实就是移动显示框，默认情况下，内容是不会与显示框一起的，因为移动显示框，会离div内容越来越远
当我们设置了fixed时，他的作用是将图像固定，即他会随着我们的显示框一起移动，即可以说固定在了显示框里
这样的常用于实现称为水印的图像
background 英文意思：背景
color 英文意思：颜色
image 英文意思：画像
repeat 英文意思：重复
position 英文意思：位置
attachment 英文意思：连接
fixed 英文意思：固定的
*/
</style>
<body>
<div>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
</div>
</body>
</html>
列表属性：
CSS列表属性作用如下：
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
.a {
list-style-type: none;
}
.b {
list-style-type: decimal-leading-zero;
}
.c {
list-style-type: upper-roman;
}
.d {
list-style-type: upper-alpha;
}
.e {
list-style-image: url('img/list-img-2.gif');
}
/*
list-style-type和list-style-image只对li标签起作用(与是否为ol和ul无关)
所以ul和ol只是给个地方用来放数据的，而li也可以通过类选择器来使用上面的修饰，且优先级更高
即加上list-style的基本都是这样
给对应的元素的li标签的修饰进行操作：list-style-type
以下是值
none：无标记（去除标记），但内容位置不变，只不过标记没有了
disc：默认，标记是实心圆
circle：标记是空心圆
square：标记是实心方块
decimal：标记是数字
decimal-leading-zero：0开头的数字标记(01, 02, 03, 等)
lower-roman：小写罗马数字(i, ii, iii, iv, v, 等)
upper-roman：大写罗马数字(I, II, III, IV, V, 等)
lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等)
upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等)
给对应的元素的li标签的修饰，变为图片： list-style-image
值使用url来获取图片路径，为本地和网页的图片，静态图和动态图都可
list 英文意思：列表
style 英文意思：样式
type 英文意思：类型
image 英文意思：画像
none 英文意思：没有
disc 英文意思：圆盘
circle 英文意思：圆
square 英文意思：正方形的
decimal 英文意思：十进制的
leading 英文意思：主要的
zero 英文意思：数字0
lower 英文意思：下面的
upper 英文意思：上面的
roman 英文意思：罗马的
alpha 英文意思：希腊字母表的第1个字母(a和A)
*/
</style>
<body>
<ul class="a">
<li>曹操</li>
<li>刘备</li>
<li>孙权</li>
</ul>
<ol class="b">
<li>吕布</li>
<li>赵云</li>
<li>典韦</li>
</ol>
<ol class="c">
<li>关羽</li>
<li>马超</li>
<li>张飞</li>
</ol>
<ol class="d">
<li>黄忠</li>
<li>夏侯惇</li>
<li>姜维</li>
</ol>
<ol class="e">
<li>老孙</li>
<li>老杨</li>
<li>老西</li>
</ol>
</body>
</html>
<!--
一般所以有值的地方都可以为正整数，之后加单位（有些不可加），所以就不介绍正整数了
px：像素
em：倍数
%：百分比
width和height必须有px，em，%这些单位，不可有小数和负数或无单位的数，否则默认占满一行
font-size可以有px，em，%这些单位，负数默认为（默认值）16px，即100%，可以是数字和小数
如单独的数字1就是100%，默认值medium（中等的）
font-weight只能是数字，也可以是小数，数字范围是1到1000，包括1和1000
若超出这个范围或者使用单位，就是默认字体，如负数，0，1001，1px，1em
数字值400等价于normal（默认值），700等价于bold
line-height可以有px，em，%这些单位，可以是数字和小数，不可以是负数，如单独的数字1就是100%
否则是默认值normal
text-indent必须有px，em，%这些单位（这里的1em代表一个字的大小），可以为负数和小数
否则默认为not specified（相当于0px）
若有%，则按照父元素的宽度进行%分配，将得到的缩进距离进行缩进
background-position必须有px，em，%这些单位（这里的1em代表一个字的大小）可以为负数和小数
否则默认为not specified（相当于0px）
若为%，则按照页面元素对应的宽度和长度进行%分配，将得到的距离进行移动
值可以为小数和负数
注意页面元素对应的宽度，不是浏览器显示的宽度，这点需要注意，若不理解，可以缩小窗口，就知道了
从这里看出，在设置值的时候基本上px，em，%都可以写，有些会有限制，如font-weight
可以得出除了个别的基本上所有修饰都可以使用px，em，%，各有含义
对于距离来说，基本是都要用单位，因为像素存在，而不是距离的，基本是可以不写单位
但在以后开发中，最好使用px单位，因为基本适用于所有修饰，且不会出很大问题，因为有些修饰em和%是有其他意思的
而px一直代表着像素
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
li{
list-style-type: none;
color:white;
background-color: black;
width: 150px;
text-align: center;
float: left; /* li水平方向显示*/
line-height: 40px;
font-size: 1.3em;
cursor: pointer;
}
li:hover{
background-color: orange;
line-height: 50px;
}
/*
在平常情况下，一般一个li（是块级元素）是会自动换行的，这时若我们想要将两个li标签在同一行，可以使用浮动
以li标签为列
让li标签进行浮动float值有：
left元素向左浮动
right元素向右浮动
none默认值，元素不浮动
在设置浮动时，被操作的元素会变成块级元素，使得占一行
一般的块级元素都会有另起一行和自动换行的功能，而浮动的块级元素则没有，这就是浮动的主要作用
在这基础上，进行浮动操作
若没有其他可以跳出这一行的元素，则会一直操作这一行
若值为left，会将操作的元素向左靠近，元素后面开始显示内容，而不是下一行
若值为right，会将操作的元素向右靠近，元素最前面开始显示内容，而不是下一行
当我们点击到文本时，鼠标的样式默认为I可以对标签设置鼠标到他身上的样式
对到元素上的鼠标，进行样式设置cursor：pointer，
float 英文意思：浮动
cursor 英文意思：光标
pointer 英文意思：指针，实际上是一个手的模样
注意：只要没有到下一行，那么就在该行操作，无论前面是否被其他元素占领，所以当第一个右浮动后，我们在剩余的空间行里进行操作
*/
</style>
<body>
<ul>
<li>斗罗大陆</li>
<li>凡人修仙传</li>
<li>拉勾教育</li>
</ul>
</body>
</html>
边框属性：
CSS边框属性允许你指定一个元素边框的样式和颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
div {
width: 400px;
height: 40px;
margin: 10px; /* div和div彼此之间产生10像素的距离*/
}
.a {
/* 设置四个边 */
border-width: 2px;
border-color:red;
border-style: solid;
border-right-color:green; /* 设置右边框的颜色 */
border-bottom-style: dashed; /* 设置下边框的样子 */
}
.b1{
border:10px solid red;
}
.b2{
border:10px dotted red;
}
.b3{
border:10px dashed red;
}
.b4{
border:10px double red;
}
.b5{
border:10px groove red;
}
.b6{
border:10px ridge red;
}
.b7{
border:10px inset red;
}
.b8{
border:10px outset red;
}
/*
以div标签为列
让div之间的四个方向的边距，为10px，margin: 10px（设置顺序一般也是四值的顺序），必须有px，em，%这些单位，可以为负数和小数，否则默认为0px
一个1em是一个字体距离，%按照页面的百分比距离
如水平的百分比作用与水平间距，竖直的百分比作用于竖直间距
margin可以分开写，写成：
四个表示：上，右，下，左
三个表示：上，右左，下
二个表示：上下，右左
可以看出了，偏向与右
我们也可以对要操作的元素添加边框
border-width:2px;，表示边框的宽度，即大小，这是2px，即2像素大小，必须有px，em这些单位
可以有小数，不可以有%
否则默认为2px
border-style:solid;，表示边框的样式，这是实心线
border-color:red;，表示边框的颜色，这是红色
这三个可以简写，如border:1px solid red;
也可以对部分的边框进行改变，要注意不用被覆盖，即写在后面
border-right-color:green;，设置右边框的颜色
border-bottom-style:dashed;，设置下边框的样子
即在border后面加上：
top表示操作上边框
right表示操作右边框
botton表示操作下边框
left表示操作左边框
border 英文意思：边界
solid 英文意思：实心的
对于设置的样式style看下图
*/
</style>
<body>
<div class="a"></div>
<div class="b1">实心线</div>
<div class="b2">点线</div>
<div class="b3">虚线</div>
<div class="b4">双线</div>
<div class="b5">3D效果的凹槽</div>
<div class="b6">3D脊边框</div>
<div class="b7">嵌入边框</div>
<div class="b8">突出边框</div>
</body>
</html>
轮廓属性：
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
轮廓和边框的区别：
边框 (border) 可以是围绕元素内容和内边距的一条或多条线
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
即可以理解为边框保护内容，轮廓保护边框
CSS outline 属性规定元素轮廓的样式、颜色和宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width: 400px;
height: 200px;
border: 30px solid darkcyan;
outline: 5px dashed red;
/*
轮廓操作与边框的操作类似
且边框保护内容，轮廓保护边框
*/
}
</style>
<body>
<div></div>
</body>
</html>
盒子模型：
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素
下面的图片说明了盒子模型(Box Model)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
border:2px solid greenyellow;
margin-top: 50px; /*上外边距*/
margin-left: 100px; /*左外边距*/
padding-top:20px; /*上内边距*/
padding-left:40px; /*左内边距*/
}
/*
在前面我们说过，margin是修饰元素的外边框与其他元素外边框的距离，其实简称为外边距
且有四个方向，之前我们是这样写的margin：10px表示四个方向的外边距为10px
其实也可以像边框一样，操作某个方向的外边距
如margin-，后面加
top上外边距
right右外边距
bottom下外边距
left左外边距
margin的四个方向默认值可以理解为在不同浏览器中的不同标签的值，因为有些标签总会有空隙的，即默认值是会变的
即浏览器和标签的各自有margin默认值
且margin的值必须有px，em，%这些单位，可以为负数和小数，否则为默认值
该值受浏览器和元素的影响，即不同的浏览器和元素该值不同
一个1em是一个字体距离，%按照页面的百分比距离
如水平的百分比作用与水平间距，竖直的百分比作用于竖直间距，列如，页面框为1000px，那么10%取100，100当作间距
注意：margin在多个元素之间符合最大者元素，即若a元素margin为10px，b元素margin为20px，a与b之间的距离
就是20px，取最大值，即可以说margin只要满足就可以，相同，那么就取左上元素的对应值（虽然相同随便取都行，但是我们二进制是必须选择一个的）
且对于margin是优先考虑左外边距和上外边距的，即无论右外边距和下外边距有多大，或者不对，但是margin存在问题，他的右下一般是将对方进行撑开，而不是他自己远离，这一般是考虑解决会离开内容的原因吧（但是若对方是不动的，那么他自己会移动，比如对方就是边界（若自身也在边界，那么都不移动），否则他会直接换行，那么这个时候无论你怎么增加都没有用了）
都要先满足左外边距和上外边距，就如设置上外边距为10px，下外边距为900px，那么上外边距还是10px
既然有外边距，那么就有内边距，内边距就是内边框与内容之间的距离，且会扩大整体元素的大小（他会进行撑开，而不会优先考虑左和上的内边距，与margin是不同的，除非操作了box-sizing: border-box;设置，具体作用可以百度），如上内边距为10px
那么整体宽度由200px变成210px，其中左上角不变，因为是起始位置，即相当于最开始的200px是210px修饰一样
左右内边距的增加，就会导致width的增加，上下内边距的增加，就会导致height的增加
且是同等的增加，距离多少，增加多少，是为了使得原来内容的大小的一致性，且要符合距离和盒子的位置不变造成的
元素的内边距操作使用padding来操作
直接的padding:10px，就是四个方向的内边距（设置顺序一般也是四值的顺序），也可以分开，与margin的分法一样，分别是：
上，右，下，左
即padding:10px 10px 10px 10px，上，右，下，左
与margin一样，也是这样：
即padding可以分开写，写成：
四个表示：上，右，下，左
三个表示：上，右左，下
二个表示：上下，右左
可以看出了，偏向与右
也可以进行细分，如padding-后面加
top上内边距
right右内边距
bottom下内边距
left左内边距
其中padding的值，必须有px，em，%这些单位，不可以有负数，可以有小数
一个1em是一个字体距离，%按照页面的百分比距离
如水平的百分比作用与水平间距，竖直的百分比作用于竖直间距，列如，页面框为1000px，那么10%取100，100当作间距
一般说明什么必须有的，一般是css的规定，不按照规定可能不会操作样式
最后，对于直接意思的通常都是作用与当前元素整体，而不是部分，如padding
而text-align作用与部分
*/
/*
注意：我们并没有固定，一般来说，浏览器是可以无限扩展的（不是显示框哦，一般%操作的都是显示框），所以基本没有外边距和内边距冲突的可能性
那么有个问题，对应的宽高代表什么，实际上只是代表内容（这是因为在前面我们基本都只是操作内容，而并没有操作边框，这样你可能会认为他不是是一个整体而非内容的，实际上是内容的），也就是说，或者说这就是为什么padding会看起来撑开的原因，所以border也会撑开，虽然是覆盖，但是也会导致整体变大，因为宽高是内容，这也是为什么大多数我们都会错误的这样认为边框不是覆盖的原因，因为在没有这个说明之前，我们都会以为是加上了边框，而不是覆盖，这样将内容作为宽高就完美的解释了
若要确定是否边框是覆盖的，可以将solid（实线）修改成dashed（虚线）就知道了，但是若加上虚线的内容的话，那么对应的宽高不是变大的吗，实际上是没有的，边框里面的的确是覆盖，多余的是进行补充的，简单来说就是撑开，因为元素高度并不是内容宽高，只是没有其他属性时，就是内容宽高，所以上面才会说撑开（或者说扩展背景）
一般撑开是起点不变的，即右下进行撑开
*/
</style>
<body>
<div>
<img src="img/cat.gif">
</div>
</body>
</html>
CSS定位---------------------
默认定位：
块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行），可以改变宽高
行内元素：a,b,span,等，从左向右，水平排列（不会换行），不能改变宽高，是因为他们只受内容的影响而扩大
行内块元素：input,img等，从左向右，水平排列（不会换行），可以改变宽高
行内块元素就算前面说的只有内部内容的标签，实际就是把块元素以行的形式展现，保留了块元素可以设置的对应CSS属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 50px;
border :1px solid red;
}
span{
width: 100px;
height: 100px;
border :1px solid red;
}
input{
width: 50px;
height: 50px;
border :1px solid red;
}
a {
width: 50px;
height: 50px;
border :1px solid red;
/* a标签是行内元素，无法改变宽高。但只要转换成行内块元素，就可以改变宽高了。 */
display: inline-block; /* 将a元素，显示成 行内块
若值为block就算块级元素
display 英文意思：显示
inline 英文意思：内联的
block 英文意思：块
注意：上面的转换并不能将标签完全转化，只是给予了一些权限（如宽高可以修饰了），本质还是没有进行变化的
对本质来说，通过实验和F12得出
行级元素里显示不了块和行内块
行内块显示不了块和行级元素
而块都可以显示，包括自己
只所以这样是块级元素的占一行导致的
*/
}
</style>
<body>
<div>你好</div>
<div>你好</div>
<div>你好</div>
<hr>
<span>大家好</span>
<span>大家好</span>
<span>大家好</span>
<hr>
<input>
<input>
<input>
<h1>如何让span标签也可以改变宽高</h1>
<p>使用display属性，进行转换</p>
<hr>
<a href="">拉勾</a>
<a href="">拉勾</a>
<a href="">拉勾</a>
</body>
</html>
<!--注意：其实所有的元素都可以设置宽高，只是有些元素没有必要，所以为了防止这种情况，或者省略一些设置，将将对应的权限设置少点，这就是行，行内块，块的出现的原因-->
浮动定位：
让元素"飞"起来，不仅可以靠着左边或右边，还可以消除"块级"的霸道特性（独自占一行）
float取值：
none ：不浮动
left：贴着左边 浮动
right：贴着右边 浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.da{
width: 300px;
height: 300px;
border: 5px solid black;
}
.a,.b{
width: 80px;
height: 80px;
}
.a{
background: darkcyan; /*简写*/
float: left; /* 靠左边浮动 */
margin: 10px;
}
.b{
background-color: blue;
float: right; /* 靠右边浮动 */
margin: 10px;
}
/*
注意，浮动只会与当前显示框进行浮动，如你的浏览器显示框宽度为2000px
而div宽度为300px，那么当浮动六个时，即1800px
那么剩下的，不足以填充，那么就会到下一行去，即这时就会换行
div之间可以被覆盖，所以div并不会像页面一样会自动扩大，基本是所有的标签都会进行覆盖，而页面大小不会
这是浏览器的作用
最后，可以被覆盖的元素，基本上里面的元素内容或者元素，是可以离开边框的，即可以大于当前元素的大小
*/
</style>
<body>
<div class="da">
<div class="a"></div>
<div class="b"></div>
</div>
</body>
</html>
若需要一个颜色可以去以下网站
http://tools.jb51.net/static/colorpicker/index.html
在线颜色的选择
相对定位：
和原来的位置进行比较，进行移动定位（偏移）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.da{
width: 300px;
height: 300px;
border:2px solid black;
}
.a,.b,.c{
width: 200px;
height: 60px;
}
.a{
background: palevioletred;
}
.b{
background: darkcyan;
position: relative; /*相对定位：相对于自己原来的位置进行移动*/
top:30px; /* 上偏移30px*/
left: 50px; /* 左偏移50px*/
}
.c{
background: chocolate;
}
/*
这里注意：只有在定位时，如相对定位和绝对定位，单纯的方向才有作用，即
top，right，bottom，left才会有作用，否则没有作用
注意这里的（是这里，可不是什么边距的操作哦）top的权重大于bottom，left权重大于right，这与优先级不同
在定位中，两者会有不与优先级的冲突，这时，就要看权重了，即我与他的距离为20px
而你的操作会将我与他的距离变成10px，这违背了我原来的作用，这时谁权重大，就使用谁的结果
就如这里的left权重大于right权重，那么right在有left的情况下，是不起作用的，被强制停止作用
top该修饰的元素与原来的元素位置向上比较的头顶距离，即向下移动的距离
right该修饰的元素与原来的元素位置向右比较的右边距离，即向左移动的距离
bottom该修饰的元素与原来的元素位置向下比较的下边距离，即向上移动的距离
left该修饰的元素与原来的元素位置向左比较的左边距离，即向右移动的距离
他们的值必须有px，em，%，可以有负数和小数，em表示一个字，%按照父级元素来进行百分比大小
否则默认为0px，
position 英文意思：定位
relative 英文意思：相对的
对于父级元素来说，最终结果是body元素
对于定位，就是将元素固定在大格子里，实际上操作距离差不多都是固定了，因为不能用css在操作后的继续改变
*/
</style>
<body>
<div class="da">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
绝对定位：
本元素与已定位的祖先元素的距离
如果父级元素定位了，就以父级为参照物
如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物
如果爷爷没定位，继续向上找，都没定位的话，body是最终选择，一般来说body代表是当前的显示框，虽然都在大格子里面（可扩展的）
因为当父级元素没有时，子元素当然没有，所以父级元素的定位一点优先于子级元素，因为html有顺序的执行
这就是绝对定位可以与已定位元素的距离进行操作的原因
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.yeye{
width: 400px;
height: 400px;
background: olive;
padding:30px;
}
.baba{
width: 300px;
height: 300px;
background: black;
}
.a,.b,.c{
width: 200px;
height: 60px;
}
.a{
background: palevioletred;
}
.b{
background: darkcyan;
position: absolute; /*绝对定位，一般默认左上为起始（在父元素的左上角）*/
top:30px;
left: 50px;
z-index:0
}
.c{
background: chocolate;
}
/*
绝对定位与相对定位有很大不同
只所以有很大不同，先说明html的读取方式，之前我们说过，浏览器会自动补充，且有级别的元素，如块，行内块，行
还有自动换行，他们只所以有这些，是因为html是按照一定的顺序，来进行连接的
这样的顺序称之为文档流，如java一样有顺序执行，这样的顺序，就有属性和修饰的顺序，属性一般前执行，后不识别
修饰一般后执行，前不识别，都在相同属性和修饰下
所以相对定位时，由于他需要原来位置，即这个顺序中代码起了作用，只不过位置变化了而已，这样的称他为没有脱离文档流
而绝对定位，不需要原来的位置，只是参照已定位的元素进行操作，且位置变化了，这样的称他为脱离文档流（只看大格子）
但无论是否脱离，源代码的位置还是不变，任然可以定位，如用js定位
只不过顺序操作的代码没起作用而已，相对定位则起作用了，如原来的位置
可以说，代码作用没起，但显示的，一般为脱离文档流，起了作用，一般就不是脱离文档流
但是无论是否脱离，都与结构有关，但对于文本和行内元素来说依然是占用空间的（因为他们只与显示有关）
只有某个元素定位了，那么z-index属性就会起作用，默认为auto(可以说是z-index:0)
值可以为负数，不可以有px，em，%这些单位，不可以有小数，否则就是默认值
这是覆盖等级，谁大，谁进行覆盖，若相同的等级，就按照文档流位置进行覆盖，谁在后面谁覆盖
若大于等于0的这个属性，一般都会覆盖没有进行定位的元素
这就是定位覆盖的原因
absolute 英文意思：绝对的
index 英文意思：指数
最后绝对定位的单纯属性与相对定位一样
*/
</style>
<body>
<div class="yeye">
<div class="baba">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</div>
</body>
</html>
固定定位：
将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>固定定位</title>
</head>
<style>
.gg{
width: 200px;
height: 200px;
background-color: aqua;
position: fixed;
top:100px;
left: 500px;
}
/*
position也有与前面的背景图像（包括颜色）的固定操作
前面只能固定背景图像，而这里可以固定这个元素和元素内容
fixed 英文意思：固定的
固定在显示框内
当然无论是图像和元素固定，都可以进行其他操作，因为我只负责固定，而不影响其他操作的
*/
</style>
<body>
<div class="gg"></div>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
<h1>拉勾网</h1>
</body>
</html>
z-index：
如果有重叠元素，使用z轴属性，定义上下层次
注意：z轴属性，要配合相对或绝对定位来使用
z值没有额定数值（整型就可以，具体用数字几，悉听尊便）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 80px;
}
.a{
background: blueviolet;
position:relative;
z-index: 3;
}
.b{
background: violet;
position:relative;
top:-20px;
left: 30px;
z-index: 2;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
CSS3-----------------------------
圆角：
border-radius：左上 右上 右下 左下，可以看出html中，是偏向于右的
border-radius：四个角，即当数据，就表示四个角
border-radius：50%，圆形，就是半径元素的一半宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
background: orangered;
/* border-radius:1px 10px 30px 50px; */
/* border-radius: 30px; */
border-radius: 50%; /*设置一半大小*/
}
/*
我们的边框都是一个角，可以变成圆形
border-radius 设置角的圆形程度
必须有px，em（代表一个字的距离），%这些标签，不可以有负数，可以有小数，否则默认0px
最大就算一个大圆形，即div的一半宽度大小（半径），超过了，还是一半宽度大小，在这里就是100px
radius 英文意思：半径
*/
</style>
<body>
<div></div>
</body>
</html>
盒子阴影：
box-shadow：1 2 3 4 5
水平偏移
1：水平偏移
2：垂直偏移
3：模糊半径
4：扩张半径
5：颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
background:red;
position:absolute;
top:300px;
left:300px;
box-shadow: 200px 10px 20px 20px gray;
}
/*
box-shadow可以设置该元素盒子的阴影，而不是所以内容和元素的阴影
一般的盒阴影可以理解为被覆盖的，即重合一起，而我们可以将阴影移动位置
box-shadow设置阴影的位置和样式
有五个值，如box-shadow:20px 30px 40px 50px red;
其中20px这个值代表阴影水平方向的移动，正代表向右移动，负代表向左移动
30px代表阴影竖直方向的移动，正代表向下移动，负代表向左上移动
值必须有px，em(em代表一个字的距离），可以为负数和小数，不可以有%，否则默认为0px
其中40px代表阴影模糊的程度，越大越模糊，值必须有px，em（模糊倍数）这些单位，不可以有负数和%
可以有小数，其中可以直接为0（代表0px）
否则则没有阴影
其中50px代表阴影的扩张程度，越大，阴影就越大，值必须有px，em（代表一个字的距离），可以有负数和小数
负数极限为阴影的宽度，超过了就没有阴影了
不可以有%，其中可以直接为0（代表0px），否则没有阴影
其中red代表这个阴影的颜色
box 英文意思：盒
shadow 英文意思：阴影
</style>
<body>
<div></div>
</body>
</html>
从上面的单位的总结，合理的始终可以使用，就如距离不能为负数，%要有参照，像素距离需要单位等等
渐变-------------------------
线性渐变：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 60px;
margin: 10px;
}
.a1 {
background: linear-gradient(red,black);
}
.a2 {
background: linear-gradient(red,black,pink, green);
}
.a3 {
background: linear-gradient(to left,red,black);
}
.a4 {
background: linear-gradient(to top left,red,black);
}
.a5 {
background: linear-gradient(30deg,red,black);
}
/*
我们可以对元素进行颜色的渐变，使用
background:linear-gradient([方向/角度]，颜色列表);
中括号的可以省略，颜色列表可以写多种颜色，用逗号隔开
默认的渐变色方向是从上往下
linear 英文意思：线性的
gradient 英文意思：梯度变化曲线
其中由于默认从上到下，而颜色就算从上到下渐变，如background:linear-gradient(red,black)
渐变必须需要两个颜色或者以上的变化，否则（一个颜色）不会显示出现（要不然称为渐变干什么），即加上删除线
原理是什么：
颜色从红色开始到下慢慢的变为黑色，最后一个像素点完全就是黑的，同理起始点像素点完全是红的
如果上到下的像素点是200，那么将红到黑中的过程出现的像素点（代表颜色的）除以200，假设为1.7，那么1+1.7=2.7为3（四舍五入），就这样的慢慢过去
而至于如何确定过程中出现的像素点，这里就要明白，如果全部列举出现，必然可以找到一个路径，001，002，25500，25501，这样的流程，那么只需要显示这个路径即可
当然，你可能还不明白，没有关系，这里举出一个数学的例子：假设我的起始是1，要到终点400，如果1到400只能移动100次呢，应该每次需要移动多久
很明显，1代表是红色像素的起点，400代表黑色像素（这样的是代表颜色的，而不是显示的像素点）的起点，100代表上到下的像素点（这个就是显示的像素点），而1到400代表398个像素（不包括两边的），那么398就是红到黑出现的像素点
即398/100=3.98，那么第二个高度的像素应该是1+3.98=4.98=5（颜色的像素点），直到400.98，到顶了，那么忽略小数为400
但是需要考虑一个问题，这里可以写多个元素，那么如果是不规范的顺序是怎么操作的呢，答：通过第一次读取这个样式生成的函数就行了
也可以设置方向，to left，就算向左进行渐变
to top left就是向左上进行渐变，top和left可以改变位置，效果一样，即top right bottom left这些都可以进行操作
但是不能冲突，否则操作的元素就会不显示，如left和right一起，bottom和top一起
也可以进行数学上的度数方向，如30度
下面相对于当前位置进行90度旋转，即逆时针（为什么是逆时针，你认为在数学坐标系中用一个线段从0度到90度，这个线段是怎么移动的呢，很明显是逆时针的，那么这个逆时针就是说明的这个）
如background: linear-gradient(90deg,red,black);
由于默认为从上到下，那么90度后，就是左边红右边黑
度数用deg表示，越大的元素，度数的效果越明显
*/
</style>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<hr>
</body>
</html>
径向渐变：
以圆心向外发散
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
div {
width: 200px;
height: 200px;
margin: 10px;
}
.a1 {
background: radial-gradient(red, black);
}
.a2 {
background: radial-gradient(red, black, pink, green);
}
.a3 {
border-radius: 50%;
background: radial-gradient(red, black);
}
/*
前面我们实现了线的渐变，这里可以实现圆的渐变，就是从圆心开始，向外渐变
如 background: radial-gradient(red, black);
圆心从红的向外慢慢变黑，直到最后一个像素点是黑的
而加上 border-radius: 50%;，使得显示的效果类似于球体
radial 英文意思：放射状的
*/
</style>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<hr />
</body>
</html>
背景------------------------------
背景位置：
background-origin：指定了背景图像的位置区域
border-box : 背景贴外边框的边
padding-box : 背景贴内边框的边
content-box : 背景贴内容的边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
div {
background: url("img/1.jpg") no-repeat;
width: 200px;
height: 80px;
margin: 20px;
border: 10px dashed black;
padding: 20px;
}
.a {
background-origin: border-box;
}
.b {
background-origin: padding-box;
}
.c {
background-origin: content-box;
}
/*
不是边距哦，而是边框
border-box : 背景贴外边框的边，起始位置参照外边框的左上角
padding-box : 背景贴内边框的边，起始位置参照内边框的左上角
content-box : 背景贴内容的边，起始位置参照内容的左上角，当使用padding时
内容位置会变（自适应背景不算）
padding为0时，相当于padding-box
注意：在元素中加边框时，其实也会使得有自适应元素属性会占据边框空间，如背景是元素的一种属性，内容也是
一般情况下，边框会覆盖，若为虚线
可以明显看出多出来的一些背景（自适应的背景，如背景色和图片平铺的重复等等，有些可以设置no-repeat可以解决）
只所以是这样，是因为图片没有完全显示，实际上他有很多被覆盖了，因为你的元素大小只有这么大
但多出来的背景是不算真正内容的位置的（背景不是内容，是元素的一部分）
即内容位置还是边框原来包括的内容位置
起始位置也是原来内容的左上角，受padding影响
默认情况下背景位置是background-origin: padding-box;与内容位置一样，但由于自适应
使用padding时起始位置就不一样了
其中background-origin可以设置背景的起始位置，默认为背景贴着内边框的边，当有边框时就会有外边框和内边框
border-box就是，边框的外边框保护背景
padding-box就是，边框的内边框保护背景
content-box就是，边框的内边框
origin 英文意思：起因
padding 英文意思：填充
content 英文意思：内容
注意：在有图片时，可以路径和重复操作一起作用
如 background: url("img/1.jpg") no-repeat;
可以不用多写一个background-repeat了
注意：上面说的是图片，如果不是图片（比如背景颜色，如url("img/1.jpg")变成red），是不会起作用的
*/
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
背景裁切：
background-clip:
border-box 边框开切
padding-box 内边距开切
content-box 内容开切
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
div {
width: 200px;
height: 80px;
border: 10px dashed red;
background-color: darkcyan ;
margin: 20px;
padding: 20px;
}
.a {
background-clip: border-box;
}
.b {
background-clip: padding-box;
}
.c {
background-clip: content-box;
}
/*
前面我们设置了背景的起始，但由于有些背景被覆盖
那么我们可以进行边框开始的裁剪，如bockground-clip设置边框的裁剪，这样就没有被覆盖的背景了
border-box外边框开始的裁剪，基本没变化，没写值时，默认是这个值
padding-box内边框的裁剪，使得内边框外的内容没有了
content-box内容的裁剪，不是内容的都裁剪，受padding属性影响，若为0px，那么就与padding-box一样
因为这时内容与内边框位置一样了
clip 英文意思：修剪
注意：这个修剪是针对这个元素来说的，也就是基本不会影响其他元素（特别的，如果背景被移动到当前元素外，那么border-box就有用了）
*/
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
背景大小：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
div {
background: url("img/1.jpg") no-repeat;
width: 200px;
height: 100px;
border: 2px solid red;
margin: 20px;
}
.a {
background-size: cover; /* 完全覆盖 */
}
.b {
background-size: contain; /* 完全适应 */
}
/*
之前我们可以进行裁剪背景来包括背景
但裁剪是使得图片没有扩展了，图片只能这么大，不好与其他操作一起操作
这时我们可以对图片本身进行操作，使得图片更加的可以与其他操作一起操作
其中background-size可以改变图片的大小，值必须为px，em（表示一个字，如1em表示一个字的大小），%
或者一些特殊的含义（如cover，contain）
可以有小数，不可以有负数，否则默认值为背景本身大小
且有具体值时，必须要有两个值，如background-size:10px 20px，少一个，就是默认值，当然一般是都代表同样的值，而不是默认值
其中10px代表水平方向上的大小，即背景宽度，20px代表背景高度
而%则表示父级元素的%大小
size 英文意思：大小
cover 英文意思：遮盖，将背景进行比列缩放，直到宽度或者高度其中之一完全可以覆盖元素的宽度和高度
即再次缩放后就覆盖不了（或者说不能再次的缩放了，即小于对应的宽度和高度），且多余的会被覆盖
contain 英文意思：包含，将背景进行比列缩放，直到宽度和高度刚好可以包含到元素的宽度和高度里
且没有突出的背景，即若放大的话，可能就有突出的背景了
对于单位只能取其一，但是一般也可以取不同的
*/
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
过渡动画----------------------------
过渡：
从一个状态到另一个状态，中间的"缓慢"过程，提高观赏性
缺点是，控制不了中间某个时间点
transition｛1 2 3 4｝
1：过渡或动画模拟的css属性
2：完成过渡所使用的时间（如设置2s内完成）
3：过渡函数：
<!--
其中
linear 英文意思：直线的
ease 英文意思：小心缓缓地移动
in 英文意思：在里面
out 英文意思：出去
上面的意思与实际操作不符合
可以将in理解为加速，out理解为减速
所以就有了
linear匀速
ease逐渐慢下来
ease-in加速
ease-out减速
ease-in-out先加速后减速
五个过渡函数，在动画里也会使用
没有ease-out-in，因为一开始总要加吧，否则哪来的操作动画呢（实际上对应的测试图都没有了，且实际上只是不存在而已，因为需要起始向上的切线，而不是降低切线，这是保证为0时的问题，如后面的ease-in-out，你认为一开始的线可以降低切线吗，这是自然不能的），当然，这是因为速度是没有负数的（注意：速度本身的确是没有负数，只是你认为有负数时，一般只是代表有方向而已，你认为在现实生活中可以表示负数的速度的，只有0，以及方向，所以这里并没有解释出错），而若存在方向，那么也是可以存在的（以后如果存在可以改变函数的话，那么可以往后面退，只不过默认情况下，也就是提供的图像来说，是没有后退的，这里看以后是否出现了），具体可以百度，通常需要我们自己来进行操作，即使得移动时往后走
-->
4：过渡开始出现的延迟时间，下面的1就是
<!--
transition: width 2s ease 1s;
s代表秒，可以是ms，毫秒，1000ms=1s
-->
目前，css3只开发出部分的过渡属性，下图所示：
即只操作上面的属性，若你操作的属性在上面没有找到，那么就不会出现过渡效果
只有在对应的属性发生变化才会有过渡，否则没有，也就是说开发人员只是操作了少量的过渡，即自己编写的过渡，这里也有个思路，可以认为是等待执行的操作
实际上动画底层是数字的改变，如果对应的样式没有存在数字的底层，那么他就不能操作动画，这也是为什么有些属性没有动画的原因，那么很明显，高度是数字设置的，那么他就可以操作动画（颜色也可以，因为rgb）
上述具体总结：
元素内容：字体颜色，字体大小，字体粗细，字体缩进
元素：宽度，高度，行高，背景颜色和位置，具体方向的外边框和内边框间距，具体方向边框的颜色和宽度
最大最小宽高，轮廓的颜色和宽度，定位的底部边框和离左边和右边距离（left和right）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 50px;
border: 2px solid red;
}
.a{
/*默认是ease，即单纯的width 2s一般就是按照ease来的，且默认延迟时间为0s，即立即变化，而不是等待变化，同样的这个延迟实际上存在几秒时，如2s，那么需要改变的数字再2s内没有回到原来的样子，这样才会变化到你当前改变的数字，你可能会继续改变，但是只是确定一个最终（这里存在嵌套的延迟，所以比较麻烦的解释），否则重置数字，继续延迟，且回退也会操作这个延迟*/
transition: width 2s ease 1s; /*1秒过后，div在2秒内匀速缓慢的变宽
我们可以实现对元素的过渡
使用transition，使得元素的属性被改变时，按照他指定的作用进行操作
width代表操作的属性
2s代表操作需要几秒钟
ease代表怎样操作，这里是逐渐慢下来
1s等待几秒开始操作
可以用毫秒
1000ms=1s
注意：必须要有改变操作属性的行动，否则不会过渡
因为元素的属性被改变时，对应的过渡所操作的属性，才会触发，也就是拦截渲染，既然是人开发的，自然可以实现
即可以理解为transition是监听这个属性的变化，一但有变化的趋势，就按照他的作用去操作
上述可以知道，过渡不仅仅不可以操作时间点，而且只能操作一个属性，于是就有了动画
*/
}
div:hover{ width: 300px;} /*触发div变宽
也可以操作其他元素，可是其没有过渡操作，动画里可以有*/
/*
transition 英文意思：过渡
*/
</style>
<body>
<div class="a">Hello,拉勾</div>
</body>
</html>
动画----------------------------
为了可以控制过渡中的时间点，提出了动画
从一个状态到另一个状态，过程中每个时间点都可以控制，但操作比过渡麻烦
关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }
<!--
关键帧：
@keyframes 动画帧 {
from{}
to{}
}
上面类似于过渡，没有操作时间点
或者
{
0%{}
20%{}...
}
这里可以操作时间点了
-->
动画属性：animation{ 1 , 2 , 3 , 4 , 5 }
1：动画帧
2：执行时间
3：过渡函数
4：动画执行的延迟（可省略）
5：动画执行的次数
需求1：一个 元素从左向右移动，3秒内执行2次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width: 700px;
border: 1px solid red;
}
@keyframes x{
from{ margin-left: 0px;}
to{ margin-left: 550px;}
}
img{
animation: x 3s linear 2;
}
/*
动画与过渡不同，过渡是监听，然后操作变化的过程
而动画是直接操作过程，不监听，使得可以操作时间片和操作多个属性的变化
其中使用@keyframes（关键帧）定义一个过程如x（动画帧）
可以在元素里使用这个过程，并对实现这个过程进行操作
如animation: x 3s linear 2;
其中x是过程
3s是执行完这个过程需要的时间
linear代表怎样操作这个过程，这里是匀速
2代表几次（必须写整数或者有s单位，否则不操作），若写2s则代表等待2秒钟执行
也可以写2s 2代表等待两秒执行，并执行2次，2s和2都可以省略（但必须留下一个），否则默认为1，即运行1次
from 英文意思：始于
to 英文意思：到
keyframes 英文意思：关键帧
animation 英文意思：动画
很明显，动画是过渡的一个升级，注意：他们的过程基本是相同的，当动画和过渡一起时（操作同样的地方），一般先会操作动画，才操作过渡，其中对于四种条件，如link那四种，一般只能由hover来进行触发过渡，但要注意：他们是异步的，也就是说，如果动画操作完毕的时间过长，你可能看不到过渡了，由于动画是升级的，所以建议多使用动画，而不是过渡，但并不建议他们操作一起的（操作同样的地方）
*/
</style>
<body>
<div>
<img src="img/cat.gif">
</div>
</body>
</html>
需求2：一个 元素从左向右移动，3秒内执行完成。无限次交替执行
infinite：无限次
alternate：来回执行（交替，一去一回）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.wai{
width: 600px;
height: 100px;
border: 2px solid red;
}
.nei{
width: 40px;
height: 80px;
margin: 5px;
background: red;
}
.nei{
animation: x 3s linear infinite alternate;
}
/*
infinite代表无限次的执行
alternate代表交替执行，从反方向执行，即相反的过渡，也算一次执行，若设置2次，那么交替执行后，就不执行了
可以看出animation中，有很多参数，前面的那几个是基本，默认次数为1
最后注意，这些参数的顺序不做要求，但是对于s秒数，谁在前，那么谁就是执行时间
若有不识别的参数，或者多写s，则不进行过渡
虽然参数位置不做要求，但最好还是按照基本位置进行写，方便观察和维护
*/
@keyframes x{
0%{ margin-left: 0px; }
25%{ background: yellowgreen; }
50%{ background: goldenrod; }
75%{ background: palevioletred;}
100%{
background: coral;
margin-left: 550px;
}
}
/*
对应上述，可以知道这是一个过程，但是from和to并不能操作时间点，而这里使用百分比的时间，来操作时间点
代表着操作的百分比时间，由于动画过程的概念，可以使得过程中的属性都可以有过渡效果
其实时间点之间也要进行过渡的效果的，且根据你设置的时间，来增加百分比之间的过渡时长
但是要注意：上面的0%相当于直接设置属性了，因为0%就是开始位置
infinlte 英文意思：无限的
alternate 英文意思：交替的
*/
</style>
<body>
<div class="wai">
<div class="nei"></div>
</div>
</body>
</html>
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
