一、css文档流布局概念
1.1，什么是标准文档流
1.2，标准文档流下有哪些微观现象
二、CSS---position属性
2.1，position：relative
2.2，position：fixed
2.3，position：absolute
2.3.1，父默认(static)子绝
2.3.2，父相(relative)子绝
2.3.3，父固(fixed)子绝
2.3.4，父绝(absolute)子绝
2.4，z-index特性
三、CSS之float属性
3.1，浮动的特性
3.2，浮动带来的问题：子div浮动不撑高父div
----------------------------------------------------------------------------------------------------
一、css文档流布局概念
1.1，什么是标准文档流
宏观的讲，web页面和ps等设计软件有本质区别
web网页的制作是“流”的概念，从左向右，从上往下
有三种情况将使得元素脱离文档流而存在，分别是 浮动，绝对定位， 固定定位。
1.2，标准文档流下有哪些微观现象
1、空白折叠现象：
所有的连续换行和空格会当成一个空格
行内标签之间的空格会造成页面显示有空格，解决方法是把行内元素写在一行，或者给行内元素加浮动
2、高矮不齐，底边对齐：
一行的高度不一样，底边对齐
3、自动换行：
一行写不满 换行写
二、CSS---position属性
2.1，position：relative
特点： 1、不脱标 2、形影分离（影子和本身是是一对） 3、老家留坑
用途：用途不大
1、微调元素位置left、right、top、bottom
2、做绝对定位的参考（父相子绝）
2.2，position：fixed
特点： 1，脱标 2,压盖效果
这个参数是最好理解的。它相对于浏览器的窗口进行定位。
滚动页面，fixed的位置不变
2.3，position：absolute
“ 生成绝对定位的元素，相对于 static 定位以外的第一个父辈元素进行定位。”
特点1、脱标
特点2、做遮盖效果，提升层级
特点3、和浮动一样设置绝对定位之后可以设置宽高
特点4、绝对定位的top left bottom right 是以父辈的边框为基准，如果父辈有padding，会无视。
所以padding和绝对定位不能同时起作用
特点5：算是小技巧，父相子绝时，不能用margin：0 auto居中。 可以在子盒子中设置 （left: 50% margin-left: -(width/2)）来实现居中
2.3.1，父默认(static)子绝
相对于文档进行定位，(top为文档最上边，bottom为浏览器的最下边,缩放浏览器这个距离不变) ，特点是滚动页面时候目标元素会跟着滚动
2.3.2，父相(relative)子绝
当一个元素设置了position:absolute属性，而它的父元素的属性为position:relative时，它不再是相对于文档定位，而是相对于父元素定位。
这一点非常重要。最最重要的是，父元素设置为position:relative并不会脱离文档流，也就是说——利用给父元素设置position:relative属性，再将子元素设置为position:absolute就可以在文档流中实现需要的定位
2.3.3，父固(fixed)子绝
目标元素相对于fixed的父元素定位时，目标元素和父元素都相对于窗口定位。
2.3.4，父绝(absolute)子绝
目标元素相对于absolute父元素定位时，目标元素和父元素都脱离文档流，父元素根据文档定位，目标元素根据父元素定位，也即根据文档定位，会随滚动条一起滚动
2.4，z-index特性
1、数值大的在上面 ， 数值小的在下面
2、只有定位了的元素，才能使用z-index，就是说不管是相对定位，绝对定位还是固定定位都能使用。而浮动元素不能使用
3、如果大家都没有z-index值，或者z-index值一样，谁写在后面，谁就在上面压着谁
4、定位了的元素永远压住没有定位的元素
5、从父现象：父亲怂了，儿子再牛逼也没用，以父亲的z-index为准
三、CSS之float属性
用inline-block也可以实现，为什么还要用浮动？
因为如果并排的元素太多的话，用inline-block会造成重复代码太多，不利于维护，而用浮动就简单了
3.1，浮动的特性
1、浮动的元素脱离标准文档流
例如某标签脱离文档流粗略意思相当于该标签未写一样，之前本属于该标签的位置没有了。该标签浮动在父标签内
2、所有标签一旦设置浮动，都可以设宽高，例如span标签等
3、浮动的元素贴靠效果
例如两行的span标签，显示出来会有一个空格（空白折叠），这时给两个标签加浮动，可以让空格消失，贴在一起
当父标签宽度容纳不下浮动元素的总宽度时，最右边的元素会“往下掉”，紧贴着前面元素的边，如果太窄，会紧贴着父元素的边。
4、浮动的元素有“字围”效果
例如，div后面跟一个p标签 <div> <div> <p>1234<p>
如果把div向左浮动，按理说div会遮住p标签，遮住文字“1234”，实际效果是div遮住p，但是文字会围着div标签排布。这就是“字围”效果
所以最好遵循一个原则：要浮动，就父标签下的所有子标签一起浮动。不然会造成有标签被“遮住”这样的情况
5、宽度收缩效果
如果一个div没有设置width，在浮动这个div的时候，宽度会自动收缩为内部元素的宽度
3.2，浮动带来的问题：子div浮动不撑高父div
有一个常用的需求：在一个父div里套几个子div，父div的高度不会随子div的高度自动伸缩，如果把父div高度设置为内部最大子div的高度，
如果内部某个div高度超过父div设置的高度，会造成溢出父div，怎么解决呢？（宽度遵循“收缩原理”和“贴靠原理”）
所以：子元素浮动就脱离标准流，父元素就不会被撑高。
解决方式一：给父盒子设置子元素最大高度。这种方式不灵活，如果某个子标签高度变大修改会很麻烦，不推荐使用
解决方式二：给浮动元素最后面加一个空的div，并且该元素不浮动，然后设置clear:both，相当于一堵墙，这样浮动元素高度就会填充到父div。
比第一种好，但是增加了div，造成结构冗余。也不是特别推荐
解决方式三：伪元素清除法，常用，原理基于clear:both。因为在类(有专用名词clearfix)后面加:after可以增加内容，可以加个“.” content:"."，但是这个点默认是行内元素，
上面clearboth是加的div， 所以要display:block 又不能让这个点显示 所以visibility:hidden, 而visibility隐藏不隐藏高度，所以要height:0
所以在祖先元素加个类 .clearfix 在css中写上下面
.clearfix:after{ content:'.'; clear:both; display:block: visibility:hidden; height:0 }
解决方式四：在祖先元素css类中加个属性 overflow : hidden 即可，也比较常用。（overflow的属性值：hidden[子元素超出父元素的部分隐藏] scroll,auto[给父元素加滚动条]
inherit[overflow从父元素继承]）