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

浏览迷

数据统计浏览器

作业：

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

CSSelementpositioning:

(1)flowpositioning

(2)floatingpositioningfloatclear

1.Elementdisymodes—keypoints

Commonelementshavethreedefaultdisy(disy)modes:

(1)block:suchasdiv,occupiesafulllinetly,canspecifywidth/height

(2in

)line:suchasspan,canbeonthesamelinewithotherelements,cannot

specifywidth/height(3)inline-block:suchasimg,canbeonthesamelinewith

otherelements,butcanspecifywidth/height(4)none:theelementdipears

anddoesnotoccupyspaceinthepageflowlayout(5)table/table-cell:canuset

e

hvertical-alignpropertyliketd,notsupportedinIE6-

.

2ElementVisibility

visibilitypropertyspecifieswhetheranelementisvisible,values:

·visibleelementisvisible

·hiddenelementishidden,butdoesnotreleasethespaceitoccupiesonthepage

InterviewQuestion:disy:noneandvisibility:hiddendifferences

3.ElementOpacity