处理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
的显示属性有用。