技巧：如何定义CSS元素的显示属性

日期：2007年7月16日作者：查看:[大字体中字体小字体]

处理HTML元素最关键的一个窍门，没有任何特别的，就是理解他们是如何工作的。大部分页面都可以使用一点点的标签组合起来，你可以为每一个你选定的标签样式化。浏览器默认的可视化样式元素由变化的字体样式、边界、补白和，和重要的，显示类型。

最基本的显示类型是内联inline、块block和清除none，他们分别可以用inline、block和none的值赋予display属性来操作。

inline就如本身语义所明示的，显示随着行流动的元素。锚和强调元素都是传统的内联元素。

block使元素前后都有断行。标题和段落元素都是传统的块元素的例子。

none，嗯，不显示这个元素，听起来毫无用处，但于易用性考虑（请看亲和连接），改变样式表，或者高级的翻转效果都有很好的用途。

比如这个站点的默认原始版本，通过操纵一些传统的内联和块元素来适应设计。

h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

这使得“htmldog.com”的标题和标签行可以并排，而不是一上一下，维护最优的易用性。

#navigation, #seeAlso, #comments, #standards {
display: none;
}

上述代码使用在打印样式中，用于“关闭”这些元素，比如，对于一个单一的页面导航通常是不必须的。

注意

display: none和visibility: hidden不同之处在于display: none使元素完全是个死球，然而visibility:

hidden虽不出现在内容中但保留着这个元素的流位置。比如，如果三段中的第二端设为display: none，第一段会直接到达第三段，而设为visibility: hidden的话，这个段落会有一个间隔。

表格

也许理解表格相关的显示属性值的最好方法是关心HTML表格。table是初始化的显示，你可以用tr和td分别摹拟table-row和table-cell值。

display属性走得更远，提供table-column、table-row-group、table-column-group、table-header-group、table-footer-group和table-caption的值，都是自描述的。这些值显而易见的好处是，你可以用列来构造表格，代替有偏见的row。

最后，inline-table设置前后不断行的表格。

注意

对CSS表格失去控制的话，可能严重的损害你网页的亲和力（易用性）。HTML应该用来传达内容的，所以你有表格式数据的话，你应该用HTML表格来安排它们。使用CSS表格仅仅能给数据调调味，如果没有CSS的话完全不可读。十分不好。别走Michael Jackson的路。

其他显示类型

list-item也是自描述的，一般以列表的形式显示，使用在除li的HTML元素上。为了显示正确，使用这个显示类型的应该嵌套在ul或者ol元素内。

run-in使元素内联或块显示，取决于其父元素的的显示属性。在IE和基于Mozilla的浏览器中都不能工作。

campact也使元素内联或者块显示，同样取决于上下文。它也不能很好工作。

marker仅仅是与:before和:after伪元素一起来定义content属性的值。content属性的自动值已经是marker，所以这只对覆盖掉前面的content的显示属性有用。
[1] [2] 下一页
技巧：如何定义CSS元素的显示属性相关文章：
·巧用名称框选择过宽的Excel单元格区域
·XML Schema定义元素的基本知识
·基本的页面设计元素布局比例
·Excel相邻单元格快速填入相同日期的几种方法
·为动态生成html元素增加事件处理
·巧用宏随意提取Excel单元格的批注内容
·在Excel工作表单元格中引用当前工作表名称
·减少Google AdSense展示单元并不能提高收入
·Adsense新功能：轻松管理广告单元
·流行元素黛贝妮07/08女装设计赏
技巧：如何定义CSS元素的显示属性相关软件
·《毛利元就三箭之誓》试玩
·五星上将系列《装甲元帅》策略试玩
·FC《100万美元-幻之帝王篇》模拟器
·《册府元龟》一千卷
·《纪元1071》繁体中文版模拟方式免CD补丁
·《魔兽世界》之第五元素剧情视频
·《共和国十大元帅合集》
·故宫藏品精粹——法书（元）
·美丽元素－多个美容小技巧（翻页）
·宋元学案

上一篇:PHP技巧：详解phplib模板使用过程及运行原理

下一篇:成为PHP编程高手应该遵循的三个准则

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

技巧：如何定义CSS元素的显示属性

精品推荐

热点TOP10

特别推荐