`
CshBBrain
  • 浏览: 650066 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量:144900
Group-logo
HTML5移动开发
浏览量:137843
社区版块
存档分类
最新评论

HTML元素 display属性

 
阅读更多

转自:http://www.cnblogs.com/zcy_soft/archive/2011/02/12/1952516.html

 

定义和用法

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

说明

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

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

默认值: 继承性: 版本: JavaScript 语法:
inline
no
CSS1
object.style.display="inline"

实例

使段落生出行内框:

p.inline
  {
  display:inline;
  }

TIY

浏览器支持

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

注释:任何版本的 Internet Explorer (包括 IE8)都不支持 "inherit"、"inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、以及 "table-row-group" 属性值。

可能的值

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

相关推荐

    display属性.doc

    ### Display属性详解 #### 一、概述 `display` 属性是CSS中非常重要的一个属性,用于控制元素的呈现方式,决定了元素如何显示以及与其他元素的关系。它影响着页面布局和元素之间的相互作用。 #### 二、兼容性与...

    display属性练习.zip

    在给定的“display属性练习.zip”压缩包中,我们可以找到一个针对`display`属性,特别是关于`flex`(弹性布局)的实践教程。这个练习项目旨在帮助开发者更深入地理解并熟练掌握`flex`布局的各种用法。 `display: ...

    HTML之CSS 布局 - display 属性

    通过`display`属性,我们可以控制HTML元素的显示方式,从而实现各种复杂的布局效果。下面我们将深入探讨`display`属性的原理、用途及其不同值的含义。 **1. `display`属性的基本概念** `display`属性用于定义元素的...

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

    在CSS(层叠样式表)中,`display`属性是一个至关重要的样式规则,它定义了HTML元素如何在页面上布局和呈现。`display`属性决定了元素是作为块级元素、内联元素还是其他特定类型的元素来表现。让我们深入探讨这个...

    HTML5新增属性与表单元素

    为了保证在不支持`hidden`属性的旧浏览器中也能隐藏元素,开发者可以在CSS中使用`[hidden]{display:none;}`的样式来增强兼容性。 #### 1.4 draggable属性 `draggable`属性在HTML5中用于控制元素是否可拖拽。该属性...

    行内元素和块级元素 displayDemo.html

    在HTML中,元素被分为两种主要类型:行内...总的来说,理解和掌握行内元素与块级元素的概念以及如何利用`display`属性是HTML和CSS布局基础中的重要部分。熟练运用这些知识,可以帮助开发者创建出符合预期的网页布局。

    html,javascript元素属性文档

    每个HTML元素都有特定的属性,这些属性用于设定元素的行为、样式或内容。例如,`&lt;img&gt;`元素的`src`属性用于指定图像的URL,`alt`属性提供了当图片无法显示时的文字描述。在编写HTML时,我们需要了解各个元素及其属性...

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

    `display` 属性是CSS中的一个关键样式,用于定义元素的盒模型以及它们在页面上的呈现方式。这个属性控制元素的布局类型,决定元素是作为块级元素、内联元素还是其他特定类型的显示框。 - `none`: 这是最基本的值,...

    用JS来控制DIV样式的display属性

    ### 使用JavaScript控制DIV元素的Display属性 在网页开发过程中,我们经常会遇到需要动态显示或隐藏某个元素的需求。本文将详细介绍如何使用JavaScript(JS)来控制HTML中的DIV元素的`display`属性,从而实现元素的...

    CSS:Visibility 和 Display 属性的比较.pdf

    在CSS中,`visibility`和`display`两个属性都是用于控制HTML元素的可见性,但它们之间存在显著的差异。`visibility`属性主要控制元素是否可见,而`display`属性则涉及元素在页面布局中的存在与否。 `visibility`...

    微信小程序开发中flex布局容器及元素之属性技术释疑.pdf

    微信小程序开发中的Flex布局是一种灵活的布局方式,其核心是通过设置容器的display属性为flex或inline-flex来启用。Flex布局允许容器内的元素能够以灵活的方式进行排列,适应不同屏幕尺寸和分辨率。在微信小程序中,...

    详解css中的display属性

    CSS中的`display`属性是一个非常重要的样式属性,用于定义元素的布局方式。它规定了元素应该生成的框的类型,从而影响元素的显示效果和周围的元素如何排列。在CSS布局中,`display`属性通常与`block`、`none`、`...

    CSS:Visibility和Display属性的比较.pdf

    在CSS中,`visibility`和`display`两个属性都是用于控制HTML元素的可见性,但它们之间有着显著的差异。了解这些差异对于精确地管理页面布局和交互至关重要。 首先,`visibility`属性主要用来切换元素的可见状态。它...

    display的一个例子

    `display`属性最初是为了处理HTML元素的可见性而引入的,但它后来发展成为控制元素盒模型的关键工具。`display`属性可以设置为多种值,每种值都会改变元素的显示方式: 1. **none**:这是默认值之一,使得元素完全...

    html中的行内元素和块级元素有哪些.pdf

    可以通过设置 display 属性来转换行内元素和块级元素。例如: * 设置 display:block; 可以将行内元素转换为块级元素。 * 设置 display:inline; 可以将块级元素转换为行内元素。 * 设置 display:inline-block; 可以...

    列元素所用属性之谜.pdf

    此外,列元素(display:table-column)与单元格元素(display:table-cell)的关系是在第三步——排列文档版式时才确定的,而在那之前,每个元素的属性值已经计算完成。 对于 `&lt;col&gt;` 和 `&lt;colgroup&gt;` 的属性问题,...

    CSS display属性的table表格布局

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格...一、CSS display属性的表格布局相关属性的解释: table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。table-row-group 此元素会作为一个或多个

    jquery控制display属性为none或block

    本文将详细讲解如何使用 jQuery 来控制 HTML 元素的 `display` 属性,使其在页面上呈现 `none` 或 `block` 状态。 `display` 属性是 CSS 中的关键属性之一,它决定了元素在页面上的布局方式。当 `display` 设置为 `...

    HTML行内元素与块级元素有哪些及区别?

    想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,...使用display属性能够将三者任意转换:  (1)display:inline;转换为行内元素;  (2)display:block;转换为

Global site tag (gtag.js) - Google Analytics