對于前端開發者來說,CSS 是一門不同于其他編程語言的“特殊”語言,雖然相對來說它比 HTML 簡單,但也容易出錯,特別是容易把很多常見的 CSS 規則忘掉。接下來,我將列出一些經常被遺忘的 CSS 規則和技巧,希望能對你們有所幫助。
/* 1.清除浮動 */ .clearfix:after { content: ""; display: block; clear: both; } /* 2.盒子模型 */ .box { box-sizing: border-box; } /* 3.去除鏈接的下劃線 */ a { text-decoration: none; } /* 4.去除列表元素的默認樣式 */ ul, ol { list-style: none; } /* 5. 設置字體 */ body { font-family: 'Helvetica', sans-serif; } /* 6. 隱藏元素 */ .hide { display: none; } /* 7. 去除多余空格 */ p { white-space: nowrap; } /* 8. 文字溢出省略號 */ .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 9. 指定背景圖片大小 */ .bg { background-size: cover; } /* 10. 相對定位并居中 */ .center { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }
以上是一些常見的 CSS 規則和技巧,雖然它們看起來很簡單,但是在實際開發中往往會被忽略。希望這篇文章能夠讓你記住這些基礎的 CSS 規則并在以后的開發中更加靈活運用。
上一篇css對搜索框下移
下一篇css寬度高度成比例