说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 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"。
可能的值
值
描述
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 属性的值。 |
分享到:
相关推荐
项目改造中遇到DIV+CSS实现的table,新需求需要在表格...一、CSS display属性的表格布局相关属性的解释: table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。table-row-group 此元素会作为一个或多个
`display` 属性是CSS中不可或缺的一部分,它对网页布局起着至关重要的作用。通过`display`属性,我们可以控制HTML元素的显示方式,从而实现各种复杂的布局效果。下面我们将深入探讨`display`属性的原理、用途及其...
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex .container { display: flex; flex-direction: column; align-items: center; background-color: #b3d4db; } 编译之后的效果...
1. **CSS Display 属性**:CSS中的`display`属性是控制元素收缩与展开的关键。`none`值可以隐藏元素,使其不占用任何空间;而`block`或`inline`则可以使元素显示出来。通过改变这个属性,可以实现元素的显示与隐藏,...
本文将深入探讨CSS的常用属性,帮助您更好地理解和掌握这一核心技能。 1. **选择器**:CSS的选择器是用于匹配HTML元素的方式,如`class`、`id`、`tag name`等。例如,`.myClass`代表具有特定类名的元素,`#myID`...
### Display属性详解 #### 一、概述 `display` 属性是CSS中非常重要的一个属性,用于控制元素的呈现方式,决定了元素如何显示以及与其他元素的关系。它影响着页面布局和元素之间的相互作用。 #### 二、兼容性与...
4. **布局属性**:`display`控制元素的显示方式,如块级、行内或Flexbox。`position`(静态、相对、绝对、固定)决定元素的位置,`float`用于浮动元素。 5. **文本属性**:`text-align`对齐文本,`text-decoration`...
在给定的“display属性练习.zip”压缩包中,我们可以找到一个针对`display`属性,特别是关于`flex`(弹性布局)的实践教程。这个练习项目旨在帮助开发者更深入地理解并熟练掌握`flex`布局的各种用法。 `display: ...
Display 属性是 CSS 中一个非常重要的属性,它用于设置元素的显示类型,控制元素是否被视为块元素或内联元素,并影响子元素的布局。下面是 Display 属性的详细介绍和使用方法。 Display 属性的作用 Display 属性的...
1. 流动布局:CSS 2.0中的流体布局依赖于`display`属性,如`block`和`inline`,以及`width`和`height`来创建多列或多行布局。 2. 表格布局:`table`、`table-cell`等值可以将元素呈现为表格形式,便于对齐和布局。 ...
例如,`color`属性用于设置文本颜色,`font-family`定义字体类型,`padding`和`margin`调整元素内外边距,`border`定义边框样式,`background-color`设置背景色,`display`控制元素的显示方式(如块级、行内或...
CSS中的`display`属性是一个非常重要的样式属性,用于定义元素的布局方式。它规定了元素应该生成的框的类型,从而影响元素的显示效果和周围的元素如何排列。在CSS布局中,`display`属性通常与`block`、`none`、`...
要将`<span>`标签设置为固定宽度,可以将其CSS display属性更改为“inline-block”或“block”。下面是具体的CSS代码示例: ```css span { display: inline-block; width: 100px; /* 设置你想要的固定宽度 */ } `...
#### 一、display属性概述 在CSS中,`display`属性用于定义元素的类型以及该元素如何在其父容器中呈现。不同的`display`值会影响元素的盒模型、布局和定位方式等。 #### 二、display:inline-block详解 `display:...
在本案例中,我们重点探讨的是CSS中的`display`属性,它用于控制XML元素在页面上的呈现方式。这个属性对于理解和优化XML文档的视觉效果至关重要。 首先,我们需要了解`display`属性的基本用法。`display`属性主要有...
除了上述内容,CSS还有许多其他属性,如布局属性(如`margin`、`padding`、`border`等)、盒模型属性(`box-sizing`、`display`等)、定位属性(`position`、`z-index`等)、背景属性(`background-color`、`...
在本案例中,我们将探讨如何使用CSS的`display`属性来呈现XML文档中的数据。XML文档通常用于存储结构化的数据,如电影信息,而CSS则负责定义这些数据的视觉样式。 XML文档结构如下: ```xml <!-- 电影详细...