日期:2014-05-17  浏览次数:20578 次

DIV+CSS碎碎念
近来写了一些网页,用了之前用的比较少的DIV来进行布局,就翻了翻基本讲DIV+CSS的书,碎碎念一下.

1、为了实现内容与表现层的分离,div中只能有id或class属性,表现都通过css来控制。

2、html中的元素可以分为两大类:block块状对象:默认一块占一行。in-line行间对象:允许在同一行中显示。

3、float浮动框:向左或向右浮动,直到碰到父box或其他包含框的box大的边缘。特别注意的是若剩余空间不足,则将会串到下一行中。

4、position定位:指定块的位置。
   relative:相对于正常块的位置。注意是该块的正常位置的偏移。
   absolute:绝对定位。
   fixed:悬浮。位置不会随着滑动块的移动而移动。
   inherit:继承。

5、z-index:当有多个元素重合时,此数值决定了哪个在上面,哪个在下面。

6、盒子模型:content\border\padding\margin.height和width是指content的。

7、居中的两种方式:width:100px;margin 0 auto  和 position:relative;left:50%。

8、直接使用height:100%不会起作用,原因是因为浏览器不会自动给body赋高度值。

9、background-attrachment可以控制背景图片随着滚动条变化的位置。

10、font-family是指定多种字体,浏览器会根据本地的字体库进行一次匹配,匹配上哪个就使用哪个。

11、serif和sans-serif是两种字体风格,前者字体在开始和结尾处都有一些显示的风格,后者则开始和结束都一样的,所以在文章标题处主要使用sans-serif,在文章正文中则主要使用serif字体。

12、text-align用来表示段落的水平对齐。可以设置为左对齐、右对齐、水平居中以及两边对齐。

13、段落对齐只对行内元素起作用,如span、p。使用vertical-align来表示。

14、行间距是通过line-height来控制的,在静态页面中一般使用绝对值,在用户可以自定义的页面中(如论坛),则使用相对大小。

15、letter-space来控制字间距。

16、css还可以控制Flash中文字的显示,这个可以参照Flash制作的相关知识。

17、使用text-overflow可以让溢出的文字使用省略号来代替。---这个作用不错。

18、可以为li等设置background-image来设置条目的背景图片。

19、css滤镜只在IE浏览器中有效。---有待验证

20、spry构件。----有时间看看

21、xml中也可以引入css来控制,实际上是将xml中的标签当做html标签来使用。

22、xml不是html的替代品,而仅仅是html的数据组成部分,原因我觉得因为xml可以随便定制内容。