自定义 CSS 重置

心灵的制造商

已于 2022-05-01 10:10:23 修改

阅读量380

点赞数

分类专栏： CSS 前端 HTML 文章标签： css html css3

于 2022-04-26 16:50:51 首次发布

本文链接：https://blog.csdn.net/DJCBPL/article/details/124431290

版权

HTML 同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

CSS

26 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

reset自定义 CSS 重置

介绍

这是我使用了很多年的 CSS 重置样式，看箱底的东西分享。作为一个开发者，我觉得您应该拥有一份这样的重置。把它带入你的项目，并随着时间的推移，当你学习新事物或发现新技巧时，它会进行调整。

1、新建一个css 文件，
2、复制代码放到刚新建的css文件中，
3、在你的项目中头部link引入。

样式代码

*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

.clearfix{display:inline-table}
.clearfix:after{content:".";display:block}
* html .clearfix{height:1%}
*+html .clearfix{min-height:1%}

真的非常有用，强烈建议推荐使用，可解决你在项目中很多棘手的问题。

HTML代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand” />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
<meta name="keywords" content="登录界面，淘宝搜索酷设网，网站开发" />
<meta name="description" content="" />
<link rel="icon" href="assets/images/favicon.jpg">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/login-style.css">
</head>

<body>
模板
</body>
</html>