【2017年整理】CSS学习文档.docxVIP

一、定位属性 参数说明position定义位置left指定元素横向距左部距离right指定元素横向距右部距离top指定元素纵向距顶部距离bottom指定元素纵向距底部距离z-index设置元素的层叠顺序width设置元素框宽度height设置元素框高度overflow内容溢出控制clip剪切元素框是指包含每个元素的矩形框。?元素内容与元素框共同形成了元素块。?定位是指设定元素块位置和大小。?上表中前6个属性是实际的定位属性，后面的4个有关属性用来设置元素框，或对元素框中的内容进行控制的属性。其中，position属性是最主要的定位属性。2.position定位? 语法格式：?Position: static | absolute | fixed | relative属性值说明static元素定位的默认值，无特殊定位，对象遵循HTML定位规则，不能通过z-index进行层次分级relative相对定位，对象不可重叠，可以通过left,right,bottom和top等属性在正常文档中偏移位置，可以通过z-index进行层次分级absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,right,bottom和top属性进行规定fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left,right,bottom和top属性进行规定3.Absolute：参照浏览器的左上角，配合left、right、bottom和top进行定位。如果没有设置这四个值，则默认依据父级的坐标原点为原始点。?Position:absolute4.Relative：相对于某个元素的原始起点进行移动。与绝对定位的区别：绝对定位的坐标原点为上级元素的原点，与上级元素有关；相对定位的坐标原点为本身偏移前的原点，与上级元素无关。?5.Fixed：固定定位。是绝对定位的特殊形式，固定定位的容器不会随着滚动条的拖动而变化位置。在视线中，固定定位的容器位置不会改变。?固定定位的参照位置不是上级元素块而是浏览器窗口。使用固定定位的元素可以脱离页面，无论页面如何滚动，始终处在页面的同一位置上。6.Z-index：层叠顺序。从深度上设定元素层叠的次序，其方法是每个元素指定一个数字，数字较大的元素将叠加在数字较小的元素之上。?z-index: auto | number●Auto表示遵循父对象的定位●Number是一个无单位的整数值，可以为负值。该属性只作用在position的属性值为relative或absolute的对象，不能作用在窗口组件上。7.边偏移属性：用来描述元素块与包含元素块最近的边线之间的偏移量的属性。?left,right,top,bottomleft: auto | length●auto表示系统自动取值●Length表示由浮点数字和单位标识符组成的长度值或百分数■数值设置元素的绝对位置■百分数设置相对于其上级元素的位置二、Float定位1.float定位只能在水平方向上定位。?语法格式：? float: none | left | rightnone：不浮动left：浮动在左边right：浮动在右边使用float可以实现两列布局，即让一个元素在左浮动，另一个元素在右浮动，并控制好这两个元素的宽度2.使用float属性不但改变元素的显示位置，同时会对相邻内容造成影响。定义了float属性的元素会覆盖在其他元素上，被覆盖的区域将处于不可见状态。如果不想让float下面的其他元素浮动环绕在该元素周围，可以使用clear属性清除。? clear: none | left | right | both●none:允许两边都有浮动对象●left:不允许左边有浮动对象●right:不允许右边有浮动对象●both:不允许有浮动对象三、Overflow溢出定位如果元素框被指定了大小，而元素的内容不适合该大小，可以使用溢出属性来控制。语法格式：? overflow:visible | auto | hidden | scroll属性值说明visible若内容溢出，则溢出内容可见hidden若内容溢出，则溢出内容隐藏scroll保持元素框大小，在框内应用滚动条显示内容auto等同于scroll，它表示在需要时应用滚动条Overflow适用于以下情况：当元素有负边界时元素框宽于上级元素内容区，不允许换行元素框宽于上级元素区域宽度元素框高于上级元素区域高度元素定义了绝对定位CSS盒子和DIV布局一、认识div层1.DIV标记是一个区块容器标记，在标记之间可以放置其他一些HTML元素，例如p,h1,table,img,form等，然后使用css相关属性将div容器标记中的元素作为一个独立对象进行修饰，不会影响其他H