CSS Tips指的是CSS技巧或者CSS技巧集合,供前端开发者参考和学习。以下是几个常用的CSS Tips:
/* Tip 1. 盒模型 */ /* 默认盒模型(content-box) */ .box1 { width: 300px; height: 200px; padding: 10px; border: 5px solid #000; } /* IE盒模型(border-box) */ .box2 { width: 300px; height: 200px; padding: 10px; border: 5px solid #000; box-sizing: border-box; } /* Tip 2. 居中 */ /* 水平居中 */ .center { width: 200px; margin: 0 auto; } /* 垂直居中 */ .center { height: 200px; display: flex; justify-content: center; align-items: center; } /* Tip 3. 清除浮动 */ .clearfix::after { content: ""; display: table; clear: both; } /* Tip 4. 文本溢出省略号 */ .ellipsis { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tip 5. 圆角 */ .rounded { border-radius: 50%; } /* Tip 6. 背景填充 */ /* 渐变背景 */ .gradient { background: linear-gradient(to bottom right, #f00, #0f0); } /* Tip 7. 阴影 */ .shadow { box-shadow: 5px 5px 5px #888; } /* Tip 8. 媒体查询 */ @media screen and (max-width: 768px) { /* 屏幕宽度小于768px时样式 */ }
以上是一些常用的CSS Tips,掌握这些技巧可以提高开发效率和维护代码的方便度。
上一篇 css times
下一篇 mysql的驱动的加载驱动