设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > CSS > 正文

css中display属性是什么及其各个值的作用和用法

时间:2015-02-23 12:45:02 来源:村姑网 作者:喜欢安静 阅读:92
导读:当你查看别人写的css代码的时候,经常会看到display:block、none、inline、table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底怎么使用呢?虽然好奇害死猫,但是对于像我这样对网页技术非常感兴趣的人来说,估计都...

    当你查看别人写的css代码的时候,经常会看到display:block、none、inline、table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底怎么使用呢?虽然好奇害死猫,但是对于像我这样对网页技术非常感兴趣的人来说,估计都会想方设法把他给搞清楚,搞明白的,下面就和我一起来探索display属性的奥秘吧~~~!!

首先,display属性是什么?

    本人英文不行,小学水平,只好拿着display这个单词去请教谷歌翻译大哥了,谷歌大哥果然没让我失望,我个人大概理解为:display属性很有可能是控制显示的。然后又到w3school查看了一下它给出的定义“display 属性规定元素应该生成的框的类型。”也就是说设置了display属性的元素会根据display的取值在浏览器中进行不同的显示。

那么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 属性的值。

默认情况下,所有元素的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

关于display元素的用法,我们可以根据他每个值的作用和我们的实际需求来设置相对应的值也就是:“display”+“:”+“你需要的值”。好了,就先说到这里吧,这个只是个人查阅相关资料后的个人见解,如果有哪里说的不对的地方,欢迎访问村姑网留言指正,谢谢~~!!

(注:欢迎转载,转载请注明来源于“村姑网-www.cunguer.com”,谢谢~!)

《css中display属性是什么及其各个值的作用和用法》地址:http://www.cunguer.com/article/10.html,本文来自村姑网,您身边的IT专家 www.cunguer.com,转载请注明出处,您的支持是我们创作的源泉~!