在前端开发中，为了确保网页在不同的浏览器中能够有一致的显示效果，我们需要进行CSS样式的重置和清除。这是因为不同浏览器默认的CSS样式往往存在差异，例如边距、填充、字体设置等，这些差异会导致页面布局和样式显示不一致。因此，前端开发者会采用一套通用的CSS规则来重置这些默认样式，使得页面布局和元素表现能够达到跨浏览器的统一。
CSS重置的基本原理是为HTML中所有的元素设置默认样式。通常，我们会将所有元素的外边距（margin）和内边距（padding）设置为0，这样可以消除浏览器的默认样式对元素布局产生的影响。在重置的代码中，还会涉及到字体（font）、列表（list）、图片（img）、表格（table）等元素的统一设置，确保这些元素在各种浏览器中表现一致。
例如，在提供的代码中，我们可以看到：
```css
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,
dl, dt, dd, ul, ol, li, th, td, div, span, img,
fieldset, lengend, button, input, select, textarea {
margin: 0;
padding: 0;
}
```
这段代码的作用就是将页面上几乎所有基本元素的外边距和内边距都重置为0，这保证了页面在不同浏览器中的基础布局的一致性。
在字体设置方面，代码中通过指定具体的字体系列和大小，比如：
```css
body, button, input, select, textarea {
font: 12px/18px Arial, Verdana, Microsoft YaHei;
}
```
这段代码将页面的基础字体设置为Arial、Verdana或者微软的黑体（在中文环境下），字体大小为12像素，行高为18像素。这样的设置同样是为了保证不同浏览器中文本显示的一致性。
此外，针对一些特定元素，如标题标签（h1~h6），代码中也做了详细的样式重置，包括字体大小的设置：
```css
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
```
以上设置为不同级别的标题设置了不同大小的字体，从而保持页面的层次结构。
对于链接（a）元素，通常会设置默认下划线的去除，并规定鼠标悬停时的下划线显示：
```css
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
```
在列表元素（ul, ol）中，通过设置样式为none来去除默认的列表标记：
```css
ul, ol {
list-style: none;
}
```
针对图片元素（img）和表单元素（fieldset），代码中设置了边框为0：
```css
fieldset, img {
border: 0;
}
```
代码中还包含了一些特定于IE浏览器的清除浮动和盒模型的兼容性处理，这是因为在IE浏览器中，盒模型的解析和其他浏览器存在差异，需要特别处理才能确保布局的一致性。
```css
/*fixcenter*/
html, body {
height: 100%;
margin: 0 auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
}
/*Hides from IE-mac*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/*End hide from IE-mac*/
*+html .clearfix {
min-height: 1%; /* IE7 */
}
```
这些代码通过在不同浏览器中使用不同的技术手段，确保了页面布局能够适应不同浏览器的解析方式。
通过上述的重置规则，前端开发者可以确保网页在不同的浏览器中具有一致的显示效果，并且解决了浏览器间默认CSS样式差异带来的问题。
