1 display 属性的使用

display 属性是用来设置元素的类型及隐藏的，常用的属性有：

  • none 元素隐藏且不占位置
  • inline 元素以行内元素显示
  • block 元素以块元素显示

2 示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box1{
  9.             width: 100px;
  10.             height: 100px;
  11.             background: red;
  12.             /* 隐藏标签, 并且不占位置 */
  13.             display: none;
  14.         }
  15.         .box2{
  16.             width: 100px;
  17.             height: 100px;
  18.             background: red;
  19.             /* 和其它元素在一行显示, 但会使宽高属性无效 */
  20.             display: inline;
  21.         }
  22.         .box3{
  23.             /* 标签自己单独占一行, 不和其它标签在一行显示 */
  24.             display: block;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="box1">哈哈1</div>
  30.     <p>嘻嘻</p>
  31.     <div class="box2">哈哈2</div>
  32.     <a href="https://baidu.com">百度</a>
  33.     <div class="box3">嘿嘿</div>
  34. </body>
  35. </html>

image.png