重置浏览器的默认样式（css reset）

（1）定义：首先css reset指的是重置浏览器的默认样式
（2）作用：因为现在的浏览器很多，并且每个浏览器都有自己的默认样式，这样就会导致一个页面在多个浏览器下展示产生差异，所以我们需要做一些处理使每个浏览器下展示一致，故需要css reset
（3）内容：第一个：*{padding:0;margin:0;border:0;}第二个：你所用到的元素{padding:0;margin:0;border:0;}，然而第一个虽然写起来简单，但是它却会将所有的标签重置，而我们可能没有必要将那么多的元素都重置，浪费系统资源，降低性能，所以只给自己页面需要重置元素重置默认样式
（4）缺陷：并不是所有的标签都有默认的margin，padding，reset而且连后面有用的样式也干掉了,并且在移动端和电脑端有bug

时间： 2024-08-03 11:24:30

重置浏览器的默认样式（css reset）的相关文章

重置默认样式 css reset

html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body {  color:#666666; font-family:

清除浏览器默认样式——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 如果打不开可以

浏览器默认样式及reset

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

简单重置移动端默认样式

*, *:before, *:after { -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0);//移动端系统中点击某标签会触发默认的高亮背景框显示,与outline的默认样式类似,但更加简单粗暴 -moz-user-select: -moz-none;//禁止用户选中文本,-moz-none,是写给老版本的ff的

关闭safari浏览器button默认样式

前两天又遇到一个头疼的问题,在Chrome上调试好的样式,去到手机上打开,傻了... 这是什么鬼... 搜了一下,才知道这是appearance属性搞的鬼... 比如你想让一个div拥有button的样式,可以这么写 div { appearance: button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari 和 Chrome */ } 所以取消掉默认的button样式,自己写的才能显示出

清楚浏览器的默认样式

@charset "UTF-8";/*css 初始化 */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0;} fieldset, img, input, button { border: none; padding: 0; margin: 0; outline-style: none;} ul, ol {

样式重置 取消input默认样式

body, h1, h2, h3, h4, h5, h6, hr, p,blockquote, dl, dt, dd, ul, ol, li,pre, form, fieldset, legend, button, input, textarea, th, td, img{border:medium none;margin: 0;padding: 0;list-style-type: none;}

关于reset.css的疑问：为什么一定要重置浏览器样式？

自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样一个样式表里往往会有一大段对“浏览器样式”的清除与重置.刚开始做前端的时候一度感觉,能写出来这么一个样式表似乎很酷.很牛:做时间久了,也自己开始针对不同项目写自己的reset.css了,但也不外乎是一大堆重置样式,有时候都不关心浏览器里每个元素有什么样的默认样式,只是唯恐漏掉哪个元素没有把样式重置掉

css的reset和常用的html标签的默认样式整理

先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em;} blockquote{margin: 16px 1em;} ul{list-style-type: disc;padding-left:40px;margin: 1em 0;} ol{list-style-type: decimal; padding-left:40px; margin:1em