转自:http://www.cnblogs.com/zcy_soft/archive/2011/02/12/1952516.html
定义和用法
display 属性规定元素应该生成的框的类型。
说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
inline |
no |
CSS1 |
object.style.display="inline" |
浏览器支持
所有主流浏览器都支持 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属性详解 #### 一、概述 `display` 属性是CSS中非常重要的一个属性,用于控制元素的呈现方式,决定了元素如何显示以及与其他元素的关系。它影响着页面布局和元素之间的相互作用。 #### 二、兼容性与...
在给定的“display属性练习.zip”压缩包中,我们可以找到一个针对`display`属性,特别是关于`flex`(弹性布局)的实践教程。这个练习项目旨在帮助开发者更深入地理解并熟练掌握`flex`布局的各种用法。 `display: ...
通过`display`属性,我们可以控制HTML元素的显示方式,从而实现各种复杂的布局效果。下面我们将深入探讨`display`属性的原理、用途及其不同值的含义。 **1. `display`属性的基本概念** `display`属性用于定义元素的...
在CSS(层叠样式表)中,`display`属性是一个至关重要的样式规则,它定义了HTML元素如何在页面上布局和呈现。`display`属性决定了元素是作为块级元素、内联元素还是其他特定类型的元素来表现。让我们深入探讨这个...
为了保证在不支持`hidden`属性的旧浏览器中也能隐藏元素,开发者可以在CSS中使用`[hidden]{display:none;}`的样式来增强兼容性。 #### 1.4 draggable属性 `draggable`属性在HTML5中用于控制元素是否可拖拽。该属性...
在HTML中,元素被分为两种主要类型:行内...总的来说,理解和掌握行内元素与块级元素的概念以及如何利用`display`属性是HTML和CSS布局基础中的重要部分。熟练运用这些知识,可以帮助开发者创建出符合预期的网页布局。
每个HTML元素都有特定的属性,这些属性用于设定元素的行为、样式或内容。例如,`<img>`元素的`src`属性用于指定图像的URL,`alt`属性提供了当图片无法显示时的文字描述。在编写HTML时,我们需要了解各个元素及其属性...
`display` 属性是CSS中的一个关键样式,用于定义元素的盒模型以及它们在页面上的呈现方式。这个属性控制元素的布局类型,决定元素是作为块级元素、内联元素还是其他特定类型的显示框。 - `none`: 这是最基本的值,...
### 使用JavaScript控制DIV元素的Display属性 在网页开发过程中,我们经常会遇到需要动态显示或隐藏某个元素的需求。本文将详细介绍如何使用JavaScript(JS)来控制HTML中的DIV元素的`display`属性,从而实现元素的...
在CSS中,`visibility`和`display`两个属性都是用于控制HTML元素的可见性,但它们之间存在显著的差异。`visibility`属性主要控制元素是否可见,而`display`属性则涉及元素在页面布局中的存在与否。 `visibility`...
微信小程序开发中的Flex布局是一种灵活的布局方式,其核心是通过设置容器的display属性为flex或inline-flex来启用。Flex布局允许容器内的元素能够以灵活的方式进行排列,适应不同屏幕尺寸和分辨率。在微信小程序中,...
CSS中的`display`属性是一个非常重要的样式属性,用于定义元素的布局方式。它规定了元素应该生成的框的类型,从而影响元素的显示效果和周围的元素如何排列。在CSS布局中,`display`属性通常与`block`、`none`、`...
在CSS中,`visibility`和`display`两个属性都是用于控制HTML元素的可见性,但它们之间有着显著的差异。了解这些差异对于精确地管理页面布局和交互至关重要。 首先,`visibility`属性主要用来切换元素的可见状态。它...
`display`属性最初是为了处理HTML元素的可见性而引入的,但它后来发展成为控制元素盒模型的关键工具。`display`属性可以设置为多种值,每种值都会改变元素的显示方式: 1. **none**:这是默认值之一,使得元素完全...
可以通过设置 display 属性来转换行内元素和块级元素。例如: * 设置 display:block; 可以将行内元素转换为块级元素。 * 设置 display:inline; 可以将块级元素转换为行内元素。 * 设置 display:inline-block; 可以...
此外,列元素(display:table-column)与单元格元素(display:table-cell)的关系是在第三步——排列文档版式时才确定的,而在那之前,每个元素的属性值已经计算完成。 对于 `<col>` 和 `<colgroup>` 的属性问题,...
项目改造中遇到DIV+CSS实现的table,新需求需要在表格...一、CSS display属性的表格布局相关属性的解释: table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。table-row-group 此元素会作为一个或多个
本文将详细讲解如何使用 jQuery 来控制 HTML 元素的 `display` 属性,使其在页面上呈现 `none` 或 `block` 状态。 `display` 属性是 CSS 中的关键属性之一,它决定了元素在页面上的布局方式。当 `display` 设置为 `...
想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,...使用display属性能够将三者任意转换: (1)display:inline;转换为行内元素; (2)display:block;转换为