﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-hot的自习室-随笔分类-js html css</title><link>http://www.blogjava.net/cjwang-21/category/40984.html</link><description>我是一只弱小的毛毛虫，想像有一天可以成为强壮的挖土机，
拥有挖掘梦想的神奇手套。。。</description><language>zh-cn</language><lastBuildDate>Fri, 24 Jul 2009 00:55:33 GMT</lastBuildDate><pubDate>Fri, 24 Jul 2009 00:55:33 GMT</pubDate><ttl>60</ttl><item><title>Reset Css</title><link>http://www.blogjava.net/cjwang-21/archive/2009/07/23/288098.html</link><dc:creator>逆水深寒</dc:creator><author>逆水深寒</author><pubDate>Thu, 23 Jul 2009 13:49:00 GMT</pubDate><guid>http://www.blogjava.net/cjwang-21/archive/2009/07/23/288098.html</guid><wfw:comment>http://www.blogjava.net/cjwang-21/comments/288098.html</wfw:comment><comments>http://www.blogjava.net/cjwang-21/archive/2009/07/23/288098.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/cjwang-21/comments/commentRss/288098.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/cjwang-21/services/trackbacks/288098.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp; 快下班的时候，收到小头的关于Reset Css的一封邮件，看了一下才发现，哎呀！原来css还有这么玩的。<br />
2004年，Tantek被不同浏览器下默认样式的差异给搞烦了，于是写了一个undohtml.css，这也就诞生了世界上第一份reset.css。<br />
&nbsp;&nbsp;&nbsp; CSS Negotiation and a Sanity Saving Shortcut. * { margin: 0; padding: 0 } 的学名是Global White Space Reset. 从原文中可以看出这个方法刚问世时是非常火爆的，并且作者建议一定要先破后立，要将清扫差异和重置默认样式结合起来，这样才是正确的做法。<br />
&nbsp;&nbsp; 为何Global White Space Reset当初风光一时，如今却黯然销魂？* { margin: 0; padding: 0 }的成功之处在于，管你三七二十八，统统抹平，人人生而平等！然而其失败之处也正是因为其威力太大，虽然捣了蜂窝得了蜜，却惹来群蜂追尾，麻烦无限（因为被抹平的样式，你得再重新设置回来，比如input的padding等）。这就如西汉一代名将韩信哪，是成也萧何，败也萧何！<br />
&nbsp;&nbsp;&nbsp; 2007年，Eric Meyer的一篇文章Reset Styles, 重新唤起了一股reset热潮。下面是Eric Meyer的一个CSS Reset方案:<br />
&nbsp;&nbsp; <br />
<div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #000000;"><br />
&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">1</span><span style="color: #000000;">.&nbsp;html,&nbsp;body,&nbsp;div,&nbsp;span,&nbsp;applet,&nbsp;object,&nbsp;iframe,<br />
&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">2</span><span style="color: #000000;">.&nbsp;h1,&nbsp;h2,&nbsp;h3,&nbsp;h4,&nbsp;h5,&nbsp;h6,&nbsp;p,&nbsp;blockquote,&nbsp;pre,<br />
&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">3</span><span style="color: #000000;">.&nbsp;a,&nbsp;abbr,&nbsp;acronym,&nbsp;address,&nbsp;big,&nbsp;cite,&nbsp;code,<br />
&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">4</span><span style="color: #000000;">.&nbsp;del,&nbsp;dfn,&nbsp;em,&nbsp;font,&nbsp;img,&nbsp;ins,&nbsp;kbd,&nbsp;q,&nbsp;s,&nbsp;samp,<br />
&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">5</span><span style="color: #000000;">.&nbsp;small,&nbsp;strike,&nbsp;strong,&nbsp;sub,&nbsp;sup,&nbsp;tt,&nbsp;var,<br />
&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">6</span><span style="color: #000000;">.&nbsp;b,&nbsp;u,&nbsp;i,&nbsp;center,<br />
&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">7</span><span style="color: #000000;">.&nbsp;dl,&nbsp;dt,&nbsp;dd,&nbsp;ol,&nbsp;ul,&nbsp;li,<br />
&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">8</span><span style="color: #000000;">.&nbsp;fieldset,&nbsp;form,&nbsp;label,&nbsp;legend,<br />
&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">9</span><span style="color: #000000;">.&nbsp;table,&nbsp;caption,&nbsp;tbody,&nbsp;tfoot,&nbsp;thead,&nbsp;tr,&nbsp;th,&nbsp;td&nbsp;{<br />
&nbsp;&nbsp;</span><span style="color: #000000;">10</span><span style="color: #000000;">.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;</span><span style="color: #000000;">0</span><span style="color: #000000;">;<br />
&nbsp;&nbsp;</span><span style="color: #000000;">11</span><span style="color: #000000;">.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;</span><span style="color: #000000;">0</span><span style="color: #000000;">;<br />
&nbsp;&nbsp;</span><span style="color: #000000;">12</span><span style="color: #000000;">.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;</span><span style="color: #000000;">0</span><span style="color: #000000;">;<br />
&nbsp;&nbsp;</span><span style="color: #000000;">13</span><span style="color: #000000;">.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;outline:&nbsp;</span><span style="color: #000000;">0</span><span style="color: #000000;">;<br />
&nbsp;&nbsp;</span><span style="color: #000000;">14</span><span style="color: #000000;">.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font</span><span style="color: #000000;">-</span><span style="color: #000000;">size:&nbsp;</span><span style="color: #000000;">100</span><span style="color: #000000;">%</span><span style="color: #000000;">;<br />
&nbsp;&nbsp;</span><span style="color: #000000;">15</span><span style="color: #000000;">.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertical</span><span style="color: #000000;">-</span><span style="color: #000000;">align:&nbsp;baseline;<br />
&nbsp;&nbsp;</span><span style="color: #000000;">16</span><span style="color: #000000;">.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;transparent;<br />
&nbsp;&nbsp;</span><span style="color: #000000;">17</span><span style="color: #000000;">.&nbsp;}</span></div>
&nbsp;&nbsp;&nbsp; 哎，真是收获良多啊！<br />
<br />
<img src ="http://www.blogjava.net/cjwang-21/aggbug/288098.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/cjwang-21/" target="_blank">逆水深寒</a> 2009-07-23 21:49 <a href="http://www.blogjava.net/cjwang-21/archive/2009/07/23/288098.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>