css高级定位指导规则.docx

5定位父对象顶部

DOCTYPEhtml>

--

描述：

检索或设置对象与其最近一个定位的父对象顶部相关的位置。

必须定义position属性值为absolute、relative或fixed，此取值方可生效。

语法：

top:

||auto

默认值：

auto

取值：

auto：

无特殊定位，根据HTML定位规则在文档流中分配

：

用长度值来定义距离顶部的偏移量。

可以为负值。

：

用百分比来定义距离顶部的偏移量。

可以为负值。

说明：

-->

我将出现在浏览器顶部

6检索对象层叠效果

DOCTYPEhtml>

--

描述：

检索或设置对象的层叠顺序。

并级的对象，此属性参数值越大，则被层叠在最上面。

如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。

必须定义position属性值为absolute、relative或fixed，此取值方可生效。

对应的脚本特性为zIndex。

语法：

z-index:

auto|

默认值：

auto

取值：

auto：

遵从其父对象的定位

：

用整数值来定义堆叠级别。

可以为负值。

说明：

-->

z-index:

1

z-index:

2

z-index:

3

7不允许浮动的边

DOCTYPEhtml>

--

描述：

该属性的值指出了不允许有浮动对象的边。

语法：

clear：

none|left|right|both

默认值：

none

取值：

none：

允许两边都可以有浮动对象

both：

不允许有浮动对象

left：

不允许左边有浮动对象

right：

不允许右边有浮动对象

-->

我将出现在屏幕右方

注意我出现的位置

8检索可视区域

DOCTYPEhtml>

--

描述：

检索或设置对象的可视区域。

区域外的部分是透明的。

必须将position的值设为absolute，此属性方可使用。

语法：

clip：

auto|rect（|auto|auto|auto|auto）

默认值：

auto

取值：

auto：

对象无剪切

rect（|auto|auto|auto|auto）：

依据上-右-下-左的顺序提供自对象左上角为（0,0）坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

示例：

clip:

rect（auto50px20pxauto）;

说明：

上边不剪切，右边从第50个像素开始剪切直至最右边，下边从第20个像素开始剪切直至最底部，左边不剪切

IE7及以下浏览器只支持rect（）的方式，其它浏览器还支持rect（,,,）加逗号的方式。

-->

看看被剪切后的效果

9检索对象是否会显示

DOCTYPEhtml>

--

描述：

设置或检索对象是否及如何显示。

IE7及以下浏览器不支持table相关的参数值，如：

table,inline-table,table-caption,table-cell,table-row,table-row-group,table-column,table-column-group,table-footer-group,table-header-group

写本文档时尚无浏览器支持ruby相关的参数值，如：

ruby,ruby-base,ruby-text,ruby-base-group,ruby-text-group

语法：

display：

none|inline|block|list-item|inline-block|table|inline-table|table-caption|table-cell|table-row|table-row-group|table-column|table-column-group|table-footer-group|table-header-group|compact|run-in|ruby|ruby-base|ruby-text|ruby-base-group|ruby-text-group|box|inline-box

取值：

none：

隐藏对象。

与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：

指定对象为内联元素。

block：

指定对象为块元素。

list-item：

指定对象为列表项目。

inline-block：

指定对象为内联块元素。

（CSS2）

table：

指定对象作为块元素级的表格。

类同于html标签

inline-table：

指定对象作为内联元素级的表格。

类同于html标签

table-caption：

指定对象作为表格标题。

类同于html标签

table-row-group：

指定对象作为表格行组。

类同于html标签

table-column：

指定对象作为表格列。

类同于html标签

table-column-group：

指定对象作为表格列组显示。

类同于html标签

table-header-group：

指定对象作为表格标题组。

类同于html标签

table-footer-group：

指定对象作为表格脚注组。

类同于html标签

compact：

分配对象为块对象或基于内容之上的内联对象（CSS3）

run-in：

分配对象为块对象或基于内容之上的内联对象（CSS3）

ruby：

将对象作为表格脚注组显示（CSS3）

ruby-base：

将对象作为表格脚注组显示（CSS3）

ruby-text：

将对象作为表格脚注组显示（CSS3）

ruby-base-group：

将对象作为表格

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

css 高级 定位 指导 规则

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。