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

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 属性的值。
分享到:
评论

相关推荐

    HTML之CSS 布局 - display 属性

    display 属性是用于控制布局的最重要的 CSS 属性。display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

    HTML5&CSS3网页制作:元素的转换.pptx

    此元素将显示为行内元素(行内元素默认的display属性值)。 此元素将显示为块元素(块元素默认的display属性值)。 此元素将显示为行内块元素,可以对其设置宽高和对齐等属性,但是该元素不会独占一行。 此元素将被...

    CSS display属性的table表格布局

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

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

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

    css之display属性之inline-block布局实现详解

    CSS display 属性 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 ...display 属性规定元素应该生成的框的类型。 说明 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    html元素一般分为块元素和行内元素 (1)块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③宽度默认是容器(父级元素)100%的宽度 ④是一个容器及盒子 里面看可以放行内或块级...

    html如何对span设置宽度

    设置 span 属性为 span{display:block}; ,呈现的效果如下: 但是这样写就体现不了 span 这个标签的作用了,跟 div 功效一致,都表示块级元素。 推荐指数::star2: 方式二 使用 float 属性,设置属性为 span{float...

    基于display:table的CSS布局让HTML元素和像table一样

    网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    10.1 盒模型和display属性 265 10.2 对盒添加阴影 275 10.3 布局相关属性 278 10.4 CSS 3新增的多栏布局 285 10.5 使用弹性盒布局 289 10.6 本章小结 306 第11章 表格、列表相关属性及media query 307 11.1 ...

    关于html元素的 width属性无效果的解决方法

    1.关于元素的 width属性无效果 先运行下程序看下: &lt;span xss=removed&gt;123&lt;/span&gt; 提示:您可以先修改部分代码再运行可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联的比如...

    使用display:inline-block居中没有宽度的元素

    在display属性的值中,inline-block具有一些特殊的混合行为.正如他的名字所暗示的,它具有块级元素的特点,也有行内元素的行为.从块级元素角度来说,可以为他设定外边距和内边距,也可以通过它简便

    html实现图片轮播(含代码和注释)

    这个示例展示了如何使用HTML、CSS和JavaScript创建一个基本的轮播...当切换到下一张图片时,我们首先将当前显示的图片隐藏(通过设置display属性为none),然后增加currentSlide变量的值,并使用模运算确保索引的循环。

    关于css 行元素和块元素 相互转换 居中

    这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 &lt;a&gt; 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用...

    display:inline的用法

    &lt;div&gt; DIV1 &lt;/div&gt; &lt;div&gt; DIV2 ...和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了 &lt;span

    js无法获取到html标签的属性的解决方法

    之前我就纳闷了,visibility为什么可以实现div的隐藏和显示而display不可以,我明明记得以前可以的,原来是我在style的属性里面给它写的是visibility,没有写display,而以前写的是display &lt;&#37;@ page ...

    关于CSS属性中visibility隐藏和display消失的区别简析

    之间的一些区别,当html元素被设置为display:none;后,浏览器不会解析该元素,“none”就是没有,消失了,所以他不会再文档流中占位。而visibility:hidden;仅仅是视觉上消失了,“hidden”也就是隐藏了,但是它所在...

    全面了解行内元素与块级元素的区别

    首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。 块级元素:(以下列举比较常用的块级元素,详情可在w3cschool查询) XML/...

    CSS中的元素定位方法详解

    其中,position 属性控制页面上元素间的位置关系, display 属性控制元素是堆叠、并排,还是根本不在页面上出现, float 属性提供控制的方式,以便把元素组成成多栏布局。 盒子属性分三组:  边框(border)。可以...

Global site tag (gtag.js) - Google Analytics