一、介紹
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/zh-tw/n/369737.html
微信掃一掃 
支付寶掃一掃 