CSS布局

布局

文档流

就是按照元素的顺序从左到右从上到下排列

如果有块级标签，块级会占据一正行
在img中加一个块级元素div

定位

默认的文档流许多时候无法满足我们的需求，需要更多地布局手段
用到定位:默认定位 static 
相对定位 relative 
绝对定位 absolute 
固定定位 fixed

默认定位 static

无定位，不受left right top bottom的影响，元素出现在正常
的文档流中

相对定位 relative

可以看出div2是相对原有位置进行left、right、top、bottom进行
位移，而且对后续元	素无影响

绝对定位 absolute

父相子绝：父级元素相对定位，再给子级绝对定位

固定定位 fixed

z-index

重新定位之后可能出现重叠，可以通过z-index调整顺序 默认值
是auto，即与父元素相	同，可以为他设置数值，数值越大层数越高

定位总结：

1.标准文档流按照从左到右自上而下的方式依次排列顺序。若要改变
默认的布局方式则需要使用定位：relative absolutefixed 等定
位方式
2.Relative相对于原有位置进行偏移
3.Absolute 相对于父容器进行偏移，注意：父容器必须要有定位，
非默认定位，否则一直往上追溯，知道页面
4.Fixed相对于整个页面进行偏移
5.Relative 不会脱离文档流 absolute和fixed都会脱离文档流

浮动

通过设定浮动，可以使元素从原来的文档流中脱离出来，感觉像浮
在原本的文档流上面。

一.父元素高度
二.父元素 overflow:hidden;
三.在最后一个标签后加div设置clear:both;
四.伪元素（双伪元素）