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

css reset

自己挨个清除很麻烦

可以使用网上一些css库——css reset

把模板复制到css文件最上方，其他的样式我们自己编写来覆盖它们

但是这个也有一些弊端，会把一些本来需要的样式给清除了，比如h标签，本来是分级别的，但是使用css reset后，所有都变得一样了

normalize css

所以改用normalize css

我们可以使用 npm安装：npm install normalize.css

也可以用百度静态资源库：cdn.code.baidu.com

　　如果打不开可以用类似的资源库:

https://www.bootcdn.cn/
       http://jscdn.upai.com/

http://staticfile.org/

将文件通过link标签引入

使用Bootstrap等库

可以不用引入上边的两个css文件，因为设计的时候 一般都事先重置了默认样式

原文地址：https://www.cnblogs.com/superjishere/p/11602559.html

时间： 2024-12-20 01:22:52

清除浏览器默认样式——css reset & normalize.css的相关文章

浏览器默认样式及reset

写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding等.这就是不同浏览器初始化样式不同的原因.也是为什么要做css reset的原因. 注:chrome等可以在调试工具里看到默认样式,是不可修改的,置灰的,如下图.各浏览器默认样式详情请参考<浏览器默认样式对比表>. 1.浏览器默认样式 这里无需过多赘述,最直观的就是上表,给大家几个地址: 1.浏览

css知多少（4）——解读浏览器默认样式

上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的.而最有的说的就是浏览器的默认样式. 不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情.虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读咱们慢慢道来(只说重点,比较容易的或者不常用的

base.css(重设浏览器默认样式)

@charset "utf-8"; /* @名称: base @功能: 重设浏览器默认样式 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { color:black; background:white; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p

浏览器默认样式(user agent stylesheet)+cssreset

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐.不同浏览器甚至同一浏览器不同版本的默认样式是不同的.这才带来了很多的坑,让大家用cssreset去填.. 一.浏览器默认样式 了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助. 所以先看看浏览器默认样式长什么样: FF

CSS Reset（CSS重置）

CSS Reset是指重设浏览器的样式.在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小. 但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致. 下面介绍几个主流的CSS Reset代码: 1.Eric Meyer html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ab

浏览器默认样式（User Agent Stylesheet）

原文:http://www.zjgsq.com/898.html 不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}: 不过现在说的可不只是这些.基本上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大小.字体选择.字符样式等.也许一个很漂亮的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即使是没有CSS Bug的情况也会变得结构混乱起来,我都是浏览器默认样式在作怪. 因此,我们在生成CSS样式规则

浏览器默认样式

1 html, address, 2 blockquote, 3 body, dd, div, 4 dl, dt, fieldset, form, 5 frame, frameset, 6 h1, h2, h3, h4, 7 h5, h6, noframes, 8 ol, p, ul,center, 9 dir, hr, menu, pre{ display: block} 10 /* 以上按照block显示,没有规定的则按照默认的inline显示 */ 11 12 li { display:

你们有关注过HTML标签的默认样式和浏览器默认样式吗？

HTML默认样式 html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示,未显示的将以内联元素显示,该列表针对HTML4版本,部分元素在XHTML1中将废弃*/ li { display:

移动端重置浏览器默认样式代码

字体单位:rem @charset "utf-8"; /* *create by chengkun 19/9/2015. *version 1.0. *Reset the browser default style. */ /* 设置盒模型样式 */ * { box-sizing: border-box; } article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figca