博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
(转)CSS的display属性
阅读量:6452 次
发布时间:2019-06-23

本文共 1870 字,大约阅读时间需要 6 分钟。

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

display属性中:

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

重点:

该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" οnclick="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

转载于:https://www.cnblogs.com/lidongloveyiyi/p/3957653.html

你可能感兴趣的文章
如何在linux系统下配置共享文件夹,如何在windows和Linux系统之间共享文件夹.doc
查看>>
thinkpad装linux无线网卡驱动,ThinkPad E530 Fedora 20 下无线网卡驱动的安装
查看>>
linux操作系统加固软件,系统安全:教你Linux操作系统的安全加固
查看>>
linux中yum源安装dhcp,24.Linux系统下动态网络源部署方法(dhcpd)
查看>>
linux屏幕复制显示出来的,linux – stdout到gnu屏幕复制缓冲区
查看>>
一起学Shell(十)之可称植性议题与扩展
查看>>
部署Ganglia监控Hadoop&Hbase
查看>>
gitlab的用户使用手册
查看>>
论Optimizer的工作模式ALL_ROWS&FIRST_ROWS
查看>>
生产环境高并发MySQL SQL语句优化案例
查看>>
Lync 小技巧-24-PDF 加密文件-转-Word-操作手册
查看>>
ASP.NET性能优化之分布式Session
查看>>
TaffyDB Introduction
查看>>
转载:《TypeScript 中文入门教程》 16、Symbols
查看>>
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4
查看>>
C#技术------垃圾回收机制(GC)
查看>>
漫谈并发编程(三):共享受限资源
查看>>
【转】github如何删除一个仓库
查看>>
Linux系统编程——进程调度浅析
查看>>
大数据Lambda架构
查看>>