CSS样式中display属性用法指导

开发 前端
操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式,这里向大家描述一下CSS display属性的用法,CSS display属性基本上分为inline,block,和none。

本文和大家重点讨论一下CSS display属性的使用,CSS display属性值基本上分为inline,block,和none;block元素前后换行,标题和段落元素是块元素;而none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用。

CSS display属性

操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成,本质上是显示类型。

CSS display属性基本上有inline,block,和none三个属性值。

  inline就像它的本意??显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。

  block元素前后换行。标题和段落元素是块元素。

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

  设定表现可以更好运用在网页制作上。

  1. h1 {  
  2.     display: inline;  
  3.     font-size: 2em;  
  4. }  
  5. #header p {  
  6.     display: inline;  
  7.     font-size: 0.9em;  
  8.     padding-left: 2em;  
  9. }  

  设定标题h1为行元素,可以和后面的元素在同一行。

  1. #navigation, #seeAlso, #comments, #standards {  
  2.     display: none;  
  3. }  
  4.  

  上面的代码可以使用在打印样式里,比如在导航使用,可以在打印时不显示导航这些无关紧要的东西。

  CSS display:none和visibility:hidden;的不同在于CSS display:none完全取消元素的显示,visibility:hidden保持元素位置但视觉上的内容不可见。例如,如果3的第二段设置为display:none,第一段将仅跟在第三段,如果设置为visibility:hidden,段落间就会空出。

原文链接:http://www.soidc.net/articles/1213781627945/20070521/1214037411248_1.html

【编辑推荐】

  1. 使用CSS display:none时注意事项
  2. CSS display:inline和float:left两者区别
  3. 深入探究DIV CSS布局中position属性用法
  4. CSS属性display:inline-block使用揭秘
  5. CSS display:block显示布局错乱解决方案
责任编辑:佚名 来源: soidc.net
相关推荐

2010-08-25 14:26:09

CSSdisplay

2010-09-16 10:29:47

DisplayVisibilityCSS

2010-08-25 10:21:49

CSSmargin

2010-09-15 16:57:18

CSS display

2010-09-16 10:04:50

CSSdisplay:tab

2010-09-14 13:05:10

VisibilityDisplayCSS DIV

2010-08-17 10:00:17

DIV样式

2010-09-06 13:04:16

CSS浮动float

2010-09-02 12:58:21

display:inlCSS

2010-08-25 15:15:52

CSSclip

2010-09-10 15:16:51

CSSdisplay

2010-09-08 12:37:27

displayCSS

2010-09-02 09:09:38

display:inlCSS

2010-09-07 16:21:37

CSSDisplayVisibility

2010-09-03 10:18:06

CSSdisplay:inl

2010-09-14 13:42:22

CSSdisplay属性

2010-09-14 15:04:42

list-styleCSS

2010-08-16 10:18:53

DivCSS

2010-09-07 16:46:59

CSSexpression

2010-08-24 13:14:36

CSSmargin
点赞
收藏

51CTO技术栈公众号