前端的一些内容及各大浏览器的兼容性
前端的一些内容及各大浏览器的兼容性默认样式重置(css reset) css reset
原则：但凡是浏览器的样式，都不要使用
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0}
ol,ul{list-style:none,padding:0;margin:0}
a{text-decoration:none;}
img{border:none;}
a伪类的先后顺序 link、visited、hover、active
块元素和内嵌元素
块元素的特征
1. 默认读占一行
2. 没有宽度时，默认撑满一排
3. 支持所有css命令
内嵌(内嵌、行内)的特征
1. 同排可以继续跟同类的标签
2. 内容撑开宽高
3. 不支持上下的margin和padding
4. 代码换行被解析
inline-block的特点和问题
特性：
1. 块在一行显示
2. 行内属性标签支持宽高
3. 没有宽高的时候内容撑开宽度
问题：
1. 代码换行被解析
2. ie6、ie7不支持快属性标签的inline-block;
前端规范：
1. 所有书写均在英文半角状态下的小写
2. id,class必须以字母开头
3. 所有标签必须闭合
4. html标签用tab键缩进
5. <!--html注释 -->
6. /* css注释*/
7. ul,li/ol,li/dl,dt,dd拥有父子关系的标签
8. p,dt,h标签里面不能嵌套快属性标签
9. a标签不能嵌套a
10.内联元素不能嵌套块
float浮动：
1. 块元素
2. 内容撑开宽高
3. 脱离文档流 (文档流是文档中可以显示对象在排列时所占用的位置)
4. 提升层级半层
清除浮动的方法及问题
1. 加高度 (扩展性不好)
2. 给父级加浮动 (页面中所有元素都加浮动，margin左右自动失效(floatsbad!))
3. 加inline-block (margin左右自动失效)
4. 空标签清除浮动 (ie6最小高度19px；(解决ie6下还有2px偏差))
5. br清除浮动 (不符合工作中的结构、样式、行为三者分离的要求)
6. after伪类清除浮动 (现在主流)
.clear:after{content:’’;display:block;clear:both;}
.cler{zoom:1}
after伪类：元素内部末尾添加内容
:after{content:”添加的内容”;}ie6,ie7下不兼容
zoom缩放
a. 触发ie下haslayout，使元素根据自身内容计算快高
b. ff不支持
7.ovrflow:hidden清除浮动方法 (需要配合宽高或者zoom兼容ie6 ie7)
overflow:scroll || auto || hidden；
overflow:hidden;溢出隐藏(裁刀)
浮动兼容性问题
ie6双倍边距bug(ie6下块属性标签浮动，并且有横向margin，横向margin加倍)
a. ie6
b. 浮动
c. 横向margin
d. 块属性标签(加display:inline)
ie6下 li部分兼容性问题：
a. 左右两列布局，右边右浮动ie6ie7下拆行；(左边元素浮动)
b. ie6 ie7 li下元素都有浮动，在ie6ie7下方会产生4px间隙的问题；(加vertical-align:top;)
图片下方间隙问题
a. display;(改变标签本身特性)
b. overflow:hiden;(必须知道图片高度)
c. vertical-align(暂时最完美的方案)
css精灵
是一各网页图片处理方式，它允许你将一个页面涉及到的所有零星图片包含到一张大图中去
优点：利用css精灵能很好地减少了网页的http请求次数，从而大大的减少了页面的性能
缺点：降低开发效率;维护难度加大
css hack:针对不同的浏览器写不同的css样式的过程
\9 ie10之前的ie浏览器解析
+，*，ie7包括ie7之前的浏览器解析
_ie6包括ie6之前的ie浏览器解析
!important提升样式优先级权重
在ie6下高度小于19px的元素，高度会被当做19px处理;
解决ie6下的最小高度是加overflow:hidden;
解决办法：font-size:0;但只能解决到2个像素，小于2个像素这个方法将无法解决
haslayout 根据元素内容的大小或者父级的父级的大小重新计算宽度
display:inline-block
height:(除auto外的任何值)
float:(left或right)
widht:(除auto外的任何值)
zoom:(除normal外的任何值)
页:
[1]