一、自适应
1、宽度自适应
块元素不设置宽度或是块元素设置宽度100%，块元素的宽度占满整个父级的宽度。
（1）不设置width（块元素是占位置，元素类型没有受影响）
（2）width：100%（元素类型受影响，脱离文档流，设置浮动、绝对定位、固定定位）
calc（）可以动态计算数值
（1）使用calc（）的加减乘除实现宽度自适应
2、高度自适应
2.1盒子的高度由内容撑开
（1）不设置高度
（2）height：auto
最小高度 min-height
注意：IE6浏览器不识别min-height
兼容性：其他浏览器和IE7以上版本浏览器识别的是min-height，IE6和IE5识别的是height（相当于min-height）
2.2解决兼容性：
（1）下划线过滤器（IE6或是IE6以下版本浏览器能识别）
_属性：属性值
（2）关键字过滤器（可以提升单独css的权重）
属性：属性值 !important
IE5和IE6不识别!important
2.3高度自适应
子元素的高度由父元素决定
父元素需要有一个固定高度
子元素 height：100%
如果盒子的高度等于当前屏幕的高度
html，body{
height：100%；
}
.box{
height：100%；
}
（3）min-height:600px;
height:auto !important;
height:600px;
高版本浏览器全都识别，但是只有一二行起作用，值auto相当于没有设置高，所以实际上只有第一行起作用
IE低版本只有第三行起作用
3、高度塌陷
3.1 例如：左右两个div盒子都浮动，那么父元素的盒子是没有高度的，则父元素最小高度失效，子元素的高度如果大于最小高度，则会超出父元素的盒子。
总结：内容浮动后不占位，父元素识别不了内容的高度
解决：（1）给父元素设置overflow:hidden（比较常用）
原理：overflow:hidden可以触发BFC，BFC是一个独立的渲染区域，局部规则，浮动元素也参与高度计算
缺点：内容超出父元素的范围就会被隐藏
（2）给浮动的子元素添加兄弟元素空盒子，添加clear：both属性，让空盒子给父元素撑开（比较常用）
缺点：代码复用率较低，会写很多没有意义的空盒子
（3）万能清除法（最常用的方法）
通过css写一个空盒子
伪元素伪对象选择器（内联元素）
：：after 可以在元素后面模拟一个空盒子
：：before 可以在内容的前面模拟一个空盒子
：：after和：：before必须跟content属性一起用才可以
.clear-fix::after{
content：“.”；
display：block；
clear：both；
height：0；
overflow：hidden；
visibility：hidden；（占位隐藏，可以不加 ）
}
.clear-fix{
zoom：1
}
：：after只能支持到IE8以上
万能法使用时IE会有兼容问题；zoom：1（IE浏览器专有属性）；解决IE浏览器的浮动兼容问题。
3.2 伪元素扩展
：：first-letter 设置的内容是第一行的第一个字的样式
：：first-line设置的是第一行内容的样式
：：selection 设置的是选中内容的样式（只能设置背景颜色和字体颜色）
二、一屏网页的思路
1、让大盒子的高度等于当前网页的高度
2、所有网页结构的高度都用百分比设置
3、尽量精简结构，清楚百分比的关系，内容移动，尽量水平居中
内容居中或是往下移动
第一种：可以用vertical-align设置垂直居中
第二种：可以用定位设置移动，给本元素添加position：relative；
4、BFC 布局规划里面
浮动元素跟BFC区域不会重叠
三、图片整合
CSS Sprites的原理（图片整合技术），又叫雪碧图、精灵图。
图片整合就是把多张小图片整合到一张大图片，通过背景插入的形式设置，结合核心属性background-position来设置我们要显示的某块内容。
1、优点
（1）可以减少对服务器的请求次数，提升网页的加载速度
（2）可以减小图片的体积
2、缺点
不利于后期的维护
3、图片整合工具（css satyr）