css学习笔记20160126定位

文档流是html可显示元素在排列时所占用的位置.

css实现对元素定位(positioning)有四种不同的定位方式分别是static,relative,absolute,fixed.

static是position属性的默认属性值,元素在正常的流之中,静态定位元素不收四个方向的属性影响.

fixed相对于浏览器窗口固定,脱离了文档流,即便窗口滚动fixed定位元素位置也不变.

relative相对定位相对于其正常位置定位,但原本所占空间不变.

absolute绝对定位相对于最近已定位的父元素,如果没有则相对于html文档.

元素重叠时通过z-index属性设置元素堆叠顺序.

clip属性用来剪裁元素的外形.

overflow属性定义了元素大于指定区域的处理方式.属性值默认为visible,多余部分内容会显示在元素框外.还可以是scroll,内容被修剪但是可以通过滚动条查看全部内容.auto处理方式类似于scroll.hidden内容会被修剪,并且多余内容不可见.(但是内容实际还存在,可以通过全选复制出全部内容)

通过cursor属性改变鼠标样式,css提供如下鼠标样式default默认样式(通常为一个箭头),auto(浏览器设置的光标样式,也是cursor属性的默认值),crosshair(十字线),pointer(指示链接的一只手),move(只是对象可以移动),text(文本光标),wait(光标忙),progress(正在加载),help(帮助光标),和八个方向的移动光标e-resize,s-resize,w-resize,n-resize,ne-resize,nw-resize,se-resize,sw-resize.

还可以自定义鼠标样式,html{cursor:url('xxx.ico'),auto;}cursor属性最后最好设置一个默认鼠标样式,防止前面设置的样式不成功.

float浮动属性多用于图像,只能左右浮动,会影响布局,多个浮动元素可以在一行,如果不想让浮动元素周围有浮动元素可以用clear属性设置.

float属性值可以是left,right,none(默认值,不浮动),inherit

clear属性可以为left(左侧不允许有浮动元素),right(右侧不允许有浮动元素),both,none(默认值允许浮动元素出现在两侧),inherit