处理HTML元素最关键的一个窍门
没有任何特别的
就是理解他们是如何工作的
大部分页面都可以使用一点点的标签组合起来
你可以为每一个你选定的标签样式化
浏览器默认的可视化样式元素由变化的字体样式
边界
补白和
和重要的
显示类型
最基本的显示类型是内联inline
块block和清除none
他们分别可以用inline
block和none的值赋予display属性来操作
inline就如本身语义所明示的
显示随着行流动的元素
锚和强调元素都是传统的内联元素
block使元素前后都有断行
标题和段落元素都是传统的块元素的例子
none
嗯
不显示这个元素
听起来毫无用处
但于易用性考虑(请看亲和连接)
改变样式表
或者高级的翻转效果都有很好的用途
比如这个站点的默认原始版本
通过操纵一些传统的内联和块元素来适应设计
h
{
display: inline;
font
size:
em;
}
#header p {
display: inline;
font
size:
em;
padding
left:
em;
}
这使得“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的显示属性有用