文章目录
一、元素样式-display
元素消失样式-display:none
让元素在浏览器页面中消失，但仍保留在html结构中；
后辈元素会占据消失元素的位置；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:none</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.l{background: red;float: left;width: 300px;height: 300px;display: none;}
.l1{background: yellow;float: left;width: 300px;height: 300px;}
</style>
</head>
<body>
<div class="l"> </div>
<div class="l1"></div>
</body>
</html>
元素变块样式-display:block
元素属性可有块状，行内
块状就比如我们常见的div，支持宽高，内外边距，按列堆积；
行内就比如span， a ，不支持宽高，只支持部分边距，按行堆积；元素宽度可被元素内容撑大；
行内元素又有如img,input,属性是块状与行内特性的结合，既可以像行内一样按行排列，也可以支持宽高，内外边距的设置；
display:block：可以将非块状元素转为块状；块状元素默认宽度为浏览器窗口宽度大小；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:block</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.leo{background: red;display: block;width: 100px;height: 100px;margin-left: 200px;}
.leo1{background: yellow;display: block;}
.leo3{background: red;}
.leo4{background: yellow;}
</style>
</head>
<body>
<span class="leo">leo </span>
<span class="leo1">leo1</span>
<span class="leo3">leo3 </span>
<span class="leo4">leo4</span>
</body>
</html>
元素变行内样式-display:inline
块状元素要是通过display:inline变为了行内样式那么原本的块状属性就会失效；只支持部分边距，按行堆积；元素宽度可被元素内容撑大；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:inline</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
div{margin-top: 200px;display: inline;color: red;width: 200px;height: 200px;}
.leo{color: red;}
.leo1{color: yellow;}
</style>
</head>
<body>
<div>leo</div>
<span class="leo">leo </span>
<a href="http://baidu.com" target=blank class="leo1">leo</a>
<br>
<span class="leo">leoiiiiiii</span>
</body>
</html>
元素变行内块样式-display:inline-block
使用display:inline-block，使元素变为行内块的状态，按行内样式排列，支持内外边距，行高等样式，支持宽高(设定宽高后元素大小不会被内容在撑大），支持内容撑大元素大小；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:inline-block</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
div{margin-top: 100px;display: inline-block;background-color: red;height: 200px;}
.leo1{margin-top: 100px;display: inline-block;background-color: red;height: 200px;width: 10px;}
span{display: inline-block;background-color: yellow;height: 200px;width: 111px;}
img{width: 100px;height: 100px;margin-top: 50px;}
</style>
</head>
<body>
<div class="leo">123456</div><div class="leo1">7891011121314</div><div class="leo">151617181920</div>
<span>kkluv</span>
<br>
<input type="" name="">
<img src='../图片素材/冲浪.jpg'>
</body>
</html>
二、元素溢出隐藏样式-overflow:hidden
overflow:hidden控制元素内容超过宽高的部分，将其隐藏，不占位置；
overflow-x:hidden;隐藏横向元素溢出部分；（在IE8以前的浏览器失效）
overflow-y:hidden;隐藏纵向元素溢出部分；（在IE8以前的浏览器失效）
overflow:auto以滚动条的形式展示溢出部分内容；
overflow-x:auto或者overflow-y:auto(使用其中之一即可让另一个自动变成auto)以滚动条的形式展示溢出部分内容；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:none</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.l{background: red;width: 300px;height: 300px;overflow: hidden;}
.l1{background: yellow;}
.lk{background: red;width: 300px;height: 300px;overflow: hidden;position: relative;}
.lk1{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
.lk2{background: red;width: 300px;height: 300px;position: relative;}
.lk3{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
.lk21{background: red;width: 300px;height: 300px;position: relative;overflow-x: hidden;}
.lk31{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
.lk22{background: red;width: 300px;height: 300px;position: relative;overflow-y: hidden;}
.lk32{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
</style>
</head>
<body>
<div class="l"> <div class="l1">555555555555555555555555555555555555</div>
</div>
<br>
<div class="lk"> <div class="lk1"></div></div>
<br>
<div class="lk2"> <div class="lk3"></div></div>
<div style="height: 90px;"></div>
<div class="lk21"> <div class="lk31"></div></div>
<br>
<div class="lk22"> <div class="lk32"></div></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:none</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.lk22{background: red;width: 300px;height: 300px;position: relative;overflow: auto;}
.lk32{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
.lk2{background: red;width: 170px;height: 300px;position: relative;overflow-x: auto;}
.lk3{width: 200px;height: 200px;position: absolute;}
</style>
</head>
<body>
<div class="lk22"> <div class="lk32"></div></div>
<div class="lk2"> <div class="lk3">河南新郑市第三中学一名女教师近日在家中上完网课后意外离世，她的女儿在一段母亲给学生上网课的视频中发现，母亲生前上最后一堂课时疑似遭遇过“网课入侵”，有人进入网课直播间播放音乐、说脏话。
11月2日，新郑市委宣传部官方微博通报称，10月28日，该市第三中学教师刘某某在家上完网课后意外离世，该市教育局第一时间向公安机关报案，并成立善后工作专班。经公安机关调查反馈，排除刑事案件可能。针对网传刘老师遭遇网暴事件，公安机关已立案侦查。
在某社交平台上，不少网友称曾在网课时遇到过“网课入侵”
一时间，“网课入侵”“网课爆破”等网络违法行为再度引发关注。澎湃新闻（www.thepaper.cn）了解到，有不少学生在上网课时遇到过同类情况。有截图显示，有人在社交平台发布“爆破群”及相关内容，有平台已开展巡查和治理，清理相关违规内容、处置严重违规账号。</div></div>
</body>
</html>
三、鼠标浮动伪类样式-hover
hover：可以使用其伪类控制单个或多个子元素的状态；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hover</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
a:hover{
color: red;
text-decoration: none;
}
ul > li{width: 100px;height: 30px;text-align: center;line-height: 30px;background: black;color: white;float: left;position: relative;top: 100px;}
ul > li div{position: absolute;width: 30px;height: 30px;background-color: pink;left: 50%;margin-left: -15px;top: -30px;display: none;}
ul > li:hover{color: black;background: orange;}
ul > li:hover>div{display: block;}
</style>
</head>
<body>
<a href="#">YBM</a>
<ul>
<li>
A
<div></div>
</li>
<li>
B
<div></div>
</li>
<li>
C
<div></div>
</li>
<li>
D
<div></div>
</li>
</ul>
</body>
</html>
三、控制鼠标光标样式-cursor
使用cursor让光标样式在进入某些元素区域时发生改变；
常用pointer.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:none</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.leo{ cursor: pointer;}
.leo1{display: block;margin-top:70px;cursor: none;}
a{display: block;margin-bottom: 20px;}
</style>
</head>
<body>
<a href="#">234</a>
<span class="leo">111 </span>
<span class="leo1">222</span>
</body>
</html>