vertical-align
使用场景：
通常用于设置图片或者行内块元素和文字垂直对齐
只针对于行内元素或者行内块元素有效
值：
baseline 基线对齐（默认值）
top 让元素顶部与整行的顶部对齐
bottom 让元素底部与整行的底部对齐
middle 中线对齐
2、让图片在父级垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.two {
width: 200px;
height: 200px;
background: lightcoral;
/* 第一步 */
line-height: 200px;
}
img {
width: 100px;
height: 100px;
/* 第二步 */
vertical-align: middle;
}
</style>
</head>
<body>
<div class="two">
<img src="" alt="">
</div>
</body>
</html>
3、想让两个块级元素在一行显示，转换为行内块产生的问题
两个块级元素之间会有缝隙（原因回车造成的）
不仅仅两个块元素在一行，两张图片在一行都会存在这个问题
解决的办法：
在结构中消除换行符
给他们的父级设置font-size:0;如果里面的子元素需要设置文字大小，再单独设置即可。
浮动也可以解决（后面学）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 0;
}
img {
width: 300px;
height: 200px;
/* font-size: 0; */
}
</style>
</head>
<body>
<img src="./img/1.png" alt="">
<img src="./img/2.png" alt="">
</body>
</html>
4、overflow属性
overflow属性定义一个内容太大无法适应容器的时候应该怎么做
设置给被超出的元素
visible：默认，内容不会被修剪，而是显示在元素的框外
hidden:超出内容被修剪，修剪掉的内容不可见，并且没有滚动条
scroll：超出内容被修剪，浏览器显示滚动条方便查看被修剪的内容
auto：浏览器定夺，如果内容超出就生成滚动掉，否则不生成
overflow：auto和scroll的区别：
auto:是自动生成滚动条，不超出不生成 超出才生成
scroll：无论是否超出都会生成滚动条
overflow-x：overflow-y：只控制x和y的超出情况
5、visibility属性：
控制元素显示或者隐藏
hidden:控制元素隐藏
保留原来的位置，其他元素的布局没有发生改变
相当于此元素变透明
visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了
如果给子元素设置visible覆盖，那么子元素可以进行显示
visible：让visibility：hidden隐藏的元素显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>visibility属性</title>
<style>
.box{
width: 600px;
height: 400px;
background: yellow;
}
.con1{
width: 300px;
height: 100px;
background-color: pink;
visibility: hidden;
}
.con1 .inner{
width: 100px;
height: 50px;
background-color: #5ab3f4;
visibility: visible;
}
.con2{
width: 300px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="con1">
<div class="inner"></div>
</div>
<div class="con2"></div>
</div>
</body>
</html>
6、opacity透明度：
指定了一个元素的透明度
当opacity作用在某一个元素上的时候，把这个元素和里边的内容当成一个整体看待 即使里边的元素没有继承opacity。它也和父级有一样的透明度
opacity的取值是 1-0
1代表完全不透明
0代表完全透明
选择器
1、什么是选择器？
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的
2、基础选择器
id选择器
我们可以给元素设置id属性，然后通过 #+id属性值 的方式来选择这个元素
选择器命名：
id就像我们的身份证号，是不允许重复的
并且一个元素只能有一个id属性
id命名规范建议（类名命名方式也适用）
id或者class必须以字母开头，不能以数字或者下划线开头
名字不出现汉字
不允许带有广告的英文单词出现：如：ad adv adver advertising (防止浏览器当成垃圾广告处理掉 过滤掉 )
除第一位后边小写字母、数字、连字符（ _ -）
见名知意
不要出现空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#three{
background-color: green;
}
</style>
</head>
<body>
<ul>
<li id="three"></li>
<li></li>
</ul>
</body>
</html>
类选择器：
可以给不同的元素，进行分组。所有类名相等的元素，是一组的，可以进行控制样式
给要被分组的元素设置class属性选择器中使用 .+ class属性值 来选择元素
类不一定多个元素，也可以是一个元素
一个class可以设置多个类名，但是只能有一个class属性，一个元素的多个class属性的值可以用空格隔开，就代表书写多个类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
li{
background-color: red;
}
.show{
background-color: green;
}
.active{
background-color: yellow;
}
.con{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<ul>
<li class="show"></li>
<li></li>
<li class="show"></li>
</ul>
<div class="active con"></div>
</body>
</html>
标签名选择器：
通过标签名来选择元素
会选择页面中所有的这个标签的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签名选择器</title>
<style>
li{
background-color: red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li id="three"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
通配符选择器（*）
通配符使用星号*表示，意思是“所有的”。
在CSS中，同样使用*代表所有的标签或元素，它叫做通配符选择器。
不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器
/*这里就把所有元素的字体设置为红色*/
*{ color : red; }
属性选择器
[属性]{},把具有这个属性的所有标签选中
[属性=“属性值”]，把不仅具有这个属性，而且必须是属性值也是规定的这一类标签选中
<style>
[index]{
background:darkorange;
}
[index="a1"]{
background:darkorchid;
}
</style>
3、复杂选择器
后代选择器
后代选择器使用空格间隔开 （A B：在A元素中寻找后代（不一定是儿子）是B的元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/* .box li{
background-color: red;
}*/
div li{
background-color: pink;
}
.show{}
.box .show{}
.outer .show{}
html body div .show{}
</style>
</head>
<body>
<div class="outer">
<p>p1</p>
<p>p2</p>
<span>span1</span>
<ul class="box">
<li>111</li>
<li class="show">222</li>
</ul>
<ol>
<li>333</li>
<li>444</li>
</ol>
</div>
</body>
</html>
子代选择器
子代选择器使用 > 间隔开 （A>B：在A元素中寻找儿子辈元素 是B的元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
.box>.show{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<p>p1</p>
<p>p2</p>
<span>span1</span>
<ul class="box">
<li>111</li>
<li class="show">222</li>
<li>
<span class="show"></span>
</li>
</ul>
<ol>
<li>333</li>
<li class="show">444</li>
</ol>
</div>
</body>
</html>
相邻兄弟选择器：
相邻兄弟选择器使用 + 间隔开 （A+B：在A元素的下边紧贴着A的元素 并且是B 才能被选中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style>
.outer>.show+span{
background-color: yellow;
}
.outer>.show+p{
/*选不中状态*/
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<p>p1</p>
<p class="show">p2</p>
<span>span1</span>
<p>p3</p>
<span>span2</span>
</div>
</body>
</html>
通用兄弟选择器：
相邻兄弟选择器使用 ~ 间隔开 （A~B：在A元素的下边兄弟元素 并且是B 就能被选中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style>
.outer>.show~span{
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<span>span0</span>
<p>p1</p>
<p class="show">p2</p>
<span>span1</span>
<p>p3</p>
<span>span2</span>
</div>
</body>
</html>
群组选择器：
将多个选择器使用 ， 隔开 可以同时对多个选择器设置样式
如果多个元素有相同的样式，方法有两种
使用一个共同的类名
使用群组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
/*.con{
width: 100px;
height: 100px;
}*/
.con1,.con2,.con3,.con4{
width: 100px;
height: 100px;
}
.con1{
background-color: red;
}
.con2{
background-color: #c0ff8b;
}
.con3{
background-color: #5e8fff;
}
.con4{
background-color: #ff2a91;
}
</style>
</head>
<body>
<ul>
<li class="con1 con"></li>
<li class="con2 con"></li>
<li class="con3 con"></li>
<li class="con4 con"></li>
</ul>
</body>
</html>
交集选择器
“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
/*
当我们想要选择： 某一个元素 并且这个元素拥有某个类名的时候
*/
.list li{
width: 30px;
height: 30px;
border: 1px solid #000;
margin: 30px;
border-radius: 50%;
background-color: pink;
}
.list li.active{
background-color: skyblue;
}
</style>
</head>
<body>
<div class="outer">
<ul class="list">
<li></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
4、选择器的优先级
相同优先级的选择器生效方式
当优先级相同的时候，在后边书写的样式优先级高
link元素 其实也是把样式关联上，选择器优先级相同的情况写，后写的生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
}
.con{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<link rel="stylesheet" href="./01.css">
</head>
<body>
<div class="box con show">
box
</div>
</body>
</html>
选择器优先级的权重计算：
行内样式： 1000
id：100
类：10
标签名：1
!important>内联样式>id>类|属性>标签>通配符>继承>浏览器默认
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器优先级2</title>
<style>
#box p{
/*1 --101*/
background-color: red;
}
#box .con p{
/*2 -- 111*/
background-color: pink;
}
.box #con p{
/*3--111*/
background-color: green;
}
.box .show p{
/*4--21*/
background-color: yellow;
}
.box .con .show p{
/*5 -- 31*/
background-color: grey;
}
#box .show p {
/*6 --111*/
background-color: purple;
}
#box #con .show p{
/*7 -- 211*/
background-color: #5ab3f4;
}
#box #con #show p{
/*8 -- 301*/
background-color: #5df2ff;
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="con" class="con">
<div class="show" id="show">
<p>我是一个p标签</p>
</div>
</div>
</div>
</body>
</html>
选择器优先级覆盖案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级覆盖案例</title>
<style>
.outer li{
width: 100px;
height: 100px;
margin: 10px;
background-color: grey;
float: left;
}
.outer .active{
background-color: red;
}
</style>
</head>
<body>
<ul class="outer">
<li></li>
<li></li>
<li></li>
<li></li>
<li class="active"></li>
<li></li>
</ul>
</body>
</html>
5、css 的三大特性(背)
继承性
层叠性
优先级
①：继承性
什么是继承性？
官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。简单说就是给父元素设置一些属性，子元素/后代也可以使用，这个我们称之为继承性。
哪些属性具有继承性
并不是所有的属性都可以继承, 以color/font-/text-/line-开头的属性、元素可见性：visibility
有继承性的属性罗列
参考链接：https://blog.csdn.net/qq_41803637/article/details/80023720
②：层叠性：
层叠性就是CSS处理冲突的一种能力。通俗的说就是多种选择器选中了同一个元素，又对相同的属性设置了不同的属性值，这个时候就会发生层叠性。
如何处理：
1、如果权重相同的话，就看css代码的顺序，后面的会把前面的属性覆盖
2、如果权重不相同的话，谁权重大就听谁的。
③：优先级（权重）
权重顺序
！important>内联样式>id>类>标签>通配符>继承>浏览器默认
