粘性定位 宽高自适应 高度塌陷

粘性定位（兼容性IE浏览器支持度不好）
position:sticky;

可以看做相对定位和固定定位的结合体
（一般情况下没有滚动条滑动内容，内容是占位的，
如果滚动条滑动内容，粘性定位的元素就会有固定定位的效果，方向top才管用）

注意点：
       1、 使用的时候需要设置left、top、bottom、right值，才有固定定位固定的效果
       2、避免父元素使用overflow属性
       3、兼容性不好，pc端做ie兼容不考虑用这个

取消定位
        position:static
   

宽度自适应
              块元素不设置宽度或者块元素设置宽度100%，块元素的宽度占满整个父级的宽度
              1、不设置width（块元素是占位置，元素类型没有受影响）
              2、100% (元素类型受影响，脱离文档流，设置浮动、绝对定位、固定定位)

              calc()可以动态计算数值
              加+   减法-   乘法*   除法/

高度自适应
       1、盒子的高度由内容撑开
                     1、不设置高度
                     2、height:auto;

 

       2、 最小高度  min-height：600px;

          如果内容没有超过600px ，以最小高度为准，如果内容超过最小高度600px，以内容高度为主  

          如果项目考虑IE6浏览器，（IE6浏览器不识别min-height ）

             兼容
                     其他浏览器和IE7以上版本浏览器  识别的是   min-height 
                     iE6和IE5  识别是height

                     min-height：600px;
                     _height:600px;

                2、
                   min-height:600px;
                   height:auto  !important;
                   height:600px;

 

　　高度塌陷

　　父元素设置最小高度或者不设置高度,高度由内容撑开

　　如果内容不占位,父元素没有高,就会出现高度塌陷

　　(内容浮动不占位,父元素无法识别)

 

解决方法

　　1 给父元素设置overflow:hidden

　　(overflow:hidden可以出发BFC,是一个独立的渲染区域,局部规则,浮动元素也参与计算.

缺点:内容溢出父元素范围就会被隐藏

　　2.在所有浮动元素的最下方,填写一个空盒子

　　给空盒子设置clear:both 让空盒子把父元素撑开

　　3.万能清除法

　　.clear-fix:after{
                            content: ".";
                            display: block;
                            clear: both;

                            height: 0px;
                            overflow: hidden;
                            /* background: blue; */
                            visibility: hidden;
                            /* 占位隐藏 */
                            }

　　　　.clear-fix{zoom:1}
              :afterIE8以上和非IE浏览器才支持,zoom:1是为了解决IE的兼容问题

　　4.设置固定高度

 

高度自适应

　　子元素的高度由父元素决定
                   父元素需要有一个固定高度
                   子元素  height：100%

       如果盒子的高度等于当前屏幕的高度
                        html，body{
                                height:100%
                        }
                        .box{height:100%}

 

 

一屏网页的思路

　　1.让大盒子的高度等于当前网页的高度

　　2.所有网页结构的高度都用百分比设置

　　3.尽量精简结构,清楚百分比的关系,内容移动 尽量水平居中

　　　　内容居中或往下移动

　　　　　　第一种: 可以用vertical-align设置垂直居中

　　　　　　第二种:可以用定位设置内容移动