CSS 重置技术
元素默认样式显示问题
每个浏览器对不同元素都有自己的默认样式。Google Chrome 渲染正文标题、段落、列表等,与 IE 浏览器可能都有所不同。这就导致同一个页面元素在不同的浏览器中显示效果不一致,而有所差异。
什么是 CSS 重置技术
为确保跨浏览器兼容性,CSS 重置技术 已经广泛应用。
所谓 CSS 重置技术就是让每个常用的 HTML 元素采用一个预定义的样式并为所有浏览器提供一套统一的样式,通常包括去掉默认大小、内外边距或附加样式。
因为 CSS 是从顶到底层叠,所以 CSS 重置技术必须放在样式表最顶部,这样才不会被覆盖而失效。
如何使用 CSS 重置技术
目前最流行的是 Eric Meyer 的 CSS 重置样式,已经被新的 HTML5 元素采纳为默认样式。除此以外,还有 Nicolas Gallagher 的 Normalize。
浏览器输入:https://meyerweb.com/eric/tools/css/reset/ 复制 CSS Reset 代码
我已经复制 CSS Reset v2.0 版本代码,如下:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
CSS 重置技术的更多相关文章
- Web前端技术研究:Css hack技术---令人沮丧的技术
我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- CSS重置样式表
网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...
- 用DIV+CSS切割多背景合并图片 CSS Sprites 技术
很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...
- CSS sprites 技术
Css Sprites 技术逐渐流行,各大网站上都可以看到它的身影. 但从本质上,Css Sprites 只是 Css 技术的一个使用小窍门,初学者也能快速上手. Css Sprites 简单解释: ...
- CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera
转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...
- CSS开发框架技术OOCSS编写和管理CSS的方法
目前最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似技术(如BEM).这些方法试图对CSS采用面向对象的编程原则.样式语言与面向对象的设计原则在概念之间存在一定的问题.欠缺经验的人员可能不会 ...
- CSS 重置默认样式
1. 概述 1.1 说明 css重置样式主要是为了让各个浏览器的CSS样式有一个统一的基准,使HTML元素样式在跨浏览器时有一致性的效果. 备注:浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的 ...
- CSS Sprites (CSS 精灵) 技术
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
随机推荐
- PAT A1052 Linked List Sorting
题意:给出N个结点的地址address.数据域data以及指针域next,然后给出链表的首地址,要求把在这个链表上的结点按data值从小到大输出.样例解释:按照输入,这条链表是这样的(结点格式为[ad ...
- 自动化kolla-ansible部署ubuntu20.04+openstack-victoria之准备安装-09
自动化kolla-ansible部署ubuntu20.04+openstack-victoria之准备安装-09 欢迎加QQ群:1026880196 进行交流学习 准备安装 #controller1 ...
- 不一样的角度理解Vue组件
什么是组件 以Java.C#等面向对象编程语言的角度去理解Vue组件,能够发现组件和面向对象编程的方式和风格很相似.一切事物皆为对象,通过面向对象的方式,将现实世界的事物抽象成对象,现实世界中的关系抽 ...
- 2021软工-CSDN APP分析
项目 内容 这个作业属于哪个课程 2021春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 案例分析作业要求 我在这个课程的目标是 提升软件开发能力,提高团队协作能力 这个作业在哪个具体方面 ...
- D - D ZOJ - 1151 (字符串操作)
For each list of words, output a line with each word reversed without changing the order of the word ...
- odoo字段属性列举
罗列一些Odoo中的字段属性,基本包含大部分的属性. 常用字段属性 平平无奇常用字段属性 string:字段的标题,在UI视图标签中使用.它是可选项,如未设置,会通过首字母大写及将空格替换成为下划线来 ...
- php将IP地址转换为真实地址的方法
方法使用示例如下 define('WEB_ROOT',dirname(__FILE__)); echo convertip('111.63.244.69','full'); func converti ...
- 【网络协议】 RPC vs Http
- UVA11039
题意: 给你一个序列,由n个数字组成,每个数字的绝对值都不相同,然后让你从这n个数中拿出一些数,组成一个绝对值递增并且正负交替的最大序列,问组成的最大序列的最大长度是多少? 思路: ...
- SpringMVC中<mvc:default-servlet-handler/>的作用
问题所在:DispatcherServlet请求映射配置为"/",则Spring MVC将捕获Web容器所有的请求,包括静态资源的请求,Spring MVC会将它们当成一个普通请求 ...