前端必备的 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 ...
随机推荐
- 总是被低估,从未被超越,揭秘QQ极致丝滑背后的硬核IM技术优化
本文由腾讯云开发者张曌.毕磊分享,原题"QQ 9"傻快傻快"的?!带你看看背后的技术秘密",本文进行了排版和内容优化等. 1.引言 最新发布的 QQ 9 自上线 ...
- .NET 9 new features-分布式追踪支持、HTTP/3 改进以及更好的容器镜像支持
.NET 9 针对云原生开发进行了显著优化,重点改进了分布式追踪.HTTP/3 支持和容器镜像优化等方面. 这些特性极大地提升了 .NET 在现代云原生应用中的适配性与开发效率. 1. 设计原理 1. ...
- MySQL 中information_schema、mysql、performance_schema、sys 简介
一.information_schema简介在MySQL中,把 information_schema 看作是一个数据库,确切说是信息数据库.其中保存着关于MySQL服务器所维护的所有其他数据库的信息. ...
- springboot-总结列表
一.Spring Boot 具有以下特点: 1. 独立运行的 Spring 项目 Spring Boot 可以以 jar 包的形式独立运行,Spring Boot 项目只需通过命令" jav ...
- 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多线程技术的高性能实践
背景 我在业余时间开发了一款自己的独立产品:升讯威在线客服与营销系统.陆陆续续开发了几年,从一开始的偶有用户尝试,到如今的 QPS 突破 240 次/秒,连接数突破 4000,日请求数接近 1000 ...
- APSI - 0
最近安装了APSI库,尝试了多种方法,现在总结一下! 先提下安装环境需求: 第三方依赖包: Mac vcpkg 使用vcpkg一键安装 1.先安装vcpkg (1)第一种方法 git clone gi ...
- STM32IO口模拟IIC时序
正点原子IIC讲解:https://www.bilibili.com/video/BV1o8411n7o9/?spm_id_from=333.337.search-card.all.click& ...
- Centos7搭建mailx邮件应用
邮件发送原理图 邮件用户代理(MUA,Mail User Agent)邮件传送代理(MTA,Mail Transport Agent)邮件分发代理(MDA,Mail Deliver Agent) 邮件 ...
- java中反射-字节码和类加载器
多态的一个表现 子类类型赋值给父类 Father f1 = New Son() 调用子类方法报错. 调用父类方法OK.这个就是多态 一个对象能用什么方法,并不是取决于 它有什么方法. 而是取决于引用变 ...
- SaaS+AI应用架构:业务场景、智能体、大模型、知识库、传统工具系统
大家好,我是汤师爷~ 在SaaS与AI应用的演进过程中,合理的架构设计至关重要.本节将详细介绍其五个核心层次: 业务场景层:发现和确定业务场景 智能体层:构建可复用的智能应用 大模型层:采用最合适的大 ...