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、做遮盖效果，提升层级
css固定定位特点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从⽗元素继承]）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。