CSS定位和布局属性-课件PPT.ppt

——幼儿园页面设计CSS盒子布局和定位本章学****目标:(1)理解网页中BOX的正常流向。(2)会使用top、bottom、right和left属性配合position属性定义偏移量。(3)掌握CSS元素的定位方法,重点掌握static、relative和absolute定位,理解fixed和sticky定位。(4)盒子发生堆叠时,会使用z-index控制堆叠次序。(5)理解盒子内容的裁切。(6)能控制盒子的可见性和溢出方式。(7)能够使用display改变常见元素的显示方式。(8)能够使用float和clear控制浮动定位。,CSS主要通过position属性进行定位。。默认情况下网页布局就是按文档流的正常流向,即按HTML的结构顺序。由上而下、由左至右这样的走向就是所谓的正常流向,浏览器也是依据这样的走向来解译我们的编码。换个角度来说,在大部分的情况下,正常流向指的是网页中元素标记的方式。另外,多数的HTML元素都是属于行内元素或块级元素。块级元素里可以包含行内元素和块级元素,而行内元素里不能包含有块级元素。在正常流向中,块级元素盒子会在其父对象盒子中自上而下排列,而行内元素盒子则会按照由左至右的顺序排列。【例13-1】正常流向(13-)示例部分代码如下:div{ width:200px; height:80px; margin:10px; padding:10px; border:2pxdashed#000; text-align:center;}#div1{ background:#ba9578; color:#FFF;}#div2{ background:#cef091; color:#000;}#div3{ background:#70c17f; color:#FFF;}、bottom、right、left基本语法:top:auto|长度|百分比;bottom:auto|长度|百分比;right:auto|长度|百分比;left:auto|长度|百分比;语法说明:auto:无特殊定位,根据HTML定位规则在文档流中分配。长度:用长度值来定义偏移量,可以为负值。百分比:用百分比来定义偏移量,百分比参照包含块的高度,可以为负值。:position:static|relative|absolute|fixed|center|page|sticky;定位允许定义元素相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口的位置。CSS使用position属性控制定位类型,并配合4个定位偏移属性left、right、top和bottom控制偏移量。静态定位static,遵循正常文档流,是所有元素默认的定位方式,此时4个定位偏移属性不会被应用。一般不特别设定,除非要取消继承其它元素的特别定位。相对定位relative,遵循正常文档流,基准位置为其在正常文档流中的位置,并通常需要top、bottom、right、left属性配合完成,设定元素相对于原来位置的偏移量。设置为相对定位的元素会偏移某个距离,元素仍然保持其未偏移前的形状,它原来所占的空间仍保留,元素移动后可能会覆盖其它元素。相对定位一开始会按照“正常流向”来定位,所有的盒子会先定好位置。一旦一个盒子按照正常流向得到自己的位置,它还可以相对该位置而偏移,这就是相对定位。