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； |
———————————————————————————————————————————————
更新了！！！
———————————————————————————————————————————————