014 HTML+CSS(Class165 - 183)
[A] CSS Hack
CSS Hack是用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器识别的样式代码，来控制浏览器的显示样式
Hack分类：
1. CSS属性前缀法
属性前缀法即在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，已达到预期效果。
前缀标识 兼容浏览器
_ IE6及以下版本
+ 或 、 IE6、IE7
\9 IE6、IE7、IE8、IE9
\0 IE8、IE9、IE10、IE11
【如】 #elem{background-color：red；_background-color：blue；}
在IE6及其以下版本该元素的颜色为蓝色，高版本的为红色。
2. 选择器前缀法
选择前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，
在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack
前缀标识 兼容浏览器
*html IE6;
*+html IE7;
:root IE9以上及现代浏览器
【如】*html #elem{background-color：red；_background-color：blue；}
*+html #elem{background-color：red；_background-color：blue；}
:root #elem{background-color：red；_background-color：blue；}
3. IE条件注释法
条件注释法是IE浏览器专用的Hack方式，微软官方推荐使用的hack方法
前缀标识 兼容浏览器
<!--[if IE]>...<!endif--> IE
<!--[if IE 7]>...<!endif--> IE7
<!--[if lte IE7]>...<!endif--> IE7以下
<!--[if ！ IE7]>...<!endif--> 非IE7
【注】1. 条件注释法添加在body中，将某个元素及其内容包含在 <!--[if IE]>...<!endif--> 之间，
只有当该代码运行在相应的IE浏览器之下时才起作用，别的浏览器中相当于注释掉了。
2. IE10及以上版本已经不再支持条件注释法。
[B] IE低版本bug情况
由于旧版本浏览器在设计上的缺陷，导致产生一些bug，所以针对这些问题要做一些兼容处理
兼容问题：
1. 透明度
常规写法：opacity：0.5;
兼容写法：filter：alpha(opacity = =50);
2. 双边距: 当元素浮动时，低版本的margin实际显示值是设置值的两倍，该问题只存在于IE6中。
常规写法：margin-left: 50px;
兼容写法：添加属性_dispaly：inline
3. 最小高度: IE6版本中，容器的最小高度为19px
常规写法：height：3px；
兼容写法：添加属性overflow：hidden
4. 图片边框:img引入图片时自动含有边框
常规写法：无
兼容写法：添加属性border: none;
[C] 渐进增强与优雅降级
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高版本的浏览器进行效果，交互等改进和追加功能达到更好的用户体验
优雅降级：一开始构建完整的功能，然后再针对低版本的浏览器做兼容。
[D] 布局拓展
页面布局
1. 登高布局：margin负值，padding等值正值，可实现左右两个浮动元素相互撑开
2. 三列布局，左右固定，中间自适应
a. BFC方式
b. 定位
c. 浮动(双飞翼布局，圣杯布局)
d. flex弹性
[E] PC端管理后台整页制作
练习
