1. 设置宽高比例
通过 aspect-ratio
属性,可以根据指定的宽度自动调整高度
.box {
width: 90%;
aspect-ratio: 16/9;
}
2.逻辑属性
使用 margin-block
和 margin-inline
替代传统的 margin-top、margin-right
等,更加简洁直观
.box {
margin-block: 5px 10px;
margin-inline: 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;
}