css高级用法

css 三个布局流

1.标准流
2.浮动流
3.定位

position（定位）
1.static 静态定位
2.fixed 固定定位
3.absolute 绝对定位
4.relactive 相对定位

定位 = 定位模式+边偏移
注意：
凡是有定位的地方必定有边位移

相对定位特点:
1.相对于自己原来在标准流中位值来移动的
2.原来在标准的区域继续占有,后面的盒子仍然以标准刘的方式对待他

绝对定位:
1.绝对定位是以带有定位的父级元素来移动位置
2.完全脱标 , 完全不占有位置(原有的位置会被后续的盒子占有)
3.父元素没有定位,则以浏览器为准定位
(子绝父相)

固定定位:
1.和父级没有关系
2.以浏览器屏幕为准,不随滚动条滚动
3.完全脱标

注意 :
固定的盒子,很多情况下需要单写宽度

堆叠顺序
z-index :

1. 属性值为正整数,负整数,默认为0
2. 属性值越大,盒子就在最上面
3. 只有定位的盒子才有用

补充
显示与隐藏

display:none 隐藏
display:block 显示
原有的位置不在了

visibility:hidden 隐藏
visibility:visible 显示
原有的位置保留

overflow:
visible 超出的部分不隐藏,也不加滚动条
hidden 超出的部分隐藏 (可以清除浮动)(可以消除父子边框联动)
scroll 总是有滚动条,不会超出盒子大小(太丑 不用)
auto 不超出不会有滚动条(不用)

鼠标样式

cursor:
default 默认
pointer 小手指
move 移动
text 文本
not-allowed 禁止

轮郭线
outline :0 / none 去掉边框

防止textarea拖拽
resize:none

垂直居中
只对行内块,和行内元素有效
可以实现 图片文字和表单的对齐关系
vertical-align :
middle 居中
bottom 底部
top 顶部
baseline 基线对齐
< div>< img src="">< /div>
这样写下面会有缝隙 是因为默认的是采用基线对齐 可用display:block解决

white-space: normal 文字可以换行
white-space: nowrap 强制不换行
overflow : hidden 隐藏
text-overflow : ellipsis 省略标记

css精灵技术

作用:
为了有效的减少服务器接受和请求的次数，提高页面的加载速度

ｂａｃｋｇｒｏｕｎｄ:url("") no-repeat left top

=======================================
当两个盒子紧挨在一起的时候, 会有边框2px的效果
用margin-left : - px可以解决

css三角形

div{
width:0;
hieght:0;
border-style:solid;
border-width:10px;
border-color:red transparent transparent transparent;
font-size:0;
line-height:0;
}

持续更新>>>>>>