• 语法说明：
• 四个属性分别表示对象与其他对象的顶部、底部、 左边和右边的相对位置。 • Auto表示默认值 • 长度值包括数字和长度单位 • 百分比是一个相对值。
20.2.2 设置位置——top、bottom、right、left
• 实例代码
20.2.2 设置位置——top、bottom、right、left
20.3.5 设置层可见——visibility
• 语法说明
visible表示该层是可见的。 hidden表示该层被隐藏，是不可见的。 inherit表示子层或子元素会继承父层或父元 素的可见性，父级元素可见则子级元素也可 见。
20.3.5 设置层可见——visibility
• 实例代码
20.2.1 定位方式——position
• 基本语法
• position:static|absolute|relative
20.2.1 定位方式——position
• 语法说明
static表示为静态定位，是默认设置。 absolute表示绝对定位，与下一节的位置属性 top、bottom、right、left等结合使用可实现对元 素的绝对定位。 relative表示相对定位，对象不可层叠，但也要 依据top、bottom、right、left等属性来设置元素 的具体偏移位置。
• 接上页
20.3.1 设置层空间——z-index
• 网页效果
20.3.1 设置层空间——z-index
• 效果说明
• 在“图20-9设置层空间”中，第三层的内 容覆盖在第二层和第一层内容上面，第二 层的内容又覆盖在第一层内容上面，所以 从视觉角度会有立体感。
20.3.2 设置层裁切——clip
20.3.4 设置层溢出——overflow
• 基本语法
• overflow: visible/hidden/scroll/auto
20.3.4 设置层溢出——overflow
• 语法说明
visible：扩大层的容纳范围，将所有内容都显示 出来。 hidden：隐藏超出范围的内容（超出范围的内 容将被裁切掉）。 scroll：表示一直显示滚动条。 auto：当层内容超出了层的容纳范围时，则显 示滚动条。
边，即居左对齐。
20.2.4 清除——clear
• 基本语法
• clear:left|right|both|none
20.2.4 清除——clear
• 语法说明
left表示不允许在某元素的左边有浮动元素。 right表示不允许在某元素的右边有浮动元素。 both表示在某元素左右两边都不允许有浮动元素。 none表示在某元素左右两边都允许有浮动元素。
20.2.4 清除——clear
• 实例代码
20.2.4 清除——clear
• 接上页
20.2.4 清除——clear
• 网页效果
20.2.4 清除——clear
• 效果说明
• 在图20-8的效果图中，图像20-2-4本身应用了浮 动属性是浮动在其他内容的右边，但是因为这 段文字应用了d1所定义的样式，不允许在该内 容右边有浮动元素，所以图像20-2-4浮动到了 应用d1所定义样式的内容上面，且还是居右对 齐。
20.3.4 设置层溢出——overflow
• 实例代码
20.3.4 设置层溢出——overflow
• 接上页
20.3.4 设置层溢出——overflow
• 网页效果
20.3.5 设置层可见——visibility
• 基本语法
• visibility:visible|hidden|inherit
• 接上页
20.2.2 设置位置——top、bottom、right、left
• 网页效果
20.2.2 设置位置——top、bottom、right、left
• 效果说明
• 因为类样式d1和d2所定义的位置距网页上 端的距离都为70像素，而距网页左边的距 离一个为20像素，一个为200像素，所以在
示该边不裁切。
只有在position的值设定为绝对定位时，才可起作
用。
20.3.2 设置层裁切——clip
• 实例代码
20.3.2 设置层裁切——clip
• 接上页
20.3.2 设置层裁切——clip
• 网页效果
20.3.2 设置层裁切——clip
• 效果说明
• 层裁切的矩形区域坐标值说明，上坐标10像 素是指矩形的上边距网页上边的距离；右坐 标6厘米是指矩形的右边距网页左边的距离为 6厘米；下坐标80像素是指矩形的下边距网页 的上边的距离；左坐标12像素是指矩形的左 边距网页左边的距离为12像素。
20.3.3 设置层大小—度来—width、height
• 基本语法
• width:auto|长度 • height:auto|长度
20.3.3 设置层大小—度来—width、height
• 语法说明
• width表示的是宽度，而height表示的 是高度。 • auto表示自动设置长度。 • 长度包括长度值和单位。 • 长度也可使用相对值中的百分比。
20.1.3 调整列表位置——list-style-position
• 基本语法
• list-style-position:outside|inside
20.1.3 调整列表位置——list-style-position
• 语法说明
outside表示列表符号不向内缩进，是列表的 默认属性值。 inside表示列表符号向内缩进。
20.3.5 设置层可见——visibility
• 接上页
20.3.5 设置层可见——visibility
• 接上页
20.3.5 设置层可见——visibility
• 网页效果
20.3.5 设置层可见——visibility
• 效果说明
• 图20-14的效果是在图20-13的代码基础上将d1 样式中的可见性visibility属性由hidden修改为 visible。所以图像20-3-5-1.jpg在图20-13中被隐
• z-index:auto|数字
20.3.1 设置层空间——z-index
• 语法说明
auto表示子层会按照父层的属性显示。 数z-index属性值为 1的层位于最下层。
20.3.1 设置层空间——z-index
• 实例代码
20.3.1 设置层空间——z-index
效果来看，差距是很大的，这主要是因为两个定
位方式所参照的标准不一样，绝对定位是以网页 的左上角为参照点，而相对定位是以其相近的元 素为参照点。
20.2.2 设置位置——top、bottom、right、left
• 基本语法
top:auto|长度值|百分比 bottom: auto|长度值|百分比 left: auto|长度值|百分比 right: auto|长度值|百分比
两个层引用这两个样式后，层内容分别放
到了图像的两边。
20.2.3 浮动——float
• 基本语法
• float:left|right|none
20.2.3 浮动——float
• 语法说明
left表示浮动元素在左边，是居左对齐 的。 right表示浮动元素在右边，是居右对 齐的。 none表示不浮动，是默认值。
• 实例代码
20.1.1 设计列表样式——list-style-type
• 接上页
20.1.1 设计列表样式——list-style-type
• 网页效果
20.1.2 添加列表图像——list-style-image
• 基本语法
• list-style-image:none|URL
20.1.2 添加列表图像——list-style-image
• 基本语法
• clip:rect{<上>|<右>|<下>|<左>} |auto
20.3.2 设置层裁切——clip
• 语法说明
auto表示不裁切。
rect的4个坐标值表示所裁切矩形的4个顶点位置， 其中以网页左上角为坐标（0，0），而上、右、 下、左这4个坐标值则是以左上角为参照点计算 的。而且任意一个坐标值都可由auto来代替，表
• 效果说明 • 从图20-3的网页效果可以看出，第一段文字的列
表符号和文字是对齐排列的，也就是说列表符
号是向内缩进的。而第二段文字的列表符号是
在文字外排列的，也就是说列表符号是没有向 内缩进的。
20.2 定位
20.2.1 定位方式——position 20.2.2 设置位置——top、bottom、 right、left 20.2.3 浮动——float 20.2.4 清除——clear
20.3 CSS层
20.3.1 设置层空间——z-index
20.3.2 设置层裁切——clip
20.3.3 设置层大小—度来—width、height
20.3.4 设置层溢出——overflow 20.3.5 设置层可见——visibility
20.3.1 设置层空间——z-index
• 基本语法
藏，而在图20-14中是可见的。
20.4 鼠标指针——cursor
• 基本语法
• cursor:auto|关键字|URL（图像地址）
20.4 鼠标指针——cursor
• 语法说明
auto表示根据对象元素的内容自动选择鼠
标指针形状。
20.2.3 浮动——float
• 实例代码
20.2.3 浮动——float
• 接上页
20.2.3 浮动——float