display 設置或檢索對象是否及如何顯示。
display : none 隐藏對象 與它相反的是 display:block 除了轉換為塊級元素之外，同時還有顯示元素的意思。
特點：隐藏之後，不再保留位置。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 50px; height: 50px; background-color: blue; display: none; }
.dv2 { width: 50px; height: 50px; background-color: red; }</style></head><body> <div class="dv1"></div> <div class="dv2"></div></body></html>
設置或檢索是否顯示對象。
visible : 對象可視
hidden : 對象隐藏
特點：隐藏之後，繼續保留原有位置。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 50px; height: 50px; background-color: blue; visibility: hidden; }
.dv2 { width: 50px; height: 50px; background-color: red; }</style></head><body> <div class="dv1"></div> <div class="dv2"></div></body></html>
檢索或設置當對象的内容超過其指定高度及寬度時如何管理内容。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: red; float: left; margin-left: 20px; }
.dv1 { overflow: visible; }
.dv2 { overflow: auto; }
.dv3 { overflow: hidden; }
.dv4 { overflow: scroll; }</style></head><body> <div class="dv1"> 碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際 </div> <div class="dv2"> 碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際 </div> <div class="dv3"> 碼海無際碼海無際碼海無際碼海無際碼海無際 碼海無際碼海無際碼海無際碼海無際碼海無際 </div> <div class="dv4"> 碼海無際碼海無際 </div></body></html>
設置或檢索在對象上移動的鼠标指針采用何種系統預定義的光标形狀。
cursor : default 小白 | pointer 小手 | move 移動 | text 文本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> default 小白 | pointer 小手 | move 移動 | text 文本 <ul> <li style="cursor: default">碼海無際</li> <li style="cursor: pointer">碼海無際</li> <li style="cursor: move">碼海無際</li> <li style="cursor: text">碼海無際</li> </ul></body></html>
是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 80px; border: 3px solid red; outline: blue dotted 5px; }</style></head><body> <div>碼海無際</div></body></html>
resize：none 這個單詞可以防止 火狐 谷歌等浏覽器随意的拖動 文本域。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <textarea></textarea> <textarea style="resize: none"></textarea></body></html>
該屬性定義行内元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格内容的對齊方式。
語法：vertical-align: 屬性值; 可能的值有：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> img { width: 100px; vertical-align: middle; }</style></head><body> 碼海<img src="img/ghzm.jpg">無際</body></html>
當對多個元素同時設置定位時，定位元素之間有可能會發生重疊。
在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。
注意：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 200px; height: 100px; background-color: blue; position: absolute; /*不加定位會失效*/ z-index: 1; }
.dv2 { width: 200px; height: 100px; background-color: red; position: absolute; top: 50px; left: 100px; }</style></head><body> <div class="dv1"></div> <div class="dv2"></div></body></html>
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
