css
CSS
html补充：
有两个在css中常操作的标签，<div>和<span>标签。
相对于前面html中介绍的标签，他们是最没用的，因为他们最大的特点就是没有特点。而这个也造就它们的使用场景更加的广泛。如果用其他标签来包裹一个标签，往往会带有外层标签的某个特征，如<b>标签会加粗文字，而这些我们特征我们往往不需要，但是我们确实需要一个容器来装其他的标签，这时候div和span就会特别适合。好了，补充完了，接下来开始进入css的学习。
css概述
CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离
css的四种引入方式
1、行内式：
在html的标签属性中用style属性，属性用引号包住，然后里面通过“键:值;键:值,.....”这样的方式来设置，不推荐
<div style="width:20px; height:20px;background-color:red"></div>
2、嵌入式
<head>标签里面加入<style>标签，在其中写入“标签名{键值对设置}”进行设置
<style>
div{
width:20px;
height:20px;
background-color: red;
}
</style>
3、链接式
建立一个css文件，在<head>标签中，写入<link href="test1.css" rel="stylesheet">,这个是先加载css的，推荐使用，这个没有限制次数
4、导入式
导入式：建立一个css文件，在<head>标签中，写入<style>标签，在里面写"“@import "test1.css”;"这个是先加载html的，有限制次数
注：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
选择器
标签选择器
*{}：所有标签都设置
标签名{}：给相应的标签进行设置
#id名{}：给id对应的标签设置，id值定义的时候相当于身份证，不可重复
.class{}:根据类名来进行标签设置，class值定义的时候，相当于人名，可以重
组合选择器
例如：div.div1{} 这三个可以组合使用，中间连在一起，不能空格隔开
例如：div,.P{} 几种东西要按一个设置，选择器中间用逗号隔开
例如：.div1 div2{} 如果要设置一个盒子里面的标签属性，先用选择器定位到盒子，然后一个空格加要设置的标签就可以
例如：.div1>.div3{} 只在一个盒子的儿子这个一层找，用“>”，孙子层的那些都不找
例如：div + p{} 只改变紧挨着前面的选择器，而且满足后面选择器的标签
属性选择器
在标签中可以插入自己的自定义的属性，如：chenduxiu="qingzuoxia "，这个属性需要在css的样式中设置
设置的格式是：[自定义属性名]{样式设置}。如果属性名有相同的就需要把属性值也写入[]中。属性标签值前面可以加入选择器，两者之间不加分隔符号
E[att] 匹配所有具有att属性的E元素，不考虑它的值,在style中写入[alex]{样式设计}
E[att=val] 匹配所有的att属性等于“val”的E元素
E[att~=val] 匹配有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
E[att^=val] 匹配属性值以指定值开头的每个元素
E[att$=val] 匹配属性值以指定值结尾的每个元素
E[att*=val] 匹配属性值中包含指定值的每个元素
如果你表示看不懂的话，看下面我给出的例子。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9
10 span{
11 display: inline-block; /*这个先不说，后面会介绍*/
12 width:20px;
13 height:20px;
14 background-color: green;
15 }
16 div{
17 width:20px;
18 height:20px;
19 background-color: yellow;
20 }
21
22 [chenduxiu]{
23 width:20px;
24 height:20px;
25 background-color: black;
26 }
27
28 [chenduxiu='yes']{
29 width:20px;
30 height:20px;
31 background-color: red;
32 }
33 </style>
34 </head>
35 <body>
36 <span chenduxiu></span>
37 <div></div>
38 <div chenduxiu></div>
39 <div chenduxiu='yes'></div>
40
41 </body>
42 </html>
生成效果是：
上面的看懂的话，你尝试在在第22行的”[chenduxiu]”改成div[chenduxiu]运行后会发现结果是这样的：
为什么会产生这种现象呢，这就要看后面说到选择器优先级了
选择器优先级
样式 权重
内联样式表(标签中的style属性） 1000
统计选择符中属性个数（#id） 100
统计选择符中class属性的个数（.class） 10
统计选择符中html标签名个数（p） 1
比如
样式 权重
div 10
.div1 .div2 20
#div1 .div3 110
如果多个选择器要给一个标签设置不同的值，浏览器会先计算选择器的权重，取舍按照从左到右顺序进行比较。设置最大权重的。权重一样的，后来居上。如果不想要按照权重比，可以在设置的值后面加上!important ,如果两个都有!important的话，继续比较权重。
上面遗留问题解答：
div[chenduxiu]是一个是一个标签选择器(div)和一个属性选择器([class)，所以权重是10 + 1；
而[chenduxiu]是一个属选择器（class）所以权重是10
css的继承性
继承是css的一个主要特征。只是css继承性的权重是非常低的，是比普通元素的权重还要低的0。css的继承也是有限制的，有一些属性不能被继承，如border，margin，padding，background等
伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
a:after{content:"Hello World"} #表示在该标签后面加入后面字符串这个并不是改变文本，而是通过css的方式加入进来的，可以通过检查元素查看，可以在这个框中对这个加入的进行css设置
提示：
1、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
3、伪类名称对大小写不敏感。
4、实际使用中，hover，after等不局限于在a标签中使用他们在后面会有更有用的使用场景
例子：
<!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>
<style>
a:link{
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active { /*这个是鼠标左键按住不动时显示*/
color: yellow;
}
a::after{content: "，你好"}
</style>
</head>
<body>
<a href="#">我是一个链接</a>
</body>
</html>
这个是做好的例子，有兴趣的试验一下
css常用属性
颜色属性
color:red
color:#ffee33 #可以上网找到颜色代码表来查看 +
color:rgb(255,0,2) #RGB颜色
color:rgba(255,3,2,0.1) #第四个图片是设置透明度的，范围是1到0，越小越透明
字体属性
font-size:20px #设置字号
font-family:"宋体" #设置字体，有的浏览器不支持中文的，有需要的网上找到对应的英文表示
font-weight:lighter/bold/border/ #设置字体粗细，这个很模糊，也可以写用像素来设置
font-style:italic/oblique #斜体，这两个都可以设置斜体。
背景属性
background-color #背景颜色
background-image:url("图片路径") #如果背景图片的小，盒子大，会不断复制图片，从左到右，从上到下平铺到盒子上
background-repeat:no-repeat #不让图片平铺，设置为repeat-x，则是横向平铺，纵向平铺同理
background-position:center #图片放到网页的中心,前面参数控制横向的，后面的控制列的，center也可以用数字加px代替，进行图片位置设置，这个其实是一个缩写，控制在中间的应该是两个center center参数，这里省略了一个，可以设置为0 center表示只是y轴的居中，还有一个使用方法就是将一些背景放到一个整体的图片中，然后在页面中设置一个空间，通过不断的变换他的位置实现背景的替换。详细的看网址
这些参数都可以放到background：后面一起设置
比如：background:no-repeat 0 -100px url(“图片路径”);
文本属性
text-align:center; #可以将这个文字在容器中横向居中
line-height:20px; #这个数字大小设置为盒子的大小。从效果上来看可以实现文字的纵向居中，设置文本行高，通俗的来讲，文字高度加上文字上下的空白区域的高度，50%基于文字大小的百分比
vertical-align:-4px; #设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效。
text-indent:150px; #首行缩进
letter-spacing:10px; #字符间距
word-spaceing:20px; #单词和单词之间的距离
text-transform:capitalize; #所有单词首字母大写
将文字放到盒子中间的例子：
<!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>
<style>
div{
width:200px;
height: 50px;
background-color: red;
line-height: 50px; /*设置成盒子一样的高度*/
text-align: center;
}
</style>
</head>
<body>
<div>我是一个字符串</div>
</body>
</html>
边框属性
border-color: blueviolet; #设置颜色
border-style: solid; #设置样式
border-width: 5px; #设置宽度
border 5px solid blue #合起来写
如果要对特定的边进行设置的话可以用border-top,border-bottom,border-left,border-right来进行设置
列表属性
<ol><ul>这些可以通过list-style属性来进行设置。
最常用的是：list-style: none; #用来将它的样式去掉，后期用css进行设计
display属性
display:block; #内联标签不可以设置宽高一些属性，可以用这个属性值将其设置成为一个块级标签
display:inline; #块级变成内联
display:inline-block; #内联和块级标签的东西都可以用，这样设置的标签可以按块级标签一样设置宽高，也可以像内联标签一样同行显示
display:none; #设置的标签位置丢失，会隐藏起来
将内联设置成为块级元素的时候，会在块的周围产生间隙，去除间隙的方法是
设置margin：-3px #数字根据实际情况调整，而margin是什么，后面的盒子概念会给出答案。
盒子概念
在盒子标签中设置宽和高是设置的盒子里面内容的大小，整个盒子从里到外依次是：内容（自己设置的宽和高）》 padding（内容到外边框的距离）》 border（边框的宽度）》 margin（盒子和其他的内容之间的距离）
找外边距的时候，找附近的的元素进行排列
margin属性：
margin:10px 5px 15px 20px;
#上，右，下，左 (顺时针顺序）其他的padding这些也是这样的
margin:10px 15px 20px; #上，左右，下
margin:10px 5px; #上下，左右
margin:10px; #上，右，下，左
margin:0 auto; #设置该标签到父类标签的横向的中
关于margin的塌陷问题
兄弟级的边界塌陷
<!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>
<style>
.div1{
width:100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.div2{
width:100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
结果是：
很明显，两个之间的间隔取的是较大的那个
父级的边界塌陷
在说这个之前，你们先自己做一个例子：
如果没有出现问题请跳过这部分，如果出现可以看一下下面的解释。
如果父级的div中没有border(不能为0)，padding，文本内容，子级的div的margin会一直向上找，直到找到某个标签包括border，padding，内容中的其中一个，然后按此div进行margin。如果这个盒子在包括它的最外层盒子中没有找到，就找最外层盒子外面的最近的盒子（可以没有那三个属性）进行margin距离排列。注意：这个不影响兄弟盒子间的margin设置
关于盒子塌陷的几种解决方法
- 最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。
- 往父盒子里添加文本内容也就是标签体
- 给父盒子加border边框，边框不能为0px
- 给父盒子添加padding属性
- 给父盒子添加overflow属性。
overflow:auto; 或者overflow:hidden;
例如：
<!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>
<style>
*{
margin: 0px;
padding: 0px;
}
.div1{
width:200px;
height:200px;
background-color: red;
/* border: 1px solid black; */
/* padding: 1px; */
overflow: auto;
}
.div2{
width:100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
文档流
所谓文档流就是元素布局排版布局的时候，元素会自动从左到右，从上到下的流式排列
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位
只有绝对定位absolute和浮动float才会脱离文档流
float浮动
float:left; #浮动到父盒子的左边
float:right;#浮动到父盒子的右边
浮动设置的时候看的是这个标签上面的兄弟标签，如果是漂浮的，它也按顺序漂浮，如果它的上面的兄弟标签不是浮动的，它就在原位置浮动
clear: none（允许两边有浮动对象） | left | right |both（不允许两边有浮动对象） #清除浮动,如果一个盒子设置了clear left,而这个盒子1的的左边正好是个浮动对象盒子2，盒子1就会下移，不和盒子2在一行，盒子1的的右边正好是个浮动对象盒子3，盒子1设置了clear：right,，盒子1的位置不动，因为clear并不能影响其他盒子
当一个盒子里面有两个子标签都漂浮起来，它就会失去原来的位置
例如：
<!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>
<style>
.div1{
border: 1px solid black;
clear: both;
width: 300px;
}
.div2{
width:100px;
height: 100px;
background-color: red;
float: left;
}
.div3{
width: 100px;
height: 100px;
background-color: yellow;
float: right;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
结果如下：
可以看到他们的父盒子没有位置了，只有两个像素的边框
有一个办法可以解决这个问题就是：
往标签里面添加一个去除浮动的标签，他会保证当盒子的所有元素都是浮动的话，能保证这个空盒子还占据位置。
结果如下
但是这样写不是很好，因为在内容中添加了一个无用的东西，下面是人们经常用的使用伪类的方法来解决这个问题：
.类名:after {
content:""; #在类名为clearfix的元素后面加入内容，内容不写
display:block; #把这个元素变为块级元素。
clear: both; #清除两边浮动
visibility:hidden; #可见度为隐藏，注意它和display：none是有区别的，这个仍占据空间，只是看不到而已
line-height:0;
height:0;
font-size:0;
}
补充：
.clearfix{*zoom:1;} #这个是针对IE6的，因为IE6不支持：after伪类，这个神奇的zoom：1让IE6的元素可以清除浮动来包裹内容元素
position定位属性
position:static; #默认值，无定位，设置标签属性left和top等值是不起作用的
position:relative; #相对定位，相对于自己文档流中的位置进行偏移，其在文档流中的位置还继续保持，位置通过left，right，top，bottom设置，相对是左上角顶点。一般父级的标签有很多子标签，就设置这个，让他们进行定位。
position:absolute; #绝对定位，从文档流中删除，并相对于自己最近的已定位祖先元素（设置的position的盒子）进行定位，如果没有祖先元素，那么就以body标签作为参照，无论原来它是何种类型的框，都会生成一个块级标签。如果给这个盒子设置margin属性的话，是相当于它原来的位置进行移动的，位置通过left，right，top，bottom设置
position:fixed; #以窗口为参照点，无论滚动条怎么移动，它在页面的位置不变，回到顶部就是用的这个
关于css的介绍差不多了，可以尝试的做一个小型的页面看看了，下面链接有已经做好的网页，还有相应的素材，可以下载尝试做一下（里面有很多的鼠标悬浮效果，可以先试试看，还有再次声明本人不从事前端，审美也比较次，就是做着玩，务吐槽）。
https://files.cnblogs.com/files/kuxingseng95/css.rar
效果大致如下：