css定位、布局、外边距、内边距、边框概述.ppt

Positioning 决定对象的定位方式 relative： 相对定位 例子： div.pos_left{position:relative;left:-20px} div.pos_right{position:relative;left:20px} div class=pos_left style=background-color:red相对左移/div div class=pos_rightstyle=background-color:blue相对右移/div absolute： 绝对定位 例子： div.pos_abs{position:absolute;left:100px;top:150px;} div class=pos_abs /div fixed： 固定定位（相对浏览器） 例子： div.one{position:fixed;left:5px;top:5px;} div.two{position:fixed;right:5px;top:30px;} div class=one/div div class=two/div z-index 用于确定元素在当前层叠上下文中的层叠级别。 在非static定位中使用，integer用整数值定义堆叠级别，可为负值，同一个层叠上下文中，级别大的显示在上面，反之下面。 语法：z-index: auto | integer 例子： .z1 {z-index: 1;background: #000;} .z2 {z-index: 2;top: 30px;left: 30px;background: #C00;} .z3 {z-index: 3;top: 60px;left: 60px;background: #999;} div class=z1z-index:1/div div class=z2z-index:2/div div class=z3z-index:3/div top(以top为例，right、bottom、left类同) 该属性用来指定盒子参照相对物顶边界向下偏移。 position为非static时使用 语法：top: auto | length | percentage auto：无特殊定位， length：用长度值来定义距离顶部的偏移量。可以为负值。 percentage：用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。 例子： .test1 {top: -100px;} .test2{top:20%;left:300px;} div class=test1-100px/div div class=test220%/div clip 设置对象的可视区域，区域外的部分是透明的，默认值为auto。 必须将position的值设为absolute或者fixed，此属性方可使用。 语法：clip：auto | shape shape：rect(number|auto number|auto number|auto number|auto) 上-左 方位的裁剪：从0开始剪裁直到设定值 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边 例子： div{ width:300px; height:300px; position:absolute; clip:rect(0px,60px,200px,0px); background-color:red; } div/div Layout 定义对象的布局方式，为对象的布局提供设置方法 display 该属性规定元素应该生成的框的类型 语法：display：none | inline | block | list-item |...... none：元素不会被显示 inline：显示为内联元素 block：显示为块级元素 例子： .test1{display:inline} .test2{display:block} .test3{display:none} p class=test1段落1/p p class=test1段落2/p br/br/br/br/ span class=test2行元素1/span span class=test2行元素2/span div class=test3块元素/div float 指定一个元素是否应该浮动 语法：float：none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边 clear 指定段落的左侧或右侧不允许浮动的元素 语法：clear：none | left | right | both none：允许两边都可以有浮动