CSS重置,常见元素的默认样式
CSS重置
CSS重置概述
CSS重置是调整默认样式的一种方法，它可以解决不同浏览器显示不一致的情况。通常，重置CSS包括元素大小、布局、边距、填充、字体样式、边框等，通过标准化页面元素属性以实现良好的视觉效果及用户体验。
CSS重置方法
方法一：浏览器默认值
直接使用浏览器的默认样式，适用于熟悉不同浏览器默认样式的情况。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}方法二：Bootstrap 提供的前置样式重置
Bootstrap 提供了许多默认的 CSS 重置，可以减少开发成本及时间。
.navbar, .offcanvas, .tabbar, .nav, .breadcrumbs, .brand, .pagination, .alert,
.btn, .form-group, label, .popover, .list-group-item, .table td, .table th,
.dropdown-menu, .badge, .pager, .progress, .media, .modal, .card, .breadcrumb,
.card .card-header, .card-body, .button-dropdown, .table-responsive, .icheck,
.select2-container, .datepicker, .timepicker-picker, .input-group-append, .input-group-prepend,
.icheck-default, .uneditable-input, .input-group-text {
border: none;
margin: 0;
padding: 0;
font-family: inherit;
line-height: inherit;
}方法三：全局样式重置
通过定义全局样式表，统一修改全站的默认样式。
/* 重置全局样式 */
* {
margin: 0; /* 取消边距 */
padding: 0; /* 取消内边距 */
box-sizing: border-box; /* 适应边框 */
font-family: Arial, sans-serif; /* 统一字体 */
}CSS重置优势
- 规范化页面元素属性：通过统一标准，保证不同浏览器下页面样式一致；
- 提高界面体验：提高页面响应速度，增强用户体验；
- 易于维护和更新：在保持统一标准的同时，方便后期维护及升级。
CSS重置应用场景
- 统一标准、开发响应式网页；
- 优化页面性能，兼容低版本浏览器（如IE6,7）；
- 应用前端框架（如Bootstrap, Foundation等），减少开发成本。
腾讯云前端CSS Reset推荐
腾讯云提供的前端 CSS 重置包含了业界主流方法和通用规则，适用于页面规范化及前端开发框架应用。推荐使用 腾讯云开发文档 中提供的前端 CSS Reset 规范。
相关·内容
1回答
我有一个应用程序，在不同的地方有许多按钮。仅在IE中，我注意到大多数按钮在鼠标移动时都会变成蓝色，而不是所有的按钮。
为什么有些按钮不会变成蓝色？
浏览 3提问于2014-07-10得票数 0
如果您创建了一个viewPanel，其中一个列包装在多行上(请参阅下面的代码，查看我如何包装该列)，所有其他列都会将文本移动到行的底部，与已包装的列的底部相等。在FF和Chrome中，同样的列位于顶部。，他们想要他们在IE的顶端。在我正在进行包装的专栏中，我使用了以下公式，我想知道这是否有区别 contentType="HTML" width="150px，
浏览 5提问于2012-05-11得票数 0
回答已采纳
4回答
我想知道CSS中所有常见的实践，这些东西你会自动地放在最后的网站上，而没有真正的思考。text-decoration:underline;}td {vertical-align:top;}
有谁知道我在哪里能找到这类东西的完整清单吗
浏览 4提问于2011-11-14得票数 0
回答已采纳
5回答
为什么我不能做一个简单的重置：而不是：
html, body, div, span, object, iframe
浏览 10提问于2015-08-11得票数 6
回答已采纳
有没有样式表可以在每个浏览器中将输入视图设为默认视图？我的意思是不是每个浏览器都有相同的视图，但每个浏览器中仍然是默认视图。
UPD。当然，当我有一些需要覆盖回默认视图的父css时就是这种情况，特别是对于特定的元素。
浏览 1提问于2009-08-27得票数 0
如前所述，如果将CSS文件添加为第二个样式表链接，我不确定用于重置默认浏览器设置的CSS文件是否正常。你能帮我吗？谢谢
浏览 1提问于2020-02-03得票数 0
回答已采纳
所以我正在练习一些初学者的HTML和CSS，我正在做这个演示站点。我在Chrome上做了我想要的一切，当我在其他浏览器(Edge、Firefox和Internet Explorer)上测试它时，顶部的菜单栏都放错了地方。不是太高就是太低。<head> <link href="css/styles.css
浏览 5提问于2016-10-23得票数 0
我对HTML很陌生，我正在看关于的教程。
作者决定使用normalize.css，在style.css中也使用* {margin:0; padding:0;}。我认为normalize.css已经包含了这段代码，我们不必再次指定* {margin:0; padding:0;}。这是正确的吗？
浏览 0提问于2018-09-29得票数 0
回答已采纳
1回答
我的页面顶部有一个导航栏。它在Chrome中运行良好，但是当我在Firefox中测试页面时，它会使导航栏获得大量额外的填充。
此页面是问题中的页面。编辑：现在修好了，但是我不知道是什么引起了这个问题，也不知道它是如何解决的，除了我关掉了电脑，离开了一天，第二天早上就回来了，一切都修好了。
浏览 3提问于2015-07-02得票数 0
当我更改为粘滞时，两边都有很小的间隙，即使是width: 100%。它还会在顶部留下一个空隙。这也发生在页脚，它具有相同的样式，除了边框-顶部。我如何使它变得粘性而又没有缝隙？
浏览 26提问于2020-12-26得票数 0
回答已采纳
在我的Codecademy课程中，有一个关于通过以下方式重置默认值的课程：* { padding: 0;这是正确的定义吗?它的用途是什么？
浏览 1提问于2020-06-22得票数 0
我正在开发一个浏览器扩展，将它的UI添加到页面DOM中。在某些页面上，我遇到了某些样式影响UI的问题。为了解决这个问题，我将我的UI放在一个公共根目录下，该根目录会将大多数样式重置为默认值。有时我遗漏了一些东西，这会导致我的UI出现视觉故障。(即页面CSS文件设置了form { width: 80%; }，因此我需要将form { width: auto; }添加到我的重置样式中。
浏览 0提问于2013-10-23得票数 6
在php生成的页面上有几个这样的元素：
<td class="defaultTDStyle" style="color:userDefinedCustomColor" id="myTDId"></td>所以有一个默认样式，我应用了几个额外的样式，它们覆盖了CSS中定义的样式。有没有办法从javascript中删除这些添加<e
浏览 0提问于2010-08-18得票数 25
回答已采纳
例如，这是不是很糟糕的做法？img { height: auto;}img-responsive或者将我的h1样式化为h6标记。
浏览 0提问于2019-11-23得票数 0
我的目标是只支持IE10+，以及最流行的浏览器的最新版本。我想知道是否有css重置只为那些特定的浏览器忽略旧的IE和Moz修复。
我找不到，但也许我在谷歌上搜索的时候忽略了一些。
浏览 1提问于2013-01-29得票数 6
回答已采纳
1回答
我想把我的页面分成3个部分，有3个不同的背景：问题是背景有一个填充。我希望它显示从页面的开始和下一个500像素的高度。这是我的HTML：<head> <title></title>
<link rel="stylesheet" type=&q
浏览 0提问于2012-07-28得票数 1
回答已采纳
11回答
在应用CSS重置之后，我想恢复html元素的正常行为，比如: p，h1..h6，strong，ul和li。现在，当我说正常时，我的意思是，例如，p元素在使用时添加空格或类似于结果的回车符，或者添加h1标签的字体大小和粗体，以及空格。我意识到如何设置样式完全取决于我自己，但我想让一些更常见的元素恢复正常行为(至少作为一个起点，我可以在以后进行调整)。
浏览 5提问于2008-09-19得票数 54
为什么“标题”和“文本”之间有这么大的空隙？"background:#000"> </p>
对于这两个元素，绝对没有其他的样式，但是仍然有那么多未使用的空间。
浏览 7提问于2013-12-17得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
