css中display属性

原创 2015年07月11日 09:34:56


一、css中display可以取的值

 

描述
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 属性的值。


其中常用的属性有:none、block、inline、inline-block、inherit

 


二、display:inline属性值

 

1、可以把它想象成一个杯子里的水,它是“流”,是没有大小和形状的,它的宽度取决于父容器的宽度。

2、针对inline的标签,你设置宽度和高度是无效的,通过监控可以知道,该元素实际的宽度和高度都是auto,并不是我们设定的值。

3、对inline元素设置float

4、对inline元素设置position:absolute/fixed




三、display:block属性值


1、对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义——除非你之前对块元素的display属性重新定义过。


2、比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,那么定义width、height等和长宽相关的css属性时会发现完全不生效。



 


四、display:inline-block属性值


让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。



 


五、display:none属性值


1、意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用。


2、CSS display:none完全取消元素的显示,visibility:hidden保持元素位置但视觉上的内容不可见。


3、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。



参考资料:  css display属性    http://www.studyofnet.com/news/936.html


细说CSS中的display属性

相信大部分
  • jl244981288
  • jl244981288
  • 2014年09月25日 21:15
  • 1966

CSS Display属性与盒模型

因为HTML流式文档的特性,页面布局往往是新手最为头疼的问题之一。 每个HTML元素都会渲染为一个Box,可分为inline Box和block Box。 根据display属性的不同,Box的呈现方...
  • yangjvn
  • yangjvn
  • 2015年08月11日 16:11
  • 1289

html+css:display:flex属性

Flex 布局教程:语法篇 原博客地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CS...
  • u011300580
  • u011300580
  • 2017年02月20日 12:19
  • 3737

一段代码弄清楚CSS属性display和visibility的差别,以及dom元素可见的条件

display:none,元素实际上就从页面中移走了,它后面的元素就会自动上移;visibility:hidden,则仅仅隐藏该元素,它占据的页面空间依然存在。综上:一个元素如果可见,必须满足3个条件...
  • aitangyong
  • aitangyong
  • 2015年01月29日 17:33
  • 2172

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

设置span的高度和宽度无效,span的margin和padding无效
  • aitangyong
  • aitangyong
  • 2015年02月28日 20:51
  • 3344

CSS3中不熟悉的属性2:display:box和display:flex的区别

display:box和display:flex有什么区别吗?没区别,仅是各阶段草案命名。 W3C 2009年第1次草案:display:box; W3C 2011年第2次草案:display:f...
  • juzipchy
  • juzipchy
  • 2017年06月06日 10:45
  • 849

CSS基础学习十四:盒子模型补充之display属性设置

我们在CSS
  • erlian1992
  • erlian1992
  • 2015年11月20日 18:45
  • 3182

CSS控制布局的属性display、 column属性创建多列

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 bloc...
  • zhangjq1991
  • zhangjq1991
  • 2017年02月06日 20:34
  • 499

display 属性 和 visibility 属性的区别?

可以使用 display 属性定义建立布局时元素生成的显示框类型。 1. 如果将 display 属性设置为 block,可以让行内元素(比如元素)表现得像块级元素一样; 2. 如果将 displ...
  • u012396955
  • u012396955
  • 2016年12月29日 13:39
  • 134

js 怎么获得写在css文件中的display属性

无标题文档 #abc{display:block;} function getStyle(obj,attr) { if(obj.currentStyle) { return...
  • zxf13598202302
  • zxf13598202302
  • 2016年07月14日 10:56
  • 1508
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css中display属性
举报原因:
原因补充:

(最多只允许输入30个字)