前端技巧第三期CSS公用代码常用

1. 设置宽高比例

通过 aspect-ratio 属性,可以根据指定的宽度自动调整高度
.box {
  width: 90%;
  aspect-ratio: 16/9;
}

2.逻辑属性

使用 margin-blockmargin-inline 替代传统的 margin-top、margin-right 等,更加简洁直观
.box {
  margin-block: 5px 10px;    /* 上边距 5px,下边距 10px */
  margin-inline: 20px 30px;  /* 左边距 20px,右边距 30px */
}
padding 也是一样的
.box {
  padding-block: 10px 20px;  /* 上下内边距 */
  padding-inline: 15px 25px; /* 左右内边距 */
}

3. 全局盒模型设置

避免因默认 box-sizing 属性引起的布局问题,通过以下一行代码可以让所有元素包含其内边距和边框:
*, *::before, *::after {
    box-sizing: border-box;
}

4. 平滑滚动

html {
    scroll-behavior: smooth;
}

5. 垂直书写模式

让文字从右向左垂直排列
.vertical-text {
    writing-mode: vertical-rl;
}

6.文本溢出省略号

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

7. 居中对齐

使用 place-items 快速实现网格容器的水平和垂直居中对齐
.box {
  display: grid;
  place-items: center;
}

8. 限制文本宽度

通过限制每行文本的最大字符数
p {
  max-width: 100ch;
}
ch 单位表示一个字符的宽度,非常适合用于段落样式。

9. 占位符样式

::placeholder {
    color: #999;
    font-style: italic;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值