Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  正文 新手来简单学习CSS的display属性

新手来简单学习CSS的display属性

发布时间:2019-11-10   编辑:www.jquerycn.cn
jquery中文网为您提供新手来简单学习CSS的display属性等资源,欢迎您收藏本站,我们将为您提供最新的新手来简单学习CSS的display属性资源

  操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成,本质上是显示类型。
  display属性基本上分为inline,block,和none。
  inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
  block元素前后换行。标题和段落元素是块元素。
  none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用。
  设定表现可以更好运用在网页制作上。

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy1897')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy1897>h1 {
      display: inline;
      font-size: 2em;
}
#header p {
      display: inline;
      font-size: 0.9em;
      padding-left: 2em;
}

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

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy2809')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy2809>#navigation, #seeAlso, #comments, #standards {
      display: none;
}

  上面的代码可以使用在打印样式里,比如在导航使用,可以在打印时不显示导航这些无关紧要的东西。
  display:none和visibility:hidden;的不同在于display:none完全取消元素的显示,visibility:hidden保持元素位置但视觉上的内容不可见。例如,如果3的第二段设置为display:none,第一段将仅跟在第三段,如果设置为visibility:hidden,段落间就会空出。
  表格
  明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现,你可以使用table-row模拟table-cell模拟td。
  display属性更进一步,可以通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用columns构建表格,比在html中使用行构建快速。
  最后,inline-table设定表格前后不换行。
  使用CSS表格会严重损害可用性。HTML应该用来传递语意,所以如果你有表格数据,那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据如果没有CSS数据将不可读。
  其他表现形式
  list-item列表项目,就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
  run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
  compat根据上下阿文决定表现形式,同样IE和Mozilla都不支持。
  maker仅仅使用在:before和:after伪元素,设定content属性的表现。content属性默认表现就是maker,所以它只有在覆盖原来属性时才有用。
  content属性,它的默认就是maker,所以只有在覆盖原来属性时使用。

您可能感兴趣的文章:
新手来简单学习CSS的display属性
使用jquery修改display属性
对css滑动门技术的一些总结和归纳
Flex网页布局基础入门及实例教程
Jquery 基础学习笔记
js控件隐藏与display属性学习
jQuery基础教程笔记适合js新手第1/2页
css学习的一些心得
使用jquery删除css属性或样式
jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)

[关闭]