`
bluenemo
  • 浏览: 179145 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

CSS display 属性

阅读更多

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 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 属性的值。
 
分享到:
评论

相关推荐

    CSS display属性的table表格布局

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

    HTML之CSS 布局 - display 属性

    `display` 属性是CSS中不可或缺的一部分,它对网页布局起着至关重要的作用。通过`display`属性,我们可以控制HTML元素的显示方式,从而实现各种复杂的布局效果。下面我们将深入探讨`display`属性的原理、用途及其...

    浅谈CSS3中display属性的Flex布局的方法

    最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex .container { display: flex; flex-direction: column; align-items: center; background-color: #b3d4db; } 编译之后的效果...

    css收缩功能

    1. **CSS Display 属性**:CSS中的`display`属性是控制元素收缩与展开的关键。`none`值可以隐藏元素,使其不占用任何空间;而`block`或`inline`则可以使元素显示出来。通过改变这个属性,可以实现元素的显示与隐藏,...

    CSS常用属性列表

    本文将深入探讨CSS的常用属性,帮助您更好地理解和掌握这一核心技能。 1. **选择器**:CSS的选择器是用于匹配HTML元素的方式,如`class`、`id`、`tag name`等。例如,`.myClass`代表具有特定类名的元素,`#myID`...

    display属性.doc

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

    Css所有属性

    4. **布局属性**:`display`控制元素的显示方式,如块级、行内或Flexbox。`position`(静态、相对、绝对、固定)决定元素的位置,`float`用于浮动元素。 5. **文本属性**:`text-align`对齐文本,`text-decoration`...

    display属性练习.zip

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

    display属性介绍和使用

    Display 属性是 CSS 中一个非常重要的属性,它用于设置元素的显示类型,控制元素是否被视为块元素或内联元素,并影响子元素的布局。下面是 Display 属性的详细介绍和使用方法。 Display 属性的作用 Display 属性的...

    css属性查询手册

    1. 流动布局:CSS 2.0中的流体布局依赖于`display`属性,如`block`和`inline`,以及`width`和`height`来创建多列或多行布局。 2. 表格布局:`table`、`table-cell`等值可以将元素呈现为表格形式,便于对齐和布局。 ...

    别具光芒——CSS属性、浏览器兼容与网页布局

    例如,`color`属性用于设置文本颜色,`font-family`定义字体类型,`padding`和`margin`调整元素内外边距,`border`定义边框样式,`background-color`设置背景色,`display`控制元素的显示方式(如块级、行内或...

    详解css中的display属性

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

    CSS中如何把Span标签设置为固定宽度.docx

    要将`&lt;span&gt;`标签设置为固定宽度,可以将其CSS display属性更改为“inline-block”或“block”。下面是具体的CSS代码示例: ```css span { display: inline-block; width: 100px; /* 设置你想要的固定宽度 */ } `...

    CSS之display引用运用

    #### 一、display属性概述 在CSS中,`display`属性用于定义元素的类型以及该元素如何在其父容器中呈现。不同的`display`值会影响元素的盒模型、布局和定位方式等。 #### 二、display:inline-block详解 `display:...

    XML应用开发(软件品牌)-1期 4.3 案例分析-使用CSS文本属性显示XML文档-显示属性display.doc

    在本案例中,我们重点探讨的是CSS中的`display`属性,它用于控制XML元素在页面上的呈现方式。这个属性对于理解和优化XML文档的视觉效果至关重要。 首先,我们需要了解`display`属性的基本用法。`display`属性主要有...

    常用的CSS属性大全

    除了上述内容,CSS还有许多其他属性,如布局属性(如`margin`、`padding`、`border`等)、盒模型属性(`box-sizing`、`display`等)、定位属性(`position`、`z-index`等)、背景属性(`background-color`、`...

    XML应用开发(软件品牌)-1期 4.3 课堂实践-使用CSS文本属性显示XML文档-显示属性display.doc

    在本案例中,我们将探讨如何使用CSS的`display`属性来呈现XML文档中的数据。XML文档通常用于存储结构化的数据,如电影信息,而CSS则负责定义这些数据的视觉样式。 XML文档结构如下: ```xml &lt;!-- 电影详细...

Global site tag (gtag.js) - Google Analytics