网页设计第17次课CSS定位属性要点分析.ppt

第三章 使用CSS样式表（下） 第5节、CSS定位属性;7、定位属性 使用定位属性可以控制元素的位置，包括相对定位和绝对定位两种方式。相对定位是指允许元素在相对于文档布局的原始位置上进行偏移，而绝对定位是指允许元素与原始的文档布局分离且任意定位。 （1）定位方式 position： 使用定位方式属性可以控制浏览器应如何定位HTML元素。语法，position : static（默认无设置） | absolute（绝对定位） | fixed（固定元素不滚动） | relative（相对定位）;（2）元素位置top、right、bottom、left： 元素位置属性与定位方式共同设置元素的具体位置。 语法，top : auto | px丨% …… ;当position=static时，元素出现在正常的流中，即按出场顺序依次排列并占有空间。;;当position=absolute时，元素脱离了文本流，参照浏览器（或最近的激活定位的父级）的左上角生成绝对定位的位置。（即在文档中已经不占据位置，原来位置被后面元素递补占有）。此时对象不具有边距，但仍有补白和边框。;;当position=relative时，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。（即在文档中仍占据原来的位置）。;;如果父级（无限）没有设定position属性，那么当前元素的定位将以浏览器左上角为原始点进行定位；如果父级（无限）设定position属性，那么当前元素的定位则以父级（最近的）的左上角为原始点进行定位。 ;当position=fixed时，总是根据浏览器的窗口来进行元素的定位，且不会随着滚动条的滚动而改变。本属性IE6不支持。;;（3）层叠顺序 z-index： 使用层叠顺序可以设置层的先后顺序和覆盖关系，该属性实际是设置元素沿z轴的位置。默认情况下，z-index值为1，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。【取值auto表示遵从其父对象的定位；取数字值是必须是无单位的整数值，可以取负值。】 语法，z-index : auto | 数字;;;;当重新设置元素的z-index值后，元素的层叠顺序发生改变。;学完就练之7-1（请将源代码复制到页面中，开始练习）：;（4）浮动属性 float： float属性定义元素在哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，且不论它本身是何种元素。【取值none是默认值，表示对象不浮动；left表示元素向左浮动；right表示元素向右浮动。】 语法，float : none | left | right;;;;浮动元素会脱离文档流，它在文档流空出的位置由后续的(非浮动)元素填充上去。;;;（5）清除浮动属性 clear： 清除属性用于指定一个元素是否允许有其他元素漂浮在它的周围。【取值none表示允许两边都可以有浮动对象，是默认值； left表不不允许左边有浮动对象； right表不不允许右边有浮动对象； both表示不允许有浮动对象。】 语法，clear : none | left | right | both;;;;;（6）溢出属性 overflow： 使用overflow属性可以设置当元素内的内容超出所能容纳的范围时的显示方式。【取值visible（默认）表示元素的大小和内容都会自动显示出来； auto表示只在内容超出元素的范围时才显示滚动条； hidden表示会隐藏超出元素范围的内容；scroll表示总是显示滚动条。】 语法，overflow : visible 丨 auto | hidden | scroll ;;当元素里内的内容超出所能容纳的范围时会自动溢出。;;;学完就练之7-2（请将源代码复制到页面中，开始练习）：;（7）可视区域属性 clip： 使用clip属性可以限定只显示裁切出的区域，裁切出的区域为矩形（必须将position的值设为absolute，此属性方可使用）。只要设置两个点即可，一个是矩形左上角的顶点，由top和left两项设置完成，另一个是右下角的顶点，由bottom和right两项设置完成（注，裁切的坐标是指元素自身的尺度，与position定位位置无关）。 【取值auto表示对象不裁切，是默认值。rect (数字）表示它依据上、右、下、左的顺序提供自对象左上角（0, 0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不裁切。】 语法，clip : auto | rect(y1 x2 y2 x1);;;;;（8）可见属性 visibility： 该属性规定元素是否可见，即使不可见的元素也会占据页面上的空间。【取值visible表示元素是可见的，默