CSS学习笔记（4）定位/表格/滚动条

参考文献： 《HTML, CSS, JavaScript 整合详解》 王津涛 编著，机械工业出版社

 

1.     CSS定位属性，将元素放在页面的指定位置

定位属性	属性值	说明	CSS版本	兼容性
position	static relative absolute fixed	设置定位方式	CSS2	IE4 NS4 F1
bottom	auto % length	设置元素与其最近一个定位的父元素底边相关的位置	CSS2	IE5 NS6 F1
left	auto % length	设置元素与其最近一个定位的父元素左边相关的位置	CSS2	IE4 NS4 F1
right	auto % length	设置元素与其最近一个定位的父元素右边相关的位置	CSS2	IE4 NS4 F1
top	auto % length	设置元素与其最近一个定位的父元素顶边相关的位置	CSS2	IE4 NS4 F1
clip	rect auto	设置对象可视区域	CSS2	IE4 NS6 F1
overflow	visible hidden scroll auto	设置当前元素内容超过指定区域时如何处理内容	CSS2	IE4 NS6 F1
vertical-align	baseline sub super top text-top middle bottom text-bottom length %	垂直对齐方式	CSS1	IE4 NS4 F1
z-index	auto number	元素层叠顺序	CSS2	IE4 NS6 F1

①     position属性值：

l  static 遵循HTML定位规则

l  relative 相对定位，相对元素原来的位置进行移动，依赖left、top、right及bottom

l  absolute 绝对定位，元素位置完全依赖left、top、right以及bottom属性的指定

l  fixed 目前浏览器不支持

②     clip属性值：

l  rect 表示页面元素可视区域，以上右下左为顺序进行设置，注意不显示的部分依然占据空间，而且需要在position:absolute时属性才生效，如：

img{ position:absolute; clip:rect(0px 120px 135px 0px)}

③     overflow属性设置当前元素的内容超过其指定区域时如何处理内容，语法格式为

选择器 { overflow : auto | visible | hidden | scroll }

l  auto 元素内容超过指定区域时，浏览器会显示滚动条用来查看剩余内容

l  visible 元素内容超过指定区域时，浏览器会以默认方式处理溢出内容，通常会拉伸指定区域以显示全部内容

l  hidden 元素内容超过指定区域时，浏览器不显示超出范围外的内容

l  scroll 不论元素内容是否超过指定区域，浏览器总会显示滚动条

④     z-index属性用于设置元素层叠顺序，较大值元素会堆叠在较小值元素的上面，number可为负数（注意：z-index属性只能在被定位的元素上使用，如position:absolute）

⑤     vertical-align属性用于设置元素垂直对齐方式

●       baseline 支持valign特性的对象内容与基线对齐

●       sub 垂直对齐文本下标

●       super 垂直对齐文本上标

●       top 支持valign特性的对象内容顶端对齐

●       text-top 支持valign特性的对象的文本与对象顶端对齐

●       middle 支持valign特性的对象内容与对象中部对齐

●       bottom 支持valign属性的对象内容与对象底端对齐

●       text-bottom支持valign特性的对象的文本与对象底端对齐

●       length 用浮点数设定的长度值，可以为负数；% 用百分比设置对齐位置

⑥     如果position属性的值为static，bottom属性就不起作用

2.     CSS表格属性，设置表格布局

表格属性	属性值	说明	CSS版本	兼容性
border-collapse	collapse separate	设置表格单元格的边是否合并	CSS2	IE5 NS7 F1
border-spacing	length	设置单元格边框间距	CSS2	IE6 NS6 F1
caption-side	top bottom left right	设置表格标题在表格中的位置	CSS2	IE6 NS6 F1
empty-cells	show hide	单元格无内容时，是否显示单元格边框	CSS2	IE6 NS6 F1
table-layout	auto fixed	表格布局	CSS2	IE5 NS6 F1

①     border-collapse 设置表格单元格的边是否合并

separate 边框分离 ； collapse 边框合并

②     border-spacing 表格边框分离时，设置单元格边框在横向和纵向上的间距，如果定义一个参数，则水平和垂直都受影响，如果定义两个参数，第一个参数定义水平，第二个参数定义垂直

③     caption-side 设置表格标题在表格中的位置，默认top

④     empty-cells 单元格无内容时，是否显示单元格边框，hide隐藏，show显示，应该是在边框分离时有效

⑤     table-layout 设置表格布局，auto默认，fixed固定

3.     CSS滚动条属性

滚动条属性	值
scrollbar-3d-light-color	color
scrollbar-highlight-color	color
scrollbar-face-color	color
scrollbar-arrow-color	color
scrollbar-shadow-color	color
scrollbar-dark-shadow-color	color
scrollbar-base-color	color

4.     CSS分类属性，控制元素显示效果

表格属性	属性值	说明	CSS版本	兼容性
visibility	visible hidden collapse	元素是否显示，隐藏元素依然占据空间	CSS2	IE4 NS6 F1
float	left right none	设置元素的浮动效果	CSS1	IE4 NS4 F1
clear	left right both none	清除浮动	CSS1	IE4 NS4 F1
cursor	ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	鼠标类型	CSS2	IE4 NS6 F1
cursor	url auto crosshair default pointer move e-resize	鼠标类型	CSS2	IE4 NS6 F1
display	none inline block list-item run-in compact marker table inlin-table table-row-group table-header-group table-footer-group table-row table-column-goup table-column table-cell table-caption	元素是否显示，隐藏的元素不占据空间	CSS1	IE4 NS4 F1

①     visibility 属性设置元素是否显示，隐藏元素依然占据空间

●       visible 显示

●       hidden 不显示

●       collapse 对于表格元素，这个值可以移除一行或一列，但不会影响表格的布局，被隐藏的行或列依然占据空间，如果这个值用于其他元素，效果与hidden一样

②     float 属性设置元素的浮动效果

●       left 元素移动到父层的左边

●       right元素移动到父层的右边

●       none 元素回到它原本应出现的位置

注：如果一行内的浮动元素过多，超出了空间的容纳范围，会自动跳到下一行，知道有足够的空间容纳

③     clear 清除浮动效果

●       left 清除左边的浮动效果

●       right清除右边的浮动效果

●       both清除两边的浮动效果

●       none 允许两边的浮动效果

④     cursor 属性设置鼠标的类型

属性值	说明
url	需使用的自定义光标的 URL 注：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标
default	默认光标（通常是一个箭头）
auto	默认浏览器设置的光标
crosshair	光标呈现为十字线
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动
e-resize	此光标指示矩形框的边缘可被向右（东）移动
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）
w-resize	此光标指示矩形框的边缘可被向左移动（西）
text	此光标指示文本
wait	此光标指示程序正忙（通常是一只表或沙漏）
help	此光标指示可用的帮助（通常是一个问号或一个气球）

⑤     display 设置元素如何显示或是否显示

属性值	说明
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认此元素会被显示为内联元素，元素前后没有换行符
inline-block	行内块元素（CSS2.1 新增的值）
list-item	此元素会作为列表显示
run-in	此元素会根据上下文作为块级元素或内联元素显示
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）
table-row	此元素会作为一个表格行显示（类似 <tr>）
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值