粘性定位（兼容性IE浏览器支持度不好）
position:sticky;
position:sticky;
可以看做相对定位和固定定位的结合体
（一般情况下没有滚动条滑动内容，内容是占位的，
如果滚动条滑动内容，粘性定位的元素就会有固定定位的效果，方向top才管用）
（一般情况下没有滚动条滑动内容，内容是占位的，
如果滚动条滑动内容，粘性定位的元素就会有固定定位的效果，方向top才管用）
注意点：
1、 使用的时候需要设置left、top、bottom、right值，才有固定定位固定的效果
2、避免父元素使用overflow属性
3、兼容性不好，pc端做ie兼容不考虑用这个
1、 使用的时候需要设置left、top、bottom、right值，才有固定定位固定的效果
2、避免父元素使用overflow属性
3、兼容性不好，pc端做ie兼容不考虑用这个
取消定位
position:static
宽度自适应
块元素不设置宽度或者块元素设置宽度100%，块元素的宽度占满整个父级的宽度
1、不设置width（块元素是占位置，元素类型没有受影响）
2、100% (元素类型受影响，脱离文档流，设置浮动、绝对定位、固定定位)
块元素不设置宽度或者块元素设置宽度100%，块元素的宽度占满整个父级的宽度
1、不设置width（块元素是占位置，元素类型没有受影响）
2、100% (元素类型受影响，脱离文档流，设置浮动、绝对定位、固定定位)
calc()可以动态计算数值
加+ 减法- 乘法* 除法/
高度自适应
1、盒子的高度由内容撑开
1、不设置高度
2、height:auto;
1、盒子的高度由内容撑开
1、不设置高度
2、height:auto;
2、 最小高度 min-height：600px;
如果内容没有超过600px ，以最小高度为准，如果内容超过最小高度600px，以内容高度为主
如果项目考虑IE6浏览器，（IE6浏览器不识别min-height ）
兼容
其他浏览器和IE7以上版本浏览器 识别的是 min-height
iE6和IE5 识别是height
其他浏览器和IE7以上版本浏览器 识别的是 min-height
iE6和IE5 识别是height
min-height：600px;
_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;
content: ".";
display: block;
clear: both;
height: 0px;
overflow: hidden;
/* background: blue; */
visibility: hidden;
/* 占位隐藏 */
}
.clear-fix{zoom:1}
:afterIE8以上和非IE浏览器才支持,zoom:1是为了解决IE的兼容问题
:afterIE8以上和非IE浏览器才支持,zoom:1是为了解决IE的兼容问题
4.设置固定高度
高度自适应
子元素的高度由父元素决定
父元素需要有一个固定高度
子元素 height：100%
父元素需要有一个固定高度
子元素 height：100%
如果盒子的高度等于当前屏幕的高度
html，body{
height:100%
}
.box{height:100%}
html，body{
height:100%
}
.box{height:100%}
一屏网页的思路
1.让大盒子的高度等于当前网页的高度
2.所有网页结构的高度都用百分比设置
3.尽量精简结构,清楚百分比的关系,内容移动 尽量水平居中
内容居中或往下移动
第一种: 可以用vertical-align设置垂直居中
第二种:可以用定位设置内容移动