css tips什么意思

沽酒待人歸 6个月前 146浏览 0评论

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,掌握这些技巧可以提高开发效率和维护代码的方便度。