1：元素的显示与隐藏(display有两个默认属性，inline，block)，隐藏之后不保留位置
为什么显示不用inline？因为一旦没文字，用inline就什么也不会显示。
display(显示)：block除了转化为块级元素，同时还有显示元素的意思
visinility:可见性
visible：显示
hidden：影藏
特点：隐藏之后，保留原来位置
案例
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n11" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.header {
width: 592px;
height: 355px;
margin: 100px;
position: relative;
}
.dis {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5) url(img/left.png) no-repeat center;
display: none;
}
.header:hover .dis {
display: block;
/鼠标经过header，header里面的dis就显示出来，所以这里用后代选择器/
}
</style>
</head>
<body>
<div class="header">
<img src="img/ha.png">
<div class="dis"></div>
</div>
</body>
</html></pre>
当鼠标经过，会出现阴影
注意
做一个总结
a：首先要有一个盒子，来包裹里面的图片。这时，图片的大小，就是盒子的大小，而且这个盒子要有相对定位
b：图片正常顺序放就好
c：接下来是阴影部分。阴影部分是通过定位，而且是子绝父相，宽高100%，将背景定位到图片上面。这里还有一个妙用，就是将背景和图片写在一起
background: rgba(0, 0, 0, .5) url(img/left.png) no-repeat center;
d：显示。这里虽然很简单。但是却有很大的一个坑！鼠标先放在盒子上面，然后阴影显示，所以 是 .header:hoer .dis
2:overflow ： hidden
显示影藏
3：鼠标样式
cursor:pointer 小手
default ：小白
move ： 移动
text ： 文本
pointer ：小手
4：鼠标轮廓
outline ： node
防止拖拽：resize：none
5：图片三像素问题
a：当我们图片和文字放在一起时，会出现一个小缝隙。原因是图片和边框是基线对齐，文字和框框是底线对齐。这事我们可以给img添加
img{ vertical-align: bottom; 或者top，center，bottom只要不要让他用baseline(基线)对齐就行，而这个又是默认的！ }
vertical不隐想块级元素，只针对行内块和行内元素，用来控制图片，文字，表单的对齐
这样就没有间隙了如果没有文字，你会发现还是有小奸细。
这是因为图片img标签是行内块元素，有间隙这个bug，我们只需要把它转换为快元素就行了
6:溢出的部分用省略号表示
white-space: nowrap; /强制在一行显示所有文字/ overflow: hidden; /超出部分隐藏/ text-overflow: ellipsis; /溢出的部分用省略号代替/
缺一不可
7：精灵图的本质
为了有效的减少服务器接受和发送请求的次数，提高页面加载速度，出现了css精灵图
将多个背景图放在一张大图上。
8：精灵图使用
背景图，不能做插入图
background ：url（） no-repeat 偏移量
要做多个精灵图，可以做一个集体声明
9：滑动门
滑动门标准写法：
a标签嵌套span标签
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n71" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
height: 50px;
margin: 100px;
background: url(img/to.png) no-repeat;
padding-left: 15px;
display: inline-block;
line-height: 50px;
}
span{
height: 50px;
background: url(img/to.png) no-repeat right;
padding-right: 15px;
display: inline-block;
line-height: 50px;
color: white;
}
</style>
</head>
<body>
<a href="">
<span>首页</span>
</a>
</body>
</html></pre>
效果图
会自动撑开盒子。原理解释
a：滑动门是通过两个标签相互配合来实现，a标签的作用是只要你点击这个框框，他就会有效果，里面放的是和sapn一样的背景图片。a不用设置宽度，应为本身就是要自动撑开的效果，但是需要高，为了和span的保持一致。设置了高，就必须设置display，应为这样高才其效果(如果图片就是本身的尺寸，不设置高也行)
b：span标签和a标签解释差不多
