位置与布局.ppt

位置与布局 徐兵子 QQ：453445 手机位置与布局 位置与布局的样式属性用于改变指定元素与其他元素之间的排列方式、显示方式等。常用的位置和布局样式属性如下： Display:指定元素的显示方式none（不显示）、inline（行显示）、block（块显示）、list-item（列表显示） Visibility:指定元素的显示方式：hidden（不显示）、visible（显示）。 Float:指定块元素与其他元素之间的排列方式：left（左排列）、right（右排列）、none（正常方式） Clear:取消float方式：left（取消左排列）、right（取消右排列）、both（取消左右排列）、none（不取消float方式） Position：指定元素位置方式：static（静态的）、relative（相对的）、absolute（绝对的）、fixed（固定的） left、top、right、bottom:指定元素的位置坐标值：auto(自动)、百分数或长度定义。 Cursor:光标显示图标：光标文件名或各种类型的光标符（详见CSS2.0中文手册） Z-index:指定元素在z坐标（前后）方向的显示顺序；数字（数字小的在后面，数字大的在前面） Overflow:指定元素中的内容超出元素框范围的处理方式：auto（当超出时滚动显示）、scroll（总是显示滚动条）、hidden（不显示超出部分）、visible（显示全部内容） Vertical-align:指定元素在垂直方向的对齐方式：baseline（基准线）、sub（下标）、super（上标）、top（顶部）、text-top（文字顶部）、middle（中部）、bottom（底部）、text-bottom（文字底部） 位置与布局 Float和clear Float属性专门用于将块状元素进行横向排列。 而clear属性则清除float的设置，这样才能保证后面的元素会按正常的方式显示。 位置与布局 Overflow 使用Overflow属性时，常与width和height属性一起使用。当元素中的内容超出width或height属性的设置值时，就会按Overflow的属性值决定是否显示滚动条。 overflow:auto（当超出时滚动显示） overflow:scroll（总是显示滚动条） overflow:hidden（不显示超出部分） overflow:visible（显示全部内容） 位置与布局 position、left、top、right、bottom及z-index 缺省状态下元素的position属性值是static,这时，显示元素的顺序按照HTML文档中的元素顺序进行的，而设置position 、left、top、right、bottom、z-index等属性将会改变正常的元素显示方式，使元素按照设置的方式进行显示。 例如：当一个DIV元素设置的样式是position:absolute; left:100px; top:50px;时，表示它的显示方式为绝对位置，元素的左（X）坐标为100px，顶部（y）坐标为50px，缺省状况下，坐标的计算原点（0,0）为屏幕的左上角。 如果上述元素外围有一个div元素，它的样式中设置了相对位置（position:relative），这就表示，包含在相对位置元素中的所有绝对位置的元素将以该元素的左上角为原点，例如： div style= margin:0 auto; width:400px; height:400px;div style=position:relative; left:50px; top:50px; width:100px; height:50px; background:#ccc;nbsp;/div z-index的属性值表示的是元素前后的重叠显示方式，数值大的元素将显示在数值小的元素上面。例如，下述语句设置了3个div元素，分别设置了3个z-index值。 div style=position:absolute; width:200px; height:200px; left:100px; top:50px; background:#ccc; z-index:1;z-index1/div div style=position:absolute; width:200px; height:200px; left:150px; top:100px; background:#999; z-index:2;z-index2/div div style=position:absolute; width:200px; height:200px; left:200px; top:150px;