css多列

多列
1、分隔列
1、作用
将一段文本拆分成几列
2、属性
column-count
取值：数字
2、列间隔
1、作用
每两列之间的间隔距离
2、属性
column-gap
取值：px
3、列规则
1、作用
每两列之间增加分割线，并设置分割线的宽度，样式，颜色
2、属性
column-rule : width style color;
4、浏览器兼容性
IE10+,Opear 支持
Firefox : -moz-
Chrome,Safari: -webkit-
4、CSS Hack
1、解决问题
IE各版本浏览器兼容性问题
2、CSS Hack
浏览器的类型及版本不同会造成CSS的解析效果也各不相同
不同厂商浏览器：IE，Chrome，Firefox，Safari
同一厂商浏览器的不同版本：IE6,IE7,IE8,IE9,IE10
3、CSSHack 原理
使用 CSS 样式属性的 优先级 来解决兼容性问题
4、CSSHack 分类
1、CSS类内部Hack
通过 属性前缀或值后缀 的方式来解决兼容性

• : 被IE6，IE7识别
  - : 被IE6 识别
  +，-如果同时出现的话，+只针对IE7，-只针对IE6

  注意：
  IE7的兼容代码 要在上
  IE6的兼容代码 要在下
  2、选择器Hack
  在选择器前加上某些浏览器能识别的前缀
  div{

}

*前缀：IE6识别
*+前缀：IE7识别
*div{}
*+div{}
3、HTML头部引用Hack
1、原理
通过IE条件注释 解决兼容性问题
IE浏览器会根据一个if条件判断，判断指定的内容是要被解析还是被注释

2、语法

<!--[if 条件 IE 版本]>
					内容
				<![endif]-->

版本：6 ~ 10 数字
条件：
1、gt
大于指定版本的浏览器
2、gte
大于等于指定版本的浏览器
3、lt
小于指定版本的浏览器
4、lte
小于等于指定版本的浏览器
5、!
除条件版本以外的其他版本浏览器
ex:

<!--[if gt IE 6]>
						该段内容只能在 IE6以上版本的浏览器中显示
					<![endif]-->
					<!--[if IE 8]>
						该段内容只能在IE8中显示
					<![endif]-->