这是一个小 CSS 样式表,是著名的库,作为 CSS 基础样式的一部分,可消除客户端渲染不一致问题。

地址是 https://necolas.github.io/normalize.css/

别小看这不到 200 行的小 CSS ,这可是一群大佬花了几百个小时调出来的。解决的问题比如说 line-height,不同浏览器的默认 line-height 是不同的,如果不注意这个问题,那么我们之后产出的网页则会有问题。使用了这个库后,几乎所有属性的默认值就就统一了。

所以以后在写 CSS 表前把这个放到所有表的最前面,然后再写自己的 CSS 表,这样会省下很多时间来应付各浏览器的不兼容情况。

html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
} body {
margin: 0
} main {
display: block
} h1 {
font-size: 2em;
margin: 0.67em 0
} hr {
box-sizing: content-box;
height: 0;
overflow: visible
} pre {
font-family: monospace, monospace;
font-size: 1em
} a {
background-color: transparent
} abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
} b,
strong {
font-weight: bolder
} code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
} small {
font-size: 80%
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
} sub {
bottom: -0.25em
} sup {
top: -0.5em
} img {
border-style: none
} button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
} button,
input {
overflow: visible
} button,
select {
text-transform: none
} button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button
} button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0
} button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
} fieldset {
padding: 0.35em 0.75em 0.625em
} legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
} progress {
vertical-align: baseline
} textarea {
overflow: auto
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0
} [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto
} [type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px
} [type="search"]::-webkit-search-decoration {
-webkit-appearance: none
} ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
} details {
display: block
} summary {
display: list-item
} template {
display: none
} [hidden] {
display: none
}

前端必备的 CSS 库,normalize.css的更多相关文章

  1. 移动端(视口(meta),像素比,二倍图(图片,背景图,精灵图),css初始化(normalize.css),特殊样式,常见屏幕尺寸)

    1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta  name = ...

  2. 清除浏览器默认样式——css reset & normalize.css

    css reset 自己挨个清除很麻烦 可以使用网上一些css库——css reset 把模板复制到css文件最上方,其他的样式我们自己编写来覆盖它们 但是这个也有一些弊端,会把一些本来需要的样式给清 ...

  3. CSS之Normalize.css的使用(重置表)

    本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在 ...

  4. Reset.css和Normalize.css样式表初始化相关

    (1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...

  5. normalize.css源码解析

    什么是normalize.css?  它是为了帮助我们统一各个浏览器的样式和消除bug的css库. 为什么需要normalize.css,有什么好处? 不像一些reset.css,normalize. ...

  6. Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构

    在前一篇文章中分享了搭建组件库的基本开发环境.创建了 foo 组件模块和组件库入口模块,本文分享组件库的样式架构设计. 1 常见的 CSS 架构模式 常见的 CSS 架构模式有很多:OOCSS.ACS ...

  7. Normalize.css 初识

    一. 用来干嘛的 一个现代的.准备好了支持 HTML5 技术,并且要替代 CSS Reset 处理样式的理念. Normalize.css 使浏览器渲染所有元素更加一致,并且符合现代标准.它只是针对那 ...

  8. Normalize.css:优化重置CSS默认属性

    Normalize.css:优化重置CSS默认属性 官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necol ...

  9. normalize.css 中文版

    ## normalize.css 中文版 normalize.css 原地址:http://necolas.github.io/normalize.css/reset 太暴力了,这个 normaliz ...

  10. 轻谈Normalize.css

    Normalize.css 是 * ? Normalize.css只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset , Normali ...

随机推荐

  1. 开源即时通讯IM框架 MobileIMSDK v6.2 发布

    一.更新内容简介 本次更新为次要版本更新,进行了若干优化(更新历史详见:码云 Release Nodes).可能是市面上唯一同时支持 UDP+TCP+WebSocket 三种协议的同类开源IM框架. ...

  2. 修改led-core.c 让led的delay_on和delay_off时间不会应为trigger配置改版而重置为1HZ

    先列一下leds trigger的设置流程 echo none > trigger 的流程 led_trigger_set() | led_stop_software_blink() echo ...

  3. 聊一聊 C#异步 任务延续的三种底层玩法

    一:背景 1. 讲故事 最近聊了不少和异步相关的话题,有点疲倦了,今天再写最后一篇作为近期这类话题的一个封笔吧,下篇继续写我熟悉的 生产故障 系列,突然亲切感油然而生,哈哈,免费给别人看程序故障,是一 ...

  4. Solution -「POI 2013」LAB-Maze

    \(\mathscr{Description}\)   Link.   构造一个边平行与坐标轴, 顶点是整点, 相邻边互相垂直, 且逆时针遍历顶点时转向 (向左或向右) 符合给定字符串的不自交多边形. ...

  5. uwp IProgress<T>进度通知。

    主要是利用 Pp_ProgressChanged 报告进度: private void BtnDownload_Click(object sender, RoutedEventArgs e) { va ...

  6. MyBatis的深入原理-架构设计以及实例分析

    MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简单.优雅.本文主要讲述MyBatis的架构设计思路,并且讨论MyBatis的几个核心部件,然后结合一个select查询实例, ...

  7. WebSocket详解:技术原理、代码演示和应用案例

    1.内容简介 本文将简要介绍 WebSocket 的由来.原理机制以及服务端/客户端实现,并以实际客户案例指导并讲解了如何使用 WebSocket 解决实时响应及服务端消息推送方面的问题.本文适用于熟 ...

  8. AVX512

    最近接触到SIMD编码,就不可避免的查到了AVX指令集,两者有什么关系呢,了解一下? 问:AVX是什么? 答:是一套指令集 下面具体看: AVX 以下内容主要转载自:AVX指令集是什么?它的应用又有哪 ...

  9. 218:解释LINUX文件系统权限

  10. ORACLE 分页和行限制

    行限制:示例 (此语法从12C版本开始支持) 以下语句返回具有最低employee_id值的 5 名员工: SELECT employee_id, last_name FROM Employees O ...