expression web 视频教程第12-15讲：css 定位 布局 列表 表格

12讲：【定位】

语法：
position : static | absolute | fixed | relative
取值：
static :　 默认值。无特殊定位，对象遵循HTML定位规则
absolute :　 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed :　 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative :　 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
说明：
检索对象的定位方式。
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
内容的尺寸会根据布局确定对象的尺寸。例如，设置一个 div 对象的 height 和 position 属性，则 div 对象的内容将决定它的宽度( width )。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 position 。
示例：
div { position:relative; top:-3px }

=================

语法：
z-index : auto | number
取值：
auto :　 默认值。遵从其父对象的定位
number :　 无单位的整数值。可为负数
说明：
检索或设置对象的层叠顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。
这个属性不会作用于窗口控件，如 select 对象。
在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 zIndex 。
示例：
div { position:absolute; z-index:3; width:6px; }

width  height  right bottom top left

层的长     宽     左 上 下  右

13讲 布局

语法：
visibility : inherit | visible | collapse | hidden
取值：

inherit :　 默认值。继承父对象的可见性
visible :　 对象可视
collapse :　 未支持。主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于 hidden
hidden :　 对象隐藏

说明：
设置或检索是否显示对象。
与 display 属性不同，此属性为隐藏的对象保留其占据的物理空间。
在IE5.0+中，当父对象不可视时子对象是能被设为可视的。而在此前的浏览器版本中，如果希望对象为可视，其父对象也必须是可视的。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 visibility 。
示例：
img { visibility: inherit; float: right; }
语法：
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
取值：

block :　 CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
none :　 CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline :　 CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block :　 IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
compact :　 CSS2 未支持。分配对象为块对象或基于内容之上的内联对象
marker :　 CSS2 未支持。指定内容在容器对象之前或之后。要使用此参数，对象必须和 :after 及 :before 伪元素一起使用
inline-table :　 CSS2 未支持。将表格显示为无前后换行的内联对象或内联容器
list-item :　 CSS2 将块对象指定为列表项目。并可以添加可选项目标志
run-in :　 CSS2 未支持。分配对象为块对象或基于内容之上的内联对象
table :　 CSS2 未支持。将对象作为块元素级的表格显示
table-caption :　 CSS2 未支持。将对象作为表格标题显示
table-cell :　 CSS2 未支持。将对象作为表格单元格显示
table-column :　 CSS2 未支持。将对象作为表格列显示
table-column-group :　 CSS2 未支持。将对象作为表格列组显示
table-header-group :　 CSS2 将对象作为表格标题组显示
table-footer-group :　 CSS2 将对象作为表格脚注组显示
table-row :　 CSS2 未支持。将对象作为表格行显示
table-row-group :　 CSS2 未支持。将对象作为表格行组显示

说明：
设置或检索对象是否及如何显示。
对于下列元素来说，此属性的默认值为 block ：
ADDRESS QUOTE BODY XMP CENTER COL COLGROUP DD DIR DIV DL DT FIELDSET FORM Hn HR IFRAME LEGEND LISTING MARQUEE MENU OL P PLAINTEXT PRE TABLE TD TH TR UL

对于下列元素来说，此属性的默认值为 none ：
BR FRAME nextID TBODY TFOOT THEAD

对于下列元素来说，此属性的默认值为 list-item ：
LI

其他元素默认值都是 inline 。
在IE6.0以前的版本中， LI 对象的默认值为 block 。
在IE4.0中， block ， inline ， list-item 值不被支持。但是对象仍然会被呈递。
在IE5.0中开始支持 block 和 inline 。
在IE5.5中开始支持 inline-block 。你可以使用 inline-block 使对象获得布局而无需指定确切的高( height )和宽( width )。
在IE6.0中开始支持 list-item 。
所有可视的文档对象都是块对象(block element)或者内联对象(inline element)。例如， div 是一个块对象。 span 是一个内联对象。块对象的特征是从新的一行开始且能包含其他块对象和内联对象。内联对象被呈递时不会从新行开始，能够包含其他内联对象和数据。
改变此属性值对其周围内容布局的影响可能是：
  • 在属性值设为 block 的对象后面添加新行。
  • 从属性值设为 inline 的对象中删除一行。
  • 隐藏属性值设为 none 的对象并释放其在文档中的物理空间。
table-header-group 和 table-footer-group 属性值可用来指定当表格( table )跨越了多页时， tHead 和 tFoot 对象的内容在每一页都显示。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为display。
示例：
img { disply: block; float: right; }
语法：
float : none | left | right
取值：
none :　 默认值。对象不飘浮
left :　 文本流向对象的右边
right :　 文本流向对象的左边
说明：
该属性的值指出了对象是否及如何浮动。请参阅 clear 属性。
当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。
跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。
在IE5+中， div 和 span 对象假如没有指定宽度会被分配默认的宽度，而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 styleFloat 。
示例：
div { clear : left }
img { float: right }
语法：
clear : none | left | right | both
取值：

none :　 默认值。允许两边都可以有浮动对象
left :　 不允许左边有浮动对象
right :　 不允许右边有浮动对象
both :　 不允许有浮动对象

说明：
该属性的值指出了不允许有浮动对象的边。请参阅 float 属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 clear 。
示例：
div { clear : left }
img { float: right }
语法：
cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )
取值：

auto :　 默认值。浏览器根据当前情况自动确定鼠标光标类型。
all-scroll :　 IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize :　 IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair :　 简单的十字线光标。
default :　 客户端平台的默认光标。通常是一个箭头。
hand :　 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
move :　 十字箭头光标。用于标示对象可被移动。
help :　 带有问号标记的箭头。用于标示有帮助信息存在。
no-drop :　 IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed :　 IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
pointer :　 IE6.0 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
progress :　 IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize :　 IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text :　 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
vertical-text :　 IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
wait :　 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize :　 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url ) :　 IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

说明：
设置或检索在对象上移动的鼠标指针采用的光标形状。
此属性的值可以是多个，其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示，则第二个值将被尝试使用。依此类推。假如全部值都不可用的话，则此属性不会发生作用。光标不会被改变。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 cursor 。
示例：
p { cursor: text; }
a { cursor: pointer; }
body { cursor: url("mycursor.gif"), url("images/cursors/footcursor.jpg"), default; }

语法：
overflow : visible | auto | hidden | scroll
取值：
visible :　 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto :　 在必需时对象内容才会被裁切或显示滚动条
hidden :　 不显示超过对象尺寸的内容
scroll :　 总是显示滚动条
说明：
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。
对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
自IE6开始，当你使用 !DOCTYPE 声明指定了 standards-compliant 模式，此属性可以应用于 html 对象。
对应的脚本特性为 overflow 。
示例：
body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }
[top  right bottom left ]
语法：
right : auto | length
取值：
auto :　 默认值。无特殊定位，根据HTML定位规则在文档流中分配
length :　 由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。请参阅 长度单位
说明：
检索或设置对象与其最近一个具有定位设置的父对象右边相关的位置。
此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 right 。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posRight ， pixelRight 等运行时特性。
示例：
div { position: absolute; right: 1in; }
div { position:relative; top:-3px; right:6px; }
语法：
left : auto | length
取值：
auto :　 默认值。无特殊定位，根据HTML定位规则在文档流中分配
length :　 由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。请参阅 长度单位
说明：
检索或设置对象与其最近一个具有定位设置的父对象左边相关的位置。
此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 left 。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posLeft ， pixelLeft 等运行时特性，以及对象的offsetLeft 等特性。
示例：
div { position: absolute; left: 1in; }
div { position:relative; top:-3px; left:6px; }
语法：
bottom : auto | length
取值：
auto :　 默认值。无特殊定位，根据HTML定位规则在文档流中分配
length :　 由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。请参阅 长度单位
说明：
检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置。
此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 bottom 。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posBottom ， pixelBottom 等运行时特性。
语法：
top : auto | length
取值：
auto :　 默认值。无特殊定位，根据HTML定位规则在文档流中分配
length :　 由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。请参阅 长度单位
说明：
检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置。
此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 top 。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posTop ， pixelTop 等运行时特性，以及对象的offsetTop 等特性。
示例：
div { position: absolute; top: 1in; }
div { position:relative; top:-3px; left:6px; }
 
14讲 列表
语法：
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
取值：
disc :　 CSS1 默认值。实心圆
circle :　 CSS1 空心圆
square :　 CSS1 实心方块
decimal :　 CSS1 阿拉伯数字
lower-roman :　 CSS1 小写罗马数字
upper-roman :　 CSS1 大写罗马数字
lower-alpha :　 CSS1 小写英文字母
upper-alpha :　 CSS1 大写英文字母
none :　 CSS1 不使用项目符号
armenianl :　 CSS2 未支持。传统的亚美尼亚数字
cjk-ideographic :　 CSS2 未支持。浅白的表意数字
georgian :　 CSS2 未支持。传统的乔治数字
lower-greek :　 CSS2 未支持。基本的希腊小写字母
hebrew :　 CSS2 未支持。传统的希伯莱数字
hiragana :　 CSS2 未支持。日文平假名字符
hiragana-iroha :　 CSS2 未支持。日文平假名序号
katakana :　 CSS2 未支持。日文片假名字符
katakana-iroha :　 CSS2 未支持。日文片假名序号
lower-latin :　 CSS2 未支持。小写拉丁字母
upper-latin :　 CSS2 未支持。大写拉丁字母
说明：
设置或检索对象的列表项所使用的预设标记。
若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时，此属性将发生作用。
假如一个列表项目的左外补丁( margin-left )被设置为 0 ，则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。
仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。
注意： ol 对象和 ul 对象的 type 属性为其后的所有列表项目(如 li 对象)指明列表属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 listStyleType 。
示例：
ul.in { display: list-item; list-style-position: inside; }
语法：
list-style-image : none | url ( url )
取值：
none :　 默认值。不指定图像
url ( url ) :　 使用绝对或相对 url 地址指定图像
说明：
设置或检索作为对象的列表项标记的图像。
若此属性值为 none 或指定 url 地址的图片不能被显示时， list-style-type 属性将发生作用。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 listStyleImage 。
示例：
ul.out { list-style-position: outside; list-style-image: url("images/ie.gif"); }
语法：
list-style-position : outside | inside
取值：
outside :　 默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside :　 列表项目标记放置在文本以内，且环绕文本根据标记对齐
说明：
设置或检索作为对象的列表项标记如何根据文本排列。
假如一个列表项目的左外补丁( margin-left )被设置为 0 ，则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。
仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。
注意： ol 对象和 ul 对象的 type 属性为其后的所有列表项目(如 li 对象)指明列表属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 listStylePosition 。
示例：
ul.in { display: list-item; list-style-position: inside; }

15讲 表格

语法：
table-layout : auto | fixed
取值：

auto :　 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
fixed :　 固定布局的算法。在这种算法中，表格和列的宽度取决于 col 对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100% 。

说明：
设置或检索表格的布局算法。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式布置表格栏宽度：
  1. 使用 col 或 colGroup 对象的宽度( width )属性信息。
  2. 使用表格第一行内的单元格的宽度( width )信息。
  3. 依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
假如单元格的内容超过了列宽度，内容将会被换行。假如无法换行，则内容会被裁切。假如此属性被设置为 fixed ，则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了，那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ，有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度，浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tableLayout 。
示例：
table { table-layout: fixed; }
语法：
border-collapse : separate | collapse
取值：
separate :　 默认值。边框独立（标准HTML）
collapse :　 相邻边被合并
说明：
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 borderCollapse 。
示例：
table { border-collapse: separate; }
语法：
border-spacing : length
取值：
length :　 由浮点数字和单位标识符组成的长度值。不可为负值。请参阅 长度单位
说明：
设置或检索当表格边框独立(例如当 border-collapse 属性等于 separate 时)，行和单元格的边在横向和纵向上的间距。
当只指定一个 length 值时，这个值将作用于横向和纵向上的间距。
当指定了两个 length 值时，第一个作用于横向间距，第二个作用于纵向间距。
对应的脚本特性为borderSpacing。
示例：
table { border-collapse: separate; border-spacing: 10px; }
语法：
empty-cells : show | hide
取值：
show :　 默认值。显示边框
hide :　 隐藏边框
说明：
设置或检索当表格的单元格无内容时，是否显示该单元格的边框。
只有当表格行和列的边框独立（例如当 border-collapse 属性等于 separate ）时此属性才起作用。
对应的脚本特性为 emptyCells 。
示例：
table { caption-side: top; width: auto; border-collapse: separate; empty-cells: hide; }
语法：
caption-side : top | right | bottom | left
取值：
top :　 默认值。 caption 在表格的上边
right :　 caption 在表格的右边
bottom :　 caption 在表格的下边
left :　 caption 在表格的左边
说明：
设置或检索表格( table )的 caption 对象是在表格的那一边。它是和 caption 对象一起使用的属性。
对应的脚本特性为 captionSide 。
示例：
table caption { caption-side: top; width: auto; text-align: left; }
 

posted on 2007-03-09 15:23  水源  阅读(1659)  评论(2)  编辑  收藏  举报

导航