CSS中对静态网页的布局和定位已经较为成熟  现在运用CSS（层叠样式表）已经可以对静态网页的色彩搭配 、图片点击效果、列表外观进行设置

较使用时间较长的JS有了很大提升  而HTML5在图片和基本的点击事件以及动画上面也有了很多提升   使HTML5超前完成了JS可以完成的工作任务

以下列出CSS中静态网页布局需要使用到的一些元素

要使网页页面美观  我们需要对网页进行大小 、背景图片（或背景颜色）、以及网页内的文字和网页的所属小的版块位置的设置

1.网页基本属性的构成

border:延用HTML中对外框的设置  利用border可以对页面的框体进行设置 例如框体的线条样式 线条颜色  以及线条的像素大小

eg:<border  style="1px solid red"> 代码所示为一个1像素且为红色的实线框

当设置好一个具体的线框  我们需要的就是将内容填充到所设置的内容框体里

background-image或background-color就是将框内填充可见的元素

background-image意为背景图片  后接URL地址连接

background-color意为背景颜色  两者使用都较为简单  没有特别需要注意的事项

text-indent 使用此属性可以将文本的间距缩小   后接像素值  （改变的是浏览器默认的文字间隙）

使文字美观  还需要对文字的字体进行设置

需要加入的属性是font-family   将所要的字体的加在font-family后面  如果要导入外部字体  则需要加入属性font-face

设置文字与边框的距离需要设置文字的内外边框  padding 和margin

padding:

其基本属性

• padding-top
• padding-right
• padding-botton
• padding-left

margin:

其基本属性

• margin-top
• margin-right
• margin-bottom
• margin-left

使用margin来设置文字与边框的距离可以在很大程度上减少定位的难题

2、定位概述

需要理解的是CSS是在重叠的布局中发挥作用  所以把页面的所有元素视为框

而区分这些框的是块级元素和行内元素

而定位就是利用块级和行级元素的特性对页面进行排版、来达到使你能够自由移动你想要移动的区域  让元素出现在合适的位置

position:

包含的元素有：

static:

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative:

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute:

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed:

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

运用position元素需要注意元素是相对于视窗的哪一个点进行位移

float:

此元素可将元素脱离到原来的文档流

可用值有

float-left

float-right

可实现将文字围绕图片、创建水平菜单、段落字母浮动左侧的效果

clear:

清除

规定了哪一侧不允许元素漂浮

运用CSS对静态网页进行布局和效果设置