肉渣教程

CSS Display显示

上一节 下一节

CSS布局 - display属性

display属性是CSS中用来控制布局的重要属性。其决定元素如何来显示。该属性有如下4中常用的取值,当然肯定不只这4种:

  • none - 当取值为none,等于让该元素完全消失(不会占据网页空间)
  • inline - 定义一个行内元素,且该元素的width属性和height属性不会起任何作用
  • block - 定义一个块级元素,该元素首末都会另起一行,该元素会占据整行宽度
  • inline-block - 定义一个行内块级元素,类似行内元素,但该元素的width和height是可以设置的

display元素的默认取值

并非所有HTML元素的display属性的默认取值都是一致,但大多都是block或者inline,具体是哪个则视具体的元素类型而定。比如默认情况下<p>元素的display属性取值block,而<span>元素的display属性则取值inline属性

块级元素 Block

块级元素的特点就是起始都会另起一行,且该元素会占据整行宽度。如下所示:

这是一个<div>元素,它就是一个典型的块级元素(Block)

默认设置下,常见的块级元素有:

  • <div>
  • <p>
  • <h1> - <h6>
  • <form>
  • <header>
  • <footer>
  • <section>
  • <nav>

行内元素 Inline

行内元素就是不需要另起一行,直接行内显示,所占宽度根据内容需要,且无法对其设置width与height属性

默认设置下,常见的行内元素有:

  • <span>
  • <a>
  • <img>

Display:none;

通过设置display:none;可以让一个元素消失;对该元素修改属性,将其display属性改成其他可以显现的取值,如block,即可重新显示。

<p id="qingming">清明</p>
<p style="display:none;" id="fanfu">反复</p>
<p id="chongyang">重阳</p>

运行一下

隐藏一个元素的两种方式(有区别)

CSS中有两个属性都可以用来隐藏元素。但是这两种方式有一些细微的差别。

方式一:display:none

这种方式可以让元素完全消失,就像完全不存在一样;元素从有到无,页面的布局会发生变化。(花木兰代父从军,有一天,将军让士兵们排成一队,将军发现花木兰了,将军勃然大怒,决定让花木兰消失,花木兰消失后,将军喊了一句向右看齐,然后重新列队,花木兰原有的位置就被别的士兵补上了,重新列队的队伍完全看不出曾经有个花木兰,于是一切平安)

h1.hidden {
    display: none;
}

运行一下


方式二:visibility:hidden

这种方式也可以隐藏元素,但是不一样的是,只是这个元素看不见了,但是其所占空间依然存在,页面布局会保持不变。(花木兰代父从军,有一天,将军让士兵们排成一队,将军发现花木兰了,将军勃然大怒,决定让花木兰消失,花木兰消失后,将军就去打王者荣耀了,打完王者荣耀,将军又通宵吃鸡去了,而队伍依然没有解散,士兵各自保持原有位置,花木兰虽然消失了,但是她原来的那个位置依然是空着在,元帅路过,发现这里有个空白,就去深入调查了,后来这个将军就被元帅惩罚了)

h1.hidden {
    visibility: hidden;
}

运行一下


CSS Display显示

上一节 下一节