CSS重置,常见元素的默认样式_影响父样式的css元素样式_如何在javascript中将样式属性重置为CSS默认值？ - 腾讯云开发者社区

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; /* 统一字体 */
  }