css常用笔记

css垂直居中

使用Flexbox布局:将父元素设置为display: flex,并使用align-items: center属性。这将使子元素在父元素中垂直居中。

.parent {
  display: flex;
  align-items: center;
}

使用表格布局:将父元素的display属性设置为table,子元素的display属性设置为table-cell,并使用vertical-align: middle属性。

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

使用绝对定位和transform属性:将子元素的position属性设置为absolute,并使用top: 50%和transform: translateY(-50%)属性。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这些方法可以根据具体情况选择适合的方式来实现垂直居中效果。

css字体间距

在CSS中,你可以使用letter-spacing属性来控制文字的字间距。它可以接受一个长度值,表示每个字母之间的间隔大小。你也可以使用负值来减小字母之间的间隔。

以下是一个示例:

p {
  letter-spacing: 2px;
}

在上述示例中,p元素中的文字将会在每个字母之间增加2个像素的间距。

除了letter-spacing属性,你还可以使用word-spacing属性来控制单词之间的间距。它的使用方法类似于letter-spacing

p {
  word-spacing: 5px;
}

在上述示例中,p元素中的文字将会在每个单词之间增加5个像素的间距。

希望对你有所帮助!如有更多问题,请随时提问。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值