在編寫CSS代碼時,我們常常會發現一些重復的代碼,比如一些通用的樣式或者是針對某一類元素的樣式。這時候我們就需要使用一些可復用的代碼,以減少重復性的工作并提高代碼的可維護性。
/* 常用復用代碼 */ /* 重置默認樣式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 清除浮動 */ .clearfix::after { content: ""; display: block; clear: both; } /* 文字省略號 */ .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 橫向居中 */ .center { display: flex; justify-content: center; align-items: center; } /* 垂直居中 */ .vertical-center { position: relative; top: 50%; transform: translateY(-50%); } /* 高度自適應 */ .auto-height { height: auto; } /* 寬度自適應 */ .auto-width { width: auto; } /* 取消鏈接下劃線 */ a { text-decoration: none; } /* 禁用選中文本 */ .no-select { user-select: none; } /* 禁止鼠標事件 */ .no-pointer { pointer-events: none; }
以上是一些常用的CSS復用代碼,可以根據實際的需求進行適當的修改和補充。
上一篇css布局為何那么麻煩
下一篇css布局邊框有縫隙