在 Web 前端开发中，CSS 是一种用来为网页添加样式的语言。在使用 CSS 进行网页布局时，我们通常会遇到两个概念：CSS Reset 和 CSS 布局。
CSS Reset
在 HTML 标签和浏览器之间存在差异的情况下，CSS Reset 的目的是为了让页面在所有浏览器中保持一致的表现。例如，不同浏览器对于列表的默认样式是不同的，CSS Reset 可以将所有浏览器的样式重置为相同的值，以便于我们自定义样式。
实用的 CSS Reset 样式表可以让我们在不同的浏览器中都能获得一致的样式，这对于我们开发网站时的可维护性和可读性都是有利的。以下是一些常见的 CSS Reset 样式：
// www.javascriptcn.com code example
html, body, div, span, applet, object, iframe, h1,
h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub,
sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }CSS 布局
CSS 布局主要用于定义网页中 HTML 元素的位置和排列方式。在 CSS 布局中，我们通常会使用不同的盒子模型、定位和浮动等属性，帮助我们实现网页中的各种布局效果。下面是一些常用的 CSS 布局样式：
// www.javascriptcn.com code example
.box { width: 100px; height: 100px; padding: 10px; border: 1px solid #000; }
.box-content { width: 100%; height: 100%; background-color: #ccc; }
/* 盒子模型 */
.box { box-sizing: content-box; } /* 默认盒子模型 */
.box { box-sizing: border-box; } /* IE6 */
.box { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } /* 全浏览器支持的盒子模型 */
/* 布局 */
.container { width: 960px; margin: 0 auto; } /* 中心布局 */
.column { float: left; width: 25%; margin-right: 5%; } /* 列布局 */
.row:after { content: ''; clear: both; display: block; } /* 清除浮动 */CSS Reset 与 CSS 布局的联系和区别
CSS Reset 与 CSS 布局是两个概念，并没有什么本质的联系。CSS Reset 主要用于解决浏览器之间的样式差异，让网页在所有浏览器中获得一致的表现；而 CSS 布局则是用来定义网页中 HTML 元素的位置和排列方式，实现不同的布局效果。
不过，在实际开发中，我们通常会在 CSS Reset 后使用 CSS 布局，这样可以在统一的样式表基础上进行网页布局，提高开发效率。同时，CSS Reset 可以解决一些默认样式对于布局效果的影响，让我们更加自由地控制网页的样式。
总的来说，CSS Reset 和 CSS 布局都是 Web 前端开发中非常基础和重要的一部分，对于保证网页的可维护性和可读性都具有非常重要的作用。
结语
本文主要介绍了 CSS Reset 和 CSS 布局的联系和区别。CSS Reset 可以用来统一浏览器之间的样式差异，保证网页在不同浏览器中的一致性；CSS 布局则是用来定义网页中 HTML 元素的位置和排列方式，实现不同的布局效果。本文中也列举了一些常见的 CSS Reset 样式和布局样式，供大家参考使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d64aada941bf7134bfe8bb