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

默认样式重置(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外的任何值)

评论 ( 6 )
最新评论
617418875 2014-08-26 14:59:47 6F

这些样式不同浏览器解析不同,所以要统一规范,避免兼容性问题

银狐 2014-08-26 14:20:33 5F

你说的“所有标签必须闭合”不准确吧

静文 2014-08-25 23:39:08 4F

代码换行被解析是什么意思?

暮色森林 2014-08-25 17:33:25 3F

一下子全Reset了可能会造成不必要的干扰

_Mt_Cnh_3 2014-08-25 09:37:10 2F

原则上,前端开发人员要控制每个元素的细节,并非不用,而是要让它用在掌握之内。

hzexing 2014-08-25 08:58:36 1F

默认样式重置(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;}

这些为什么不能使用,求解???????