CSS布局对齐居中、文字换行、动态css

呆呆没头脑

已于 2025-03-27 17:25:11 修改

阅读量360

点赞数 3

文章标签： css 笔记前端

于 2025-02-26 22:15:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_49596922/article/details/145888431

版权

一、布局、对齐、居中

二、transform元素与position元素

三、动画属性

四、文字换行与省略

五、动态css

一、布局、对齐、居中

水平布局：justify-content，控制该元素下的子元素的水平方向的排列方式
垂直布局：align-content，控制该元素下的子元素的垂直方向的排列方式
对齐方式：
1. align-item：该元素下的子元素垂直方向的对齐方式
2. align-self：该元素的对齐方式
3. 以上在display:flex下

居中方式：

水平居中：
```
margin:0 auto
```
垂直居中：
```
height:100px
line-height:100px
```
文本居中：
```
text-align:center
```

图像居中：

  margin-left: auto;
  margin-right: auto;

50%居中：

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

二、transform元素与position元素

transform元素进行2\3d转换（translate，rotate等），能进行元素的位置定位，position是专门进行位置定位的元素。

transform：进行2d/3d元素的转换，translate水平方向，rotate旋转等进行定位。
position：元素在页面中的位置设置，fixed,absolution,relative等，利用top、left等定位。
在进行动画时，transform不会进行重绘回流，利用GPU进行硬件加速达到性能优化相关文档，同样还有opacity和visibility。

三、动画属性

animation: name duration timing-function delay iteration-count direction;

四、文字换行与省略

word-break：指定了怎样在单词内断行。break-all：允许在单词内部断行，例如超出容器宽度时会将单词拆分为多行显示。而white-space设置如何处理元素内的空白字符

文字超出省略号表示：

单行省略：

  /* 内容过长显示成省略号（内容显示为一行） */
  white-space: nowrap;/*设置不换行*/
  overflow: hidden; /*设置隐藏*/
  text-overflow: ellipsis; /*设置隐藏部分为省略号*/

多行省略：

 /* 内容过长显示两行，多余为省略号 */
   text-overflow:ellipsis;/*设置隐藏部分为省略号*/
   overflow: hidden;/*设置隐藏*/
   display: -webkit-box;
   -webkit-line-clamp: 2;/*设置显示行数，此处为2行，可设置其他数字*/
   -webkit-box-orient: vertical;

五、动态css

：class绑定类名

对象语法：

:class="{ css类1: 布尔变量（true，则该变量生效）, css类2: 布尔变量 }"

数组语法：
```
:class="[类名变量, 类名变量]"
```
计算属性或者方法直接return

：style绑定style

对象语法：

:style="{ color: string变量, fontSize: string变量 + 'px' }"

数组语法：

:style ="[ 对象变量1, 对象变量2]"

以上变量可用三元运算符进行直接赋值