CSS 中的 display 和 visibility

这篇具有很好参考价值的文章主要介绍了CSS 中的 display 和 visibility。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。

  • display: 隐藏某个元素时,不会占用任何空间。换句话讲,不会影响布局。
  • visibility: 隐藏某个元素时,仍需占用与未隐藏之前一样的空间。换句话讲,会影响布局。

display 属性

属性值 描述
none 此元素不会被显示。

当将一个元素的 CSS 属性 display 设置为 none 时,该元素会被隐藏。并且被隐藏的元素不会占用 HTML 页面的任何空间。

在 HTML 页面中定义两个 <div> 标签,并设置 CSS 样式,具体代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="d1"></div>
    <div id="d2"></div>
  </body>
</html>

当为第一个 <div> 标签设置 display 属性值为 none 时,该 <div> 标签会被隐藏。

属性值 描述
block 此元素将显示为块级元素。

该值主要作用于内联元素。如果将内联元素的 CSS 属性 display 设置为 block 时,该内联元素将在浏览器中显示成块级元素效果。

在 HTML 页面中定义两个 <div> 标签,并设置 CSS 样式,具体代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #s1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #s2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <span id="s1">这是一个span</span>
    <span id="s2">这是一个span</span>
  </body>
</html>

当为第一个 <span> 标签设置 display 属性值为 block 时,该 <span> 标签会呈现块级元素效果。

属性值 描述
inline 默认值,此元素会被显示为内联元素。

该值主要作用于块级元素。如果将内联元素的 CSS 属性 display 设置为 inline 时,该内联元素将在浏览器中显示成内联元素效果。

在 HTML 页面中定义两个 <div> 标签,并设置 CSS 样式,具体代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="d1">这是一个div</div>
    <div id="d2">这是一个div</div>
  </body>
</html>

当为第一个 <div> 标签设置 display 属性值为 inline 时,该 <div> 标签会呈现内联元素样式。

属性值 描述
inline-block 行内块元素。

当将 CSS 属性 display 设置为 inline-block 时,该元素在浏览器中显示为内联块级效果。即每个元素呈现块级元素效果,元素之间呈现内联元素效果。

在 HTML 页面中定义两个 <div> 标签,并设置 CSS 样式,具体代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="d1">这是一个div</div>
    <div id="d2">这是一个div</div>
  </body>
</html>

分别为两个 <div> 标签设置 display 属性值为 inline-block 时,这两个 <div> 会显示在一行中。

visibility 属性

visibility 属性指定一个元素是否是可见的。

值得注意的是: visibility 属性设置元素不可见的元素,但会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素。

属性值 描述
visible 默认值,元素是可见的。
hidden 元素是不可见的。

在 HTML 页面中定义两个 <div> 标签,并设置 CSS 样式,具体代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #d1 {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      #d2 {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="d1">这是一个div</div>
    <div id="d2">这是一个div</div>
  </body>
</html>

当为第一个 <div> 标签设置 visibility 属性值为 hidden 时,该 <div> 会被隐藏。文章来源地址https://www.toymoban.com/news/detail-704643.html

到了这里,关于CSS 中的 display 和 visibility的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS display: inline-block;

    display: inline-block; 是一种 CSS 属性,用于设置元素的显示方式。 当你将一个元素的 display 属性设置为 inline-block 时,它将以内联块级元素的方式显示。这意味着元素会在一行上显示,并且可以设置宽度、高度、内外边距等属性,同时仍保留内联元素的特性,可以与其他元素在同

    2024年02月12日
    浏览(47)
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表 (Cascading Style Sheets)。下面是一些常用的CSS3属性及其详细解释: border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。 box-shadow:创建一个元

    2024年02月08日
    浏览(55)
  • 前端开发 2: CSS

    在前端开发中,CSS(层叠样式表)是一种用于描述网页样式的语言。它控制着网页的布局、颜色、字体等外观效果。在本篇博客中,我将为你介绍 CSS 的基础知识和常用技巧,帮助你更好地掌握前端开发中的样式设计。 CSS 由选择器和声明块组成。选择器用于选择要应用样式的

    2024年01月19日
    浏览(31)
  • display: none与visibility: hidden的区别

    引言: 在前端面试中,一般比较侧重JavaScript方面的考察,CSS布局方面考察的内容会相对少一些,其中display: none与visibility: hidden的区别是较常见的考点,这两个css配置都可以从视觉上隐藏DOM元素,那这两者的使用上有什么区别呢? 首先我们来看W3C中对display: none的描述: \\\'no

    2024年02月08日
    浏览(35)
  • Web前端开发:HTML、CSS

    在介绍Web网站工作流程的时候提到, 前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序 ,如下图所示: 1.   网页有哪些部分组成 ? 文字、图片、音频、视频、超链接、表格等等。 2.  我们看到的网页,背后的本质是什么 ? 程序员写的前端

    2023年04月18日
    浏览(41)
  • 【CSS弹性盒模型 display:flex;常用参数及常见的布局】

    display:flex; 是CSS中用于创建弹性盒子布局的属性,其常见的各种参数及用法包括: flex-direction 指定主轴的方向,可以是row(水平方向)、column(垂直方向)等。 justify-content 定义在主轴上的对齐方式,可以是flex-start(靠近起点)、flex-end(靠近终点)、center(居中对齐)、s

    2024年02月13日
    浏览(43)
  • 【Web前端开发基础】CSS的盒子模型

    能够认识不同选择器的优先级公式 能够进行CSS权重叠加计算,分析并解决CSS 冲突问题 能够认识盒子模型的组成部分 能够掌握盒子模型的边框、内边距、外边距的作用及简写形式 能够计算盒子的实际大小 能够了解外边距折叠现象,并知道如何解决盒子塌陷问题 2.1 CSS三大特

    2024年01月22日
    浏览(45)
  • CSS中display属性的inline-block导致布局错位问题

    HTML部分代码 CSS代码 不理想的效果 发现还原不回来现场 尴尬 大概样式 发现核心问题是 inline-block 默认的对齐方式 只需要设计 当然也可以是使用浮动float 或者 弹性盒子flex 完成上述需求 QQ浏览器 Firefox浏览器 设置行内块级元素之后,细心的人就会发现盒子间有空隙 检查元素

    2024年02月15日
    浏览(46)
  • CSS中如何隐藏元素但保留其占位空间(display:nonevsvisibility:hidden)?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(44)
  • 30个HTML+CSS前端开发案例(完结篇)

    相关代码及其图片素材,持续更新中。。。

    2024年02月09日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包