css公共样式总结(持续总结)

岁月如歌_

于 2022-08-17 17:51:32 发布

阅读量841

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/namechenfl/article/details/126391324

版权

本文介绍了CSS布局技巧，包括使用`.flex`实现弹性布局，`.align-center`、`.justify-between`等调整元素对齐方式。此外，详细讨论了文本颜色`.text-999`到`.text-94`的渐变效果，以及`.text-center`文本居中和`.text-cut`系列实现文本截断的策略。这些样式在网页设计中起到关键作用，提升用户体验。

摘要由CSDN通过智能技术生成


.flex {
  display: flex;
}
.align-center{
    align-items: center;
}
.justify-between{
    justify-content: space-between;
}
.justify-center{
    justify-content: center;
}
.justify-around{
    justify-content: space-around;
}
.text-999 {
  color: #999;
}
.text-666 {
  color: #666;
}
.text-333 {
  color: #333;
}
.text-94 {
  color: #949494;
}
.text-center {
  text-align: center;
}
.margin-lr-15{
    margin: 0 15px;
}
.padding-lr-15{
  padding: 0 15px;
}
.margin-top-15{
  margin-top: 15px;
}
.padding-top-15{
  padding-top: 15px;
}
.text-bold{
    font-weight: 600;
}
.at-modal__overlay{
  background-color:rgba(0,0,0,.7 )
}
.text-cut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.text-cut-2,.text-cut-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.text-cut-2 {
    -webkit-line-clamp: 2;
}

.text-cut-4 {
  -webkit-line-clamp: 4;
}