Home >Web Front-end >HTML Tutorial >css display属性值_html/css_WEB-ITnose

css display属性值_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:07:281404browse

一、css中display可以取的值

 


描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。 )。 )。 )。 )。 )。)
table-row-group 此元素会作为一个或多个行的分组来显示(类似
table-header-group 此元素会作为一个或多个行的分组来显示(类似
table-footer-group 此元素会作为一个或多个行的分组来显示(类似
table-row 此元素会作为一个表格行显示(类似
table-column-group 此元素会作为一个或多个列的分组来显示(类似
table-column 此元素会作为一个单元格列显示(类似
table-cell 此元素会作为一个表格单元格显示(类似
table-caption 此元素会作为一个表格标题显示(类似
inherit 规定应该从父元素继承 display 属性的值。


二、display:inline属性值

 

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

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



三、display:block属性值

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

2、比较常用于这两个标签??因为这两个标签非块元素,如果不用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来使元素显示后才能正确获得这些值。

4、使用display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果。



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


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn