CSS---文档流布局 | 脱标-postion-zindex | 脱标-浮动

一、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从父元素继承]）