常用浏览器
1.主流浏览器：Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera
2.最早浏览器：网景领航者
五大浏览器内核
内核 浏览器*
Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器 只能应用于windows，不开源
Gecko： Mozilla Firefox (火狐)是开源的,它的最大优势是跨平台
Webkit : 代表作品Safari、Chrome ， 是一个开源项目。
Presto : Opera（欧朋）公认的渲染速度最快的引擎
Blink 由Google和Opera Software开发的浏览器排版引擎，2013年4月发布
CSS Bug、CSS Hack和Filter
1.CSS Bug CSS样式在各浏览器中解析不一致的情况 在浏览器中不能正确显示的问题
2.CSS Hack 兼容CSS在不同浏览器中正确显示的技巧方法 补丁
3.Filter 表示过滤器 Filter是一种用来过滤不同浏览器的Hack类型
IE兼容性问题
(1).图片有边框（ie8-） 解决办法： img{border:0 none;}
(2)div>img,img下方会存在间隙 描述：在div中插入图片时，图片会将div下方撑大大约三像素。
解决办法：
img{display:block;}
div{font-size:0;}
(3)ie6以下，会错误地将浮动元素的浮向边margin加倍显示。
解决： ｛display:inline;｝
(4) ie7-，存在默认高度16px。
解决办法:
{font-size:0;}
{overflow:hidden;}
(5)表单元素行高不一致问题（基线对齐的问题）
解决办法：
{vertical-align: middle;}
{float:left;}
(6)表单元素样式在各浏览器渲染效果不一
解决办法：给input清除默认样式{display:block;border: 0 none;padding:0;}，
给input外层嵌套标签，设置input需要的样式
(7)浮动元素50%+50%>100% （ie6-）
解决办法： 若两个元素都左浮动，给元素添加{clear:right;}清除反向浮动
(8)ie8及以下浏览器才支持cursor:hand; （鼠标指针）
解决办法： ｛cursor:pointer;｝
(9)透明度
opactity:val; val取值为0-1，越大越不透明。
filter:alpha(opacity=val) val取值为0-100，整十数，越大越不透明。
(10).margin塌陷：
父元素与第一个子元素存在上间距，若给第一个子元素加margin-top，会错误地渲染成父元素的margin-top。
解决办法：
（1）子元素或者父元素浮动
（2）给父元素加overflow:hidden;
（3）给父元素加border-top
（4）将子元素的margin-top当作父元素的padding-top
(11).margin合并当两个块级元素竖直排列时，上一个元素的margin-bottom与下一个元素的margin-top会发生合并，它们之间的margin取两者之间较大的值。
(12).ie8只支持单冒号写法
(13).总属性（border、background）的多个属性值之间要用空格隔开
(14).ul>li(float)>a(宽高)（float–>ie6）
ul>li(float)>a(高度)（float–>ie6）>span(padding)(假如span也设置成了display:block;也要float)
(15).页面最外层设置最小宽度（版心容器宽度）
兼容ie6：_width:expression(document.body.clientWidth < 1190 ? “1190px” : “auto”);
BFC
BFC(Block formatting context)直译为“块级格式化上下文” 独立的渲染区域，只有Block-level box（块）参与，规定内部如何布局，与外部毫不相干。
BFC的布局规则
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻块会发生margin重叠。
3、每个元素的margin box的左边， 与包含块border box的左边相接触
盒模型=content+padding+border+margin。Width指的是content的宽，height=content的高。
4、BFC的区域不会与float box重叠。(应用场景：清除浮动的第二种方式、自适应两栏布局)
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
(应用场景：防止margin合并，对独立的bfc里面的子元素操作不会影响到外部元素)
6、计算BFC的高度时，里面的浮动元素也参与计算(应用场景:清除浮动的第一种方式)
触发BFC
根元素html
float属性不为none
position为absolute（有定位的父元素或者html）或fixed（可视窗口）
display为inline-block, table-cell, table-caption, flex, inline-flex（css3）
overflow不为visible(overflow:hidden;)
应用：自适应两栏布局
方法一：
左边定宽加浮动，右边margin-left留出左边的宽（因为浮动的元素会脱离标准流，第二个元素会跑上来占据第一个元素的位置，而块级元素的宽度刚好是100%，当设置了margin-left为第一个元素的宽度，它的宽度会自动调整为页面剩余部分的宽度）
.dv1{width: 200px;height:600px;background-color: red;float: left;}
.dv2{margin-left:200px;height: 600px;background: blue;}*/
方法二：
左边定宽加浮动，右边不定宽加overflow:hidden
原理：bfc的区域不会与浮动块重叠
防止margin重叠
属于同一个bfc的两个相邻块会发生margin重叠
给第二个p添加一个盒子并添加overflow:hidden;
清除内部浮动
计算BFC的高度时，里面的浮动元素也参与计算