日期:2013-10-21 浏览次数:21418 次
操作HTML元素的诀窍在于明白它们任务的方法在于没有特定的方式。一些由标签组成的大部分页面可以设定任何款式。浏览器默认的款式里的大部分html元素由字体款式、margin,padding组成,本质上是显示类型。
display
属性基本上分为inline
,block
,和none
。
inline
就像它的本意——显示为inline的元素为行。strong
,anchor
锚和em
强调元素默认是行。
block
元素前后换行。标题和段落元素是块元素。
none
,意思不显示元素,在可用性上可以实现漂亮的效果,交替款式或hover效果的高级运用。
设定表现可以更好运用在网页制造上。
h1 {display: inline;font-size: 2em;}#header p {display: inline;font-size: 0.9em;padding-left: 2em;}
设定标题h1为行元素,可以和后面的元素在同一行。
#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
,所以只要在覆盖原来属性时使用。