初步掌握 Mark Otto 版的 CSS Reset

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在前端开发过程中,常常遭遇浏览器之间样式差异的问题。这是因为不同浏览器的默认样式表不同,而这些默认样式表会影响我们的页面布局和样式。

为了解决这个问题,CSS Reset 是一种很好的解决方案。 CSS Reset 可以重置浏览器的默认样式表,让我们自己定义的样式更准确地表达出来。

Mark Otto 是 Bootstrap 的创始人之一,他开发了一份 CSS Reset,被称为 Mark Otto 版的 CSS Reset。在这篇文章中,我们将初步掌握这份 CSS Reset。

什么是 CSS Reset?

CSS Reset 是一份 CSS 代码,在页面加载时覆盖浏览器的默认样式表。通常,这份 CSS Reset 包含许多“重置”和“规范化”行为,以确保不同浏览器的默认样式表产生的影响尽可能小。

通常, CSS Reset 会包含许多一般的重置行为,例如:

-----
---
-- -
  ------- --
  -------- --
-

这里我们使用了 CSS 的通配符 *,意为“所有元素”。换句话说,在这里我们重置了所有元素的 margin 和 padding。这个重置也可以针对特定的元素进行,例如:

-------
------
---------
-------
-------- -
  ------------ --------
  ---------- -----
  ------------ -----
  ------- --
-

这里我们把所有输入元素的字体大小调整为 100%,取消了它们的 margin,使它们之间的距离更为统一。

Mark Otto 版的 CSS Reset

Mark Otto 版的 CSS Reset 是一份被广泛用于 Bootstrap 框架和其他前端项目的 CSS Reset。它与一般的 CSS Reset 不同之处在于,它把更多的重点放在了 HTML5 元素和 WAI-ARIA 角色的辅助属性上。

HTML5 有一些新的元素,例如 <section><article><nav><header><footer>,它们与旧的元素比较不同,具有一些新的默认样式,包括 margin 和 padding。 Mark Otto 版的 CSS Reset 取消了这些元素的默认样式,从而避免它们导致的影响。

在 HTML5 中,还有 WAI-ARIA 角色的辅助属性。这些角色可以让辅助工具(如屏幕阅读器)更好地理解页面。例如,我们可以为我们的页面定义一个“导航”区域:

---- ------------------
  ---
------

这里的 role="navigation" 存在于 HTML5 规范中,它为 nav 元素定义了一个被辅助工具理解的角色。 Mark Otto 版的 CSS Reset 对这些角色进行了一些重置,以确保它们的 styling 符合我们的预期。

这是一份典型的 Mark Otto 版的 CSS Reset:

--
 - ---- ----
 - --------- ------
 - ---------------------------------------------------
 --
 
-- --------
 -
 - -- ------ --- ------- ---- ------ --- ----- -- ----- ---- ------------
 - -- ------- --- ---- ------ -- --- ---------
 - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
 - -- ------ --- ------ -- --- ---------
 --

---- -
  ------------ -----------
  ------------ ----- -- - --
  ------------------------- ----- -- - --
  --------------------- ----- -- - --
  ------------------- ---------- -- - --
  ---------------------------- ------------
-

--
 - ------ --- ---- ---------- -- ------ ----- -- -- ---
 --

- -
  ----------------- ------------
-

--
 - ------- ----------- ---- ------- --- ---- ----- ------- -- --- ---------
 --

---------
------- -
  -------------- --
-

--
 - ------- --------- ------------- ------- ------ --- ----- ---------
 --

------- -
  -------- ---- -------
-

--
 - ------- ----------- --- ----------- -- ------------- ---- -- --- ---------
 --

--- -
  ------------ ---------- ---------- -- - --
  ---------- ---- -- - --
-

-- -----
 -
 - -- ------ --- ------- ---- ------ --- ---------- ----- -- ----- ---- ------------
 - -- ------- --- ---- -------- -- ---- --- ---
 - -- ------- --- ----- ----------- ---- ---------- -------- -- ---
 - -- ------ --- ----------- -- ---- --------- -- ---- --- --------
 - -- ------ --- ----- ------- -- ------ --- ------ -- ------
 --

------
-------
-------
---------
-------- -
  ------------ ----------- -- - --
  ---------- ----- -- - --
  ------------ ----- -- - --
  ------ -------- -- - --
  -------- -- -- - --
  ------- -- -- - --
  ----------------- ------------
  ----------- -----------
  -------------- --
  ------------------- -----
     ---------------- -----
          ----------- -----
-

-- ------ --- ----- ------ --- ------- -- -------- --
 
-------------------------
----------------------- -
  ------- --
  -------- --
-

-- ------- ------- -- ------- ------------- -- ------- ----- ------------ -- --- -- ----------- --

----- -
  ------------ -------
-

-- --------
 -
 - -- ------- --- --------- -- ----- --------- ----- -- --- --- -------
 - -- ------ ---- ---------- -- --------- -- -------
 --
 
-------- -
  --------- ----- -- - --
  ------------ -------- -- - --
  ---------- -------- -- - --
  ------------ -------- -- - --
-

这份 Reset 涵盖了许多常见元素和情况。例如,它处理了 <html> 元素的文字调整问题,以及输入元素的 background-color 和 border-radius 等。

结论

Mark Otto 版的 CSS Reset 是一份被广泛采用的 CSS Reset。它会确保浏览器的默认样式不会影响我们的页面布局和样式。

本文介绍了 Mark Otto 版的 CSS Reset 的一些重要方面和代码示例。我们希望读者能够对 CSS Reset 有更深入的了解,并在实际项目中应用它,解决样式兼容性问题。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67221d782e7021665e0a5c9b


猜你喜欢

  • CSS Flexbox 完整指南

    在前端开发中,整理页面布局是至关重要的。传统的布局方法通常需要通过调整元素的大小和位置的方式来完成。但是,在某些情况下仍然无法实现令人满意的布局,这就需要强大的 CSS Flexbox。

    9 天前
  • Node.js 性能优化的经验教训

    作为前端开发人员,我们不仅需要掌握各种前端技术,同时也需要了解后端技术。而 Node.js 就是一种非常流行的后端技术。使用 Node.js 开发应用程序可以有效地提高应用程序的速度和性能,但是如果应...

    9 天前
  • RxJS 应用之处理表单校验

    RxJS 应用之处理表单校验 在前端开发中,表单校验是一个非常常见的需求。RxJS 可以帮助我们更加有效地处理表单校验,并且可以使代码更加可读和易于维护。本文将介绍如何使用 RxJS 处理表单校验,同...

    9 天前
  • 如何在 Next.js 项目中快速引入 Tailwind CSS

    在现代的前端开发中,快速地开发出美观易用的前端界面是一个极为重要的需求。其中,CSS 是非常重要的一部分,因为可以通过 CSS 来控制网站的样式和排版。Tailwind CSS 是一个非常流行的 CS...

    9 天前
  • Webpack 4.x 中如何开启 Tree Shaking 功能?

    Tree Shaking 是一种优化代码的技术,能够自动删除 JavaScript 中未引用的代码。使用 Tree Shaking 技术可以有效减少代码体积,提高网页加载速度,这对于前端开发来说非常重...

    9 天前
  • PM2如何实现Node.js应用程序的安全升级

    随着 Node.js 应用程序的发布方式和版本控制的不同,我们可能会遇到 Node.js 应用升级带来的风险问题。而 PM2 作为 Node.js 应用的进程管理器,它可以帮助我们解决这个问题。

    9 天前
  • ES8 之 promise 的静态方法 finally 解析

    在 ES8 中,Promise 的静态方法新增了 finally 方法,该方法可以在一个 Promise 完成、拒绝后,无论结果如何,都会执行一段代码。这对于最终清理工作和避免重复代码非常有用。

    9 天前
  • Redux 中如何优化数据交互和传输速度

    Redux 是一个非常流行和强大的 JavaScript 库,用于管理应用程序中的共享状态和数据流。它通过引入单一路径的数据流和可预测性的状态转换来简化应用程序的复杂度。

    9 天前
  • Kubernetes 中容器的存储管理

    前言 Kubernetes 是一个容器编排系统,为容器化应用提供了可靠的运行环境。在 Kubernetes 中,容器的存储管理是一个至关重要的问题,它关系到应用的性能、可靠性以及数据安全性。

    9 天前
  • CSS Reset 升级之路:如何处理伪元素

    众所周知,前端开发者在开始网页设计前,通常会先进行 CSS Reset 操作来消除浏览器默认样式的影响。然而,在实际开发中,我们可能会遇到一些问题,例如无法清除伪元素的默认样式。

    9 天前
  • Vue.js Webpack 简明入门教程及遇到的问题

    前言 Vue.js 是一个渐进式的JavaScript框架,可以被用于构建单页面应用程序及 UI 组件库。Webpack 是一个现代化的 JavaScript 应用程序打包器。

    9 天前
  • Angular2/4/5 HTTP 请求的全局处理

    在 Angular2/4/5 中,我们经常需要发起 HTTP 请求来获取数据或与后端 API 进行交互。但如果我们在每个组件中都单独处理 HTTP 请求的话,会产生很多重复代码,如果需要更改请求处理的...

    9 天前
  • Cypress 测试驱动开发的实践经验

    什么是 Cypress? Cypress 是一个基于 Node.js 的端到端测试框架,可以用来测试 web 应用,支持自动化测试、交互式测试以及单元测试等多种测试方法。

    9 天前
  • GraphQL 中的查询参数中如何正确地传递数组?

    在 GraphQL 中,我们经常需要向查询参数中传递数组。但是,如果不正确地传递数组,就会导致意想不到的结果。因此,本文将介绍如何正确地传递数组。 1. 什么是数组? 在计算机科学中,数组是一种数据结...

    9 天前
  • RESTful API 如何处理异常?

    RESTful API(Representational State Transfer),以其可靠的性能和扩展性,被越来越多的应用于Web应用程序中。在实际开发中,异常处理是一个非常重要的问题。

    9 天前
  • 如何使用 Tailwind CSS 在 React Native 中快速构建 UI

    在 React Native 中构建 UI 是前端开发中最常见和基础的操作,但是设计和创建美观的 UI 不仅需要一定的技术知识和经验,也需要在时间和成本方面进行权衡。

    9 天前
  • 在 Express 项目中使用 Babel

    在 Express 项目中使用 Babel 随着前端技术的不断发展和更新换代,前端项目的复杂程度和难度也越来越高。对于急于保持竞争力的开发者而言,学习并使用新技术是必须的,而 Babel 就是其中之一...

    9 天前
  • Vue.js 单页应用中的前端单元测试实践

    随着 Web 应用程序的复杂度不断增加,基于单页应用 (SPA) 的开发已经成为一个常见趋势。Vue.js 作为流行的前端框架之一,其在 SPA 开发中的应用越来越广泛。

    9 天前
  • 使用 ESLint 检测常见的代码错误:代码更健康,代码更快乐

    在前端开发中,代码质量是非常重要的。好的代码质量可以让代码更易于维护、更健康、更幸福。 ESLint 是一个 JavaScript 代码检测工具,它可以帮助你检测常见的代码错误,例如: 使用了未定义...

    9 天前
  • 如何在 Chai 断言测试中检查对象是否具有某些特定的方法

    在前端开发中,为保证代码的质量和正确性,我们通常需要进行各种测试。Chai 是一个流行的 JavaScript 断言库,可以帮助我们编写更容易维护和阅读的测试用例。

    9 天前

相关推荐

    暂无文章