CSS常用设置

对于前端开发人员来说，最难的一步莫过于CSS（是否同感？）

在最近的项目中学习了一些CSS设置，特意来分享~

容器内容水平垂直居中

先准备个容器和内容（一个盒子）

<div id="app">
    <div class="container">
        <div class="content"></div>
    </div>
</div>

1.利用flex弹性盒子

 .container{
    display: flex;
    justify-content: center;
    align-items: center;
}

2.利用margin与定位

.container{
    position: relative;
}
.content{
    position: absolute;
    margin:auto;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

3.利用position定位实现

.container{
    position: relative;
}
.content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}

• top: 50%; 和 left: 50%;：这两行代码将 ".b" 元素的左上角移动到了其父元素（".a"）宽度和高度的 50% 处。但这通常会导致元素看起来并不完全居中，因为这是基于元素的边缘计算的。
• transform: translate(-50%, -50%);：这一行是非常关键的，它通过 CSS 变换来微调元素的位置。这里的负值（-50%）意味着元素会向上和向左各自回移自身宽度和高度的 50%，从而实现了完美的水平和垂直居中。

4.flex布局+margin

.container{
    display: flex;
}
.content{
    margin:auto;
}

5.使用Grid布局

 .container{
    display: Grid;
    place-items: center;
}

文本超长溢出截断

1.强制一行溢出显示省略号

.content{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

2.强制两行甚至多行

.content {
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

主要使用CSS的-webkit-line-clamp属性，这主要用于WebKit渲染引擎的浏览器（如Chrome和Safari），虽然不是CSS标准的一部分，但它是一个广泛支持的WebKit特定的扩展。

​​​​​​​

先写这俩，后续再补~