默认样式重置(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外的任何值)
- 浏览: 72943 次
- 性别:
文章分类
最新评论
发表评论
-
前端学习文章【1】
2015-08-17 09:20 365移动时代的前端加密 http://div.io/topic ... -
Animator:短小精悍的CSS3动画库
2015-07-05 08:47 884参考:http://www.w3cfuns.com/blog ... -
前端在线工具汇总
2015-07-03 11:15 620在线工具集锦: http://tool.oschina. ... -
阿拉伯语等右向左排版文字CSS解决方案
2015-06-28 10:26 4140国际化市场,二十七国文字,其中免不了“反常态”的语种,比如 ... -
\5fae\8f6f\96c5\9ed1的意思
2015-06-02 10:59 933下面这个CSS是啥意思:font-family:\5FAE ... -
用3个步骤实现响应式网页设计
2014-11-04 15:44 597第一步:Meta标签(查看演示)大多数移动浏览器将 ... -
收藏本站代码
2014-10-30 10:20 904function addToFavorite() { ... -
有效防止移动搜索转码
2014-10-16 14:32 542在全站头部加个meta: <metahttp- ... -
网站字体样式该如何选择
2014-09-21 09:56 451详解中文字体访问一峰老师博客:http://www.ruany ... -
Css Sprite
2014-09-14 17:43 455Css Sprite也被为CSS精灵,这是前端攻城师必 ... -
修改输入框placeholder文字默认颜色-webkit-input-placeholder
2014-09-14 16:42 2966html5为input添加了原生的占位符属性placeho ... -
响应式设计的 5 个 CSS 实用技巧
2014-09-13 16:15 487响应式的Web设计其实并不难,但是要让元素在布 ... -
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2014-09-10 21:41 609HTML5的语义化标签以及 ... -
编写高质量代码base.css
2014-09-04 16:43 610@charset "utf-8"; / ... -
em(倍)与px的区别
2014-09-04 16:39 354在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝 ... -
IE7下 z-index的bug
2014-08-24 17:43 392z-index 有时候设置了很高的值如:z-index:99 ... -
如何在IE7下兼容半透明
2014-08-24 09:51 470background:#3598DB; filter:al ... -
从Web字体谈起——默认字体样式设置
2014-08-01 10:07 2438在网页设计中字体的设置不可小觑,好的字体让人赏心悦目,凌乱 ... -
响应式十日谈第一日:使用 rem 设置文字大小
2014-07-24 10:50 592上面回顾: 在序言中我们已经提到了响应式的一些基本理念, ... -
搜狐WEB标准_前端技术应用规范
2014-07-22 16:16 440搜狐WEB标准_前端技术应用规范
相关推荐
web前端浏览器兼容性问题,以及其他新知识点:例如SEO javascript mate等问题
前端不同浏览器IE, FF, 谷歌等等兼容性解决办法
web前端开发,浏览器兼容性总结!
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些...
一些前端遇到的浏览器兼容问题,自己总结的,有利于大家去对浏览器的兼容性的认识
缺点是要控制内容不要换行。 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline; 例如: ”imfloat”> 相应的css为 #...
花了近2个月时间挨个整理了网上上百篇的面试题,将一些错误进行了矫正,当然前端的答案并非绝对,各抒己见吧
WEB前端开发必备之浏览器兼容性处理方法大全[借鉴].pdf
前端浏览器兼容问题处理,如果处理跨浏览器的兼容性
幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很棒的浏览器兼容性测试工具让我们一起看看这些 对于前端开发工程师来说,网页兼容性测试工程师而言,确保代码在各种主流浏览器...
网页前端开发工程师推荐的12款浏览器兼容性测试工具 ,值得前端工程师拥有
对于前端开发工程师来说,网页兼容性测试工程师而言,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很棒...
Web前端开发,PC端,移动H5端,常见浏览器兼容性问题汇总,浏览器兼容性问题汇总-web前端-html-css
浏览器兼容性问题汇总_web前端_html_css.pdf
浏览器兼容性问题汇总_web前端_html_css[定义].pdf
F2etest 是一个面向前端、测试、产品等岗位的多浏览器兼容性测试整体解决方案。在之前,我们一般有三种解决方案:本机安装大量的虚拟机,一个浏览器一个虚拟机,优点:真实,缺点:消耗硬盘资源,消耗CPU资源,打开...
主要介绍了前端开发必备:12款浏览器兼容性测试工具推荐,浏览器兼容性测试工具一般都具备模拟当前主流浏览器的功能,例如国内用的比较多的IETester,就可以模拟IE6、IE7、IE8等,这样就方便了前端的CSS和JS的调试,需要...
IE各版本浏览器测试软件 IETester(前端必备),可禁用缓存和脚本,IE5/IE6/IE7/IE8/IE9
在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些...