CSS元素定位与显示模式详解.pdfVIP

CSS中的元素定位：

(1)流定位

(2)浮动定位floatclear

1.元素的显示模式——重点

常用的元素默认有三种显示(disy)模式：

(1)block：如div，独立占一整行，可以指定width/height

(2)inline：如span，可与其它元素同处一行，不能指定width/height

(3)inline-block：如img，可与其它元素同处一行，但可以指定width/height

(4)none：元素，且不占用页面流布局空间

(5)table/table-cell：就可以像td一样使用vertical-align属性了，IE6-不支持

2.元素的可见性

visibility属性指定元素是否可见，取值：

·visible元素可见

·hidden元素隐藏，但不释放所占的页面空间

面试题：disy:none和visibility:hidden的区别

3.元素的不

opacity:0.0~1.0之间的小数，0.0彻底透明(隐藏)1.0(彻底可见)

4.vertical-align两种应用场合：

(1)用在td/th中或disy:table-cell元素中：让当前元素中的文本内容在竖直方向上居中

(2)用在IMG/TEXTAREA等inline-block元素中：让当前元素同一行中的其他元素与自己的竖

直方向上的对齐方式

5.设定光标效果

cursor：

·pointer小手

·move可移动指示

·text可在此处进行文本输入

·crosshair显示为十字

6.列表相关的属性：

list-style-type:列表项前的提示符号

none/disc/circle/square/decimal/lower-alpha/upper-alpha/lower-roman/

upper-roman

list-style-image:使用来代替默认列表项提示符号

list-style-position:outside/inside，列表项的标号处于li外部还是

list-style:typeimageposition集合属性

7.元素的定位——重点

元素的定位方式(position)：

(1)流定位：无法手动定位，不能指定元素的left/top等属性

(2)浮动定位(float)：无法手动定位，不能指定元素的left/top等属性

(3)静态定位(static)：就是流定位

(4)相对定位(relative)：元素可以指定“相对于其自己作为静态元素时所处位置”的偏移

位置；相对定位的元素其原始空间仍然会保留

(5)绝对定位(absolute)：元素可以指定“相对于已定位的的祖先元素的padding位置

作为原点”的偏移位置；绝对定位的元素不再占用页面布局空间

(6)固定定位(fixed)：元素可以指定“相对于最祖先元素(body)的位置作为原点”的偏移位

置；且不随着页面内容的滚动而滚动；固定定位的元素不占用页面空间

注意：

(1)static/float定位的元素无法修改z-index(默认是auto，实际值为)；relative/absolute/fixed

定位的元素可以修改z-index，值越大越靠近观众，可以为负值。

浏览迷

数据统计浏览器

作业：

(1)IE8-如何实现半透明？