蓝桥杯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>Documenttitle>
    <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>Documenttitle>
    <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>Documenttitle>
    <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>Documenttitle>
    <style>
      div {
        display: none;
      }
    style>
  head>
  <body>
    <div>哈哈,看不见我div>
  body>
html>

点击预览,可以发现页面上空空的。

你可能感兴趣的:(蓝桥杯Web应用开发(大学组),前端,css,蓝桥杯,html5)