层叠样式表 (CSS) 是网页设计的骨架，它可以帮助我们轻松的设置网页的样式和格式。虽然大多数的 CSS 属性，例如颜色、字体大小和边距都被大家熟知，但还有许多鲜为人知的属性可以帮助我们设计添加功能。在这篇文章中，我们将介绍 5 个我们可能从未听说过的 CSS 属性，但它们可以更好的帮助我们开发网页项目。
1. text-decoration
text-decoration除了经典的下划线 (text-decoration: underline) 之外，我们还可以给 text-decoration 属性添加更多样式。它支持三个参数：
- 线条的宽度 (width)
- 线条的类型 (style) - 例如实线 (solid)、点线 (dotted) 等
- 线条的颜色 (color)
下面的代码就可以让悬停的链接呈现绿色双线底线效果：
.menu__list-link:hover {
text-decoration: underline 2px solid green;
}
2. 文本下划线偏移 (text-underline-offset)
text-underline-offset 属性可以解决一个我们常见的问题：就是当文本中某些字母的下划线被字母本身的一部分遮挡时，这个属性可以让下划线相对于文本内容进行偏移。
下面代码就可以让链接悬停时下划线距离文本内容 6 像素：
.menu__list-link:hover {
text-decoration: underline 2px solid green;
text-underline-offset: 6px;
}
3. 内嵌 (inset)
对于使用相对定位 (relative) 或绝对定位 (absolute) 等属性的元素，我们可以使用 inset 属性简写设置其上、右、下、左的内边距：
/* 原始写法 */
top: 5px;
right: 3px;
bottom: 1px;
left: 4px;
/* 简写形式 */
inset: 5px 3px 1px 4px;
4. 对象定位 (object-position)
我们经常使用 object-fit: cover 属性来让图像适应容器的宽高并保持清晰。但是，我们无法控制图像被裁切的具体部分。这时，我们就可以使用 object-position 属性来帮助我们指定裁切的位置。
以下代码可以让图像底部对齐容器：
.test {
height: 350px;
width: 500px;
object-fit: cover;
object-position: bottom;
}
object-position: top;
我们还可以使用 top、left 或 right 属性来指定顶部、左侧或右侧对齐。
我们还可以使用两个参数来更精确地控制裁切位置，例如 object-position: center bottom; 将图像的中心对齐容器底部。
-
top: 将图像或视频的顶部对齐容器顶部center: 将图像或视频的中心对齐容器中心bottom: 将图像或视频的底部对齐容器底部left: 将图像或视频的左侧对齐容器左侧right: 将图像或视频的右侧对齐容器右侧top left: 将图像或视频的顶部左侧对齐容器的顶部左侧top center: 将图像或视频的顶部中心对齐容器的顶部中心top right: 将图像或视频的顶部右侧对齐容器的顶部右侧center left: 将图像或视频的中心左侧对齐容器的中心左侧center center: 将图像或视频的中心对齐容器的中心中心center right: 将图像或视频的中心右侧对齐容器的中心右侧bottom left: 将图像或视频的底部左侧对齐容器的底部左侧bottom center: 将图像或视频的底部中心对齐容器的底部中心bottom right: 将图像或视频的底部右侧对齐容器的底部右侧
-
百分比值:
x%: 将图像或视频的水平位置设置为容器宽度的 x%y%: 将图像或视频的垂直位置设置为容器高度的 y%
-
长度值:
xpx: 将图像或视频的水平位置设置为距离容器左侧 x 像素ypx: 将图像或视频的垂直位置设置为距离容器顶部 y 像素
-
计算值:
calc(x%): 与x%相同calc(y%): 与y%相同calc(xpx): 与xpx相同calc(ypx): 与ypx相同
.image {
width: 200px;
height: 150px;
background-image: url('image.jpg');
object-fit: cover; /* Cover the container without cropping */
}
/* 将图像的顶部对齐容器顶部 */
.image.top {
object-position: top;
}
/* 将图像的中心对齐容器中心 */
.image.center {
object-position: center;
}
/* 将图像的底部对齐容器底部 */
.image.bottom {
object-position: bottom;
}
/* 将图像的左侧对齐容器左侧 */
.image.left {
object-position: left;
}
/* 将图像的右侧对齐容器右侧 */
.image.right {
object-position: right;
}
/* 将图像的顶部左侧对齐容器的顶部左侧 */
.image.top-left {
object-position: top left;
}
/* 将图像的顶部中心对齐容器的顶部中心 */
.image.top-center {
object-position: top center;
}
/* 将图像的顶部右侧对齐容器的顶部右侧 */
.image.top-right {
object-position: top right;
}
/* 将图像的中心左侧对齐容器的中心左侧 */
.image.center-left {
object-position: center left;
}
/* 将图像的中心对齐容器的中心中心 */
.image.center-center {
object-position: center center;
}
/* 将图像的中心右侧对齐容器的中心右侧 */
.image.center-right {
object-position: center right;
}
/* 将图像的底部左侧对齐容器的底部左侧 */
.image.bottom-left {
object-position: bottom left;
}
/* 将图像的底部中心对齐容器的底部中心 */
.image.bottom-center {
object-position: bottom center;
}
/* 将图像的底部右侧对齐容器的底部右侧 */
.image.bottom-right {
object-position: bottom right;
}
/* 将图像的水平位置设置为容器宽度的 25%
5.scroll-margin-top (滚动的顶边距)
默认情况下，当我们点击页面上的锚链接 (例如 <a href="#fairy-tale__inner">行程</a>) 时，浏览器会滚动到该元素的顶端。但是，如果我们想在滚动后元素顶部预留一些空隙，就可以使用 scroll-margin-top 属性。
例如，以下代码可以让链接点击后，在滚动到 “#fairy-tale__inner” 元素时，该元素距离浏览器窗口顶部预留 100 像素的空白：
#fairy-tale__inner {
scroll-margin-top: 100px;
}
