• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 目前比较全的CSS reset重设方法总结

目前比较全的CSS reset重设方法总结

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS重设,reset等相关知识,佚名 希望在学习及工作中可以帮助到您

在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。

  当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。

  正因为上述冲突和问题依然存在于这个”不完美的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,什么是CSS Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。

一.最简化的CSS Reset(重设) :

  1. * {   
  2.       padding: 0;   
  3.       margin: 0;   
  4. }  

  这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

  1. * {   
  2.        padding: 0;   
  3.        margin: 0;   
  4.        border: 0;   
  5. }  

  这是在上一个重设的基础上添加了对border属性的重设,初始值为0的确能避免一些问题。

  1. * {   
  2.        outline: 0;   
  3.        padding: 0;   
  4.        margin: 0;   
  5.        border: 0;   
  6. }  

  在前两个的基础上添加了outline属性的重设,防止一些冲突。


二.浓缩实用型CSS Reset(重设):

  1. * {   
  2.        vertical-align: baselinebaseline;   
  3.        font-weight: inherit;    
  4.        font-family: inherit;    
  5.        font-style: inherit;   
  6.        font-size: 100%;   
  7.        outline: 0;   
  8.        padding: 0;   
  9.        margin: 0;   
  10.        border: 0;   
  11. }  

  该CSS重设方法出自Perishable Press,这是他常用的方法。

三.Poor Man 的CSS Reset:

  1. html, body {    
  2.        padding: 0;    
  3.        margin: 0;    
  4. }   
  5. html {   
  6.        font-size:1em;   
  7. }    
  8. body {   
  9.        font-size:100%;   
  10. }    
  11. a img, :link img, :visited img {   
  12.        border:0px;   
  13. }   

  这个重设方法将html和body下元素的padding和margin都设为0,并分别为html标签和body标签下的所有元素设置了初始的字体大小,最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

您可能想查找下面的文章:

  • 目前比较全的CSS reset重设方法总结

相关文章

  • 2017-08-06html div 透明样式示例代码
  • 2017-08-06CSS属性探秘系列(三):line-height
  • 2017-08-06css display inline block 兼容性问题写法
  • 2017-08-06css3中背景尺寸background-size详解
  • 2017-08-06用CSS制作三角形和按钮的简单实例
  • 2017-08-06一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
  • 2017-08-06网页变灰配合全国哀悼日的css代码 20100421
  • 2017-08-06使用css属性:nth-child(n)匹配选择第n个子元素
  • 2017-08-06知识普及:彻底搞懂CSS中单位px和em,rem的区别
  • 2017-08-06css 图片变黑白效果 使用CSS将图片转换成黑白的

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用text-overflow:ellipsis实现文字超出用省略号显示
    • CSS中的一些百分比相关调试经验分享
    • div和css制作斜线示例分享
    • css行内元素padding,margin,width,height没有变化
    • css 兼容性书写记录
    • css3高级选择器使用方法
    • css3圆角边框和边框阴影示例
    • CSS3实现闪烁动画效果的方法
    • 使用CSS绝对定位实现块状元素自适应居中
    • CSS3转换功能transform主要属性值分析及实现分享

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有