display是用来设置元素的类型及隐藏，常用属性有：
none 元素隐藏且不占位置inline 元素以行内元素显示，可以和其他标签在同一行显示，把块级标签变为内联标签block 元素以块元素显示，块状显示就是自己独自占一行，把内联标签变为块级标签，不与别人分享 如：不添加display <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示特性display</title> <style> div{ width: 200px; height: 100px; color:red; font-size: 20px; background-color: tan; /* 设置为元素隐藏且不占位置 */ /* display: inline; */ } </style> </head> <body> <div>我想上百度搜一些美女的照片</div> <a href="https//www.baidu.com">点我，点我！！！</a> </body> </html>执行结果：
设置display为none之后 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示特性display</title> <style> div{ width: 200px; height: 100px; color:red; font-size: 20px; background-color: tan; /* 设置为元素隐藏且不占位置 */ display: none; } </style> </head> <body> <div>我想上百度搜一些美女的照片</div> <a href="https//www.baidu.com">点我，点我！！！</a> </body> </html>执行结果： 可以看到，设置了display为none之后，之前能看到元素都看不到了，位置也不见了
设置display为inline 注意：此时不能再设置宽度和高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示特性display</title> <style> div{ color:red; font-size: 20px; background-color: tan; /* 设置为元素隐藏且不占位置 */ display: inline; } </style> </head> <body> <div>我想上百度搜一些美女的照片</div> <a href="https//www.baidu.com">点我，点我！！！</a> </body> </html>执行结果：
设置display为block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示特性display</title> <style> div{ color:red; font-size: 20px; background-color: tan; /* 设置为元素隐藏且不占位置 */ display: block; } </style> </head> <body> <div>我想上百度搜一些美女的照片</div> <a href="https//www.baidu.com">点我，点我！！！</a> </body> </html>执行结果：
