详细介绍CSS中的display属性

CSS display 属性

所有主流浏览器都支持 display 属性。

注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 “inline-table”、”run-in”、”table”、”table-caption”、”table-cell”、”table-column”、”table-column-group”、”table-row”、”table-row-group”、以及 “inherit”。

定义和用法

display 属性规定元素应该生成的框的类型。

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。

默认值:

inline

继承性:

no

版本:

CSS1

JavaScript 语法:

object.style.display=”inline”

可能的值

值 描述

none此元素不会被显示。block此元素将显示为块级元素,此元素前后会带有换行符。inline默认。此元素会被显示为内联元素,元素前后没有换行符。inline-block行内块元素。(CSS2.1 新增的值)list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。markerCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。table此元素会作为块级表格来显示(类似 ),表格前后带有换行符。inline-table此元素会作为内联表格来显示(类似 ),表格前后没有换行符。)。)。)。)。)。)table-row-group此元素会作为一个或多个行的分组来显示(类似table-header-group此元素会作为一个或多个行的分组来显示(类似table-footer-group此元素会作为一个或多个行的分组来显示(类似table-row此元素会作为一个表格行显示(类似table-column-group此元素会作为一个或多个列的分组来显示(类似table-column此元素会作为一个单元格列显示(类似table-cell此元素会作为一个表格单元格显示(类似和)table-caption此元素会作为一个表格标题显示(类似)inherit规定应该从父元素继承 display 属性的值。

以上就是详细介绍CSS中的display属性的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608807.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 22:19:53
下一篇 2025年12月23日 22:20:10

相关推荐

  • CSS实现图片动态效果的相关属性介绍

    css实现图片动态效果。 使用方法 利用hover伪类 操作流程 首先确定要实现的效果 设置初始表示状态 动画用到的css属性 transition 属性 立即学习“前端免费学习笔记(深入)”; transition-property 规定设置过渡效果的 CSS 属性的名称。 ( none 没有属性…

    好文分享 2025年12月23日
    000
  • CSS样式为什么要初始化?

    为什么要初始化css样式?因为浏览器的兼容性,每个浏览器设计时都有自己的特性,因此在解析标签的时候就产生一些差异,因此显示页面的时候就会出现微小的差异。常见的初始化如下:本人常用的常见初始化如下: body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5…

    好文分享 2025年12月23日
    000
  • 详细介绍CSS之三栏布局的实例(图)

    1.通过float left 和相对width实现 css三栏布局之float left与 相对width.block1,.block2,.block3{float:left;width:32%;height:50px;border:1px dashed #F00;margin:2px;}.bloc…

    2025年12月23日
    000
  • 关于CSS盒子模型之定位的具体分析

    css盒子模型之定位 1、static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。 2、Fixed 定位 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动: Fixed定位使元素的位置与…

    2025年12月23日
    000
  • 关于CSS的相对定位与绝对定位介绍

     1.一般如果我们不给元素设置position,则默认为static,此时是该元素是没有定位的,像left/right这些偏移属性都是没有效果的。     2.position:relative (相对定位)     若设置为相对定位,即可配置left/right这些偏移,相对于该元素原有位置进行偏…

    好文分享 2025年12月23日
    000
  • CSS实现响应式全屏背景图

      当前很流行的一种网页形式就是满屏大图,本文将用最简单的方式实现该效果。用到了CSS 属性background-size ,无需javascript。   核心概念   使用background-size 属性,填充整个viewport   当css属性background-size 值为cove…

    2025年12月23日
    000
  • css使用background-position属性来完成雪碧图的代码详解

    什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分。 为什么要用雪碧图 可以减少加载网页图片时对服务器的请求次数,提高页面的加载速度,解决IE6鼠标滑…

    2025年12月23日 好文分享
    000
  • CSS如何实现饼状的Loading等待图的效果(图)

    这篇文章主要介绍了用纯css实现饼状loading等待图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 写在前面 之前碰到一个小练习,就是用纯CSS3来写饼状的loading效果,之前着实没有写过这玩意儿,小花完全没头绪,然后参考了张鑫旭老师的CSS3实现鸡蛋饼饼状图loading等待转转转…

    2025年12月23日 好文分享
    000
  • 详细介绍使用纯CSS实现自适应正方形的案例

    在处理移动端页面时,我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果,如 flipbord 的移动页面: 那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢? 方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vm…

    2025年12月23日 好文分享
    000
  • 使用CSS自定义radio、checkbox样式的示例详解

    以前做自定义样式的radio, checkbox 的时候,一直是如下结构 文字 然后定义diyRadio 的样式作为新Radio, 再用js 做关联。 知道今天才知道可以用标签的for 属性 + :checked 做,纯CSS( 真是太不应该了,学东西还是要认真、细致点。 ) DIY 单选项示例如下…

    好文分享 2025年12月23日
    000
  • CSS实现Footer置底的五种方式的分享

    页脚置底(sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。 方法一:将内容部分的margin-bottom设为负数 footer htm…

    2025年12月23日
    000
  • 整合20个CSS/CSS3常用属性

    这里我总结了一下平时自己在项目中经常用到的20个css常用的样式,都是些个人的经验,这里分享给大家,希望对大家有所帮助 1.强制文本单行显示:white-space:nowrap; 2.设置溢出文本显示为省略标记:text-overflow:ellipsis;(注:text-overflow:cli…

    好文分享 2025年12月23日
    000
  • 用css实现文本超链文字右边加一个箭头图标

    许多知名网站都在文字链的右边加一个箭头图标,例如google站长管理后台,alexa官网等,这样设计的好处是让链接更醒目,更容易辨认。 文字链右边加一个箭头图标的方法,多数人是使用css背景图来实现,包括上面提到的Google站长管理后台,Alexa官网等。是的,这种方法最容易掌握和应用。这正是本文…

    2025年12月23日
    000
  • 用CSS实现背景图片透明而文字不透明的两种方法

    这篇文章主要介绍了css实现背景图片透明而文字不透明效果的两种方法,需要的朋友可以参考下 摘要: 方法一(毛玻璃效果):背景图 + 伪类 + flite:blur(3px) 方法二(半透明效果):背景图 + 定位 + background:rgba(255,255,255,0.3) CSS实现背景图…

    2025年12月23日
    000
  • css实现元素水平垂直居中常见的两种方式实例详解

    这篇文章主要给大家介绍了css实现元素水平垂直居中的两种方式,文中给出了完整的示例代码供大家参考学习,对大家的学习或者工作具有一定的参考价值,有需要的朋友们下面来一起看看吧。 一、父元素的flex布局实现元素的水平垂直居中 示例代码如下: Document .parent{ display:flex…

    2025年12月23日
    000
  • 必须了解的css中出现的bug以及修复方法

    与许多编程语言相比,css是一种相当容易学习的语言。它的语法简单明了,而且由于它的表现本质,开发人员并不需要处理复杂的逻辑。但是,当在不同的浏览器中测试代码时,困难就会随之出现。浏览器bug何不一至的显示方式是大多css开发人员面临的主要难题。你的设计在一种浏览器上显示的很好,但在另一种浏览器上布局…

    好文分享 2025年12月23日
    000
  • 什么是css sprite?对css sprite技巧总结

    css  sprite做为一个前端人员来说必须要掌握,但是这个对于刚学习的同学来说是由困难的,下面我就专门为这个内容做一次分享,这里没有网络图片地址,若内容显示不全面你可以到我的个人博客中去查看 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所…

    2025年12月23日
    000
  • CSS中margin边界叠加问题的解决方法介绍(图文)

    本文主要介绍了css中margin边界叠加问题及解决方案。具有很好的参考价值。下面跟着小编一起来看下吧 CSS的margin边界叠加深度剖析 边界叠加简介 边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇时,它们将形成一个边界。这个边界的高…

    2025年12月23日 好文分享
    000
  • 通过CSS规则禁止选中文字的代码实例

    禁止选中文字在某些场景下还是有必要的,比如不想让他人复制自己的文章之类的。这时候我们可以通过使用css+js来解决这一问题。另外,这边要指出的是,user-select目前还不是w3c的正式标准,各个浏览器都是以私有属性的方式提供支持。 语法 Formal syntax: none | text |…

    好文分享 2025年12月23日
    000
  • 用css设置网页占满屏幕的实例代码

    本文用css设置网页高100%宽100%占满屏幕,可以看一下,挺不错的 css设置网页高100%宽100%占满屏幕*{margin: 0;padding: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing:…

    好文分享 2025年12月23日
    000

发表回复

登录后才能评论
关注微信