一、介绍
CSS重置样式表是一组在编码中用来增强可预测性的规则集。它帮助我们抵消浏览器默认样式引起的不一致性，使得所有浏览器的显示效果更为统一。简单来说，它将所有的HTML元素的各种CSS属性都设置为一个预定义的值，以便我们从一个’干净的’状态开始编写CSS。
二、重置规则
1. 通用选择器规则
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
这些规则的作用是让页面元素的盒模型表现得更为一致，同时消除浏览器的默认padding和margin。
2. 排版元素规则
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
这些规则目的是去除一些浏览器默认设置盒模型的表现特性，以达到排版效果的标准一致性。
3. 表单元素规则
button, input {
background-color: transparent;
border: none;
outline: none;
}
button {
cursor: pointer;
}
这些规则的作用是达到去除input和button元素的默认样式。
三、使用
使用CSS重置样式表很简单，只需要在HTML的head标签中引入reset.css文件。
<head>
<link rel="stylesheet" href="reset.css">
</head>
请注意，CSS重置样式表应该在所有自定义样式表之前引入，以确保正在使用的样式表不会受到其影响。
四、总结
通过使用CSS重置样式表，我们能够消除一个浏览器默认样式引起的不一致性，并从干净的状态开始编写CSS，达到更统一的页面显示。
原创文章，作者：TFUTD，如若转载，请注明出处：https://www.506064.com/n/369737.html
微信扫一扫 
支付宝扫一扫 