蓝桥杯Web应用开发-display属性

display 属性

专栏持续更新中

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。

display 属性值的说明如下表所示。

属性值	说明
block	元素以块级方式展示。
inline	元素以内联方式展示。
inline-block	元素以内联块的方式展示。
none	隐藏元素。

block 属性值

block 属性值可以让行内元素以块级元素的方式显示在页面上。
其使用格式如下：

display: block;

还记得前面学过的行内元素的概念吗？行内元素就是可以和其他元素同处一行的元素，例如 span 标签元素。
举个例子～
新建一个 index.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        display: block;
      }
    </style>
  </head>
  <body>
    <span>示例</span><span>内容</span>  </body>
</html>

在这里插入图片描述

可以看到，原本 span 标签是行内元素，却因为设置 display: block; 导致「蓝桥」与「云课」分开了。

inline 属性值

inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。
其使用格式如下：

display: inline;

举个例子～
新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: inline;
      }
    </style>
  </head>
  <body>
   	<div>示例</div>
<div>内容</div>  
</body>
</html>

在这里插入图片描述

inline-block 属性值

我们的块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。
其使用格式如下：

display: inline-block;

比如，我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。
我们来看个例子～
新建一个 index2.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a {
        text-decoration: none;
        background-color: rgb(95, 118, 160);
        display: inline-block;
        width: 70px;
        height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <a href="#">首页</a>
    <a href="#">分类</a>
    <a href="#">展示</a>
    <a href="#">更多</a>
  </body>
</html>

在这里插入图片描述

none 属性值

none 属性值可以用来隐藏页面上的元素。
使用格式如下：

display: none;

举个例子～
新建一个 index3.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>哈哈，看不见我🤫</div>
  </body>
</html>