前端的一些内容及各大浏览器的兼容性

admin

前端的一些内容及各大浏览器的兼容性
默认样式重置(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外的任何值)