前端必备的 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 ...
随机推荐
- MySQL 开启配置binlog以及通过binlog恢复数据
-------------------------------------------------------------------------------------- # 查看binlog的列表 ...
- nginx平台初探-3
过滤模块简介 (90%) 执行时间和内容 (90%) 过滤(filter)模块是过滤响应头和内容的模块,可以对回复的头和内容进行处理.它的处理时间在获取回复内容之后,向用户发送响应之前.它的处理过程分 ...
- python实现网页爬虫示例
用python里面的 requests 与 BeautifulSoup 结合,实现网页爬虫示例. 示例一:抓取中国省份: import requests from bs4 import Beautif ...
- ctfshow--web10 php代码逻辑漏洞with rollup注入
dirsearch没有扫到文件 查看源代码发现 有个style.css文件点击查看 查看index.phps代码 又是代码审计 点击查看代码 <?php $flag=""; ...
- 在没有网关的IP地址上编写路由,实现另一个网段可以访问到该主机
应用场景:该主机两个网卡分别对应两个IP地址 192.168.1.2网段为医保网,并且主机使用了改网段的的网关.192.168.100.99网段地址为互联网地址,没有使用该网段的网关. 我们开发小组通 ...
- 自定义Ollama安装路径
由于Ollama的exe安装软件双击安装的时候默认是在C盘,以及后续的模型数据下载也在C盘,导致会占用C盘空间,所以这里单独写了一个自定义安装Ollama安装目录的教程. Ollama官网地址:htt ...
- 本地部署DeepSeek
没想到新年最热闹的地方之一会是互联网,刷爆朋友圈的除了新年祝福还有DeepSeek.揣着一颗好奇心试了试,竟有一种发现新大路的感觉.估计是围观的人太多,在线的版本有时候会出现连不上的情况,好奇心驱使之 ...
- 解决使用yarn安装依赖出现“The engine "node" is incompatible with this module. Expected version "^14.18.0 || ^16.14.0 || >=18.0.0". Got "17.9.0"”的问题
1.问题描述 某天在使用yarn安装依赖的时候,突然出现如下错误导致安装依赖终止: The engine "node" is incompatible with this modu ...
- Kali Linux 安装教程
Kali Linux 安装教程 下载镜像文件 Kali官网下载 访问Kali官网(https://www.kali.org/ ),根据下图所示进行下载 清华大学开源软件镜像站下载 访问清华大学开源软件 ...
- centos7关闭不必要的服务和端口
云服务器开启很多不必要的端口,造成安全隐患 TCP 25端口:邮件服务 systemctl stop postfix 53端口 :域名解析服务 systemctl stop rhel-domainna ...