(转)CSS的display属性

原文链接:http://www.cnblogs.com/xieon1986/articles/1424022.html

display属性中:
block:块状显示,在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。
inline:内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示。

重点:
display属性的浏览器兼容表及用法详解

该CSS属性用来设定对象如何显示。

值:block | none | inline | inline-block | list-item | table-header -group | table-footer-group | inherit

可用值 值的说明
block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示 ,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
table-header-group 显示在任何表格行和行组合之前,在头部标题之后。
table-footer-group 显示在任何表格行和行组合之后,在底部标题前。

除了以下元素 ,所有元素的 display 的缺省值都为 inline:

元素 display 属性值
ADDRESS block
BLOCKQUOTE block
BODY block
CENTER block
COL block
COLGROUP block
DD block
DIR block
DIV block
DL block
DT block
FIELDSET block
FORM block
FRAME none
hn block
HR block
IFRAME block
LEGEND block
LI list-item
LISTING block
MARQUEE block
MENU block
OL block
P block
PLAINTEXT block
PRE block
TABLE block
TBODY none
TD block
TFOOT none
TH block
THEAD none
TR block
UL block
XMP block

所 有可见的 html 对象为 block 或者 inline。举例来说,div 对象就是一个块类型元素 (block element),而 span 对象则是一个行内元素 (inline element)。Block 元素另起一行,并可以包含其它 block 元素和 inline 元素。Inline 元素则不会另起一行 ,inline 元素包含其它 inline 元素或者数据。改变 display元素会影响周围的内容:

  • 将元素设为 block,会在该元素后换行。
  • 将元素设为 inline,会消除元素换行。
  • 将元素设为 none ,隐藏该元素内容。

对比 visibility 属性, display 值设为 none 时,会消除该元素占据的空间。

示例代码

div {display:none;}

下面的代码显示了 display 属性中block, inline, none的区别。

<html >

<head><title>不同display属性的代码示例</title></head>

<body>

<P ><SPAN id="oSpan" style="">This is a SPAN</SPAN> in a sentence.</P>

<P>

<input type=button value ="Inline" onclick ="oSpan.style.display=‘inline‘">

<input type=button value="Block" onclick ="oSpan.style.display=‘block‘">

<input type =button value="None" onclick="oSpan.style .display=‘none‘">

</P>

</body>

</html >

演示示例

参考:
http://www.dhucst.com/supesite/html/33/t-233.html
http://www.blabla.cn/html_ref/css_attrs/display.html

时间: 2024-08-29 03:00:07

(转)CSS的display属性的相关文章

CSS中display属性:block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

CSS的display属性

网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 1.把元素显示为内联元素和把元素显示为块级元素 <style type="text/css"> div{ display:inline; background:red;}/*区块元素将转换为内联元素*/ span{ display:block; background:green;}/*将内联元素转换为区块元素*/ </style> </head> <bo

css笔记-display属性

css笔记-display属性 display属性可取值 display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | co

CSS里display属性

css里display属性 在了解css的display属性之前,我想先介绍一下display属性所能改变的元素都有什么. 元素类型 元素类型可分为三种,分别是: 块状元素(例如div.dl.form.p等) 内联元素(例如a.b.br.img.input等) 可变元素 也可以分为:块状元素.内联元素.内联块元素 而在盒子模型可通过display属性改变默认的显示类型. display的属性 盒子模型可通过display属性来改变默认的显示类型 display的属性值 display的属性值有许

CSS中display属性

一开始觉得挺简单的,要么是块的,自己在这个桌上吃饭了了,别人就不能在这个桌上吃饭了,要么是内联的,自己在这个桌上吃饭,只要桌上有空座,别人还是可以坐到这儿的.等到了使用的时候发现并没有那么简单啊~  一.HTML元素分类 1.内联元素(inline) ①元素显示方式:“文本方式”,1个接着1个,不单独占一个桌吃饭. ②内嵌元素也必须是内联元素:如<a></a>,不能在里面嵌套<div></div>等块级元素. ③常见的标签有:<a>,<in

(十二)学习CSS之display属性

参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"."run-in"."table"."table-caption"."table-cell".&qu

如何理解CSS的display属性

在布局中, display 属性是最重要的CSS属性之一.其最常见的属性值有 block , inline , none , table 以及 inline-block .最近的新宠为 flex ,因为它是专门为布局创建的 display 属性.新出现的 grid (最近仍比较活跃)是另外一个指定的布局属性,其很快就会广泛被使用. 这篇文章比我预期的要长很多,你可以选择性进行阅读,但是我更希望你可以静下心来阅读整篇文章. 表内容 通过创建各种响应式设计,对于 display 以及 positio

css 浅析display属性

继续开始我的css之旅吧.今天我们来说什么啊.构思了两天还是没有什么思路,但是学习的步伐我们不能停止下来.还是按照之前的计划来讲讲display,在讲这个之前我们还是按照老规矩来扯扯蛋,步子不能够迈大了.废话不说了.问大家一个问题哈?块级元素和行级元素,你们知道吗? 什么是块级元素了?(div)是块级元素 什么是行级元素?(span)你能看出他们两则的区别吗? 先上图 可能有时候大家不是特别的注意他们直接的区别.下面我们来说一下他们具体的特性: 块级元素: 1:块级元素会独占一行,其宽度自动填满

css的display属性小实验

div与span是常用的盒子模型; 区别: div默认是垂直分布(独占一行)   span默认是水平分布(一行可以有多个) 通过float属性可以改变div容器的分布方式达到span容器的效果; 下面介绍下display这个属性; display的可选参数项: 默认值为 inline (内联即水平分布), 其它可能的值如下表所示: 下面是通过inline和block这两个属性来使div与span两个容器的默认方式互相转换 (即 不使用float属性 让div水平分布 并且 使span垂直分布);