2024-10-24 常用重置网站样式

/* 通用重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* 清除列表的默认样式 */
ul, ol {
    list-style: none;
}
 
/* 去除链接的默认下划线 */
a {
    text-decoration: none;
}
 
/* 去除图片的边框 */
img {
    border: none;
}
 
/* 设置body的字体样式、背景色等 */
body {
    background-color: #ffffff;
    line-height: 1.5;
}
 
/* 清除输入框的边框、外边距等 */
input, textarea, button {
    outline: none;
    border: none;
    padding: 10px;
    margin: 5px 0;
    font-size: 16px;
    outline: 0;
}
 
/* 设置placeholder的字体样式 */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #bbb;
}
 
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #bbb;
    opacity: 1;
}
 
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #bbb;
    opacity: 1;
}
 
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #bbb;
}
 
/* 设置表单控件的外边距、内边距等 */
input, button {
    padding: 10px 15px;
}
 
/* 设置表单控件的hover和focus状态 */
input:hover, textarea:hover, button:hover {
    background-color: #f0f0f0;
}
 
input:focus, textarea:focus, button:focus {
    background-color: #e5e5e5;
    outline: 0;
}
 
/* 设置表格的边框、外边距等 */
table {
    border-collapse: collapse;
    width: 100%;
}
 
table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
}
 
/* 设置滚动条的样式 */
/* Works on WebKit browsers like Chrome, Safari and Opera */
::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
 
::-webkit-scrollbar-thumb {
    background: #888;
}
 
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
 
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

如果你只是想清除默认的边距啥的，可以这样

*{ margin:0; padding:0; }