标准文档流:
指在不使用定位或者特殊的css排版啥的时候,各个元素的排列规则。
css规定网页默认排列方式
第一种
设置margin的值为负数可以破坏文档流!元素还处于标准文档流中!
例 margin-left:-100px;
第二种
postition:relaticve 它的参照物是按照它原来的位置来移动
left:xxpx;
top:xxpx;
设置元素相对定位:position:relative
1 不影响元素本身的特性
2破坏当前的文档流,但是不会脱离文档流
3如果没有设置偏移量,元素是不会移动的!
4.left.top.right.bottom
position有四个值
1相对定位 retative.
2(默认的)静态定位static 遵循标准的文档流
3固定定位 fixed 设置了偏移量后固定在屏幕上。脱离了文档流,不收文档流控制
4绝对定位 absolute
A:要脱离文档流 。默认漂浮在页面的左上角
B:文档范围大于body
C:设置绝对定位后,元素不会再占据原来的空间,也不会影响标准的文档流的排序
D:默认给元素设置display:inline-block(横向排列)
如果 设计父类或则父类的父类为相对行为,那要以定位父类作为父类
结构父级:没有设置定位 的 且包裹在它外面的父级
如果一个元素的父类比较多,找定位父级的时候,离他最近的是他的移动的标准!
设置定位层级,值越大层级越高 ,最大没有限制 z-index 正整数 ;
浮动(float): 可以让块级元素在一行显示, 两种浮动 左浮动和右浮动
1脱离文档流
2后面元素碰到前面元素的边界(或则父类的边界)就停止下来,
3只要给元素加上浮动,它就有高和宽
4默认加上display:inline-block
前提: 加上一个<div cass="clear"></div>
.clear{
clear:both;
}
clear:both 含义:清除浮动 它的值有四中 left right both
清除浮动不是取消浮动只是分割上面浮动对下面元素的影响