{"id":15893837,"url":"https://github.com/chinanf-boy/modern-normalize-css-explain","last_synced_at":"2025-04-02T18:16:23.073Z","repository":{"id":90548466,"uuid":"122981572","full_name":"chinanf-boy/modern-normalize-css-explain","owner":"chinanf-boy","description":"explain : modern-normalize css 「 get lastest browser normalize 给最新浏览器一个初始化 」","archived":false,"fork":false,"pushed_at":"2018-02-27T05:55:33.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-08T08:47:13.673Z","etag":null,"topics":["css","explain","modern-normalize"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chinanf-boy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-26T14:30:51.000Z","updated_at":"2018-02-26T14:31:45.000Z","dependencies_parsed_at":"2023-07-18T11:00:34.325Z","dependency_job_id":null,"html_url":"https://github.com/chinanf-boy/modern-normalize-css-explain","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fmodern-normalize-css-explain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fmodern-normalize-css-explain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fmodern-normalize-css-explain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fmodern-normalize-css-explain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chinanf-boy","download_url":"https://codeload.github.com/chinanf-boy/modern-normalize-css-explain/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246866100,"owners_count":20846496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","explain","modern-normalize"],"created_at":"2024-10-06T08:13:51.962Z","updated_at":"2025-04-02T18:16:23.029Z","avatar_url":"https://github.com/chinanf-boy.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# modern-normalize\n\n「 规范化浏览器的默认样式 」\n\n[![explain](http://llever.com/explain.svg)](https://github.com/chinanf-boy/Source-Explain)\n    \nExplanation\n\n\u003e \"version\": \"1.0.0\"\n\n[github source](https://github.com/sindresorhus/modern-normalize)\n\n~~[english](./README.en.md)~~\n\n---\n\n## 与[`normalize.css`](https://github.com/necolas/normalize.css)不同\n\n-   小\n-   仅包括最新的Chrome,Firefox和Safari的标准化\n-   [设置 `box-sizing: border-box`](https://www.paulirish.com/2012/box-sizing-border-box-ftw/)\n-   [提高了默认字体的一致性](https://github.com/sindresorhus/modern-normalize/issues/3)\n-   [设置更可读的标签大小](https://github.com/sindresorhus/modern-normalize/issues/17)\n\n---\n\n\u003e 对于 css 来说, 很多东西更像是`经验之谈`, 我们比较能控制的也就只有实现`效果`, 一般-`css属性本身-实现-`很少涉及\n\n\u003e 所以, 总得来说, 大家理解一下, 问题, 解决-问题, 就够, 当然目标可以是-`css 专家啦`-:P\n\n---\n\n本文解释分三类\n\n比如\n\n``` css\n*, \n*::before,\n*::after {\n\tbox-sizing: inherit; \n}\n```\n\n1. `*` \u003ckbd\u003ecss选择器\u003c/kbd\u003e\n\n2. `::before` \u003ckbd\u003ecss伪类\u003c/kbd\u003e\n\n3. `box-sizing` \u003ckbd\u003ecss属性\u003c/kbd\u003e\n\n---\n\n## package\n\n``` json\n\t\"main\": \"modern-normalize.css\",\n```\n\n~~[更多信息](#dev-tool)~~\n\n## \u003e modern-normalize.css\n\n---\n\n### 1. Document\n\n\u003cdetails\u003e\n\n``` css\n*,\n*::before,\n*::after {\n\tbox-sizing: inherit; \n\t/* 继承 box-sizing 属性 */\n    /* \n    html {\n\tbox-sizing: border-box;\n} */\n}\n```\n\n#### 1.1 [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) \n\n\u003e [codepen例子](https://developer.mozilla.org/en-US/docs/Web/CSS/::before#Examples)\n\n\u003c/details\u003e\n\n---\n\n### 2. html\n\n\n\u003cdetails\u003e\n\n``` css\n/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/* Document\n   ========================================================================== */\n\n/**\n * Use a better box model (opinionated).\n */\n\nhtml {\n\tbox-sizing: border-box;\n}\n\n/**\n * Correct the line height in all browsers.\n */\n\nhtml {\n\tline-height: 1.15;\n}\n\n\n```\n\n#### 2.1 [box-sizing](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing)\n\n\u003e 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型\n\n\u003e 为什么应该 [将所有的元素的box-sizing都设为border-box。](https://css-tricks.com/international-box-sizing-awareness-day/)\n\n#### 2.2 `line-height`\n\n\u003e [它指定元素内行的最小高度-例子\u003e\u003e](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)\n\n\u003c/details\u003e\n\n---\n\n### 3. root\n\n\u003cdetails\u003e\n\n``` css\n/**\n * Use a more readable tab size (opinionated).\n */\n\n:root {\n\t-moz-tab-size: 4;\n\ttab-size: 4;\n}\n\n```\n\n#### 3.1 :root\n\n\u003e :root 这个 CSS 伪类 匹配文档树的根元素。对于 HTML 来说， :root 表示 html 元素，除了 优先级 更高之外，与 html 选择器相同。\n\n#### 3.2 tab-size\n\n\u003e [CSS 属性 tab-size 用于自定义制表符 (U+0009) 的宽度。](https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size)\n\n\u003c/details\u003e\n\n\n---\n\n### 4. Sections\n\n\u003cdetails\u003e\n\n``` css\n\n/* Sections\n   ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n 移除 所有浏览器上 的 margin\n */\n\nbody {\n\tmargin: 0;\n}\n\n/**\n * 提高所有浏览器中默认字体的一致性\n . (https://github.com/sindresorhus/modern-normalize/issues/3)\n */\n\nbody {\n\tfont-family:\n\t\t-apple-system,\n\t\tBlinkMacSystemFont,\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji',\n\t\t'Segoe UI Symbol';\n}\n\n/**\n 修正Chrome，Firefox和Safari中\n \n `section`和`article`上下文中\n \n `h1`元素的字体大小和边距。\n */\n\nh1 {\n\tfont-size: 2em;\n\tmargin: 0.67em 0;\n}\n\n``` \n\n#### 4.1 `-apple-system`\n\n\u003e ios 字体 ？？？\n\n#### 4.2 [`em` 动态计量单位 更多\u003e\u003e](#em)\n\n\u003e 默认 1em = 16px，2em = 32px\n\n\u003c/details\u003e\n\n---\n\n### 5. Grouping-content\n\n\u003cdetails\u003e\n\n\n```css\n/* Grouping content\n   ========================================================================== */\n\n/**\n * 在Firefox中添加正确的高度.\n */\n\nhr {\n\theight: 0;\n}\n\n```\n\n#### 5.1 `hr`\n\n\u003e hr 是一个 空元素. 在 `github` 中 markdown 文件 `---` 就是 `\u003chr\u003e` \n\n\u003chr\u003e\n\n\u003e 显示 一条线\n\n\n\u003c/details\u003e\n\n---\n\n### 6. Text-level-semantics\n\n\u003cdetails\u003e\n\n```css\n/* Text-level semantics\n   ========================================================================== */\n\n/**\n * 在Chrome，Edge和Safari中\n \n \t添加正确的文字修饰。\n */\n\nabbr[title] {\n\ttext-decoration: underline dotted;\n}\n\n/**\n * 添加正确的字体粗细 in Chrome, Edge, and Safari.\n */\n\n/*  */\nb,\nstrong {\n\tfont-weight: bolder;\n}\n\n/**\n * 1. 提高所有浏览器中默认字体的一致性\n . (https://github.com/sindresorhus/modern-normalize/issues/3)\n * 2.纠正所有浏览器中奇怪的'em`字体大小.\n */\n\ncode,\nkbd,\nsamp,\npre {\n\tfont-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* 1 */\n\tfont-size: 1em; /* 2 */\n}\n\n/**\n * 在所有浏览器中添加正确的字体大小.\n */\n\nsmall {\n\tfont-size: 80%;\n}\n\n```\n\n#### 6.1 [abbr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr)\n\n\u003e 使用该 `title` 属性来定义缩写的完整描述。\n\n``` html\n\u003cabbr title=\"Laugh Out Loud\"\u003eLOL\u003c/abbr\u003e\n```\n\n\u003cabbr title=\"Laugh Out Loud\"\u003eLOL\u003c/abbr\u003e\n\n---\n\n#### 6.2 text-decoration\n\n\u003e [指定的文本使用的装饰线条的外观](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)\n\n---\n\n#### 6.3 code\n\n\u003e 显示其内容在旨在表示该文本是计算机代码的一个短期片段的方式称呼\n\n```html\n\u003ccode\u003eselectAll()\u003c/code\u003e\n```\n\u003ccode\u003eselectAll()\u003c/code\u003e\n\n---\n\n#### 6.4 [kbd](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd)\n\n\u003e 代表嵌入式文本从一个键盘，语音输入，或任何其他文本输入设备，表示文本的用户输入的跨度\n\n``` html\n\u003ckbd\u003ehelp mycommand\u003c/kbd\u003e\n```\n\u003ckbd\u003ehelp mycommand\u003c/kbd\u003e\n\n---\n\n#### 6.5 samp\n\n\u003e 用来包围从一个计算机程序，其表示样品嵌入式文本（或引用）的输出\n\n``` html\n\u003csamp\u003eScan complete. Found \u003cem\u003eN\u003c/em\u003e results.\u003c/samp\u003e\n```\n\u003csamp\u003eScan complete. Found \u003cem\u003eN\u003c/em\u003e results.\u003c/samp\u003e\n\n#### 6.6 pre\n\n\u003e 代表预格式化文本将被准确地呈现写在HTML文件\n\n\u003e 此元素内的空白显示为已写入\n\n``` html\n\u003c!-- Some example CSS code --\u003e\n\u003cpre\u003e\nbody {\n  color:red;\n}\n\u003c/pre\u003e\n```\n\n\u003cpre\u003e\nbody {\n  color:red;\n}\n\u003c/pre\u003e\n\n---\n\n``` css\n/**\n * 防止`sub`和`sup`元素影响行中的高度\n  所有浏览器。\n */\n\nsub,\nsup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n\tvertical-align: baseline;\n}\n\nsub {\n\tbottom: -0.25em;\n}\n\nsup {\n\ttop: -0.5em;\n}\n```\n\n#### 6.7 [sub](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub)\n\n\u003e sub 下标\n\n``` html\nMason\u003csub\u003e1\u003c/sub\u003e \n```\nMason\u003csub\u003e1\u003c/sub\u003e \n\n#### 6.8 [sup](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup)\n\n\u003e sup 上标\n\n``` html\n\u003cvar\u003eE\u003c/var\u003e=\u003cvar\u003em\u003c/var\u003e\u003cvar\u003ec\u003c/var\u003e\u003csup\u003e2\u003c/sup\u003e\n```\n\u003cvar\u003eE\u003c/var\u003e=\u003cvar\u003em\u003c/var\u003e\u003cvar\u003ec\u003c/var\u003e\u003csup\u003e2\u003c/sup\u003e\n\n\u003c/details\u003e\n\n---\n\n### 7. Forms\n\n\u003cdetails\u003e\n\n``` css\n\n/* Forms\n   ========================================================================== */\n\n/**\n * 1. 更改所有浏览器中的字体样式.\n * 2. 删除 Firefox 和 Safari 中的边距.\n */\n\nbutton, \ninput,\noptgroup,\nselect,\ntextarea {\n\tfont-family: inherit; /* 1 */\n\tfont-size: 100%; /* 1 */\n\tline-height: 1.15; /* 1 */\n\tmargin: 0; /* 2 */\n}\n\n/**\n * 删除 Edge 和 Firefox text transform 的继承.\n * 1. 删除 Firefox text transform 的继承.\n */\n\nbutton,\nselect { /* 1 */\n\ttext-transform: none;\n}\n\n/**\n * 纠正无法在iOS和Safari中设置可点击类型的风格。\n */\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n\t-webkit-appearance: button;\n}\n\n/**\n * 在Firefox中删除内部边框和填充.\n */\n\nbutton::-moz-focus-inner,\n[type='button']::-moz-focus-inner,\n[type='reset']::-moz-focus-inner,\n[type='submit']::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n/**\n * 恢复先前规则未设置的焦点样式.\n */\n\nbutton:-moz-focusring,\n[type='button']:-moz-focusring,\n[type='reset']:-moz-focusring,\n[type='submit']:-moz-focusring {\n\toutline: 1px dotted ButtonText;\n}\n\n\n```\n\n#### 7.1 [button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)\n\n\u003e 表示一个可点击的按钮\n\n```\n\u003cbutton name=\"button\"\u003eClick me\u003c/button\u003e\n```\n[jsbin-demo](http://jsbin.com/tujazop/3/edit?html,css,output)\n\n---\n\n#### 7.2 [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)\n\n\u003e 使用，以接受来自用户的数据，以创建基于web的表单交互控制。\n\n``` html\n\u003cinput id=\"input1\" type=\"text\"\u003e\n```\n\n[jsbin-demo](http://jsbin.com/tujazop/3/edit?html,css,output)\n\n---\n\n#### 7.3 [`optgroup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup)\n\n\u003e 该HTML `\u003coptgroup\u003e`元素产生的内选择一组`\u003cselect\u003e`元素。\n\n``` html\n\u003cselect\u003e\n  \u003coptgroup label=\"Group 1\"\u003e\n    \u003coption\u003eOption 1.1\u003c/option\u003e\n  \u003c/optgroup\u003e \n  \u003coptgroup label=\"Group 2\"\u003e\n    \u003coption\u003eOption 2.1\u003c/option\u003e\n    \u003coption\u003eOption 2.2\u003c/option\u003e\n  \u003c/optgroup\u003e\n  \u003coptgroup label=\"Group 3\" disabled\u003e\n    \u003coption\u003eOption 3.1\u003c/option\u003e\n    \u003coption\u003eOption 3.2\u003c/option\u003e\n    \u003coption\u003eOption 3.3\u003c/option\u003e\n  \u003c/optgroup\u003e\n\u003c/select\u003e\n```\n\n\n[jsbin-demo](http://jsbin.com/tujazop/3/edit?html,css,output)\n\n---\n\n#### 7.4 [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)\n\n\u003eHTML `\u003cselect\u003e`元素表示，其提供选项菜单的控制：\n\n``` html\n\u003cselect name=\"text\"\u003e \u003c!--Supplement an id here instead of using 'text'--\u003e\n  \u003coption value=\"value1\"\u003eValue 1\u003c/option\u003e \n  \u003coption value=\"value2\" selected\u003eValue 2\u003c/option\u003e\n  \u003coption value=\"value3\"\u003eValue 3\u003c/option\u003e\n\u003c/select\u003e\n```\n\n[jsbin-demo](http://jsbin.com/tujazop/3/edit?html,css,output)\n\n---\n\n#### 7.5 [`textarea`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)\n\n\u003e 表示一个多行纯文本编辑控制。\n\n``` html\n\u003ctextarea name=\"textarea\"\n   rows=\"10\" cols=\"50\"\u003eWrite something here\u003c/textarea\u003e\n```\n\n[jsbin-demo](http://jsbin.com/tujazop/3/edit?html,css,output)\n\n---\n\n#### 7.6  text-transform\n\n\u003e [CSS属性指定如何利用元素的文本 \u003e\u003e](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)\n\n#### 7.7 [type='button']\n\n\u003e css 匹配 带有 `type` 属性 == `button` 的 element\n\n比如 `\u003cinput type=\"button\"\u003e`\n\n---\n\n[type=\"button\" jsbin-demo](http://jsbin.com/tujazop/1/edit?html,css,output)\n\n---\n\u003e 如上 - 解释 `[type='reset']`\n\n\n\u003e 如上 - 解释 `[type='submit']`\n\n---\n\n#### 7.8 [`-webkit-appearance`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/-moz-appearance)\n\n\u003e  以基于操作系统主题的平台本地样式显示元素。\n\n#### 7.9 [`::-moz-focus-inner`]\n\n\u003e ???\n\n#### 7.10 [`:-moz-focusring`]\n\n\u003e 非标准: 此功能是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为在未来可能会发生变化。\n\n\u003e [codepen例子 - 在 firefox 中打开](https://codepen.io/china-boy/pen/gvBjJr)\n\n---\n\n\n\n``` css\n/**\n * 修正Firefox中的 padding.\n */\n\nfieldset {\n\tpadding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 删除填充，以便在开发人员将它们清零时不会被捕获\n *    `fieldset` elements in all browsers.\n */\n\nlegend {\n\tpadding: 0;\n}\n\n/**\n * 添加正确的垂直对齐 in Chrome and Firefox.\n */\n\nprogress {\n\tvertical-align: baseline;\n}\n\n/**\n *  更正增量和减量按钮的光标风格in Chrome.\n */\n\n[type='number']::-webkit-inner-spin-button,\n[type='number']::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n/**\n * 1. 纠正奇怪的外观 in Chrome and Safari.\n * 2. 修正 outline 样式 in Safari.\n */\n\n[type='search'] {\n\t-webkit-appearance: textfield; /* 1 */\n\toutline-offset: -2px; /* 2 */\n}\n\n/**\n * 在MacOS上删除Chrome和Safari中的内部填充.\n */\n\n[type='search']::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n/**\n * 1. 纠正无法在iOS和Safari中设置可点击类型的风格.\n * 2. 字体属性更改为“继承” in Safari.\n */\n\n::-webkit-file-upload-button {\n\t-webkit-appearance: button; /* 1 */\n\tfont: inherit; /* 2 */\n}\n\n```\n\n#### 7.11 `fieldset`\n\n\u003e 被用于组数控制以及标签（`\u003clabel\u003e`一个web表单内）。\n\n#### 7.12 `legend`\n\n\u003e 代表其父内容的标题`\u003cfieldset\u003e`。\n\n#### 7.13 `progress`\n\n\u003e 显示表示任务的完成进度，通常显示为进度条的指示符。\n\n---\n\n[`fieldset`+`legend`+`progress` jsbin-demo](http://jsbin.com/tujazop/1/edit?html,css,output)\n\n---\n\n\n#### 7.14 `[type='number']`\n\n\u003e css 匹配 带有 `type` 属性 == `number` 的 element\n\n\u003e [如上解释-`[type='search']`]\n\n---\n\n[jsbin例子](http://jsbin.com/tujazop/2/edit?html,css,output)\n\n---\n\n#### 7.15 [`::-webkit-inner-spin-button`](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button)\n\n\u003e 用于风格号选择器的输入元件的旋转器按钮的内部部分。h\n\n#### 7.16 `::-webkit-search-decoration`\n\n\u003e 查询详述 ??\n\n#### 7.17 [`::-webkit-file-upload-button`](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-file-upload-button)\n\n\u003e 文件上传按钮, 省略了前缀, 全\n\n``` css\ninput[type=file]::-webkit-file-upload-button {\n  border: 1px solid grey;\n  background: #FFFAAA;\n}\n```\n\n\u003e 这个伪元素是非标准的，并且只支持WebKit / Blink兼容的浏览器，如Chrome，Opera和Safari（用-webkit前缀表示）\n\n\n\u003c/details\u003e\n\n\n\n---\n\n### 8. Interactive\n\n\u003cdetails\u003e\n\n```css\n\n/* Interactive\n   ========================================================================== */\n\n/*\n * 添加正确的显示 in Chrome and Safari.\n */\n\nsummary {\n\tdisplay: list-item;\n}\n\n```\n\n#### 8.1 summary\n\n\u003e 一个`\u003cdetails\u003e`元素的一个内容的摘要，标题或图例\n\n正如 `\u003e详细信息`\n\n``` html\n\u003cdetails\u003e\n\u003csummary\u003e详细🔎信息\u003c/summary\u003e\t\n\u003c/details\u003e\n```\n\u003cdetails\u003e\n\u003csummary\u003e详细🔎信息\u003c/summary\u003e\t\n\u003c/details\u003e\n\n\u003c/details\u003e\n\n---\n\n## \t其他\n\n### em\n\nem值的大小是动态的。\n\n定义font-size属性时，em等于适用于所讨论元素的父级的字体大小。\n\n如果您没有在页面上的任何位置设置字体大小，那么它就是浏览器的默认值，通常为16px。所以，默认1em = 16px，2em = 32px。\n\n如果您font-size在body元素上设置了20px，那么1em = 20px和2em = 40px。请注意，值 2 基本上是当前em大小的乘数。\n\n为了计算所需的任何像素值的em等效值，可以使用以下公式：\n\n```\nem = 所需要 element 像素 值 / 父 element font-size 「 像素单位 」\n```\n\n[mdn-`em`-说明](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Possible_approaches)\n\n## dev-tool","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fmodern-normalize-css-explain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinanf-boy%2Fmodern-normalize-css-explain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fmodern-normalize-css-explain/lists"}