css初始化

/* CSS 初始化 (Reset) */

/* 移除所有元素的默认边距和填充 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 确保 padding 和 border 包含在元素的宽度和高度内 */
}

/* 移除列表项的默认样式 */
ul, ol {
    list-style: none;
}

/* 移除链接的下划线 */
a {
    text-decoration: none;
}

/* 移除按钮、输入框等表单元素的默认样式 */
button, input, textarea, select {
    outline: none;
    border: none;
    background: transparent;
}

/* 移除图片的默认底部空白间隙 */
img {
    vertical-align: middle;
}

/* 统一字体设置 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

解释说明：

1. 移除默认边距和填充：通过 * { margin: 0; padding: 0; }，可以确保所有元素没有默认的边距和填充，避免不同浏览器之间的样式差异。
2. 设置 box-sizing：box-sizing: border-box; 确保元素的宽度和高度包含内边距和边框，使得布局更加一致。
3. 移除列表项样式：ul, ol { list-style: none; } 可以移除无序列表和有序列表的默认样式（如圆点或数字）。
4. 移除链接下划线：a { text-decoration: none; } 移除链接的默认下划线，可以根据需要重新定义样式。
5. 移除表单元素默认样式：button, input, textarea, select { ... } 移除按钮、输入框等表单元素的默认样式，方便自定义。
6. 移除图片底部空白间隙：img { vertical-align: middle; } 解决图片作为行内元素时可能出现的底部空白问题。
7. 统一字体设置：body { font-family: Arial, sans-serif; line-height: 1.6; } 设置全局字体和行高，确保页面文本的一致性。
8. 清除浮动：.clearfix::after { ... } 是一个常见的清除浮动的方法，确保浮动元素不会影响其他元素的布局。