如果你是一個前端開發人員,你一定知道 CSS 樣式表是我們網站的表現力,但是不同瀏覽器的默認樣式會導致網站在不同瀏覽器下顯示效果不一致。解決這一問題的方法就是通過 CSS 重置樣式。今天,我們來聊一聊 2018 年 CSS 重置樣式最佳實踐。
經過多年的發展,已有很多非常出色的 CSS 樣式表重置工具,比如:normalize.css
、reset.css
等等。這些工具已有較高的使用率和較為成熟的解決方案。當然,你也可以基于你的網站特點自己編寫樣式表,只需要遵循以下幾個基本原則:
1. 重置元素的默認外部邊距和內部填充。
*{ margin:0; padding:0; }
2. 設置常用元素的默認樣式。比如設置鏈接顏色和鼠標懸浮的下劃線。
a{ color:#333; text-decoration:none; transition:all .2s ease; /*頁面元素動畫效果,不影響性能*/ } a:hover{ text-decoration:underline; }
3. 清除浮動。
.clearfix:after{ content:''; clear:both; display:block; } .clearfix{ *zoom:1; }
4. 設置表格邊框和垂直對齊方式。
table{ border-collapse:collapse; /*去除表格間隔線*/ border-spacing:0; /*去除表格間距*/ } td{ vertical-align:middle; }
總之,通過 CSS 重置樣式,我們可以在不同的平臺下實現更為一致的 UI 展現,為用戶提供更好的體驗。你可以選擇使用已有工具,也可以根據需求自主編寫,但需要注意多瀏覽器的兼容性和自我封裝和命名,保證我們的代碼規范和結構清晰。
下一篇css金色是什么