CSS - reset

  1. 哪来的外边距?
  2. 重置基础样式

  • 作者：KK

  • 发表日期：2016.1.26

你可能不知道一个事实,但你绝对觉察过,首先你知道网页就是主要用HTML代码和CSS渲染出来的是吧,那么这些代码已经写好了谁排左边排右边,谁红谁绿谁多大多小的尺寸啦

每一个网页可以认为就是一份HTML和一份CSS代码的组合效果,可是为什么同一份HTML+CSS在IE浏览器是一个样,在火狐浏览器又有点不一样,在谷歌浏览器还可能有一点点的宽度/高度差异呢?

这里就是存在着一个浏览器解析HTML+CSS代码差异的事实,因为不同浏览器程序是由不同的科技公司开发的,这些公司各有各自的程序写法,写的效果可能会有些不一样,所以造成渲染出来的页面会有些差异

但大同小异,他们都会基本遵守HTML和CSS的规则把主要的效果渲染出来,个别细微的效果他们就自持己见咯

所以,为了让我们的代码能在用户眼前呈现尽可能一样的效果,我们需要做一些浏览器兼容工作

哪来的外边距?

先试一个效果,以下代码:

<body style="margin:0;">
	<div style="width:400px; height:400px; background:red;"></div>
</body>

就是一个红色DIV嘛!?亮点在哪呢!?呵呵,亮点其实就在边距上,你发现没,它有左边距和顶边距,并不是紧贴浏览器窗口内容区的左上角开始...

可是你并没有写过margin-top和margin-left两个属性呀!哪来的边距?

那么你试下将<body>这个body的开始标签改成<body style="margin:0;">试试

啊哦,还真的没有边距了,红框框紧贴着左上角了哟

说明了什么呢,就是浏览器自动给body和div之间加了边距啦,具体这个我也不是非常清楚细节!但是我只知道它默认就是有边距的

而且不同的浏览器的默认边距/是否有默认边距都不一样,那如果你不设置为0,习惯用A浏览器的用户就会看到有边距的,惯用B浏览器的用户就会看到没边距的咯

重置基础样式

这里就引发一个重置的需求,什么意思呢?其实意思就是,既然不同浏览器会默认给不同的margin边距,那这么办好了,我们要求它们"通通不要加默认margin边距"就好了

还有,你发没发现添加超级链接a标签的时候,那些超级链接的颜色是鲜蓝色的,好刺眼,而且又有下划线,好难看呀

比较舒服的样子应该是浅一点的蓝色,再去掉下划线

但是你每添加一个a标签都为它加一次样式吗?不如一次性设置?还有还有好多...

所以很多网站都会有类似这样的样式代码来预先设置一些样式,让所有浏览器都不要用它们的默认样式,而使用这个作为默认样式:

*{margin:0; padding:0;}
a{color:#428BDD; text-decoration:none;}
ul{list-style:none;}
/*等等...*/

这样的话,浏览器擅自加的margin和padding就无效了,全部都变成了0,要多少边距由咱们自己后面写样式说了算,而且也可以一次性设置所有a标签的默认样式,所有ul里面的li都不要显示那个点点...

总而言之,我们需要一些CSS代码将一些元素的属性重新设定为"一个默认值"(有距离就设定为无距离,有边框就设定为无边距,有修饰就设定为无修饰...),这些代码我们通常叫它CSS reset代码,你可以上网查下这个关键字,相信会找到好多不同版本的reset代码,那些专家们各有各的看法,但一般情况下你随便找一套感觉靠谱的用,然后再写自己的样式都没问题.反正我不是专家咯~~呵呵