来源博客：u.mr90.top

css定位

1. 为什么需要定位-因为标准流和浮动流无法快速实现
2. 定位的组成：定位模式+边偏移
3. 边偏移使用top,buttom,right,left属性移动
4. 静态定位：position：static（很少使用）
5. 相对定位：position：relative(位置保留)
6. 绝对定位：position：absolute（先对于父元素）父元素无定位或者没有父级以浏览器为标准，以最近的有定位父元素对齐（不在占有位置）
7. 子绝父相
8. 巧妙使用>

固定定位

1. position：fixed（不占有位置）
2. 以可视化的窗口为参照点，使用算法固定在版心的位置
3. 先定义浏览器的一半，left/right：50%，在使用margin-left：版心的一半

粘性定位

1. postion：sticky；top:0占有原来的位置（浏览器可视区）

定位叠放次序

1. z-index数值越大盒子越靠上
2. 层叠性，属性都相同时候
3. 只有定位的盒子才有z-index属性

绝对定位盒子局中

1. margin：0 auto;加了绝对定位的盒子无法适用
2. 与定义版心位置的方法类似margin为负值
3. 相对定位不脱流不影响

定位的特殊特性

1. 行内元素添加绝对或者固定定位，可以直接设置w和h
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小使内容的大小

浮动和定位

1. 浮动想让文字环绕，只会压住下面标准流的盒子，不会压住盒子中的文字（图片
2. 定位会压住下面标准流的所有内容。绝对定位，固定定位

元素的显示和隐藏

1. display：none;隐藏对象(经常使用)
2. display：block;显示对象
3. display不在占有原来的位置
4. visibility：hidden;(隐藏之后继续保留原来的位置)
5. overflows：hidden；隐藏溢出，比如：浮动溢出（父元素无高度的时候），overflows：scroll
6. 有定位的盒子慎用隐藏元素

精灵图

background-position:x y; xy的正方向为向右向下，所以一般都是负值

1. 取消表单轮廓outline：none
2. 防止拖拽文本，textarea{resize:none}

vertical-align属性

1. 行内元素和行内块元素，可以使图片和文字对齐
2. verticla-align: middle;图片和文字垂直局中
3. 解决图片底部有空格-加vertical-align属性（转化为块级元素）

文本省略号

单行

1. 单行省略号，强制一行显示white-space:nowrap
2. 隐藏溢出overflow:hidden
3. 省略号代替text-overflow:ellipsis

多行

1. 第一种方法兼容性有问题

overflow:hidden;
text-overflow:ellipsis;
display：-webkit-box；
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

margin负值的使用

1. 去除边框的时候可使用
2. 如果li有定位加z-index提高定位，如果没有定位，添加相对定位即可