1. 元素的显示与隐藏
1. 目的：
让一个元素在页面中消失或者显示出来。
2. 场景：
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
1.1 display显示（重点）
1. display设置或检索对象是否及如何显示。
display：none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
2. 特点：隐藏之后，不再保留位置。
1.2 visibility 可见性（了解）
1. 设置或检索是否现实对象
visibility：visible ； 对象可视
visibility：hidden ； 对象隐藏
2. 特点： 隐藏之后，继续保留原有位置 （停职留薪）
1.3 overflow溢出（重点）
1. 检索设置当前对象的内容超过其指定高度及宽度时如何管理内容。
| 属性 | 描述 |
| visble | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超过的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出显示滚动条 |
显示与隐藏：
<!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>
.dawang{
/*隐藏元素dawnag */
/*display: none;*/
/*`1.先隐藏元素
2. 不保留位置*/
display: block;
/*这里除了转换为块级元素以外，还可以显示元素*/
width: 200px;
height: 200px;
background-color: blueviolet;
}
.erwang{
width: 250px;
height: 250px;
background-color: brown;
}
</style>
</head>
<body>
<div class="dawang"></div>
<div class="erwang"></div>
</body>
</html>
网页示例图：
1.4 显示与隐藏总结
| 属性 | 区别 | 用途 |
| display | 隐藏对象，不保留位置。 | 配合后面js做特效，比如下拉菜单，原先没有， 鼠标经过，显示下拉菜单，应用极为广泛。 |
| visbiility | 隐藏对象，保留位置。 | 使用较少 |
| overflow | 只是隐藏超出大小的部分 | 1.可以清除浮动 。2. 保证盒子里面的内容不会超出该盒子范围 |
CSS用户界面样式
所谓的界面样式，就是更改一些用户操作样式。
1. 更改用户的鼠标样式
2. 表单轮廓等
3. 防止表单域拖拽
2.1 鼠标样式cursor
设置或检索在对象上移动的属性表指针采用何种系统与定义的光标形状。
| 属性值 | 描述 |
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
鼠标当我身上查看效果哦：
<!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>
<body>
<table>
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手<li>
<li style="cursor:move">我是移动<li>
<li style="cursor:text">我是文本<li>
<li style="cursor:not-allowed">我是禁止<li>
</ul>
</table>
</body>
</html>
2.2 轮廓线 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style ||outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是： outline：0； 或者 outline：none；
<input type="text" style="outline:0;"/>
2.3 防止拖拽文本域resize
实际开发中，我们文本右下角是不可以拖拽的：
<textarea style="resize:none;"></textarea>
代码如下：
<!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>
textarea{
width: 500px;
height: 249px;
/*取消轮廓线*/
outline: none;
/*边框改变颜色*/
border: 2px solid #036;
/*防止用户拖拽文本域*/
resize: none;
}
</style>
</head>
<body>
<textarea>请留言了</textarea>
</body>
</html>
网页示例图：
这是未改的：
这是改了的：
2.4 用户界面样式总结
| 属性 | 用途 | 用途 |
| 鼠标样式 | 更改鼠标样式cursor | 样式很多，重点记住pointer |
| 轮廓线 | 表单默认outline | outline轮廓线，我们一般直接去掉，border是边框，我们会经常用。 |
| 防止拖拽 | 主要针对文本域resize | 防止用户随意拖拽文本域，造成页面布局混乱，我们resize：none； |
———————————————————————————————————————————————
更新了！！！
———————————————————————————————————————————————