标签：空间 文档 偏移量 样式 charset oat css 位置 方法
文档流指语言文本从左到右，从上到下显示，这是传统HTML文档的文本布局。
定位(position)中的absolute,relative,fixed;浮动（float）的float:left/right。
四种方式：
默认static：没有定位；
相对定位（relative）：相对于原始位置进行定位；常用于布局，让子元素有参考对象。
绝对定位（absolute）：该方法令元素不再占有自己原有位置，完全脱离文档流。
fixed：生成绝对定位的元素，常用于广告弹窗等。
absolute, relative, fixed 偏移的参考点分别是什么absolute相对于父容器的偏移量；
relative相对于原有位置的偏移量；
fixed相对于浏览器窗口进行定位。
用来控制层叠元素的显示优先级，值越大优先级越高。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别position：relative会让元素脱离文档流，且没有改变自身占据的空间大小；
负margin没有脱离文档流，会改变自身占用空间大小。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>boxcenter</title> 6 <style type="text/css" media="screen"> 7 .ct{ 8 border: none; 9 position: relative; 10 width: 500px; 11 height: 500px; 12 line-height: 500px; 13 background-color: #ccc; 14 color: #000; 15 } 16 .box{ 17 border: none; 18 position: absolute; 19 top: 50%; 20 left: 50%; 21 margin-left: -50px; 22 margin-top: -50px; 23 color: #fff; 24 background-color: red; 25 width: 100px; 26 height: 100px; 27 line-height: 50px; 28 text-align: center; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="ct"> 34 <div class="box">box</div> 35 </div> 36 37 </body> 38 </html>
特征：
影响：
1.浮动元素：能感知浮动元素的存在，碰到其他浮动元素的边框时会停止。
2.普通元素:块级元素无法感知浮动元素的存在，会占据其空间；行内元素不会占据浮动元素空间。
3.文字：文字会被浮动元素挤开，环绕浮动元素排布。
清除浮动是指为元素设置其左右能否有浮动元素。
清除浮动：
1.为被浮动元素遮挡的元素添加clear:both/left/right
2.为浮动元素的父元素添加overflow:hidden
3.在最后一个浮动元素的后面添加一个元素并加入clear:both样式。
标签：空间 文档 偏移量 样式 charset oat css 位置 方法
原文地址：http://www.cnblogs.com/xiulingy/p/6195383.html
