前端必备的 CSS 库,normalize.css
这是一个小 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的更多相关文章
- 移动端(视口(meta),像素比,二倍图(图片,背景图,精灵图),css初始化(normalize.css),特殊样式,常见屏幕尺寸)
1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta name = ...
- 清除浏览器默认样式——css reset & normalize.css
css reset 自己挨个清除很麻烦 可以使用网上一些css库——css reset 把模板复制到css文件最上方,其他的样式我们自己编写来覆盖它们 但是这个也有一些弊端,会把一些本来需要的样式给清 ...
- CSS之Normalize.css的使用(重置表)
本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在 ...
- Reset.css和Normalize.css样式表初始化相关
(1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...
- normalize.css源码解析
什么是normalize.css? 它是为了帮助我们统一各个浏览器的样式和消除bug的css库. 为什么需要normalize.css,有什么好处? 不像一些reset.css,normalize. ...
- Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
在前一篇文章中分享了搭建组件库的基本开发环境.创建了 foo 组件模块和组件库入口模块,本文分享组件库的样式架构设计. 1 常见的 CSS 架构模式 常见的 CSS 架构模式有很多:OOCSS.ACS ...
- Normalize.css 初识
一. 用来干嘛的 一个现代的.准备好了支持 HTML5 技术,并且要替代 CSS Reset 处理样式的理念. Normalize.css 使浏览器渲染所有元素更加一致,并且符合现代标准.它只是针对那 ...
- Normalize.css:优化重置CSS默认属性
Normalize.css:优化重置CSS默认属性 官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necol ...
- normalize.css 中文版
## normalize.css 中文版 normalize.css 原地址:http://necolas.github.io/normalize.css/reset 太暴力了,这个 normaliz ...
- 轻谈Normalize.css
Normalize.css 是 * ? Normalize.css只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset , Normali ...
随机推荐
- 开源即时通讯IM框架 MobileIMSDK v6.2 发布
一.更新内容简介 本次更新为次要版本更新,进行了若干优化(更新历史详见:码云 Release Nodes).可能是市面上唯一同时支持 UDP+TCP+WebSocket 三种协议的同类开源IM框架. ...
- 修改led-core.c 让led的delay_on和delay_off时间不会应为trigger配置改版而重置为1HZ
先列一下leds trigger的设置流程 echo none > trigger 的流程 led_trigger_set() | led_stop_software_blink() echo ...
- 聊一聊 C#异步 任务延续的三种底层玩法
一:背景 1. 讲故事 最近聊了不少和异步相关的话题,有点疲倦了,今天再写最后一篇作为近期这类话题的一个封笔吧,下篇继续写我熟悉的 生产故障 系列,突然亲切感油然而生,哈哈,免费给别人看程序故障,是一 ...
- Solution -「POI 2013」LAB-Maze
\(\mathscr{Description}\) Link. 构造一个边平行与坐标轴, 顶点是整点, 相邻边互相垂直, 且逆时针遍历顶点时转向 (向左或向右) 符合给定字符串的不自交多边形. ...
- uwp IProgress<T>进度通知。
主要是利用 Pp_ProgressChanged 报告进度: private void BtnDownload_Click(object sender, RoutedEventArgs e) { va ...
- MyBatis的深入原理-架构设计以及实例分析
MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简单.优雅.本文主要讲述MyBatis的架构设计思路,并且讨论MyBatis的几个核心部件,然后结合一个select查询实例, ...
- WebSocket详解:技术原理、代码演示和应用案例
1.内容简介 本文将简要介绍 WebSocket 的由来.原理机制以及服务端/客户端实现,并以实际客户案例指导并讲解了如何使用 WebSocket 解决实时响应及服务端消息推送方面的问题.本文适用于熟 ...
- AVX512
最近接触到SIMD编码,就不可避免的查到了AVX指令集,两者有什么关系呢,了解一下? 问:AVX是什么? 答:是一套指令集 下面具体看: AVX 以下内容主要转载自:AVX指令集是什么?它的应用又有哪 ...
- 218:解释LINUX文件系统权限
- ORACLE 分页和行限制
行限制:示例 (此语法从12C版本开始支持) 以下语句返回具有最低employee_id值的 5 名员工: SELECT employee_id, last_name FROM Employees O ...