css定位

定位

定位的作用

静态定位（一般少用）静态定位是元素的默认定位，无定位的意思。语法：{position：static；}静态定位按照标准流特性来摆放位置，它没有边偏移

相对定位
绝对定位（absolute）特点：若祖级元素没有定位，则按照浏览器为准定位（若祖级有定位，则按照最近的祖级为准定位）不占有原有位置
子绝父相（一般常用）
固定定位语法：position：fixed；特点：以浏览器的可视窗口为参照点移动位置跟父级元素没有任何关系不跟随滚动条不在占用原有的位置（固定在右侧，左侧也类似）技巧：先用 left：50%； 到达中间的位置margin-left：（中间盒子一半的宽度就行了，一般宽一点）；
粘性定位兼容性差，IE不支持
定位的叠放次序
定位拓展

定位的特殊性1.绝对定位，固定定位和浮动类似，在行内元素添加定位后，可以直接设置高度和宽度2.块级元素添加定位，如果不设置大小，则跟随内容的大小变化3.绝对定位会压住下面的所有的内容

元素显示与隐藏
display属性display：none；隐藏对象display：block；除了转换为块级元素以外，还有显示对象的功能隐藏功能以后就不会占有原来的位置
visibility属性visbility属性用于指定元素是可见还是隐藏visiblity：visible；可见visible：hidden；不可见仍会占有原来的位置如果隐藏后不想要原来的位置，可以用display：none；（用的比较多）
overflow溢出overflow：visible；不隐藏，也不剪切overflow：hidden；隐藏溢出的部分overflow：scroll：溢出部分显示进度条，不溢出不显示overflow：auto；溢出不溢出都显示滚动条如果有定位的盒子要谨慎使用，它会隐藏多余的部分

附：如果一个盒子既有left和right属性，会默认left属性

精灵技术
有效减少服务器发送和请求的次数，提高页面的加载速度原理：将网页中的一些小的图像整合到一个大图中background-position：x y；需要注意的是，是下面的图片在动，而不是框在动，x和y一般是负值缺点：图片较大，图片放大缩小容易失真适用于比较精细的图片icomoon

字体图标icomoon字库，可以下载很多图标icofont阿里字库字体图标，表面是图画，实质是字体优点：轻量级，灵活性（可以加很多字体的效果），兼容性适用于简单的小图标这个里面有各种适用于各个浏览器的图标格式在下载解压后css文件前面几行里面有这几行CSS三角制作对于一个盒子，不指定宽度和高度其三角大小就是border的粗细，如果要一个三角形，就把另三个设为透明的就行了
鼠标样式

轮廓线给表单添加outline（）；或者outline（none）；去除默认的蓝色边框input{ outline：none；}
文本防止拖拽textarea{ resize:none;}
vertical-align属性应用实现图片和表单与文字对齐（行内或行内块元素的属性，不是的可以转换为行内块元素）

有截图没有弄上去（ 从有道云笔记复制而来）