标签：位移 停止 特殊 偏移量 pos 实现 改变 默认 内联
浮动
1、什么定位
元素该出现的位置
分为以下几类：
普通流定位(文档流定位)
浮动定位
相对定位
绝对定位
固定定位
2、普通流定位
页面默认的定位方式
块级元素：从上到下显示
行内元素：从左到右显示
3、浮动定位
1、什么是浮动定位
元素会脱离默认文档流,在页面上不会占据空间
浮动定位的元素会放置在包含框的左边或者右边
浮动的元素依然在包含框内
当浮动元素碰到其他浮动元素时，就会停止浮动
2、浮动定位解决的问题
实现特殊的定位方式，比如：让多个块级元素在同一行内显示
3、属性
float
取值：
left : 左浮动
right : 右浮动
none : 无浮动
清除浮动所带来的影响:
属性：
clear:left,right,both;
4、元素一旦浮动起来的话，那么都将成为块级元素
、浮动 元素 对 父层元素带来的影响
影响：一个元素内如果包含了浮动元素，那么该元素的高度可能会变成0。
原因：浮动元素 脱离了 文档流，理论上讲，就不在父层容器内
解决方案:
1、显示设置父层元素的高度
2、通过overflow:hidden 来撑起父层元素的高度
1、显示方式
1、块级元素
<div></div> hn p
变成行级元素： display:inline-block
特点：单独占一行
2、内联元素/行内元素
span , b , i , u , s , a
变成块级元素：display：block
总结：
1. 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，
那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
如果A元素上一个元素是标准流中的元素，
那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
2. 清除浮动可以理解为打破横向排列。
3. 对于CSS的清除浮动(clear)，这个规则只能影响使用清除的元素本身，不能影响其他元素。
定位方式相关属性
position
取值:
1、static : 默认，静态定位
2、relative : 相对定位
3、absolute : 绝对定位
4、fixed : 固定定位
2、与定位位置相关属性
top
bottom
left
right
以像素为单位的值
3、堆叠顺序
z-index : value;
值越大越靠近用户
4、static
页面中默认定位方式，即文档流定位
5、相对定位
相对于当前元素本身出现的位置而实现定位的一种方式
实现方式:
position:relative;
通过 top bottom left right 来实现位置移动
使用场合：
1、会进行位置的微妙的调整
2、配合着绝对定位使用
6、绝对定位
特点：脱离文档流，不占据页面空间
定位位置：相对于【最近】的【已定位】的【祖先】元素
如果祖先元素没有进行定位，它的位置就相对于最初的包含块(body)
<nav>
<div>
<p>
<span></span>
</p>
</div>
</nav>
已定位：非static ， 指 relative、absolute、fixed
实现方式：
position:absolute
top,bottom,left,right : 位置偏移量,相对于最近的已定位的祖先元素去偏移。
使用场合:
1、弹出菜单的位置
所有的弹出菜单都是绝对定位
7、固定定位
将元素固定在页面上的某一个位置，不随滚动条滚动而发生改变
语法:
position:fixed;
top、left、right、bottom
常用方式 1.设置 父元素为position：relative
2. 设置子元素为 position : absolute
3. 设置子元素相对于父元素的位移
如 top:20px; left:30px;
标签：位移 停止 特殊 偏移量 pos 实现 改变 默认 内联
原文地址：http://www.cnblogs.com/leexingqing/p/7373210.html
