去除浏览器默认样式

通常情况下，不同浏览器可能会为相同元素设置一些默认样式，因此就可能导致开发的页面在不同浏览器下打开效果不同。
为此，在开发页面的时候，我们需要把浏览器的默认样式去除，全部由自己编写，以此来保证自己的网页在所有浏览器的显示效果都是一样的。（下面以我的谷歌浏览器为例）

1.枚举式

废话不多说，代码来一波：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浏览器默认样式</title><style>.box1 {border: 1px solid orange;}</style>
</head>
<body><div class="box1"></div><p>我是段落p</p><p>我是段落p</p><p>我是段落p</p><ul><li>item1</li><li>item2</li><li>item3</li></ul>
</body>
</html>

从下图我们可以看到，div其实并没有挨着浏览器的开头，段落之间明显间隔较大，ul列表也有明显的向右突出现象。

我们在页面上按F12，将鼠标放到page上可以发现，page上下左右默认margin为8

然后我们再放到div，p和ul上，分别可以发现如下三张图：

由此可知，p的margin为6，ul的margin为16，并在向左方向有40px的padding，而且表格项的前面都有一个小黑点。（注意：上面div里1px的border是自己设置的）
这里我们就把他们全部去掉，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浏览器默认样式</title><style>.box1 {width:100px;height: 100px;border: 1px solid orange;}body{margin:0;}p{margin:0;}ul{margin: 0;padding:0;/*去除列表项前的小黑点*/list-style: none;}</style>
</head>
<body><div class="box1"></div><p>我是段落p</p><p>我是段落p</p><p>我是段落p</p><ul><li>item1</li><li>item2</li><li>item3</li></ul>
</body>
</html>

现在显示如下：

各个元素之间已经像亲兄弟般挨着，浏览器的默认样式清除完毕。

2.简单页面草率式

直接用*指代所有的元素，然后把最碍事，最会被设置为元素默认样式的两个属性设为0。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浏览器默认样式</title><style>.box1 {width:100px;height: 100px;border: 1px solid orange;}/*        body{margin:0;}p{margin:0;}ul{margin: 0;padding:0;!*去除列表项前的小黑点*!list-style: none;}*/*{margin: 0;padding: 0;}</style>
</head>
<body><div class="box1"></div><p>我是段落p</p><p>我是段落p</p><p>我是段落p</p><ul><li>item1</li><li>item2</li><li>item3</li></ul>
</body>
</html>

3.装杯专业式

写一个reset.css文件，代码内容如下：

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: 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;
}

然后在html文件中直接引用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浏览器默认样式</title><link rel="stylesheet" href="../css/reset.css"><style>.box1 {width:100px;height: 100px;border: 1px solid orange;}</style>
</head>
<body><div class="box1"></div><p>我是段落p</p><p>我是段落p</p><p>我是段落p</p><ul><li>item1</li><li>item2</li><li>item3</li></ul>
</body>
</html>

注意：因为样式是越在下面优先级越高，因此，重置的link语句必须放在设置样式的最前面。

23.去除浏览器默认样式相关推荐

css知多少（4）——解读浏览器默认样式
原文:css知多少(4)--解读浏览器默认样式上一节<css知多少(3)--样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下 ...
去苹果浏览器默认样式
去苹果浏览器默认样式 input,textarea,button { -webkit-appearance: none; border-radius:0px; border:none;} 转载于:ht ...
浏览器默认样式有哪些，如何覆盖
1.user agent stylesheet是浏览器默认样式表,是浏览器默认样式. 2.不同浏览器的默认样式不同个,甚至同种浏览器不同版本的默认样式也可能不同.其中google中对body的默认样式 ...
reset清除所有浏览器默认样式
温馨提示 reset 的目的不是清除浏览器的默认样式, 这仅是部分工作. 清除和重置是紧密不可分的. reset 的目的不是让默认样式在所有浏览器下一致, 而是减少默认样式有可能带来的问题. rese ...
CSS公共清除浏览器默认样式
/*Vue隐藏*/ [v-cloak] {display: none; } /*清除样式*/body, ol, ul, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, ...
屏蔽浏览器默认样式 user agent stylesheet
user agent stylesheet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
去除button默认样式
border: 0;background-color: transparent;outline: none;
用css去除chrome、safari等webikt内核浏览器对控件默认样式
有这么一个webkit的私有属性: -webkit-appearance:none; /*去除input默认样式*/ 添加该样式,并且值为'none'时即可取消浏览器对于控件的默认样式. 另外这个属性 ...
reset.css 重置浏览器的默认样式
@charset "utf-8"; /*!* @名称:base.css* @功能:1.重设浏览器默认样式* 2.设置通用原子类*/ /* 防止用户自定义背景颜色对网页的影响,添加让 ...

23.去除浏览器默认样式

文章目录

去除浏览器默认样式

1.枚举式

2.简单页面草率式

3.装杯专业式

23.去除浏览器默认样式相关推荐

最新文章

热门文章